Dimas Abi Galoga

Tutorial | Font Baru Dari Blog

2011-02-12T08:44:00.000-08:00

Saya bingung harus bicara apa? Blogger benar-benar tau yang di inginkan para penggunanya. Kali ini font keren siap di gunakan untuk untuk para Blogger . Tanpa harus menggunakan font dari luar, para Blogger sudah bisa menggunakannya langsung dari Templates Designer.
Tapi maaf, ini hanya berfungsi untuk pengguna templates aka templates designer. Dan itulah alasan mengapa saya tidak menggunakan font baru ini, karena saya menggunakan templates buatan saya sendiri.
Untuk menerapkan Font baru ini di blog anda cukup mudah.

1. Anda hanya perlu menggunakan templates yang sudah di sediakan oleh blogger di templates designer.
2. Pada templates designer silahkan pilih menu Advanced untuk mengatur Font anda.

Sudah. mudah sekali ya? ya sudah sekian posting dari saya yang singkat ini, semoga bermanfaat saya akhiri Wassalam.

*Untuk Link Exchange akan saya tangani secepatnya, maaf terabaikan akibat lama tidak blogging.

Tutorial | Fungsi Scroll Pada Komentar

2010-12-09T06:47:00.000-08:00

Posting kedua saya untuk hari ini setelah sekian lama tidak posting yaitu tentang Cara Membuat Fungsi Scroll Pada Komentar Blog. Sebuah trik sederhana dengan langkah yang sangat simple.

Langsung saja ke Step.By.Step !!!

1. Log in ke blog anda
2. Masuk ke Design > Edit HTML
3. Cari kode berikut. Kode mungkin berbeda, fokuskan pencarian pada kode warna merah

#comments-block {
border-left: 1px solid #c9c9c0;
margin : 1em 0 1.5em;
line-height : 1.6em;
padding:0 0 0 13px;
}

4. Sisipkan atau masukan kode berwarna merah berikut. Kurang lebih akan jadi seperti ini

#comments-block {
overflow:auto;
height:400px; */ ganti 400px sesuai dengan tinggi yang di inignkan */
border-left: 1px solid #c9c9c0;
margin : 1em 0 1.5em;
line-height : 1.6em;
padding:0 0 0 13px;
}

5. Save Templates

Lihat hasilnya pada posting anda yang sudah memiliki komentar. Oke sekian posting dari saya, saya akhiri wassalam

CSS3 | Membuat Menu Accordion

2010-12-09T05:35:00.000-08:00

Akhirnya saya kembali di sini membawa posting baru bertemakan CSS3 dan Accordion, yaitu tentang Cara Membuat Menu Accordion Dengan CSS3. Jika sebelum-sebelumnya saya pernah memposting tentang efek Accordion maka kali ini agak berbeda, kenapa? itu di karenakan jika yang sebelumnya menggunkan JavaScript maka kali ini hanya menggunakan CSS3 saja. Berikut ini adalah DEMO-nya. Langsung saja ke Step.By.Step !!!

1. Login ke blog anda
2. Masuk ke Deisgn > Edit HTML
3. Cari kode ]]></b:skin>
4. Masukan kode berikut sebelum kode ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

5. Save Templates.

Eitsss tunggu tunggu dulu. Proses belum selesai. Setelah anda mengesave templates anda, sekarang masuk ke Page Elements

6. Sekarang tambahkan tambah gadget dengan klik Add a Gadget
7. Pilih HTML/JavaScript
8. Masukan kode berikut di dalamnya

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">
Masukkan item anda disini,bisa berupa teks atau widget
</div>
</div>
</div>

8. Save

Nah sekarang baru selesai sudah main-main kita hahaha. Jangan lupa comment share and likenya ya makasih hehe

Pemalsuan Admin Pada Komentar Blog

2010-12-03T23:15:00.000-08:00

Akhirnya bisa posting juga setelah seminggu lamanya saya menjalankan Ulangan Akhir Semester 1 hehe, sebenarnya besok senin masih sekali lagi. Nah posting kali ini saya terinspirasi setelah saya melihat sebuah blog yang Adminnya berkomentar kasar sekali, padahal blog itu tergolong blog master. Tapi ternyata setelah selidik punya selidik itu bukan Admin yang berkomentar. Walau blog itu menggunakan tampilan komentar Admin berbeda, ternyata itu tidak berpengaruh. Anda mau tau bagaimana caranya menjadi Admin blog palsu? kejadian ini terjadi di blognya Mas Doyok.

Preview

Klik saja untuk memperbesar gambar dan lihat komentarnya itu.

Pemalsuan Admin pada komentar blog dilakukan dengan cara mengisi komentar dengan Name/URL, Nama di isi dengan Nama Admin URL di isi dengan Alamat Blog Admin. Bagaimana cara mencegahnya? Mudah saja, caranya tinggal mengatur pengaturan pada komentar blog. Caranya?

1. Log in ke Blog anda
2. Pilih menu Settings/Pengaturan
3. Lalu pilih lagi menu Comments/Komentar
4. Lihat pada bagian "Who Can Comment?" lalu pilih "Registered Users" atau "Pengguna Terdaftar"
5. Save Settings

Nah dengan menggunakan cara ini orang yang berkomentar di blog anda hanyalah orang yang memiliki Account email saja dan mencegah pemalsuan komentar Admin. Terserah anda mau menggunakan cara ini atau tidak. Sekian dari saya saya ucapkan terima kasih wassalam

SEO | Optimasi Judul Posting di Blog

2010-11-27T02:41:00.000-08:00

Masih dalam Label yang sama, yaitu SEO hahaha, sebenarnya sekilas saya sudah pernah posting ini di Cara Membuat Templates SEO Friendly, tapi itu hanya sekilas yaitu dengan mengganti tag h3 menjadi h1. Kali ini saya mencoba membahasnya lebih detail. Pertanyaan yang mungkin muncul adalah kenapa judul Post harus di optimasi? bagaimana caranya? oke akan saya jelaskan.

Search Engine sangat menyukai tag h1, h2, dll (begitu katanya), tapi tidak h3. Nah di Blogger ini sudah menjadi dafult bahwa judul post memiliki tag h3. Itulah kenapa kita haru mengoptimasikanya. Cara mengoptimasinya cukup mudah.

Masuk ke Blogger > Design > Edit HTML > Centang Expand Widget Templates

Sekarang cari kode CSS berikut (Mungkin isi berbeda, fokuskan pencarian pada yang berwarna merah) dan ganti yang berwarna merah h3 menjadi h1

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Masih belum selesai, sekarang cari lagi koe yang berwarna merah h3 menjadi h1

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Sekarang Save Templates

Saya rasa sekian posting saya ini. Saya mengharapkan komentar dari anda untuk kritik dan saran, juga menerima ucapan lainya. Saya akhiri terima kasih Wassalam

SEO | Optimasi Image di Blog

2010-11-26T23:25:00.000-08:00

Lagi lagi dan lagi. Memang jika kita membahas tantang SEO tidak akan ada habisnya, sebab setiap harinya selalu saja ada tips dan trik baru tentang SEO. Kali ini saya akan membahas tentang tips dan trik SEO yang berhubungan dengan gambar. Iyap, cara mengoptimasi Image pada blog. Kenapa images harus di optimasi? iya itu agar blog kitapun teroptimasi dengan baik, sebab semakin bagus kualitas blog kita makan semakin baik jua reputasi blog kita di Search Engine. Lalu bagimana cara mengoptimasi image tersebut? mudah saja, berikut tips dan trik seputar SEO untuk optimasi Images :

1. Memberi nama gambar sebelum di Upload.
Sesuaikan nama gambar yang akan anda upload sesuai dengan kebutuhan. Misal gambar doraemon, berarti sebelum di Upload beri nama gambar doraemon anda doraemon. Karena dengan ini ketika orang-orang yang sedang browsing tentang doraemon terutama pada bagian gambar maka gambar kita jugaakan termasuk ke dalamnya dan jika gambar kita masuk maka otomatis blog kita tempat gabar itupun akan masuk, walaupun ini tergantu rateing anda di Searh Engine.

2. Jangan memaksa ukuran gambar.
Jangan memaksa ukuran gambar di sini maksudnya adalah jika anda memiliki gambar yang berukuran lebar x tinggi 500px x 400px (contoh) jangan di paksa menjadi 400px x 300px. Hal ini dapat memperlambat loading gambar itu. Jadi biarlah gambar apa adanya (original size)

3. Memberi tag Alt.
Ini dia yang paling penting, pertama, dan terutama jika berhubungan dengan optimasi images. Alt sendiri bisa di artikan sebagai deskripsi gambar anda, dan jika seandainya gambar anda tidak terload (tidak muncul) maka Alt inilah yang akan muncul. Hal lainya adalah jika anda menggunakan gambar di awal paragraf posting anda, jika anda menggunakan Alt yang cocok maka posting anda akan terindeks oleh Search Engine sesuai Alt anda. Untuk peletakan Alt bagi yang tidak tau

<img src='gambar anda' alt='alt / deskripsi gambar anda'/>

Hanya ini yang bisa saya sampaikan, atas kekurangannya saya mohon maaf di mohon komentarnya sebagi kritik dan saran atau ucapan lain yang ingin anda sampaikan terimakasih wassalam.

HTML5 | Unsur Baru HTML5

2010-11-25T05:40:00.000-08:00

Jujur saya sendiri juga belum mengerti betul, apa lagi menguasai yang namanya HTML5, yang XHTML saja masih harus banyak belajar. Tapi saya di sini hanya sekedar sharing ilmu aja. Berikut ini unsur-unsur baru yang ada di HTML5. Kalau teman-teman mengerti kan kita jadi bisa saling sharing iya ga?. langsung aja nih unsur baru yang saya dapat dari http://hendro-prayitno.blogspot.com/ sebuah blog yang lumayan buat belajar hehehe.

1.Markup Elements
<article> untuk eksternal konten seperti berita,forum,blog dan lain sebagainya.

<aside> Konten yang berisi konten yang berhubungan pada satu dokumen

<command> Untuk tombol atau radio button

<details> Untuk mendeskripsikan perincian tentang suatu dokumen, atau bagian dari satu dokumen

<summary> Satu teks, atau rangkuman, di dalam elemen detil

<figure> Untuk menggolongkan satu bagian dengan konten yang berdiri sendiri

<figcaption>Teks dari bagian figur

<footer> Untuk satu footer dari satu dokumen atau bagian, termasuk nama dari pengarang, tanggal dokumen, hubungi keterangan, atau keterangan hak cipta

<header> Untuk pengenalan bagian dokumen

<hgroup>Untuk section heading <h1></h1> juga bisa membuat section dan sub-heading
(kalau salah mohon di koreksi)

<mark> Untuk teks yang sudah di tandai atau di highlighted

<meter> Untuk mengukur nilai maksimum dan minimum

<nav> Untuk navigasi

<progress>Untuk bagian tag yang sedang bekerja

<ruby> Nah... yang ini unik, gunanya untuk bahasa cina atau karakter yang lainnya

<rt> ini untuk keterangan dari ruby itu sendiri

<rp> Yang dilihatkan di browser yang tidak suport element ruby

<section> Untuk satu bagian pada satu dokumen. seperti headers,footers,atau bagian lainnya.

<time> Untuk mendefinisikan satu waktu atau satu tanggal, atau keduanya

2. Element Media
<audio> Untuk konten multimedia, bunyi, musik atau audioyang di tambahkan

<video> Untuk konten video

<source>Untuk sumber daya media di dalam tag video atau audio

<embed>Untuk melekatkan konten, seperti menambahkan satu fitur

3. Element kanvas
<canvas> Untuk membuat grafik dengan satu script

4.Form element
<datalist>Untuk daftar list

<keygen>Menghasilkan kunci untuk membuktikan keaslian pengguna

<output>Untuk keluaran yang berbeda yang keluar dengan kode script

Hanya itu yang bisa saya sampaikan. sekian dan terima kasih wassalam

HTML5 | Menerapkan HTML5 di Blog

2010-11-24T06:06:00.000-08:00

Menerapkan HTML5 pada Blog di Blogspot. Yap, itulah topik kita hari ini. Sebelumnya coba anda pergi ke http://validator.w3.org/ dan masukan alamat blog anda. Jangan kaget dengan banyaknya pesan error dan warning yang ada di blog anda. Itu karena anda masih menggunakan XHTML1. Untuk mengurangi error dan warning itu coba terapkan HTML5 di blog anda. Caranya Step.By.Step!!!

1. Log in ke Blog anda > Masuk ke Design > Edit HTML
2.lihat kode HTML dari yang paling atas hingga <title><data:blog.pageTitle/></title>

3.Hapus dan ganti (replace) semua kode itu dengan kode ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

4. Letakan kode berikut di atas (sebelum) kode </head>

5. Di bawah kode tadi (no.4) letakan kode berikut

6. Save Templates. Jika ada peringatan navbar terhapus pilih delete.

Selesai. Sekarang anda kunjungi http://validator.w3.org/ dan bandingkan dengan yang tadi pertama anda cek.

Sekian posting dari saya. Semoga bermanfaat saya ucapkan terima kasih wassalam

Sofware | Suara Lagu Player

2010-11-23T06:53:00.000-08:00

Ketemu lagi di posting ane , kali ini ane mau share music player ala Abi-Indra . Nama music player nya ialah "Suara Lagu Player" . Music Player ini di buat dengan menggunakan Visual Basic 2008 . Tentunya sebagai software yang baru dirilis , masih memiliki banyak kekurangan , oleh karenanya ane meminta kritik dan saran sobat melalui ~~komeng~~ komen . Music player ini akan terus dikembangakan melalui kritik dan saran sobat . Untuk password nya :

suaralaguplayer

Nih buat link downloadnya :

SuaraLaguPlayer.zip

For ScreenShot :

Tampilan

Code

Splash Screen

Tunggu Versi berikutnya .

Tutorial | Pasang Reply di Komentar Blog

2010-11-23T04:48:00.000-08:00

reply for comment

Cara Memasang Tombol Reply di Komentar Blog. Iyap itu adalah pembahasan kita pada posting kali ini. Seperti yang terlihat pada gambar di atas dan yang ada di komentar blog ini, terdapat tulisan reply. Reply itu berarti membalas, seperti yang ada di SMS atau di Twitter hehehe. Jadi setiap ada yang komentar di posting blog anda, anda bisa me-reply-nya tanpa haru mengetik sendiri, mantab. Oke agar tidak bertambah panjang dan lebar langsung saja ke Step.By.Step !!!

1. Log in ke blog anda. Masuk ke Design > Edit HTML > Centang di Expand Widget Templates
2. Cari kode <data:commentPostedByMsg/>
3. Letakan kode berikut di bawah kode tadi

<span><a expr:href='"https://www.blogger.com/comment.g?blogID=NOMOR-BLOG-ID-ANDA&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E%3A%20#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>

blog id

4. Save Templates dan lihat di posting anda yang sudah ada komentarnya

Sekian dari saya, saya akhiri. Wassalam

Tutorial | Tambah Title Link Pada Judul Post

2010-11-22T05:16:00.000-08:00

Apa itu title link? title link adalah judul link saat link di sorot mouse.

Post Title

Nah yang di tunjuk panah merah itulah yang disebut title link. Link title itu tidak serta merta muncul begitu saja secara otomatis. Untuk memunculkanya di butuhkan sedikit Tutorial, Tips dan Trik yang ~~hanya~~ anda dapatkan di blog Dimas Abi Galoga ini. Langsung saja ke Step.By.Step !!!

1. Login ke blog anda
2. Masuk ke Design > Layout > Edit HTML
3. beri tanda centang pada Expand Template Widget
4. Cari kode berikut

<a expr:href='data:post.link'><data:post.title/></a>

5. Hapus kode itu lalu ganti (replace) dengan

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

Jika ingin menambah kata-kata sendiri ganti dengan

<a expr:href='data:post.link' expr:title='"Tutorial blog : " + data:post.title'><data:post.title/></a>

6. Cari lagi kode ini

<a expr:href='data:post.url'><data:post.title/></a>

7. Hapus kode itu lalu ganti (replace) dengan

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>

Jika ingin menambah kata-kata sendiri ganti dengan

<a expr:href='data:post.url' expr:title='"Galoga : " + data:post.title'><data:post.title/></a>

8. Save Templates

Selesai. Mudah sekali bukan? kalau begitu langsung praktekan !!!!

SEO | Website Speed Check

2010-11-22T04:48:00.000-08:00

Salah satu yang merupakan pendukung SEO ialah kecepatan loading blog/web , oleh karena itu ane mau share mengenai kecepatan loading blog . Jadi gini ya sob , ane baru aja ngetest kecepatan blog ane , dan hasil rata-rata kecepatan nya ialah 5.4 untuk blog Dimas Abi Galoga dan 1.4 untuk Suara Lagu . Untuk yang 1.4 itu wajar karena tampilan nya yang sangat minimalis . Kecepatan blog sangat tergantung pada banyaknya JavaScript/Gambar yang ada . Kalo mau blognya secepet angin yang berhembus di angkasa*matabelo* , usahakan menggunakan sedikit gambar dan javascript . Oiya ane hampir lupa ngasih web yang bisa ngetest kecepatan blog kita . nih Link nya :

^^Speed Check ^^

See you next post

Tutorial | Navigasi Horizontal ala Galoga

2010-11-21T06:32:00.000-08:00

Sepertinya banyak sekali yang bertanya tentang cara membuat Navigasi Horizontal seperti milik saya. Sebenarnya gampang saja membuat sperti ini. Tapi yang ribet adalah mempostingnya karena saya bingung bagaimana menjelaskannya hehehe. Oke langsung saja tanpa panjang lebar Step.By.Step !!!

1. Log in ke blog anda
2. Masuk ke Design > Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode berikut di atas kode tadi

#navigasi {
text-transform : uppercase;
background : #3b5998; <---- Warna background navigasi
font : bold 12px Verdana;
float : left;
width : 100%;
height : 41px;
}
#navigasi ul {
margin : 0 10px;
padding : 0;
list-style : none;
}
#navigasi li {
display : inline;
margin : 0;
padding : 0;
}
#navigasi a {
float : left;
margin : 5px;
padding : 0;
}
#navigasi a span {
-moz-border-radius:8px 8px 8px 8px;
background:#627aad; <---- Warna background tulisan
color:white;
display:block;
float:left;
padding:8px;
}
#navigasi a:hover span {
-moz-border-radius:8px 8px 8px 8px;
-moz-box-shadow:0 0 10px red inset;
background:#6d86b7; <---- background tulisan saat di sentuh
color:white;
display:block;
float:left;
padding:8px;
}
#navigasi a:hover {
color : #fff;
text-decoration : none;
}
#navigasi a:hover span {
background : #d8d8d8;
color : #fff;
text-decoration : none;
}
#searchbox {
float : right;
background : #fff url(http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-2-4.jpg) no-repeat left center;
width : 220px;
height : 20px;
color : #333;
font-size : 12px;
font-family : Verdana, Arial, Helvetica, sans-serif;
margin : 7px 0 8px 3px;
padding : 2px 2px 3px 25px;
border : 1px solid #111;
display : inline;
}

5. Letakan kode berikut di bawah kode <body> atau bisa juga dengan ditambahkan ke gadget baru

<div id='navigasi'>
<ul>
<li><a class='current' expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<li><a class='current' href='#'><span>Edit Me</span></a></li>
<li><a class='current' href='#'><span>Edit Me</span></a></li>
<li><a class='current' href='#'><span>Edit Me</span></a></li>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = ""}' type='text' value=''/>
</form>
</div>
</ul>
</div>

Keterangan : Ganti # dengan alamat URL anda Edit Me ganti dengan judul URL anda. Kode yang bercetak tebal bisa di tambahkan sesuai banyak link yang anda inginkan.

6. Save Templates.
Sekian dari saya, saya akhiri wassalam

CSS3 | Efek Scale (Perbesaran)

2010-11-21T02:23:00.000-08:00

CSS3 | Efek Scale (Perbesaran). Dari judulnya saja perbesaran, berarti menghasilkan perbesaran. Perbesaran seperti apa yang di hasilkan? seperti ini.

Bukan cuma gambar, tapi text juga bisa. Seperti ini

Arahkan Mouse ke sini

Bukan cuma itu saja, bahkan kotak post juga bisa. Arahkan mouse di kotak post di sini
Bisa di pasang di mana saja di dalam tag CSS anda. Sekarang yang di pertanyakan caranya? bagaimana? Step.By.Step !!!

Kode Scale yang digunakan seperti ini

-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);

-moz- di situ berfungsi untuk menampilkan scale pada browser mozzila firefox
-webkit- berfungsi untuk browser webkit seperti chrome, safari, dll
1.05 mengartikan perbesaran hingga 1.05 dari ukuran aslinya

Dimana kita harus meletakan kode scale? di dalam tag CSS hover tentunya. Jika tidak ada tag hover yang anda inginkan maka buat sendiri. Misalnya, kotak post tidak memiliki hover maka kita harus menambahnya sendiri. Cari kode ]]></b:skin> lalu tambahkan kode ini di atasnya

.post:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
}

Nah begitu contoh sederhananya. Jika ada yang bingung atau ingin bertanya silahkan berkomentar di bawah ini saja. Terima kasih, saya akhiri wassalam

Tutorial | Sedikit Hacking Blogger

2010-11-20T09:32:00.000-08:00

Setiap tutorial dibawah wajib mencentang "expand widget template" . Selamat munaikan Hacking Blog .

Melenyapkan Tulisan "Subscribe to : post (atom)"
Melenyapkan Angka Dalam Label
Melenyapkan Pesan Pencarian Blogger
Melenyapkan Logo Blogger di 'Comment'

Melenyapkan Tulisan "Subscribe to : post (atom)"

caranya hapus code berikut:

<div class="feed-links">
<data:feedlinksmsg>
<b:loop values="data:links" var="f">
<a class="feed-link" href="data:f.url" type="data:f.mimeType" target="_blank"><data:f.name> (<data:f.feedtype>)</data:f.feedtype></data:f.name></a>
</b:loop>
</data:feedlinksmsg></div>

dan Save

Melenyapkan Angka Dalam Label

caranya hapus kode berikut:

(<data:label.count/>)

dan Save

Melenyapkan Pesan Pencarian Blogger"

caranya masukan kode dibawah ini setelah ]]></b:skin>

.status-msg-wrap{
display:none;
}

dan Save

Melenyapkan Logo Blogger di 'Comment'

cari code ini :

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

~~Letakan~~ Ganti dengan code :

<dt expr:class='"comment-author " + data:comment.anchorName' expr:id='data:comment.anchorName'>

dan Save

Segini aja deh Hacking nya , lanjut di post berikutnya . Tinggal kan jejak dengan ~~berkomeng~~ bercomment .

Salam Hack

CSS3 | Efek Gradient Pada Blog

2010-11-20T07:54:00.000-08:00

Sepertinya posting kali ini menarik, kenapa? karena tentang CSS3 lagi hahaha. Kali ini tentang cara membuat Efek Gradient Pada Blog. Iyap, sekarang gradient saja sudah bisa di buat dengan CSS, betapa majunya teknologi sekarang. Nah tanpa basa basi dan agar tidak terlalu panjang dan lebar langsung saja ke Step.By.Step!!!

Kode CSS yang di gunakan untuk efek gradient adalah seperti ini

background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);

Berikut keterangan kode di atas :

background: #ffa45a;
warna background yang akan muncul apabila browser tidak mendukung

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
merupakan kode efek gradiasi untuk browser IE. StartColorstr='#ffa45a' adalah warna awal gradiasi dan endColorstr='#ba5b0d' adalah warna akhir gradiasi

background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. From(#ffa45a) adalah warna awal gradiasi dan to(#ba5b0d) adalah warna akhir gradiasi.

background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas. Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll. #ffa45a adalah warna awal gradiasi dan #ba5b0d adalah warna akhir gradiasi.

Untuk peletakan anda bisa memasukannya ke dalam tag CSS anda. Misalnya untuk background blog anda, maka kode yang haru di cari adalah body {. Cara meletakan

body {
background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
}

Untuk DEMO
Sekian posting dari saya kali ini, saya akhiri wassalam

Tutorial | Membuat Link Redup

2010-11-20T00:29:00.000-08:00

Link redup yang akan kita buat menggunakan MooTools . Pertanyaannya adalah gimana cara menerapkannya di Template Blogger ? Mau bisa ? Makanya baca .

Before

After

Contoh Demo :

Before :

Link Demo

After :

Link Demo

Cara Pertama ~~Menghapus~~ Menerapkan Link Redup Pada Template Blogger :

Letakan script MooTools dibawah </head> :

<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/>

Masukan script berikut setelah script MooTools tadi :

<script type='text/javascript'>
window.addEvent('domready',function() {
$each($('a'), function(el) {
var original = el.getStyle('color');
var morph = new Fx.Morph(el,{ 'duration':'1000', link:'cancel' });
el.addEvents({
'mouseenter' : function() { morph.start({ 'color':'#ccc' }) },
'mouseleave' : function() { morph.start({ 'color': original }) }
});
});
});
</script>

code a yang berwanra merah bisa diganti dengan body / .post-title , body untuk membuat semua link pada blog menjadi redup ketika di sorot dan .post-title untuk membuat semua Judul Post menjadi redup ketika di sorot .

code ccc yang berwarna biru bisa diganti dengan code-code warna lainnya , code tersebut merupakan code warna link saat di sorot .

Cara Kedua ~~Menghapus~~ Menerapkan Link Redup Pada Template Blogger :

Cari code css berikut jika ingin untuk manjadikan semua link menjadi redup ketika di sorot :

a:hover

Jika hanya ingin menerapkannya pada Judul Post cari code berikut :

.post h3 a:hover

dan masukan code CSS berikut didalamnya :

opacity:0.2;

dan Save

Plugin | Paling Guna Buat Ngoding

2010-11-19T08:11:00.000-08:00

Hello sob , ane mau share plugin yang ~~belum~~ pasti berguna buat sobat sekalian . Oke , nama plugin nya "Firebug" , merupakan plugin yang dipasang pada browser mozilla(flock, firefox, dll) . Plugin ini ane bilang pasti ~~tidak~~ berguna karena Firebug membuat kita bisa mengetahui code HTML maupun CSS yang dipakai oleh suatu halaman web . Selain itu cara liat code nya juga gampang kok , cuma tinggal klik inspect/kotak(bagian kiri) aja . Ini dia Pict.nya :

Nah kalo sobat udah tertarik buat memilikinya silahkan http://cektkp.com/firebug
Kalo ada yang bingung , ~~komeng~~ comment dibawah ini .
SuaraLagu

Tutorial | Membuat Avatar di Comment Blog

2010-11-19T05:12:00.000-08:00

Terkadang ada komentator di posting blog kita yang tidak memiliki avatar / profil picture di blognya. Nah di sini saya memilki Tutorial agar komentator yang tadi tidak memiliki avatar itu menjadi memiliki avatar, tapi avatarnya dari anda atau dafult avatar. Jadi bagi mereka yang tidak memilki avatar maka avatar dari anda yang akan muncul. Langsung saja tidak perlu semakin panjang dan lebar lagi kita ke Step.By.Step

Membuat Avatar di Comment Blog

1. Login ke blog anda
2. Masuk ke Design > Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode berikut sebelum kode tadi

.avatar-image-container {
background:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg);
width:48px;
height:48px;
float:right;
margin:5px 10px 5px 5px;
}
.avatar-image-container img {
border: 1px solid white;
width:48px;
height:48px;
}

Keterangan : Kode yang berwarna biru ganti sesuai gambar yang anda inginkan. Kode yang berwarna merah berarti lebar x tinggi avatar anda

Sekian posting yang singkat ini, semoga bermanfaat saya akhiri wassalam

CSS3 | Macam-macam Border

2010-11-18T03:35:00.000-08:00

Bagi anda yang suka atau bahkan sering bermain dengan templates anda terutama bagian CSS pasti sudah tidak asing lagi dengan istilah border. Bahkan sebagian dari anda yang jarang bermain CSS tentu tau border. Yap, border sebuah istilah di dalam CSS yang berarti garis dan berfungsi membuat garis tentunya. Dalam CSS ada berbagai macam border, di tambah lagi border baru dengan CSS3. Nah di sini saya membuat daftar Macam-macam Border yang lengkap, setidaknya samapi posting ini di buat.

Langsung saja jangan kepanjangan basa-basi. Inilah daftar bordernya :

border: 5px solid #000000;

border: 5px dotted #000000;

border: 5px dashed #000000;

border: 5px inset #000000;

border: 5px outset #000000;

border: 5px double #000000;

border: 5px groove #000000;

border: 5px ridge #000000;

Border CSS3

CSS3 Border Radius (Collectively)
Border ini memungkinkan untuk membuat sudut border melengkung

#contoh { border: 5px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

CSS3 Border Radius (Individually)
Border ini memungkinkan untuk membuat sudut tertentu border melengkung

#contoh { border: 5px solid #000000; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px; }

CSS3 Border (Multipel)
Border ini memungkinkan untuk membuat border memiliki banyak warna

#contoh { border-width:5px; border-style:solid; -moz-border-top-colors:blue red orange green purple yellow; -moz-border-right-colors:blue red orange green purple yellow; -moz-border-bottom-colors:blue red orange green purple yellow; -moz-border-left-colors:blue red orange green purple yellow; }

Sekian yang bisa saya ajarkan, semoga bermanfaat saya akhiri wassalam.

CSS3 | Efek Text Menyala

2010-11-17T02:58:00.000-08:00

Cara Membuat Text Efek Menyala. Perhatikan text di bawah. Terlihat seperti menyalakan? Jika tidak mungkin faktor browser anda, karena efek ini hanya terlihat di browser tertentu saja seperti Firefox, Google Chrome, dan Safari Terbaru.

LINK MENYALA

Secara teknis sebenarnya efek ini menggunakan efek text shadow dengan CSS3. Dan dengan sedikit modifikasi RGBA jadilah efek text menyala ini. Langsung saja ke cara pembuatan texk menyala ini.

Kode yang saya gunakan untuk membuat text menyala di atas adalah seperti ini

text-shadow: rgba(255, 150, 220, 1) 0px 0px 8px;

yang artinya kurang lebih seperti ini :

text-shadow = buatlah bayangan pada text
rgba(255, 150, 220, 1) = Warna dengan komposisi RGB dan Alpha (R, G, B, Alpha). Ganti sesuai warna cahaya yang anda inginkan --untuk mencari komposisi warna RGB, kamu bisa menggunakan photoshop--
0 0 8px = 0(ofset x) 0(ofset y) 8px(lebar/blur bayangan)

Sekarang untuk penerapan di Blog.

1. Login ke blog anda
2. Masuk ke Design > Edit HTML
3. Cari kode yang anda inginkan untuk di buat menyala. Contoh Link menyala maka yang di cari adalah kode a:link {. Maka tambahkan kode Text menyala di dalamnya. Contoh :

a:link {
text-shadow: rgba(255, 150, 220, 1) 0px 0px 8px;
color : #3778cd;
text-decoration : none;
}

4. Save Templates dan lihat apa yang terjadi pada link anda? Menyalakan? Bagus. Jika tidak berarti Seperti yang saya bilang tadi. Faktor Browser.

Text lain yang bisa di beri efek menyala. h1{ , h2 { , h3 { , .post { , dll

Sekian posting dari saya, semoga bermanfaat saya akhiri Wassalam

Cara Menghilangkan Link Pada Judul Posting

2010-11-14T04:31:00.000-08:00

Apakah anda ingin menghilangkan link pada blog anda? Jika iya silahkan baca posting saya kali ini yaitu Cara Menghilangkan Link Pada Judul Posting. Untuk demonya coba anda arahkan ke mouse anda ke judul postingan milik saya. Tidak ada link bukan? yap saya menghilangkan linknya. Bagaimana caranya? Yuk kita bahas Step.By.Step !!!

1. Langkah Pertama silahkan Log in ke blog anda
2. Masuk ke Design > Edit HTML > Centang di Expand Widget Template
3. Cari kode seperti berikut

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

Jika anda pernah mengganti tag heading kode di atas tidak akan di temukan. Coba cari seperti berikut

<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

4. Selanjutnya ganti kode di atas dengan kode berikut. Bagi yang pernah mengganti tag heading ganti h3 menjadi h1

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
</b:if>
</h3>
</b:if>

Selesai. Save templates.
Cara di atas akan menghilangkan link judul posting anda secara keseluruhan. Bagi anda yang ingin menghilangkan hanya di halaman posting berarti ganti kodenya dengan yang ini

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Bagi yang pernah mengganti tag heading ganti h3 menjadi h1

Sekian posting saya kali ini. Semoga bermanfaat saya akhiri wassalam

Cara Membuat Form Komentar Klasik di Blog

2010-11-13T22:17:00.000-08:00

Menggunakan 2 jenis kotak komentar sekaligus yaitu kotak komentar klasik/pop up dan kotak komentar yang ada di bawah posting. Saya bingung ingin mendeskripsikannya bagaimana lagi hahaha, lihat saja demonya langsung di blog saya (lihat bagian komentar).

Preview

Nah cara pembuatannya langsung saja ke Step.By.Step !!!

1. Log in ke blog anda

2. Klik Design > Edit HTML > Centang di Expand Template Widget (BackUp dulu templates anda)

3. Cari kode berikut (gunakan F3/Ctrl+F untuk pencarian)

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>

4. Tambahkan kode berikut di bawah kode Di atas

<a expr:href='" http://www.blogger.com/comment.g?blogID=6634386433859994495&amp;postID=" +data:post.id+ "&isPopup=true"' onclick='javascript:window.open(this.href,"bloggerPopup","toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;' rel='nofollow'><b>Form Komentar Klasik</b></a>

5. Save Templates.

Sekian posting dari saya, terima kasih wassalam

Cara Optimasi Blog Dengan Google Page Speed dan Yahoo! YSlow

2010-11-13T21:09:00.000-08:00

Oke di hari minggu yang cerah ini saya akan memposting tentang Cara Optimasi Blog Dengan Google Page Speed dan Yahoo! YSlow. Setelah saya keliling dunia melalui Google haha, akhirnya saya menemukan sesuatu yang mungkin akan sedikit banyaknya berguna bagi para blogger yang suka mengoptimasikan blognya. Seperti yang kita ketahui bahwa Optimasi blog bagian dari SEO
Cara yang akan kita gunakan kali ini dengan menggunakan tools atau alat bantu langsung dari Google sendiri dan juga Yahoo. Oke karena pembahasan agak panjang mari langsung saja kita mulai. Sebagai tambahan siapkan kopi agar tidak ngantuk haha.Step.By.Step!!!

Google Page Speed
Jujur saya sendiri lebih menyukai Tools ini karena lebih detail mengupas kekurangan dari blog kita dan juga memberikan saran apa yang harus kita lakukan. Selain itu Tools ini juga langsung dari Google yang mempunyai Blogger. Tools ini juga memberi nilai pada blog kita. Nilai terbaik adalah 100. Tapi akan sangat sulit mendapat nilai 100, jadi jangan memaksakan karena takutnya nanti malah merusak tampilan blog. Nilai 80-90 itu sudah sangat cukup dan 100 sempurna.

Preview my Page Speed

Pertanyaannya adalah bagaimana cara memperbaiki kesalahannya? cukup mudah. Anda tinggal mengklik bagian yang di anggap error. Contohnya "Remove unused CSS" yang berarti kita di sarankan untuk menghapus CSS yang tidak di perlukan. Cukup klik linknya maka anda akan di perlihat saran CSS yang harus di hapuskan. Bagi yang tertarik silahkan Download Plug-in nya Google Page Speed

Yahoo! YSlow
Tools kali ini dari Yahoo yang tidak kalah keren dari Google. Karena Ke dua tools langusng dari Search Engine yang sangat ternama tentu sudah tidak di ragukan lagi keampuhannya. Cara kerja Yahoo! YSlow hampir sama dengan Google Page Speed. Jadi saya rasa saya tidak perlu menjelaskan secara detail untuk Tools ini. Perbedaan yang paling mencolok antara kedua Tools ini adalah, Yahoo! YSlow memberikan nilai menggunakan huruf dari A-F dimana A adalah yang terbaik. Seperti yang saya jelaskan di atas bahwa tidak mudah mendapatkan nilai sempurna A, jadi cukup dengan B/C.

Preview my YSlow

Langsung saja untuk download Plug-in nya Yahoo! YSlow

Cara Penggunaan :
Untuk menggunakan Tools di atas di butuh Tools Firebug untuk Firefox. Lalu silahkan download kedua Tools yang saya berikan tadi. Jika sudah, pada halaman blog anda di browser klik Tools > Firebug > Open Firebug atau langsung klik F12. Setelah itu silahkan lakukan analisis dengan Google Page/YSlow. Biasanya setiap halaman memiliki nilai berbeda. Dan jika ingin memperbaiki kode yang salah saya sarankan BackUp Templates anda untuk mencegah hancurnya blog anda.

Sekian dari saya, wassalam

Tips Menggunakan Image Pada Templates

2010-11-12T21:40:00.000-08:00

Posting saya kali ini membahasa tentang tips dan trik menggunakan Image (gambar) pada templates. Di sini saya akan mengajarkan 3 cara menggunakan gambar pada templates. Cara ini saya dapatkan dari blog code-code-an. Dan cara ini di gunakan apabila anda menggunakan gambar untuk header anda. Oke langsung saja.

Tips 1
Tips pertama ini yang paling familiar dan sering di gunakan, yaitu langsung memasangnya pada HTML.

<h1><a href="#"><img width="300" height="75" alt="Judul Blog Anda" src="logo.jpg" /></a></h1>

Apabila anda menggunakan cara ini, penggunaan Alt sangatlah penting. Mengapa? karena Alt akan menjadi pengganti gambar bila gambar disable. Dengan menggunakan cara ini anda tidak dapat menggunaka efek :hover pada gambar karena tidak menggunakan CSS

Tips 2
Cara ke dua ini menggunakan CSS dan mengganti text dengan gambar. Dengan cara ini anda juga bisa menggunakan efek :hover pada image. Kode yang di gunakan seperti berikut.

KODE HTML

<h1 id="logo"><a href="#"><span></span>Judul Blog</a></h1>

CSS

/* repeated code per header */
#logo, #logo span {
 width: 300px; height: 75px;
 }
#logo a, #logo a span {
 background-image: url(gambar.jpg);
 background-repeat: no-repeat;
}
#logo a:hover, #logo a:hover span {
 background-image: url(gambar2.jpg);
}

 /* This is what moves the text under the span */
#logo a span { margin-bottom: -75px; }
/* code for all styled headers */
h1 a span {
 display: block;
 /* place the span on top */
 position: relative;
 z-index: 1;
}

Dengan cara ini anda telah menyembunyikan text dan menggantinya dengan gambar. Tapi jika gambar di disable maka text akan muncul kembali menggantikan gambar. Kode utama dari trik ini adalah penggunaan span. Cara ini juga sepertinya lebih baik dari pada harus menyembunyikan text dengan text-indent karena jika gambar disable text tidak akan muncul.

Tips 3
Jika cara pertama menggunakan gambar pada HTML dan yang kedua menggunakan gambar pada CSS, maka tips 3 ini menggunakan gambar pada CSS dan HTML sekaligus. Kode yang di gunakan

KODE HTML

<h1><a class="chirp" href="#"><img alt="Judul Blog Anda" src="logo_chirp_small.png"/></a></h1>

CSS

a.chirp  {
background:url("gambar 1") no-repeat left top;
display:block;
height:249px;
width:324px;
}
a:hover.chirp  {
background:url("gambar 2") no-repeat left bottom;
}
a.chirp img {
height:0;
}

Pada kode HTML dan CSS menggunakan gambar dan pada CSS di tambah juga efek :hover untuk gambar dan pada HTML menggunakan Alt sebagai keterangan gambar.

a.chirp img {
height:0;
}

Penggunaan kode height di atas bertujuan menyembunyikan gambar pada HTML dan gambar CSS lah yang akan muncul. Dan penggunaan Alt bertujuan apabila gambar pada CSS disable maka keterengan gambar lah yang akan muncul.

Terakhir
Keterangan :

disable berarti mati/di nonaktifkan
kode CSS letakan di atas ]]></b:skin>
Kode HTML gabungkan ke dalam kode h1 header anda
Untuk DEMO

Saya rasa cukup untuk posting kali ini. Semoga bermanfaat. terima kasih untuk choen

Tips Cara Membuat Templates SEO Friendly

2010-11-12T19:17:00.000-08:00

Hari ini saya akan memposting yang masih berhubungan dengan SEO. Kepingin dong membuat blog kita terkenal? kalau iya berarti blog snda harus SEO Friendly alias akrab dengan SEO hahaha. Nah pada pagi hari ini SEO yang akan saya ajarkan adalah Tips Cara Membuat Templates SEO Friendly. Berikut ini saya akan memberi tahu tips agar templates blog anda SEO Friendly. Langsung saja, silahkan simak Tips dan Trik berikut dengan seksama.

Tips Cara Membuat Templates SEO Friendly :

1. Mengganti Tag Title Blog
Pada sebuah blog biasanya memiliki Tag Title seperti berikut

<title><data:blog.pageTitle/></title>

Ganti kode tersebut dengan

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

2. Memasang Meta Tag Deskripsi dan Keyword di Blog
Dengan mamasang Meta Tag Deskripsi dan Keyword di blog, Search Engine akan lebih mudah untuk melacak/mengindex blog anda. Cara memasang Meta Tag Deskripsi dan Keyword di Blog sangat mudah. Cukup Tambahkan kode berikut di bawah kode no.1

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog sobat" />
<meta name="keywords" content="keyword1, keyword2, keyword3, dst" />
<b:else/>
<meta name="description" expr:content=’data:blog.PageName "- Deskripsi Blog sobat"’ />
<meta name="keywords" expr:content=’data:blog.PageName ", keyword1, keyword2, keyword3, dst"’ />
</b:if>

3. Mengganti Tag Heading Menjadi H1
Pada sebuah blog biasanya memiliki Heading H2 dan h3 seperti ini (centang Expand Widget Templates)

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Sekarang ganti heading di atas dengan di bawah ini

<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

Masih belum selesai. Sekarang cari kode ]]></b:skin> dan tambahkan kode berikut di atasnya

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

4. Memasang Breadcrumb-Navigation
Caranya baca di sini

5. Memasang Related Post
Caranya baca di sini atau di sini

6. Memasang kode ‘rel=canonical’ di Blog
Pemasangan kode berikut bertujuan untuk mencegah duplicate arsip/konten. Cara pemasangan sangat mudah. Cari kode </head> dan tambahkan kode berikut di bawahnya

<link expr:href='data:blog.url' rel='canonical' />

Untuk sementara Save Templates.

7. Menonaktifkan archive | arsip
Hampir sama dengan langkah 6. Cara ini bertujuan untuk mencegah duplikat arsip/konten. Caranya

Sign in ke blogger.com - setting - archive - disitulah anda bisa menonaktifkan

Oke sekian posting saya kali ini. Saya akhiri Wassalam

Cara Memasang Meta Tag di Setiap Posting

2010-11-11T05:46:00.000-08:00

Pada malam hari ini saya akan memposting tentang Cara Memasang Meta Tag di Setiap Posting. Jika pada posting sebelumnya saya membahas tentang Cara Memasang Meta Tag Pada Blog maka bedanya dengan ini adalah meta tag di setiap posting. Jadi setiap halaman ada meta tagnya, mantab !!! hahaha. Oke langsung saja mari kita bahas bagaimana cara pemasangannya? Step!By!Step!

1. Langkah pertama tentu log in ke blog anda
2. Langsung saja masuk ke Design > Edit HTML
3. Bagi anda yang BELUM PERNAH memasang meta tag biasa pasang dulu. Caranya :

Cari kode <title><data:blog.title/></title>
Ganti dengan

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>
<meta content='Description Blog Anda' name='description'/>
<meta content='Keywords Blog Anda' name='keywords'/>
<meta content='Nama Anda' name='author'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

4. Bagi yang SUDAH pasang ke langkah berikutnya.

Cari kode beriut :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title></b:if>

atau

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

Ganti kode di atas dengan

<b:if cond='data:blog.url == "http://ALAMATBLOGSOBAT.blogspot.com/"'>
<title><data:blog.pageTitle/></title>
<meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'/>
<meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>

5. Save Templates

Sekian Posting kali ini saya akhiri wassalam :D

Cara Membuat Author Box di Bawah Posting

2010-11-10T05:09:00.000-08:00

Informasi tentang penulis adalah sebuah hal yang penting. Karena dengan adanya informasi tentang penulis, pembaca pun menjadi tau siapa si penulis. Di posting saya kali ini, saya akan mengajarkan sebuah cara untuk membuat Author Box atau kotak penulis. Author box ini akan kita letakan di bawah setiap posting. Langsung saja tidak usah panjang lebar Step.By.Step !!!

Author Box

1. Log in ke blog anda

2. Masuk ke Design > Edit HTML > Centang di Expand Widget Templates

3. Cari kode ]]></b:skin>
4. Letakan kode berikut di atas kode ]]></b:skin>

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

5. Sekarang cari kode <div class='post-footer-line post-footer-line-1'>
6. Letakan kode berikut di bawah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'>
    <div class='author-box'>
    <p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='http://a0.twimg.com/profile_images/1109165312/45777_1460357642759_1647967459_1099752_1271183_n.jpg' width='70'/><b>About Author</b><br/>
    Teman selalu ada di saat kita senang, Sahabat selalu ada di saat kita senang ataupun susah<br/></p>
    </div>
    </b:if>

Keterangan : Ganti yang berwarna merah dengan alamat gambar anda dan yang biru ganti dengan kata-kata anda sendiri

7. Save Templates

Sekian posting dari saya, semoga bermanfaat terima kasih wassalam

Cara Membuat Huruf Awal Posting Besar

2010-11-08T01:12:00.000-08:00

Jika anda melihat postingan saya yang ini mungkin beberapa dari anda yang belum tau akan bingung kenapa huruf paling depan besar sendiri. Mungkin ada yang berpikir itu gambar. Itu bukan gambar, itu adalah text asli tulisan bukan gambar. Bagi anda yang belum tau dan ingin tau akan saya ajarkan. Bagi anda yang sudah tau silahkan baca posting saya yang lain yang mungkin belum anda tau hehe. Langsung saja kita bahas Step.By.Step!!!

1. Silahkan log in ke blogger anda
2. Masuk ke Design > Edit HTML > Cari kode ]]></b:skin> (gunakan F3/Ctrl+F untuk memudahkan pencarian)
3. Letakan atau Copy Paste kode berikut di atas kode ]]></b:skin>

.depan {
float:left;
color: #000000;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

4. Sekarang cara menerapkan pada postingan anda. Buat post baru, pilih tab Edit HTML pada post. Letakan kode berikut di antara huruf awal posting anda

<span class="depan"> Huruf Depan </span>

Contoh :
<span class="depan"> J </span> ika anda melihat postingan saya yang ini mungkin beberapa dari anda yang belum tau akan bingung kenapa huruf paling depan besar sendiri. Mungkin ada yang berpikir itu gambar. Itu bukan gambar, itu adalah text asli tulisan bukan gambar. Bagi anda yang belum tau dan ingin tau akan saya ajarkan. Bagi anda yang sudah tau silahkan baca posting saya yang lain yang mungkin belum anda tau hehe

Hasil :
Jika anda melihat postingan saya yang ini mungkin beberapa dari anda yang belum tau akan bingung kenapa huruf paling depan besar sendiri. Mungkin ada yang berpikir itu gambar. Itu bukan gambar, itu adalah text asli tulisan bukan gambar. Bagi anda yang belum tau dan ingin tau akan saya ajarkan. Bagi anda yang sudah tau silahkan baca posting saya yang lain yang mungkin belum anda tau hehe

UPDATE : Berikut cara membuat huruf awal posting besar otomatis. Tambahkan kode berikut di atas kode ]]></b:skin>

.post-body:first-letter {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

Yang berwarna merah adalah ukuran huruf depan

Cara Membuat Daftar Kode Warna

2010-11-07T06:22:00.000-08:00

Satu posting sebelum saya pergi ke alam mimpi (tidur) hahaha. Tidak usah basa-basi, saya juga bingung bagaimana cara menjelaskanya hahaha. Jadi langsung saja silahkan lihat demonya di Daftar Kode Warna HTML

1. Cara Membuatnya silahkan login dulu ke blog anda > Design > Edit HTML > Cari kode </head>
2. Copy paste kode berikut dan letakan di atas kode </head>

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

<script type='text/javascript'>

var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;

function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}

// Picker ---------------------------------------------------------

function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };

picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };

hueUpdate();

dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}

executeonload(init);

function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}

function hueUpdate(newVal) {

var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }

var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);

document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

pickerSwatchUpdate();
}

function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);

h = h / 180;

var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);

var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);

var a = YAHOO.util.Color.hsv2rgb( h, s, v );

document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";

document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}

</script>

3. Save Templates. TUNGGU!!! belum selesai
4. Jika sudah di save sekarang waktunya menerapkan di Posting atau Widget blog anda

Penerapan di Posting : Buat posting anda lalu copy paste kode warna dalam posting anda
Penerapan di Widget : Buat Gadget HTML/JavaScript baru lalu Copy Paste kode warna dalam kotak konten

Kode Warna

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

Sekian Posting dari saya hari ini. Selamat Malam !

Cara Membuat Blog Auto Refresh

2010-11-06T19:16:00.000-07:00

Dari judulnya juga sudah ketauankan? yap auto refresh. Blog anda jadi auto refresh. Bagaimana cara membuatnya? mudah sekali. Tidak usah basa basi langsung aja Step.By.Step!!!

Login ke blog anda
Design > Edit HTML
Cari kode </head>
Letakan kode berikut setelah kode </head>

<meta content='300' http-equiv='refresh'/>

Keterangan : Yang berwarna merah berarti blog anda akan merefresh setiap 300 detik. ganti sesuai keinginan anda
Sekian posting saya kali, semoga bermanfaat terima kasih wassalam

(Update, trik lama kurang bagus)

Cara Submit Blog di Search Engine

2010-11-06T18:52:00.000-07:00

Salah satu cara meningkatkan trafik web/blog adalah dengan cara submit web/blog di search engine seperti Google, Yahoo, atau MSN. Pada posting kali ini saya akan mengajarkan cara submit blogspot di search engine.

Mari kita mulai submit blog di Google (pastikan anda dalam keadaan login) :

Masuk ke Google Webmaster Central
Klik Add a site... > Masukan alamat blog anda > Lalu klik Continue
Untuk vertiikasi pilih Add a meta tag to your site's home page
Pada kolom Instructions copy kode yang tersedia lalu paste di bawah kode <head> di blog anda lalu save templates
Jika sudah di save kembali pada halaman Verifikasi dan klik Verify

Sekarang kita submit ke Yahoo (pastikan anda dalam keadaan login) :

Silahkan kunjungi Yahoo! Site Explorer
Lalu klik/pilih Submit a website or webpage.
Masukan URL/Link Blog anda lalu klik submit URL. Blog anda telah tersubmit
Sekarang pasang Meta Tag Yahoo di blog. Klik My Site masukan alamat blog anda yang tadi lalu klik Add a site...
Berikutnya pilih By adding a META tag to my home page.
Seperti Google, Copy kode yang di sediakan lalu paste di bawah <head> di blog anda. Save Templates
Kembali pada Yahoo! Site Explorer dan klik Ready to Authentication

Sekarang Submit ke MSN :

Silahkan masuk ke URL Submission - Bing
Isikan kode yang di berikan dan isi alamat URL/Link Blog anda
Selesai

Sekian Posting dari saya kali ini. Semoga bermanfaat

Cara Membuat Sitemap Efek Accordion di Blog

2010-11-06T16:37:00.000-07:00

Sebelumnya saya sudah posting Cara Membuat Sitemap di Blog. Kali ini sama, tapi dengan sedikit modifikasi dengan efek Accordion. Untuk demonya lihat saja milik saya di All Post. Seperti posting sebelumnya, posting saya kali ini pun bersumper dari http://www.abu-farhan.com/.

Berikut adalah featur yang dimiliki menurut Abu-farhan

1. Efek Accordion
2. Menampilkan dan menyembunyikan efek
3. CSS 3
4. Otomatis tambahkan jquery
5. Warna yang berbeda untuk konten
6. Gaya yang berbeda untuk membuka dan menutup
7. Auto Urutkan judul
8. Posting Baru! setiap 10 post terbaru

Cara membuatnyasama dengan membuat sitemap.

1. Login ke blog > Edit Posts > Edit Pages

2. Klik New Page

3. Isi judul terserah anda. Lalu klik bagian Edit HTML

4. Copy kode berikut dan paste di kolom yang tersedia

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://abi-galoga.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Keterangan : Ganti alamat blog yang berwarna merah dengan alamat blog anda

Abu-farhan

Sekian Post dari saya, terima kasih wassalam

Cara Membuat Sitemap di Blog

2010-11-05T04:25:00.000-07:00

Tentu anda sudah tau Sitemap. Bagi yang belum tau, sitemap adalah sejenis daftar isi untuk blog. Sitemap menampilkan semua Posting dari yang lama hingga yang baru dan diurutkan secara label. Sitemap yang akan saya ajarkan ini adalah sebuah tutorial yang saya dapat dari http://www.abu-farhan.com/.

Click for Demo

Step.By.Step!!!

1. Langkah pertama Login ke Blog anda
2. Klik Edit Posts > Edit Pages
3. Buat Pages baru. Klik New Page
4. Buat pada halaman Edit HTML
5. Copy seluruh kode ini pada kotak yang di sediakan. Lalu publish page

<script style="" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://abi-galoga.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Ganti yang berwarna merah dengan alamat blog anda

Sekian saja posting saya kali ini. Saya akhiri, wassalam :)

Kompres Kode CSS dan JavaScript

2010-11-05T02:32:00.000-07:00

Tentu anda semua sudah tau salah satu faktor yang membuat loading blog menjadi lama. Yap, CSS dan JavaScript . Terlalu banyak menggunakan CSS dan JavaScript akan sangat mempengaruhi loading blog anda. Bagi anda yang menggunakan banyak CSS dan JavaScript akan saya ajarkan cara mengkompresnya. Dengan kompres maka loadingpun akan sedikit banyak lebih cepat. Bagaimana cara kompresnya? tidak repot, karena kita akan menggunakan bantuan Online YUI Compressor

Preview

Cara menggunakannya? sangat mudah. Apa yang ingin anda kompres? CSS atau JavaScript? Tenang akan saya bahas keduanya.
Untuk kompres JavaScript cukup dengan mengcopy paste kode JavaScriptnya. TAPI ! bukan semua kode JavaScript nya. Yang di copy adalah kode yang ada di antara <script type='text/javascript'> dan </script> atau <script type='text/javascript'> //<![CDATA[ dan //]]> </script>

Contoh :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Cara kompresnya masukan kode JavaScript dari blog anda ke kotak yang tersedia, File Tipe isi dengan JS lalu Compress

Sekarang jika ingin mengkompres CSS. Design > Edit HTML > Lalu copy semua kode yang ada di antara <b:skin><![CDATA[/* dan ]]></b:skin>

Cara kompresnya isi kota yang tersedia dengan kode CSS anda lalu isi File Type dengan CSS dan Compress

Sekian Posting dari saya, terima kasih wasslama

Tips Memepercapat Loading Blog

2010-11-04T06:02:00.000-07:00

Akses kecepatan blog sangat berpengaruh terhadap pengunjung blog kita. Karena jika blog kita lemot/lambat maka pengunjung tidak betah, bagaimana mau betah kalau loading blognya lama banget, badmood jadinya. Tapi jika loading blog kita cepat, maka pengunjungpun akan betah, enak kalau akses web cepat tinggal klak klik doang langsung muncul haha.

Berikut beberapa tips alami untuk blog agar loadingnya sedikit banyak jadi lebih cepat :

1. Mengurangi jumlah penggunaan gambar. Penggunaan gambar akan sangat mempengaruhi kecepatan akses dari suatu blog, hal ini dikarenakan kapasitas untuk satu file saja bisa mencapai beberapa kilobyte(Kb) dan bisa perhitungkan berapa lama waktu yang dibutuhkan untuk mendownload 1 file gambar saja.

2. Mengelompokkan dan memisahkan bagian-bagian isi menjadi perhalaman. Hal ini sangat penting karena tips yang kedua ini bermaksud agar halaman utama atau yang biasa disebut dengan halaman index tidak langsung menampilkan keseluruhan isi dari blog.

3. Kurangi banner-banner yang bergerak. Mungkin ini memang kebiasaan kita untuk bertukar banner, tapi alangkah baiknya kita pisahkan di bagian tertentu dan ukurannya kita perkecil lagi.

4. Dan yang terakhir dan kiranya perlu untuk diperhatikan adalah bagian dari pernak-pernik atau item-item pendukung seperti LinkList, Profile, ShoutBox, dll sebaiknya disembunyikan dalam list menu. Ini berarti item-item tersebut menjadi submenu dari menu diatasnya.
sumber tips : http://ayo-ngenet.blogspot.com/

Sekian tips dari saya, semoga bermanfaat. Terimakasih wassalam :)

Cara Mendaftarkan Blog di Technorati

2010-11-02T06:28:00.000-07:00

Mendaftarkan blog di blog directory adalah salah satu cara untuk meningkatkan popularitas blog anda. Dan search engine akan lebih mudah menemukan anda. Blog directory sendiri adalah sebuah situs yang menyediakan fasilitas directory untuk blog. Jadi bagi anda yang belum mendaftarkan blog ke blog directory daftarkan sekarang !
Berikut ini adalah daftar beberapa situs terkenal yang menyediakan layanan blog directory yaitu :

Dan di sini saya akan mengajarkan kepada anda Cara Mendaftarkan Blog di Technorati. Mungkin jika saya ada umur dan ada waktu saya akan mengajarkan yang lainnya juga. Oke langsung saja Step.By.Step!!!

1. Anda harus memiliki Account Technorati. Jika belum silahkan daftar dulu.
2. Bagi anda yang sudah memilikinya silahkan login dan masuk ke halaman Account. Klik Username anda yang berada di pojok kanan atas Technorati di samping foto anda di sebelah sign out
3. Scroll ke bawah, cari tulisan My claimed blogs
4. Masukan URL/Alamat Blog anda di tempat yang sudah di sediakan lalu klik Claim
5. Isikan data blog anda di tempat yang sudah di sediakan. Lalu klik Proceed To Next Step

Selesai sudah. Mudah sekalikan. Sekian dari saya, saya ucapkan terima kasih dan jangan lupa
Comment Like Share :)

Cara Memasang Meta Tag Pada Blog

2010-11-02T04:59:00.000-07:00

Hari ini saya akan mencoba posting baru yang belum pernah saya posting yaitu tentang Tips SEO. Anda tau apa itu SEO? SEO berarti Search Engine Optimization. Definisi dari SEO sendiri adalah cara atau proses menaikkan jumlah pengunjung pada suatu website lewat search engine seperti google, yahoo dan msn dengan melalui pencarian yang normal.
Dari defenisi itu tentu anda akan mengerti fungsi dari SEO. Yap, dengan SEO anda dapat meningkatkan pengunjung dan statistik Blog/Web anda di mesin pencari.
Berikut Tips SEO dari saya yang sangat berpengaruh bagi trafik Blog anda. Yaitu dengan memasang Meta Tag di blog. Caranya? sangat mudah.

1. Login ke blog anda
2. Masuk Design > Edit HTML
3. Cari kode <title><data:blog.title/></title>
4. Ganti kode tersebut dengan

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>
<meta content='Description Blog Anda' name='description'/>
<meta content='Keywords Blog Anda' name='keywords'/>
<meta content='Nama Anda' name='author'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

Keterangan :

Deskripsi Blog isi dengan deskripsi atau tentang blog anda
Keyword Blog isi dengan kata kunci Blog anda jika di cari di Search Engine. Bisa Menggunakan banyak keyword contoh "Trik blogger, trik komputer, dan seterusnya"
Nama anda isi dengan nama andalah! punya namakan? hhaha

5. Save Templates

Mudahkan pemasangannya? sangat mudah. Kalau begitu silahkan praktekan di blog anda !
Jangan lupa Comment Like Share terima kasih :)

Cara Posting Blog Dari Facebook

2010-11-02T02:44:00.000-07:00

Pernahkah terpikir untuk memposting artikel baru di blog, tapi lagi asik chat Facebook. Saya ada solusinya!yaiut dengan cara posting blog dari Facebook. Bagaimana? Ikuti saja langkah-langkah di bawah ini. Step.By.Step!!!

1. Anda harus dalam keadaan Login ke Facebook dan Blog anda (pada tab berbeda)
2. Klik link --> Blog It TypePad
3. Klik "Allow" untuk melanjutkan
4. Pilih Blogger lalu klik "Add Account"

5. Klik "Authorize Blogger Account" untuk melanjutkan
6. Anda akan dibawa ke halaman Google Accounts untuk melakukan permintaan otorisasi. Klik "Berikan akses" atau "Grant Access" untuk melanjutkan
7. Pada halaman ini anda di haruskan memilih salah satu Blog anda yang akan anda posting (jika anda punya lebih dari 1 vlog). Klik "Save Changes"

8. Sekarang anda bisa melakukan posting dengan cara klik "Post to Blog"

Selesai....Semoga bermanfaat. Jangan lupa tolong di Comment Like Share ya :)))

Cara Membuat Blog Mobile Versi Mobify

2010-11-01T05:29:00.000-07:00

Apakah pentingnya blog mobile?tentu sangat penting menurut saya. kenapa? karena sekarang adalah era di mana akses internet bisa di lakukan dimana saja, kapan seja melalu web mobile. Lalu apa jadinya jika blog anda di akses melalui Ponsel? tentu akan sangat berat karena kapasitasnya yang sangat besar. Mungkin blog anda akan sangat keren jika di lihat dari web site, namun jika dari mobile? ehmmm.... Kalau begitu akan saya ajarkan cara membuat blog mobile agar blog anda mampu bersaing di era mobile ini haha.

Di sini saya akan mengajarkan cara membuat blog mobile dengan mobify. Sebenarnya ada banyak web yang menyediakan pelayanan mobile, tapi saya merekomendasikan mobify. Kenapa? karena mobify memungkinkan anda untuk mensetting tampilan mobile anda sendiri dan jika blog anda di buka melalui mobile akan langsung di alihkan ke tampilan web mobile, keren sekali ! Oke langsung saja Step.By.Step !!!

my mobify site

1. Silahkan daftar dulu di http://mobify.me/
2. Pada Dashbor masukan alamat blog anda lalu klik Mobify My Site
3. Lalu anda akan di bawa pada halaman baru. Disitu anda di sediakan 3 pilihan 'Choose', 'Design' dan 'Manage'seperti gambar berikut

4. Pada halaman 'Choose' anda akan di perlihatkan tampilan keseluruhan Home page blog anda / halaman utama. Disini anda di persilahkan memilih / menyeleksi bagian mana saja yang ingin di tampilkan di blog mobile anda dengan cara mengkliknya saja. Kalau saya hanya memilih judul blog saja. Sisanya bisa bikin sendiri di langkah berikutnya.

seleksi bagian

5. Jika sudah memilih-milih barangnya sekarang pergi 'Design'. Dari judulnya saja Design. Iyap, inilah tempat anda mendesign blog mobile anda. Ada 2 kolom yaitu, di sebelah kanan preview dan sebelah kiri CSS.

Di kolom preview anda di perlihatkan susunan blog mobile anda. Apakah susunannya sesuai?jika tidak anda bisa mengaturnya dengan memilih bagiannya dan mengklik 'Move Down' atau 'Move Up' yang berada pada kolom CSS. Atau 'Delete' untuk menghapus kolom yang tidak di inginkan.
Kolom CSS memungkinkan anda untuk mengatur segala sesuatunya tentang tampilan blog mobile anda. Anda sudah bisa CSSkan?saya tidak akan mengajarkan CSS di sini maaf, saya anggap kalian bisa. Kalian juga bisa menambah CSS sendiri
Di bagian CSS juga anda bisa menambahkan HTML sendiri dengan Klik 'Add Block'

6. Jika sudah selesai edit-editnya sekarang masih ke 'Menege' lalu perhatikan bagian MOBIFIED TEMPLATES dan SUGGESTED TEMPLATES.

Pada bagian SUGGESTED TEMPLATED, Anda dapat melihat path mana saja yang belum diedit (seperti path untuk halaman postingan dan arsip). Langkah selanjutnya sama dengan langkah untuk mengedit atau mendisain halaman utama.>

7. Jika semuanya sudah siap sekarang waktunya mempublikasikannya. Caranya? mudah. klik 'Launch' atau Live --> Deploy . Domain mobile anda terserah. Lalu Copy kode yang tersedia di bagian bawah dan paste sebelum kode </head> di blog anda

Sekian posting dari saya. Jangan lupa untuk CLS ya, Comment Like Share ! Terima kasih

Opera Mobile For Windows, Linux, Mac

2010-10-29T21:32:00.000-07:00

Anda ingin mencoba opera mobile di PC anda? mudah saja. Anda hanya perlu mendownload Opera Mobile emulator. Sekarang anda bisa menikmati Opera Mobile di PC. Halaman Web pun akan terbuka dengan tampilan mobile.

Opera Mobile Emulator ini sebenarnya berfungsi untuk menampilkan/menguji halaman web mobile tanpa menggunakan ponsel. Enak bukan?

Langsung saja bagi anda yang tertarik silahkan kunjungi http://www.opera.com/developer/tools/ untuk mendownloadnya

Cara Membuat Kotak Search CSS3

2010-10-29T20:08:00.000-07:00

Sudah dua kali saya memposting tentang cara membuat kotak search. Sekarang saya akan menjadikannya tiga kali. Kali ini kita mencoba untuk membuat kotak search dengan CSS3. Sebelumnya perlu di ketahui bahwa CSS3 hanya suport pada beberapa browser yang mendukung CSS3. Browser seperti IE tidak mendukung untuk CSS3. Berikut preview

Preview

Gambar di atas itu adalah preview untuk browser yang Support/tidak dengan CSS3. Oke langsung saja bagi yang tertarik kita bahas Step.By.Step !!!

1. Langkah pertama Log in ke blog anda

2. masuk ke Design > Edit HTML

3. Cari kode ]]></b:skin>

4. Letakan kode berikut di atas kode ]]></b:skin>

/* CSS3 search form -------------------------------------- */ .searchform { background: #111111; background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#555555)); /* CSS gradient */ background: -moz-linear-gradient(top, #111111, #555555); /* CSS gradient */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie8 */ display: inline-block; zoom: 1; /* hack untuk ie7 */ *display: inline; border: solid 1px #555555; padding: 3px 5px; -webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */ -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */ box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */ } .searchform input { font: normal 12px Arial, Helvetica, sans-serif; } .searchfield { background: #ededed; padding: 6px 6px 6px 8px; width: 200px; border: solid 1px #222222; outline: none; -webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ -moz-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */ -webkit-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */ box-shadow: inset 0 1px 3px #222222; /* CSS shadow */ } .searchbutton { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; text-shadow: 0 1px 1px #222222; /* CSS text shadow */ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #ff0000; background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b80000)); /* CSS gradient */ background: -moz-linear-gradient(top, #ff0000, #b80000); /* CSS gradient */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie8 */ }

5. Save Templates
Tunggu belum selesai
6. Sekarang masuk ke Design > Page Element > Add a Gadget > HTML/JavaScript > pada kolom konten masukan kode berikut

<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Search" />
</form>

7. Save
8. CLS Comment Like Share oke !!! terima kasih :)

Sekian posting saya kali ini. Terima kasih telah menyempatkan diri untuk membacanya. Lebih terima kasih untuk yang Comment Like Share

Cara Membuat Menubar Fixed

2010-10-28T07:29:00.000-07:00

Satu lagi posting sebelum saya berangkat tidur malam ini. Kali ini saya akan mengajarkan anda cara membuat menubar dengan fungsi fixed tentunya sesuai judul. Tidak perlu basa basi, saya sudah ngantuk dan besok saya harus sekolah. Langsung saja Step.By.Step !!!

Preview

1. Login ke blog anda

2. masuk ke Design > Edit HTML

3. Cari kode ]]></b:skin>

4. Letakan kode berikut DI ATAS kode ]]></b:skin>

#navfix {
position:fixed;
text-transform : uppercase;
background :#0d0804;
font : bold 12px Verdana;
float : left;
width : 100%;
height : 41px;
}
#navfix ul {
margin : 0 10px;
padding : 0;
list-style : none;
}
#navfix li {
display : inline;
margin : 0;
padding : 0;
}
#navfix a {
float : left;
margin : 5px;
padding : 0;
}
#navfix a span {
background :#363636;
float : left;
display : block;
padding : 8px;
color : #fff;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
}
#navfix a:hover span {
color : #000;
text-decoration : none;
}
#navfix a:hover {
color : #000;
text-decoration : none;
}
#navfix a:hover span {
background : #555;
color : #fff;
text-decoration : none;
border-radius : 8px;
-moz-border-radius :8px;
-webkit-border-radius : 8px;
}

5. Cari kode <body> dan letakan kode berikut tepat di bawahnya

<div id='navfix'>
<ul>
<li><a class='current' expr:href='data:blog.homepageUrl'><span>HOME</span></a></li>
<li><a class='current' href='#' title='#'><span>Edit Me</span></a></li>
<li><a class='current' href='#' title='#'><span>Edit Me</span></a></li>
</ul>
</div>

Keterangan : Ganti yang berwarna biru dengan link anda dan yang merah dengan judul link anda.
Tambahkan kode yang bercetak tebal sesuai banyaknya menu yang di butuhkan

6. CLS Comment Like Share terima kasih hehehe

Saya akhiri posting hari ini Wassalamualaikum WR.WB

Cara Membuat Kotak Search [2]

2010-10-28T05:13:00.000-07:00

Pada jaman dahulu sewaktu blog saya masih cupu haha, saya pernah posting mengenai hal ini di sini nah sekarang saya akan posting ini lagi. loh?kenapa?karena yang dulu standar biasa simple dan 1 lagi, ada yang nanya haha. Sekarang saya akan memberi stylenya. Contoh? lihat saja milik saya di atas! Oke yuk mari langsung kita bahas! Step.By.Step !!!


Search

1. Log in ke blog anda

2. Design > Edit HTML

3. Cari kode ]]></b:skin>

4. Letakan CSS berikut di atasnya. Kalau anda pintar CSS boleh di utak atik

#search {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #84CAF6;
width: 220px;
color: #000;
margin: 0;
padding: 4px 0 3px 5px;
border: 1px solid #005BC3;
display: inline;
font: normal 12px Georgia, Times New Roman, Trebuchet MS;
}
#searchbutton {
background: #84CAF6 !important;
color: #000;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
border: 1px solid #005BC3;
font: bold 11px Georgia, Times New Roman, Trebuchet MS;
}

5. Letakan kode berikut ke gadget anda atau templates anda

<div id="search">
<form id="searchform" action="/search/" style="display:inline;" method="get">
<input id="searchbox" maxlength="255" onfocus="if (this.value == "Search...") {this.value = ""}" value="Search..." name="q" onblur="if (this.value == "") {this.value = "Search...";}" type="text"/>
<input id="searchbutton" value="GO" type="submit"/>
</form></div>

6. CLS Comment Like Share oke hahaha
Terima kasih saya akhiri wasslam

Cara Menghilangkan "Tulisan Show All Post"

2010-10-28T04:37:00.000-07:00

Apa kabar sahabat blogger?baik selalu ya tentunya, buktinya bisa baca posting ini hehe. Saya mau minta maaf udah lama tidak posting. Kenapa? karena saya kehabisan ide mau posting apa lagi. Jadi pada hari ini saya akan posting mengenai Cara Menghilangkan "Tulisan Show All Post" yang mungkin beberapa dari sobat sudah tau ya... Saya hanya sekedar shareing aja bagi yang tidak tau dan sekalian tambah posting hehe.

Preview

Langsung aja Step.By.Step !!!

1. Yang pertama dan terutama adalah login ke blog anda !

2. Masuk ke ~~layout~~ Design lalu ke Edit HTML

3. Beri tanda centang pada Expand Widget Templates

4. Cari kode seperti ini (Iihat yang teliti jangan keliru)

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

5. Replace/Ganti kode tadi (di atas) dengan kode berikut

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

6. Save Templates dan lihat hasilnya
7. CLS. Comment Like Share hahaha terima kasih :)

Sekian posting saya kali ini wassalam :) !

Design Twitter Via Themeleon

2010-10-18T03:50:00.000-07:00

Bagi anda para Tweeters yang ingin mendesign tampilan twitter anda sesuai keinginan anda tentunya. Tapi anda kendala keterbatasan ide, tidak bisa menyesuaikan warna dan lain sebagainya. Saya merekomendasikan cara mendesign Twitter dengan Themeleon. Apa itu Themeleon? tidak perlu saya jelaskan nanti juga kalian tau sendiri.

Step.By.Step tidak perlu di jelaskan, silahkan kunjungi saja web site ini http://www.colourlovers.com/themeleon/twitter . Log in dengan Account Twitter anda. Klik Allow/Setuju. Sekarang waktunya mendesign Twitter anda. Mari berkarya, dengan karya kita bisa berekspresi hahaha.

Satu hal lagi yang paling penting, tinggalkan comment dan like+share :) hehehe

Cara Membuat Recent Post Accordion

2010-10-16T06:08:00.000-07:00

Assalamualaikum sahabat blogger :) Dengan mengucapkan Bismilah mari kita mulai postingan ini....

Sebenarnya saya sudah pernah memposting tentang hal ini di "jQuery Accordion Recent Post with Thumbnail". Original posting ini juga sebenarnya milik Blogger Tune-Up. Tapi jika anda baca posting terbarunya bahwa Account Google Code Blogger Tune-Up Di Non Aktifkan, ternyata itu berpengaruh terhadap script miliknya. Nah pada posting saya sekarang ini saya hanya akan sedikit memperbaikinya tanpa menghilangkan kode aslinya :)
Langsung saja Step.By.Step

Cara Membuat Fungsi Scroll Pada Post

2010-10-15T18:48:00.000-07:00

Sebelumnya saya mau minta maaf di karenakan belakangan ini jarang sekali posting. kenapa?karena saya bingung mau posting apa, kehabisan ide hehe. Nah apakah ide itu? "Cara Membuat Fungsi Scroll Pada Post" hahaha.

Langsung saja tidak usah banyak omong lagi. Ini preview nya

Preview

Dan untuk demo langsungnya silahkan klik di sini
Dan untuk cara membuatnya ikuti langkah di bawah ini dengan seksama dan dalam tempo yang sesingkat-singkatnya

1. Login ke blog anda
2. Design > Edit HTML > cari kode

.post-body {

3. Letakan kode di bawah ini di bawah kode .post-body {

height:400px;
overflow:auto;

4. angka 400px adalah tinggi scroll, silahkan atur sesuai keinginan anda.
5. Silahkan tinggalkan komentarnya dan like + share terima kasih :)

Sekian post dari saya, Wassalamualaikum

Cara Memasang Kotak Fans Facebook di Blog

2010-10-12T05:01:00.000-07:00

Berawal dari sebuah pertanyaan teman di kotak ChatBOX. Ya walaupun saya juga kurang paham maksud pertanyaan itu. Mungkin maksudnya ya ini.

like box

Nah untuk membuat yang seperti itu di blog caraya sangat mudah.

1. Pertama buka saja situs ini http://developers.facebook.com/docs/reference/plugins/like-box
2. Sekarang isi data-datanya dengan :

Facebook Page URL : URL Halaman Fans Facebook anda (bukan profil)
Width : Lebar Like boxnya
Connections : Banyaknya orang (fans) yang di tampilkan di kotak like
Stream : Menampilkan kiriman terbaru di halaman facebook anda. (centang untuk menampilkan, kosongkan untuk tidak di tampilkan)
Header : Untuk menampilkan tulisan "Find us on Facebook" atau "Temukan kami di Facebook" (centang untuk menampilkan, kosongkan untuk tidak di tampilkan)

3. Jika sudah selesai dengan pengaturannya klik "Get Code" maka akan di tampilkan kodenya.
4. Copy kode pada kotak iframe
5. Login Blog > Design > Add a Gadget. Paste kode yang tadi di copy
6. Save dan lihat hasilnya.

Kalau milik saya ada di bagian footer blog ini. Boleh di like hehe
Terima kasih telah membaca, budayakan comment dan like ya :) terima kasih

Gadget Baru Popular Posts dan Blog’s Stats

2010-10-08T17:33:00.000-07:00

Fitur baru lagi dari blogger. Sebenarnya gadget ini sudah launching dari tanggal 29 sepetember 2010. Saya agak telat posting ini sekarang, ya maklumlah saya sendiri juga baru bisa online hari ini hehe. Oke langsung saja kita bahas

New Gadget

Popular Posts Gadget ini akan secara otomatis mencari posting mana yang paling sering di baca/kunjungi oleh para pembaca di blog anda. Anda bisa mengatur apakah anda akan menampilkan thumbnail gambar dan potongan text posting atau tidak. Anda juga dapat mengatur waktu yang akan di gunakan untuk menampilkan posting mana yang paling popular. Dan anda juga bisa mengatur jumlah posting yang di tampilkan

Cara Memasang Icon Di Samping Judul Posting

2010-10-08T16:20:00.000-07:00

Sebelumya saya minta maaf nih baru sempet posting sekarang. Soalnya internet baru bayar hehe. Selain itu juga saya lagi UTS (Ujian Tengah Semester) jadi harus belajar dan jarang ngeblog deh. Oke sudah acara minta maafnya sekarang kita masuk ke pembahasan.

Hampir sama dengan posting saya sebelum ini yaitu Cara Memasang Icon Di Samping Judul Sidebar. Nah yang sekarang saya bahas ini adalahCara Memasang Icon Di Samping Judul Posting. Yuk Langsung Step.By.Step !!!

Icon

1, Baca Bismillah biar ga terjadi hal buruk hehe
2. Login ke blog anda > Design > Edit HTML
3. Cari kode yang kira-kira kurang lebih bentuknya seperti ini

.post h3 {
border-bottom : 2px dotted #ccc;
margin : 0.25em 0 0;
padding : 0 0 0;
font-family : Arial, Helvetica, sans-serif;
font-size : 22px;
color : #000;
text-decoration : none;
}

3. Hapus kode di atas dan ganti keseluruhan dengan kode ini

.post h3 {
background:url(http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-3-1.jpg) left no-repeat;
border-bottom : 2px dotted #ccc;
margin : 0.25em 0 0;
padding : 0 0 0 25px;
font-family : Arial, Helvetica, sans-serif;
font-size : 22px;
color : #000;
text-decoration : none;
}

Keterengan ganti yang berwarna merah dengan link/URL Icon anda sendiri

4. Preview/Pratinjau dulu blog anda sebelum di save.
5. Jika sudah oke klik save templates
6. Ucapkan Hamdalah jika berhasil, jika tidak coba lagi jangan menyerah !!!

Sekian Posting saya hari ini, terima kasih bagi yang mau membaca hehe
jangan lu comment dan likenya ya

Cara Memasang Icon Di Samping Judul Sidebar

2010-09-30T07:03:00.000-07:00

Oke sebelumnya saya berterima kasih pada nyoman yang telah bertanya. Karena dia saya jadi inspirasi mau posting apa hehe. Oke langsung saja bagi yang tertarik membuat icon di samping judul sidebar. Step.By.Step !!!

icon

1. Langkah pertama log in ke blog anda

2. Masuk ke design > Edit HTML

3. Cari kode yang kurang lebih seperti ini (fokuskan pencarian pada yang merah)

h2 {
margin : 0 0 10px;
border-bottom : 2px dotted #ccc;
font-family:arial, serif;
font-size : 19px;
color : #000;
}

4. hapus kode yang berwarna biru dan Ganti dengan kode berwarna biru ini

h2 {
background:url(http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-3.png) left no-repeat;
margin : 0 0 10px;
padding:0 0 0 25px;
border-bottom : 2px dotted #ccc;
font-family : Arial, Helvetica, sans-serif;
font-size : 15px;
color : #000;
}

5. Ganti kode berwarna hijau adalah alamat icon anda sendiri.
6. Save Templates !!!

Sekian dulu posting saya kali ini, sudah malam dan saya adalah pelajar yang besok harus sekolah haha
Sampai jumpa dadah jangan lupa comment

Cara Membuat Menu Floating Image

2010-09-26T02:44:00.000-07:00

Oke yang pertama-tama dan terutama mari kita baca basamalah untuk memulai posting ini agar tidak terjadi hal-hal yang tidak di inginkan.

bismi-llāhi r-raḥmāni r-raḥīm

Oke sekarang mari kita bahas apakah itu menu floating image? menu floating adalah menu yang memiliki posisi tetap/fixed, berada di kanan/kiri dan atas/bawah. Sedangkan image adalah gambar. Berarti dapat di artikan bahwa menu floating image adalah menu floating yang menggunakan gambar. Jika anda seorang kaskuser, maka anda sering menjumpai tampilan seperti ini.

Floating

Itu yang di tunjuk panah merah yang saya maksud floating. Nah sekarang kita langsung ke cara pembuatannya aja ya. Step,By.Step!!!

1. Log in ke blog anda dengan akun anda.

2. Masuk ke design > Edit HTML

3. Cari kode ]]></b:skin>

4. Copy dan paste kode berikut di atas kode ]]></b:skin>

#floating {
position:fixed;_position:absolute;top:170px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Keterangan : kode yang berwarna merah dapat anda ganti sesuai keinginan. top=atas bisa di ganti dengan bottom= bawah. left=kiri dapat di ganti dengan right=kanan
5. cari kode </body>
6. Copy dan past kode ini di atas kode </body>

<div id="floating">
<a href="http://abi-galoga.blogspot.com">
<img src="http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-2.jpg" border="0" /></a>
</div>

Yang berwarna merah ganti dengan Link anda dan yang berwarna bira ganti dengan alamat gambar anda.

Selesai sudah posting kali ini. Jika berhasil ucapakan Alhadulillah jika gagal jangan menyerah!coba lagi !
Saya akhiri wasalam, jangan lupa comment

Download Tune Up Utilities 2010 with KeyGen

2010-09-25T01:55:00.000-07:00

Tune Up Utilities adalah sebuah program apilkasi komputer yang berfungsi untuk meningkatkan kinerja komputer anda. Tune Up Utilities juga bisa mningkatkan kecepatan komputer anda. PC pun jadi lebih nyaman untuk digunakan. Tune Up Utilities 2010 memiliki fitur baru yang tidak ada di Tune Up Utilities versi sebelumnya. Tune Up Utilities 2010 juga sudah compitibility dengan Windows 7. Tune Up Utilities 2010 Sepenuhnya didesain ulang dan lebih mudah untuk menggunakan: dari 1-Click Maintenance untuk Turbo Mode - maka Tune Up Utilities akan meningkatkan kemampuan PC Anda dalam sekejap.

Oke langsung saja bagi yang tertarik silahkan download untuk free trial 15 hari di situs resminya [Download].
Nah karena itu masih trial 15 hari sekarang silahkan download lagi cracknya [Download]

Beberapa fitur Tune Up Utilities 2010

NEW! Turbo Mode
Disable unnecessary background programs and concentrate all the PC processing power on your active programs!Learn more about the Turbo Mode

NEW! Live Optimization
Accelerate the startup and response times of your programs — for optimal PC performance!See the advantages of Live Optimization

Maintain System
Keep your PC running like new! With only one click, you can clean up your computer and improve system stability.Find out how to keep my PC running like new

Increase Performance
Get the most from your PC and experience fast performance — while working and gaming.Discover how to improve your PC's performance

Fix Problems
As easy as pie: Solve Windows problems quickly, easily, and reliably or restore deleted files.See how easy it is to fix problems

Customize Windows
Give your Windows a custom look and feel: cool new start screens, icons, and animations.Find out how to customize your Windows experience

Sumber (Tune Up Utilities 2010)

Cara Menganti Domain [dot] co.cc Gratis

2010-09-24T08:53:00.000-07:00

Tidak usah pake basa-basi, bakalan panjang nih posting. Oke langsung saja !!!

1. Buka http://www.co.cc/
2. Isikan kotak kosong antara www. dan .co.cc dengan alamat/url yang anda inginkan lalu bulk chack (pastikan url tidak ada yang punya)

Isikan URL milik anda

3. Isikan Email dan Password akun co.cc anda (jika belum buat sendiri) dan juga isikan kode vertivikasi lalu sign in

Isi data yang di berikan

4. Masukan kembali URL anda, kali ini anda bisa memasukannya max sampai 100 URL dan akan di saring mana URL yang tersedia. ketikan kode vertivikasi dan continue

Masukan URL anda max 100 min 1

5. Akan di perlihatkan daftar URL yang bisa di pakai, klik setup domain

Setup Domain

6. Untuk Setupnya lihat gambar di bawah ini

Klik to large

Sekarang cara mengganti URL blog anda di blogger
1. Log in ke blog --> Settings --> Publishing --> Custom Domain --> Switch to advanced settings
2. Sekarang isikan URL co.cc baru anda. oh iya, tambahkan www di depannya setelah itu isi kode vertivikasi dan save
3. Selesai, lihat blog anda. sudah berubahkan domainnya !!!

Ini sudah di bahas DETAIL banget loh!!! kecuali cara membuat account co.cc nya, saya yakin kalian bisa kalau daftar doang si.
Sekian dan terima kasih, jangan lupa comment wasalam

Cara Membuat Halaman Baru di Blog

2010-09-24T08:11:00.000-07:00

Ini adalah salah satu fitur terbaru blogger, namun cukup lama juga si, sayanya saja yang baru posting sekarang hhehe. Oke langsung bahas saja. Halaman baru itu berfungsi untuk menambahkan halaman berbeda semacam posting, tapi bukan posting. Sebagai contoh saja yaitu link About Me dan Link Exchange . Mungkin memang terlihat biasa seperti posting pada umumnya, tapi itu bukan postingan, buktinya lihat URLnya

Preview

URLnya agak berbeda, yaitu memiliki tambahan 'p'. Di sini anda bukan hanya bisa menambah tulisa, bisa yang lain entah foto, video, atau yang lainya. Biasanya yang di letakan di sini itu sesuatu yang khusus yang memerlukan halaman khusus juga, seperti milik saya tadi. Bagimana cara pembuatannya? Sangat mudah! hampir sama dengan membuat posting. Begini caranya....

1. Log in ke blogger anda
2. Pada halaman dashbor masuk ke Edit Post.
3. Setelah itu masuk lagi ke Edit Page dan klik New Page
4. Buatlah halaman anda sendiri! sama saja seperti membuat posting!
5. Jika sudah klik Publish Page
6. Saat muncul pertanyaan "How would you like the Pages Gadget to appear?" Itu berarti anda di suruh untuk memiih gadget tempat untuk memunculkan link page anda.

Blog Sidebar : Berarti anda memilih sidebar untuk tempat Linknya
Tabs Sidebar : Itu tempatnya di antara main dan header. Jadi sejenis navigasi
No Gadget : Berarti tanpa gadget dan link di munculkan secara manual oleh anda / tidak di munculkan
Jika sudah klik Save And Publish, maka page anda akan dapat dilihat orang umum

Preview

Sudah cukup teorinya, sekarang waktunya kalian praktek !!!
terima kasih, jangan lupa comment hhee

Cara Membuat Menu Dropdown

2010-09-24T03:53:00.000-07:00

Biar engga lama-lama jelasin jadi langsung di kasih contoh aja.

Itu adalah contoh dropdown menu. Dengan itu kita jadi bisa menghemat tempat. Oke langsung saja ke pembahasan. Untuk membuat seperti yang di atas kode yang di perlukan seperti ini.

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Selain yang di atas masih ada satu lagi nih...Yang ini modelnya kalau linknya di klik masuk ke new tab. Jadi akan tetap mempertahankan halaman aslinya. Contohnya gini nih

Nah kodenya begini nih ..... :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Nah gampangkan? Oke langsung saja di praktekin. Sekian dulu ya gan.
Terima kasih, jangan lupa commeny oke

Cara Menambah Lebar Kotak Comment Form

2010-09-22T05:44:00.000-07:00

Okelah kalau begitu, sehari minimal satu postinglah. Posting saya kali ini mungkin agak sedikit kuno, tapi ya tak apalah untuk membagi ilmu serta memperbanyak posting. Kotak Comment Form adalah kotak tempat pembaca menulis komentar. Sekarang kita akan mencoba untuk menambah panjang dari kotak komentarnya.

Comment-Form

Yasudahlah tidak usah banyak ngomong lagi kita langsung saja ke Step.By.Step !!!

1. Yang terutama dan terutama. Log in ke blog anda

2. Klik Design > Edit HTML > Centang di Expand Widget Templates

3. Sekarang cari kode yang kurang lebih kurang dikit kurang banyak seperti ini :

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/></iframe>

4. Lihat kode yang berwarna merah, itu adalah lebarnya. Sekarang ganti sesuai keinginan anda, jangan kepanjangan nanti mentok wakaka. ganti dengan angka biasa, contoh : width='500'
5. Jika sudah sekarang save templates dan lihat hasilnya
JENG JENG JENG JENG !!!(musik pengiring)

Oke udah dulu deh, sekian dan terima kasih. jangan lupa komen

Cara Menerapkan Font Google API di Blog

2010-09-21T03:55:00.000-07:00

Baiklah pada sore hari yang masih agak mendung karena hujan ini saya akan tetap membagi ilmu yang saya tau ini. Kali ini saya akan mengajarkan pada para pembaca yang membaca posting ini tentang cara menerapkan font google API di blog. Teman-teman tentu sudah tau apa itu font, font adalah jenis huruf/tulisan. Dafault Font di blog sangat standard yaitu Arial, Courier, Georgia, Helvetica, Times, Trebuched, dan Verdana. Sudah biasa ya?lalu bagaimana dengan model font seperti ini ~-{[(StyleSheet)]}-~

Oke kita akan mempelajari bagaimana cara penerapannya.
1. Coba anda kunjungi http://code.google.com/webfonts
2. Pada web tersebut anda akan di perlihatkan daftar font yang bisa anda pilih. Klik pada font yang amda inginkan

Pilih Font

3. Mucul contoh teks yang telah anda pilih tadi. Sekarang klik "Get The Code"

Klik Get The Code

4. Perhatikan bagian "Embed the font into your page".

Beri tanda centang pada kotak untuk memilih model font (bisa centang satu/lebih), minimal harus centang 1.
Copy kode yang ada di kotak pertama, lalu paste ke dalam Blog anda. Letakan di antara kode <head> dan </head>. Dan karena kita menggunakan untuk blog maka anda harus menutup bagian belakangnya, contoh (tambahkan garis miring yang berwarna merah di bawah

<link href='http://fonts.googleapis.com/css?family=Cantarell&subset=latin' rel='stylesheet' type='text/css'/>

Copy kode yang ada pada kotak ke dua, tapi yang di copy hanya bagian "font-family: 'Font Name', arial, serif;". Dan letakan di dalam tag kode CSS Atau bisa juga dengan cara seperti ini :

<div style="font-family: 'Font Name', serif;">Text Anda</div>

Oke hanya begitu saja saya rasa, mudah sekali.
terima kasih untuk membaca posting tapi jangan lupa untuk komen oke hehe

Cara Aktifkan CAPTCHA Cbox

2010-09-19T22:32:00.000-07:00

Sebelum kita membahas cara mengaktifkan CAPTCHA^Cbox, Saya akan memberi tau dulu apa itu CAPTCHA^Cbox, Apakah anda tau kode vertifikasi? yaaa, CAPTCHA adalah semacam kode vertifikasi untuk Cbox.

Kode Vertifikasi CAPTCHA

Kode vertifikasi itu berfungsi untuk mendeteksi SPAM, jadi kurang lebih dengan mengaktifkan CAPTCHA^Cbox dapat mengurangi bahaya SPAM di komentar Cbox kamu. Oke langsung saja ke cara mengaktifkan CAPTCHA.

1. Log in ke Akun Cbox anda. Semoga anda masih ingat akunnya, jika belum punya anda bisa baca Cara Membuat Cbox di Blog
2. Masuk ke Posting Options

Preview

3. Sekarang beri tanda centang pada "Require CAPTCHA^NEW!" Lalu "Save"

Preview

Selesai sudah, sekarang Require CAPTCHA^NEW! sudah aktif di Cbox anda, dengan ini "mudah-mudahan" Cbox anda aman dari teror SPAM.
Jangan lupa comment thanks :)

Cara Membuat Google Translate [Part 2]

2010-09-19T04:26:00.000-07:00

Dahulu kala saat blog saya masih biasa-biasa saja, simple, polos, lugu, engga punya dosa *lebay haha, saya pernah posting Cara Membuat Google Translate. Sudah lama sekali itu, dan sekarang saya akan mengajarkan cara yang sama namun hasil berbeda, hasilnya seperti apa? seperti yang ada di blog ini "transtool". yang begini ini loh.....

Nah langsung aja yuk !! Step.By.Step !!!

1. Langkah pertama log in ke blogger anda
2. Design
3. Add a Gadget / Tambah Gadget
4. Pilih HTML/JavaScript
5. Beri judul terserah anda
6. Masukan kode berikut di kotak content

<div style="padding: 5px 0px 0px;">
<center>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarsaudiarabi.gif?t=1281541106" title="Arabic" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarsouthkorea.gif?t=1281541106" title="Korean" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarjapan.gif?t=1281541106" title="Japanese" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer; margin-right: 0px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarchina.gif?t=1281541106" title="Chinese Simplified" align="absbottom" /></a>
</center>
<center>
<div style="margin: 0px; padding: 0px; width: 0px; height: 0px;"><a href="http://www.topseratus.com/"><img border="0" width="0" src="http://www.topseratus.com/button.php?u=pinginbelajar" height="0" /></a><a href="http://topglobalsite.com/"><img border="0" width="0" src="http://topglobalsite.com/button.php?u=pinginbelajar" height="0" /></a><a href="http://stats.bertuah.org/"><img border="0" width="0" src="http://stats.bertuah.org/button.php?u=pinginbelajar" height="0" /></a><a href="http://www.topblogarea.com/"><img border="0" width="0" src="http://www.topblogarea.com/tracker.php?do=in&id=75128" height="0" /></a><a href="http://blogs.top.org/"><img border="0" width="0" src="http://img1.top.org/toporg_4257.gif" height="0" /></a><a href="http://www.dignow.net/"><img border="0" width="0" src="http://www.dignow.net/gen.aspx?idc=25611" height="0" /></a><a href="http://www.blogtoplist.com/"><img border="0" width="0" src="http://www.blogtoplist.com/tracker.php?u=84875" height="0" /></a><a href="http://www.goledy.com/"><img border="0" width="0" src="http://www.goledy.com/gen/1752" height="0" /></a><a href="http://topofblogs.com/"><img border="0" width="0" src="http://stats.topofblogs.com/send/18980" height="0" /></a><a href="http://www.blogrankings.com/"><img border="0" width="0" src="http://www.blogrankings.com/img_2167.gif" height="0" /></a><a href="http://topsites.blogflux.com/"><img border="0" width="0" src="http://topsites.blogflux.com/track_212074.gif" height="0" /></a><a href="http://www.blogtopsites.com/"><img border="0" width="0" src="http://www.blogtopsites.com/v_13086.gif" height="0" /></a><a href="http://www.top.heldiyudiyatna.net/"><img border="0" width="0" src="http://www.top.heldiyudiyatna.net/button.php?u=pinginbelajar" height="0" /></a><a href="http://www.top.bogorguide.com/"><img border="0" width="0" src="http://www.top.bogorguide.com/button.php?u=pinginbelajar" height="0" /></a><a href="http://hellblog.heldi.net/"><img border="0" width="0" src="http://hellblog.heldi.net/button.php?u=pinginbelajar" height="0" /></a><a href="http://consultant.jasakonsultan.net/"><img border="0" width="0" src="http://consultant.jasakonsultan.net/button.php?u=pinginbelajar" height="0" /></a><a href="http://top.bogorcity.net/"><img border="0" width="0" src="http://top.bogorcity.net/button.php?u=pinginbelajar" height="0" /></a><a href="http://top.cianjurcybercity.com/"><img border="0" width="0" src="http://top.cianjurcybercity.com/button.php?u=pinginbelajar" height="0" /></a><a href="http://bandungtopblog.com/"><img border="0" width="0" src="http://bandungtopblog.com/button.php?u=pinginbelajar" height="0" /></a><a href="http://tophits.bloggerian.or.id/"><img border="0" width="0" src="http://tophits.bloggerian.or.id/button.php?u=pinginbelajar" height="0" /></a><a href="http://www.blogsontop.com/"><img border="0" width="0" src="http://www.blogsontop.com/button.php?u=pinginbelajar" height="0" /></a><a href="http://www.topbloglists.com/"><img border="0" width="0" src="http://www.topbloglists.com/button.php?u=pinginbelajar" height="0" /></a><a href="http://www.blogflare.com/"><img border="0" width="0" src="http://www.blogflare.com/flare_507.gif" height="0" /></a><a href="http://pinginbelajar.blogspot.com/"></a></div>
</center>
<center>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_rusia1.gif?t=1281541917" title="Russian" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarbrazil.gif?t=1281541106" title="Portuguese" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarunitedking.gif?t=1281541106" title="English" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer; margin-right: 0px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarfrance.gif?t=1281541106" title="French" align="absbottom" /></a>
</center>
<center>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajargermany.gif?t=1281541106" title="German" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarspain.gif?t=1281541106" title="Spain" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer; margin-right: 3px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajaritalia.gif?t=1281541106" title="Italian" align="absbottom" /></a>
<a class="google_translate" href="http://www.blogger.com/rearrange?blogID=9080780049538396230&action=editWidget&sectionId=sidebar1&widgetType=null&widgetId=HTML2#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer; margin-right: 0px;" src="http://i953.photobucket.com/albums/ae17/abi-galoga/th_pinginbelajarnetherland.gif?t=1281541106" title="Dutch" align="absbottom" /></a>
<center><div id="google_translate_element"></div></center></center></div>

7. Save
Lihat hasilnya di blog anda. WAW....! bisa gerak-gerak gitu ya? hahaha
Jangan lupa commentnya :)))

Membuat Image Rollover (hover)

2010-09-19T01:15:00.000-07:00

Oke pada siang hari hari ini saya akan mengajarkan bagaimana cara membuat image Rollover. Ada yang yang sudah tau sebelumnya tentang rollover?bagus kalau sudah tau, tapi saya akan tetap mengajarkannya buat yang tidak tau. Image Rollover itu ada sebuah efek untuk image sebelum dan saat di arahkan mouse atau bahasa mudahnya hover. Memang sulit di mengerti ya kalau cuma teori. Untuk contoh coba lihat 3 gambar (FB,Twitter,Subscribe) yang ada di atas blog ini, sekarang arahkan mouse ke gambar itu, nah itu dia rollover.

Begini, saya punya 2 gambar yaitu

gambar 1


gambar 2

Nah dari 2 gambar itulah saya membuat image rollover tadi. Lalu bagaimana bentuk kodenya? seperti ini ....

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>

<a class="pic" href="URL tujuan jika gambar di klik">
<img class="image1" src="URL gambar 1" />
<img class="image2" src="URL gambar 2" /></a>

Mudah bukan? sekarang giliran anda mencoba. silahkan....

Fitur Terbaru Blogger Upload Background

2010-09-16T06:06:00.000-07:00

Blogger benar-benar tau apa yang di inginkan para pelanggannya. Sekarang blogger menambahkan fitur upload image untuk background blog anda. Fitur ini terletak di "Templates Designer". Jika ingin menggunakan fitur ini anda harus menggunakan templates terbaru blogger dari "templates designer".

Untuk menjalankan fitur ini anda harus login ke blog anda, lalu masuk ke tab design lalu klik lagi tab Templates Designer lalu pilih tab Background. Klik Background Image lalu klik Upload Image lalu klik browse untuk memilih gambar yang ingin di jadikan background dari komputer anda.

http://buzz.blogger.com/

Tunggu beberapa saat ketika gambar di upload, jika sudah selesai akan di dapat hasil seperti di atas. Perlu di ketahui bahwa ukuran maksimal untuk gambar adalah 300KB

(The good)

(The bad)

Sekian posting dari saya, semoga bermanfaat terima kasih
sumber gambar (http://buzz.blogger.com/)

Tips Menghilangkan Kolom di Blog

2010-09-15T22:08:00.000-07:00

Oh iya sebelumnya saya mau minta maaf karena sudah lama engga posting, itu di karenakan saya abis mudik biasa tradisi lebaran eheheh, dan sekalian saya mau minta maaf sama para blogger taqobbalahu mina waminkum maaf lahir batin ya....
Oke sekarang kita masuk ke materi hari ini yaitu Tips Menghilangkan Kolom di Blog, maksudnya? maksudnya dengan cara ini kita bisa menghilangkan satu atau lebih kolom yang ingin di hilangkan. Contohnya ingin menghilangkan kolom sidebar / header / dll. Caranya? caranya adalah seperti ini Step.By.Step !!!

1. Login ke blog anda wajib kudu harus !!!
2. Deisgn > Edit HTML
3. Cari kode untuk kolom yang kalian ingin hilangkan. Engga tau kodenya? -_-" tenang saya punya daftarnya :

#header-wrapeer { --> ini untuk kolom header
#outer-wrapper { --> ini untuk kolom outer
#main-wrapper { --> ini untuk kolom main
#sidebar-wrapper { --> ini untuk kolom sidebar
#footer-wrapper { --> ini untuk kolom footer
.post { --> ini untuk kotak posting

4. Jika sudeah tau kode-kodenya sekarang tambahlan kode berikut di bawah kode di atas tadi (salah satunya)

display:none

5. Save Templates.

Semoga bermanfaat terima kasih untuk membacanya, jangan lupa untuk like jika suka dan comment untuk kritik dan saran

Memberi Background Pada Kotak Posting

2010-08-31T02:49:00.000-07:00

Cara memberi background pada kotak posting bukanlah hal yang sulit, mengapa? karena semua orang (blogger) bisa menggunakan cara ini. Caranya sangat mudah bagaimana? begini Step.By.Step

1. Login ke blog anda > Design > Edit HTML
2. Cari kode .post {
3. Bagi anda yang menggunakan templates baru dari blogger mungkin tidak menemukan kode itu, anda bisa tambahkan sendiri kode itu di atas kode .post-body {
4. Bagi anda yang menambahkan kode itu sendiri, cara menulis kodenya adalah

.post {
background:#ff0000;
}

5. Kode bercetak tebal adalah kode untuk membuat background. Jika ingin menggunakan gambar di background maka

background:url(alamat gambar anda);

Sekian pembelajaran kita hari ini, saya sudahi wassalam.

Memperkenalkan Fitur Terbaru Blogger Stats

2010-08-31T02:14:00.000-07:00

Blogger dengan fitur terbarunya yaitu "Blogger Stats" (statistik). Seperti namanya statistik, fitur ini berguna untuk mengetahui real-statistik blog kita yang terintregasi dengan blogger. Anda tidak perlu melakukan apapun untuk mengaktifkan fitur ini, karena fitur ini sudah aktif secara otomatis di semua blog. Untuk melihat statistik anda bisa mengklik stats/statistik yang ada pada menu dashboard anda.

Fitur ini adalah bagian penting dari blog kita, karena dengan fitur ini memungkinkan kita untuk mengetahui statistik blog kita serta mengetahui browser dan OS apa yang paling banyak di gunakan oleh pengunjung. Fitur ini juga memungkinkan kita mengetahui rating blog kita, bahkan rating per posting serta posting apa yang paling banyak di kunjungi. Berikut adalah bagian dari stats/statistik

Overview : Dengan ini anda bisa mengetahui perkembangan blog anda se-segera mungkin
Post : Anda dapat mengetahui posting apa yang paling banyak di baca/dikunjungi di blog anda.
Traffic Sources : Memungkin anda untuk melihat rating blog anda baik secara URL/situs/kata yang sering di cari (keyword)
Audience : Anda bisa mengetahui browser apa yang sering di gunakan oleh pengunjung anda, OS apa, dan dari negara mana saja pengunjung anda itu

Saya rasa hanya itu yang bisa saya sampaikan, terima kasih telah membacanya

Cara Membuat Post Hover di Blog CSS3

2010-08-30T03:54:00.000-07:00

Anda tentu sudah tau apa itu hover? oh ada yang tidak tau. Hover adalah efek yang diterima suatu objek saat di sentuh mouse/kursor, misalnya ketika link saat di sentuh mouse. Nah kalau post itu ada bagian posting, muali dari background, tulisan, semuanya tentang posting deh. Sekarang kita akan mencoba menggabungkan hover dan post dengan CSS3. Seperti apakah jadinya? kurang lebih seperti ini

Demo

Sudah lihat demonyakan?itu sangat simple, anda masih bisa mengembangkannya lagi dengan imajinasi anda sendiri hehe. Oke jika anda tertarik langsung saja ke Steb.By.Step

1. Login ke blog anda > Design > Edit HTML
2. Cari kode .post { .setau saya templates fitur baru tidak memiliki kode ini, anda bisa cari .post-body {
3. Letakan kode berikut di atas kode tadi

.hentry:hover {
background:#ff0000;
color: $linkcolor;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.hentry:hover a:link,#posts-list .hentry:hover a:visited {
color:$visitedlinkcolor;
text-shadow:1px 1px 1px $shadowcolor;
}

4. Kalau anda mengerti kode CSS boleh ko itu di utak-atik
5, Save Termplates.

Sekian post saya kali ini, semoga bermanfaat saya akhiri wassalam

Tampilan Blog Berbeda Setiap Halaman

2010-08-29T06:46:00.000-07:00

Jika anda melihat halaman blog saya yang ada disini, disini, dan disini maka akan muncul tampilan yang berbeda-beda seperti yang nampak pada gambar di atas iya bukan? yaps betul. Sangat menarik sekali ya. Awalnya saya juga bingung, saya cari-cari caranya tidak ketemu, tapi setelah berpikir mendalam, saya menemukan caranya sendiri. Ini adalah hasil evolusi dari kode menampilakan widget di halaman tertentu yang di kembangkan menjadi tampilan di halaman tertentu hahaha. Oke mari saya ajarkan cara pembuatannya. Step By Step :

1. Login ke blog anda > Design > Edit HTML
2. Cari kode ]]></b:skin>
3. Letakan kode berikut setelah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.url == "URL posting yang tampilannya ingin di bedakan"'>
body {
background:url(http://themes.googleusercontent.com/image?id=1PlcOIpvGMP-0UUOAln6SU3f8a6hBUno7T80yhJ_0O-vGlNgYhk-lCPbst9AtRs5z3OAX) center fixed;
}
#outer-wrapper {
width:870px;background-color:rgba(60, 42, 31, 0.6);
}
#main-wrapper {
width:100%;
}
#footer-wrapper, #sidebar-wrapper {
display:none;
}
#header-wrapper {
background:url(http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-1-1.jpg) center right;
}
.post {
color:white;
}</b:if>
</style>

Ganti yang berwarna merah dengan URL/Link posting yang tampilannay ingin di bedakan
Lalu ganti yang berwarna biru dengan style templates anda. Anda harus mengerti penulisan style templates jika ingin mengutak-atiknya

4. Save Templates.

Semoga bermanfaat, saya akhiri TERIMA KASIH!!! (jangan lupa comment)

Efek Transparan Blog Dengan CSS3

2010-08-29T03:26:00.000-07:00

Oke, kali ini saya akan mengajarkan kepada anda semua yang tidak tau tentang cara membuat efek transparan di blog dengan CSS3. Seperti apakah efek transparan itu? seperti yang akan saya ajarkan sekarang.

Ada 2 cara pembuatan efek transparan, 1 dengan opacity dan 1 lagi dengan rgba. Mari kita bahas satu per satu

1. Efek transparan dengan opacity . Efek ini cenderung membuat semua objek yang ada di dalamnya menjadi transparan. Jadi jika kita membuat sebuah objek yang terkandung text di dalamnya transparan dengan opacity, maka text tersebut akan ikut transparan juga. Berikut penerapan opacity dalam CSS

contoh {
   background: #2867A5;
   opacity: 0.2;
   float: left;
   height: 130px;
   width: 180px;
   margin: 5px 5px;
   padding: 10px;
}

Maka hasil yang di dapat adalah seperti ini

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et,

Tulisannya tidak begitu terlihat karena tulisannya di buat transparan juga, itulah kekurangannya.

2. Efek transparan dengan rgba . Cara ini lebih mudah dan tidak akan membuat text transparan, yang dibuat transparan hanyalah background/latar belakangnya saja. Berikut ini bentuk susunan kode dalam CSS

contoh {
   background: #2867A5;
   background-color:rgba(255, 255, 255, 0.5);
   float: left;
   height: 130px;
   width: 180px;
   margin: 5px 5px;
   padding: 10px;
}

Hasil yang di dapat seperti ini

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et,

Terlihat jauh berbeda dengan yang pertama iyakan?

Penjelasan rgba : background-color:rgba(red, greed, blue, alpha); . Seperti yang anda tahu red green blue adalah 3 warna pokok yang membuat semua warna dan alpha adalah tingkat transparannya. Untuk melihat susuanan warna RGB bisa di lihat dengan menggunakan photoshop.

Sekian pembelajaran kita, semoga bermanfaat dan jangan lupa commentnya oke

Pembuatan Multi Kolom Dengan CSS3

2010-08-29T01:03:00.000-07:00

Seperti yang sudah pernah saya bahas pada posting sebelum ini bahwa kode CSS3 di bedakan menjadi 2, yaitu -moz- untuk mozilla/firefox dan -webkit- untuk google chrome. Jadi kita akan mempelajari ke2 kode itu untuk pembuatan multi kolom ini.
CSS untuk pembuatan kolom memiliki berbagai variasi/model. Yaitu, pembuatan berdasarkan lebar, berdasarkan jumlah kolom, dan menambahkan garis pembatas juga bisa.

1. Berikut pembuatan berdasarkan lebar :

Lorem ipsum dolor sit amet, onsectetuer css3 adipiscing elit. Aenean egestas blandit ipsum. Morbi nuedges nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam multi-kolom condimentum. Praesent euismod auctor dui. Nunc ut leo vel css3 magna adipiscing tempor. Nuedges pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla multi-kolom css3 sagittis, odio quis porta nonummy, mauris nuedges arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc nuedges vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis css3 justo. Sed lorem. Sed nuedges vel neque in ipsum gravida nonummy.

Kode yang di gunakan untuk pembuatan kolom seperti di atas adalah column-width. Menentukan kolom berdasarkan lebar. Berikut adalah bentuk kode secara keseluruhan.

-moz-column-gap: 1em;/*jarak antar kolom*/
-moz-column-width: 13em; /*Lebar kolom*/
-webkit-column-gap: 1em; /*jarak antar kolom*/
-webkit-column-width: 13em;/*Lebar kolom*/

2. Sekarang pembuatan berdasarkan jumlah kolom

Pembuatannya menggunakan column-count, menentukan kolom berdasarkan jumlahnya. kodenya adalah seperti ini.

-moz-column-gap: 1em;/*jarak antar kolom*/
-moz-column-count: 4; /*Jumlah kolom*/
-webkit-column-gap: 1em; jarak antar kolom*/
-webkit-column-count: 4;/*Jumlah kolom*/

3. Menambahkan garis pembatas pada kolom. Contohnya seperti ini

Anda hanya tinggal menambahkan kode column-rule. Berikut bentuk kodenya

-moz-column-rule: 1px solid black;/*Ukuran, tipe dan warna garis*/
-webkit-column-rule: 1px solid black;/*Ukuran, tipe dan warna garis*/

Kesimpulan : Dapat di ambil kesimpulan bahwa

column-width : /*Lebar kolom*/
column-count : /*Jumlah kolom*/
column-rule : /*garis pembatas*/
column-gap : /*harak kolom*/

Tambahan : Jangan lupa untuk membedakan antara -moz- untuk mozilla/firefox dan -webkit- untuk google chrome

Sekian pembelajaran kita hari ini. TERIMA KASIH !!!

Membuat efek Box Shadow di Blog

2010-08-28T13:23:00.000-07:00

Sebenarnya saya sudah pernah posting tentang hal ini, judulnya Memberi Efek Shadow Pada Gambar di Blog . Tidak ada bedanya dengan posting saya kali ini. Bedanya hanya di posting saya kali in akan membahasnya lebih detail tentang efek ini. Siapkan teh manis atau jika tidak suka kopi, susu juga boleh hehehe. Agar bisa santai belajarnya.. oke langsung saja.
Jika di post saya terdahulu kodenya berbentuk -moz-box-shadow: seperti itu iyakan? itu hanya berfungsi untuk mozilla/firefox saja. Nah untuk google chrome menggunakan -webkit-box-shadow: Gunakan kedua kode itu jika ingin menampilkan di kedua browser tersebut. Dan alangkah lebih baiknya jika anda menambahkan kode box-shadow: juga. Nah barulah masukan ke3 kode di atas kedalam style/css templates blog anda. Seperti ini

Contoh {
box-shadow:-5px -5px 10px #818181;
-moz-box-shadow:-5px -5px 10px #818181;
-webkit-box-shadow:-5px -5px 10px #818181;
}

Dan hasilnya akan seperti ini. Jeng-jeng.

Oops (18+ bro... wakaka)

Sekarang coba kita artikan kodenya satu per satu. Minum dulu tadi yang udah siapin hehe.

box-shadow:-5px(horizontal) -5px(vertikal) 10px(blur) #818181(color);

1. Horizontal berfungsi untuk membuat bayangan di bagian kanan/kiri box. Jika bernilai negatif (-5px)akan memberi bayangan di bagian kiri box dan jika bernilai postif (5px) akan memberi bayangan pada bagian kanan box
2. Vertikal berfungsi untuk memberi bayangan di bagian atas.bawah box. Nilai postif (5px) untuk bagian bawah box dan nilai negatif (-5px) untuk bagian atas box
3. Blur untuk memberi tingkat blur bayangan. Nilai 0 berarti tidak memiliki blur. Nilai positif untuk menambah bayangan dan nilai negatif untuk menyusutkan bayangan
4. Color adalah untuk warna bayangan box anda.

Sudah saya bahas secara detail tuh. Terima kasih untuk telah membaca posting saya jangan lupa commentnya ya oke. TERIMA KASIH

Cara Membuat Garis Melengkung (border-radius)

2010-08-28T12:33:00.000-07:00

Oke, serambi menunggu sahur saya akan mengajarkan pada anda bagaimana cara membuat garis melengkung di blog. Seperti yang ada di blog saya ini

Lihat di bagian judul sidebar, melengkungkan? bagaiman cara membuatnya? mudah sekali. Model melengkung seperti itu biasa di kenal dengan border-radius. Demo livenya seperti ini

Berikut ini adalah demo langsung untuk border-radius. Lihat di pinggiran/tepinya melengkung bukan? jika tidak berarti anda harus mengganti broser anda, karena CSS ini hanya untuk browser Mozila/Firefox, Google chrome atau Safari terbaru

Kode yang di gunakan seperti ini

<div style="-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; background-color: #ccc; border: 2px solid black; color: #000; font-family: Arial;padding: 5px;">
<span style="font-size:normal;">Berikut ini adalah demo langsung untuk <b><span style="color: black;">border-radius</span></b>. Lihat di pinggiran/tepinya melengkung bukan? jika tidak berarti anda harus mengganti broser anda, karena CSS ini hanya untuk browser Mozila/Firefox, Google chrome atau Safari terbaru</span></div>

Jangan lihat semuanya, kepanjangan haha. Kode yang berwarna merah itulah yang berfungsi untuk membuat lengkungannya. Oh iya...Itu terdiri dari 2 kode untuk 2 browser berbeda, yaitu mozilla/firefox dan google chrome. Untuk jelasnya -moz-border-radius: 10px 10px 10px 10px; kode inilah yang untuk mozilla/firefox. Lalu -webkit-border-radius: 10px 10px 10px 10px; inilah yang untuk google chrome. Perbedaannya hanya ada di depan kode yaitu -moz- untuk mozilla/firefox dan -webkit- untuk google chrome. Jadi pasanglah kedua kode itu jika ingin menampilkan lengkungan di ke 2 browser itu. Nah sekarang mari kita coba artikan kode tersebut secara gamblang hahaha, detail maksudnya.

border-radius: 10px(radius pojok kiri atas) 10px(radius pojok kanan atas) 10px(radius pojok kanan bawah) 10px(radius pojok kiri bawah);

Mengertikan? jadi jika ingin mengatur lengkungannya tinggal ubah saja angka 10px nya. Semakin kecil nilainya semakin kecil pula lengkungannya dan sebaliknya. Jadi jika ingin membuat salah satu pojok tidak melengkung tinggal ganti dengan angka 0. Mudahkan? mudah sekali.
Oh iya contoh jika ingin memasukannya kedalam templates, misalnya untuk judul sidebar seperti saya. Berarti tinggal menambahkanya kedalam kode h2 { seberti ini

h2 {
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
....
....
}

Oke sekian pembelajaran kita hari ini, saya akhiri wasalam :)

Cara Membuat Fixed Footer

2010-08-28T09:47:00.000-07:00

Buka footer-nya di buat fixed, tapi kita akan menambahkan fixed di bagian footer. Bingung? Ehmm lihat gambar di bawah ini!

Click to preview

Atau untuk demo livenya lihat di blog ini saja! Jika sudah mengerti mari kita bahas bagaimaan cara membuatnya.

1. Login ke blog anda > Design >> Edit HTML
2. Cari kode ]]></b:skin>
3. Copy paste kode ini di bawah kode ]]></b:skin>

#footer img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}
#footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}
#footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}
#footer a {
color: #333;
}
#footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}

6. Sekarang copy-paste kode di bawah dan letakan di atas kode </body>

<div id='footer'>

<p><img border='0' src='http://i388.photobucket.com/albums/oo322/arif_bucket/pavatar_large-2.png'/>  <a href='http://abi-galoga.blogspot.com/'>Dimas Abi Galoga</a> © 2008-2009  </p>

<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> | Gadget by <a href='http://abi-galoga.blogspot.com' target='_blank'>Abi-galoga</a><br/>Best viewed in Mozilla Firefox.
</p>

</div>

Ganti yang berwarna merah dengan milik anda sendiri

7. Save Templates.

Jangan cuma baca. Comment juga ya untuk kritik dan saran TERIMA KASIH !

Membuat Templates Mudah Dengan Templates Designer

2010-08-28T02:06:00.000-07:00

Salah satu fitur terbaru blogger adalah Templates Designer. Dengan fitur ini memungkinkan kita dalam membuat/memodifikasi templates. Dengan fitur ini anda bisa mengatur tata letak/layout blog anda dengan mudah, mengganti design blog anda, dll. Oke tidak usah panjang lebar, mari kita bahas fitur terbaru ini satu per satu :

1. Silahkan Log in ke blog anda > Design > Templates Designer

2. Jika Sudah, mari kita bahas satu per satu fitur dan fungsinya

Templates : Di sini anda bisa memilih templates sesuai keinginan anda. Ada 6 templates tersedia dan di setiap templates masih terbagi beberapa model lagi. Untuk contoh saya akan menggunakan templates Picture Windows

Background : Setelah anda memilih templates, anda dapat memilih background sesuai keinginan. Klik Background Image untuk memilih background. Ada 19 tema background, dan di setiap tema terdapat banyak background yang bisa anda pilih.

Ini adalah tampilan yang akan muncul saat anda mengklik Background Image

Layout : Layout terbagi menjadi 3, dan yang ini adalah body layout. Body Layout ini berfungsi untuk mengatur tata letak blog anda di bagian sidebar dan posting. Dengan ini anda dapat mengatur model sidebar dengan mudah.

Layout bagian ini adalah footer layout. Di sini anda dapat mengatur jumlah dan model footer dengan mudah. Misalnya anda ingin membuat footer anda 1 kolom, 2 kolom, atau 3 kolom sekalipun.

Layout ke tiga adalah adjust width. Di sini anda dengan mudah dapat mengatur lebar blog anda secara keseluruhan dan lebar sidebar juga.

Advanced : Di sini anda dapat mengatur segalanya seperti model text, warna text, penambahan CSS, dan lain-lain. Daftar Advanced berbeda-beda sesuai templates yang anda pilih tadi. Karena saya memilih model Picture Windows saya akan membahas Advanced ini saja.

Page Text : Berfungsi untuk mengatur jenis font, warna text, ukuran, dan juga model seperti bold / italic
Backgrounds : Berfungsi untuk mengatur warna background di bagian outer, header, dan post.
Links : Berfungsi untuk mengatur warna link. Link Color adalah warna link sebelum di klik, Visited Color warna link setelah/sudah pernah di klik, Hover Color warna link saat di sentuh mouse.
Blog Title : Untuk mengatur jenis, ukuran, model, dan warna font judul blog (header)
Tabs Text : Beberapa dari anda mengukin belum tau tabs text. Tabs Text adalah gadget yang terletak di antara header dan isi blog. Ini berfungsi untuk mengatur jenis, ukuran, model, dan warna font pada tabs.
Tabs Background : Untuk mengatur background tabs. Background Color untuk background gadget. Selected Color ini berfungsi untuk mengatur warna background tabs yang sedang di pilih. Maksudnya yang di pilih adalah jika anda menggunakan Pages blogger dan di letakan di bagian tabs.
Post : Title Font untuk mengatur font judul post. Footer Text untuk mengatur warna pada bagian footer post/bawah post. Border Color untuk mengatur warna garis tepi post.
Gadgets : Title Font untuk mengatur jenis font pada judul sidebar/gadget. Title Color untuk mengatur warna judul sidebar/gadget
Footer : Text Color untuk mengatur warna text di bagian footer. Gadget Title Color untuk mengatur warna pada judul gadget di bagian footer
Footer Link : sama dengan link, hanya yang ini untuk mengatur link bagian footer saja.
Add CSS : Ini berguna jika anda ingin menambah, menghapus, dan memodifikasi CSS pada templates anda

3. Jika Sudah selesai dengan modifikasi templatesnya, Silahkan kilik APPLY TO BLOG untuk savenya

Sekian untuk hari ini, semoga bisa bermanfaat untuk para pembaca. Terima Kasih

Cara Membuat Posting di Kotak Terpisah-pisah

2010-08-25T05:17:00.000-07:00

Jika waktu itu saya pernah posting Cara Membuat Sidebar Terpisah-pisah. Kini saya akan memberi tau cara membuat posting di kotak terpisah. Seperti apa? seperti gambar di bawah ini

Click to Preview Demo

Klik saja gambarnya untuk melihat demo langsungnya. Jika sudah lihat dan tertarik langsung saja saya ajarkan.

1. Login ke blog anda > design >> Edit HTML
2. Cari kode .post { --> Tips cari cepat dengan F3 / Ctrl +F

3. Letakan kode berikut di bawah kode .post {

Background:white;
padding:10px;
margin:15px 5px 20px 0;

Keterangan : 

Background:white; --> berarti posting memiliki background putih
padding:10px; --> Jarak antara tulisan dengan tepi 10px
margin:15px 5px 20px 0; --> Jarak kotak posting atas 15px, kanan, 5px, bawah 20px, dan kanan 0

4. Save Templates

Oke selesai pembelajaran kita, terima kasih ya dadah hehe

Award Pertama "BLOGGER SEJATI"

2010-08-25T01:41:00.000-07:00

Pulang sekolah liat kondisi blog, dan ternyata saya dapat award dari rekan blogger H4vYNEzZ. Terima kasih, ini adalah award pertama untuk saya hehe. Tapi ada aturan main dari Award Blog Sejati ini dan harus di taati juga, Yaitu kita (yang menerima award) di wajibkan memberikan award ini ke 10 teman kita lainnya. Dan saya memberikan Award ini ke 10 teman saya yaitu

Oh iya bagi teman-teman yang mendapat Award ini harus memposting awardnya dan mencantumkan sumber datangnya Award, ini adalah sumbernya :

Ganti no 2 menjadi no 1, no 3 menjadi no 2 dan seterusnya lalu di no 10 isi dengan blog anda. TERIMA KASIH SEMUA :))

Cara Mengetahui BFF Twitter Kita

2010-08-23T07:45:00.000-07:00

Tentu kalian sudah taukan apa itu BFF? ha?engga tau?oke saya kasih tau. BFF=Best Friend Forever (kalau engga salah sii). Tapi intinya BFF adalah best friend. Tapi cara ini sebenarnya lebih berpusat untuk mengetahui user siapa saja yang sering mantion kita hehe. Langsung saja. Step.By.Step

1. Buka site ini --> http://twitterbffs.com/
2. Klik tulisan Show my BFFs
3. Jika anda belum Login twitter biasanya akan di suruh login terlebih dahulu lalu klik Allow
4. Muncul halaman baru lalu klik Get BFFs
5. Barulah setalah itu anda akan di perlihatkan nama-nama user BFF twitter anda
6. Jika berhasil ucapkan Alhamdulillah :)

Singkat padat dan bermanfaat (mudah-mudahan) oke sekian Post saya hari ini saya akhiri wasalam

Cara Memberi Background Pada Quote Blog

2010-08-22T01:54:00.000-07:00

Sahabat saya dari SBS ada yang bertanya seperti ini "eh gw request cara buat area dong? yg ada quotenya itu loh". Tapi sayang belum begitu jelas dengan pertanyaannya dia sudah offline, maklum saja dia di Malang dan saya Jakarta hehe.Mungkin menurut saya yang dia maksud adalah seperti gambar di samping atau seperti Step.By.Step di bawah ini :

1. Login ke blog anda
2. Cari kode seperti ini (sekalian contoh quote)

.post blockquote {
........
.......
.......
}

3. Sekarang tambahkan kode Background:#ff0000;

Keterangan :

Kode tersebut berarti background sama dengan merah, Untuk merubahnya dengan warna lain ganti kode berwarna merah sesuai warna ke inginan anda, daftar warna bisa lihat di sini
Jika anda ingin memberi gambar sebagai background maka kodenya menjadi Background:url(alamat gambar anda);

Oke sekian dulu pelajaran kita hari ini, kita lanjutkan nanti kalau saya panjang umur hehehe. terima kasih

Membuat Fungsi Scroll Pada Blog Archive

2010-08-22T01:31:00.000-07:00

Memberi funsi scroll pada Blog Archive tentu akan sedikit menghemat tempat bagi blog yang memiliki banyak posting. Dengan cara ini juga dapat memanfaatkan Blog Archive sebagai daftar isi. Oke langsung saja kita bahas Step.By.Step :

1. Log in ke blog anda

2. Pilih Design/Rancangan > Tambah Gadget Blog Archive terlebih dahulu

3. Save Templates lalu masuk ke bagian Edit HTML

4. Beri tanda centang Expand Widget Templates

5. Sekarang cari judul Blog Archive anda

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>

6. Perhatikan kode berwarna merah di atas, ganti kode tersebut dengan

<div class='widget-content' style='overflow:auto; height:200px;'>

Keterangan : Kode merah di atas berarti tinggi widget, dapat anda ganti sesuai keinginan anda

7. Save Templates dan lihat hasilnya

Selamat Mencoba

Cara Membuat Read More Langsung dari Blog

2010-08-20T08:11:00.000-07:00

Setelah posting terdahulu saya tentang Cara Membuat Read More atau Cara Membuat Read More Otomatis . Sekarang saya memperkenalkan cara baru, cara ini sangat mudah sekali, karena cara ini menggunakan fasilitas terbaru dari blogger langsung. Bagaimanakah caranya? langsung saja di bahas Step.By.Step

1. Login ke blog anda

2. Klik New Post untuk membuat post baru

3. Seperti biasa tulis judul post, lalu isi postnya

4. Untuk membuat read morenya anda perlu melakukan pemotongan pada bagian isi post. caranya? lihat gambar berikut

Click To Preview

5. PUBLISH POST

Selesai, simplekan? lebih mudah. oke langsung di praktekin sajalah kalau begitu

Cara Mengganti Background Twitter

2010-08-19T01:10:00.000-07:00

Kemarin saya sudah tidak posting, karena saya bingung mau posting apa? nah dari pada bingung-bingung lebih baik saya porting ini saja, Cara Mengganti Background Twitter. Mungkin beberapa dari anda sudah tau cara ini. Tapi bagi yang tidak tau engga perlu panik, saya akan mengajarkannya. oke langsung saja ke Step.By.Step

1. Login ke Twitter anda

2. Masuk ke Setting/Pengaturan

3. Masuk ke Design

4. Silahkan pilih tema Twitter anda

Sudah gantikan backgroundnya? gitu doang? kalau mau ganti pake foto/gambar kita sendiri gimana? sabar dulu, kita lanjut ke step 5

5. Jika ingin menggnti background dengan foto/gambar kita sendiri anda lihat di bagian paling bawah Design

6. Klik Change background image

7. Klik Browse, dan pilih foto/gambar anda yang ingin di jadikan background

8. Save Changes

Selesai, mudahkan? oke langsung di praktekin sob haha

Mereka Bisa, Kita Pasti Lebih Bisa

2010-08-17T02:50:00.000-07:00

Bersyukurlah atas apa yang telah tuhan berikan kepada kita. Jangan mengeluh atas kekurangan kita, tapi cobalah tutupi kekurangan kita dengan kelebihan kita. Tuhan telah menciptakan kita dengan kekurangan dan kelebihan masing-masing. Setelah menonton video tadi. Kita harus berpikir, jika mereka bisa, kita pun pasti bisa :)