Cara Membuat Social Network Dengan Css 2013

Sahabatkudhen.com - Selamat malam,pada postingan sebelumnya saya menjelaskan tentang Cara Merubah Gambar Anonim Komentar Blogger dengan Css . Nah pada postingan kali ini saya akan posting lagi tentang Tutorial Blogger,atau memperindah tampilan blogger sobat. Sebenernya saya bingung mau ngasih judul apa pada postingan ini,tetapi dari pada bingung lebih baik saya kasih judul Cara Membuat Social Network Dengan Css. Jadi aku kasih nama itu saja karena postingan kali ini hanya bermodal css. Untuk demonya coba liat di bawah ini lalu lihat di sidebar blog demo itu .

DEMO

Bagaimana demonya?? Kereen Gak?? Nah jika sobat berminat bisa ikutin langkahnya di bawah ini,caranya sangat mudah . Berikut Caranya :

1. Login ke akun Blogger.com sobat
2. Pilih Template
3. Edit html
4. Cari kode ]]></b:skin>
5. Kemudian copy kode di bawah lalu pastekan di atas kode ]]></b:skin>.

/* Sahabat Kudhen */
#kudhen { width:258px; padding:0 }
#kudhen a { color:white; font-size:120% ;transition:  .3s ease-out;-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;}
#kudhen .fb { background-color:#3b5998; border:1px solid #333; display:block; width:100%; padding:10px 20px; margin:0 0 5px }
#kudhen .tweet { background-color:#4099ff; border:1px solid #333; display:block; width:100%; padding:10px 20px; margin:0 0 5px }
#kudhen .follow { background-color:#C13636; border:1px solid #333; display:block; width:100%; padding:10px 20px; margin:0 0 5px }
#kudhen .fb:hover { background-color:#666 }
#kudhen .tweet:hover { background-color:#666 }
#kudhen .follow:hover { background-color:#666 }

6. Setelah itu Save. Sampai disini belum selesai masih ada 1 tahap lagi.
7. Selanjutnya pergi ke Tata Letak - Tambah Gadget - Html/Javascript .
8. Setelah itu copy kode di bawah ini lalu pastekan pada kotak kosong yang tlah sobat siapkan tadi di langkah no 7.

<div id='kudhen'>
<a class='lightbox fb' href="http://www.facebook.com/downloadgratiss" target="_blank">Kudhen On Facebook</a>
<a class='lightbox tweet' href="https://www.twitter.com/Kudhen" target="_blank">Kudhen On Twitter</a>
<a class='lightbox follow' href="http://www.blogger.com/follow-blog.g?blogID=5737168121078217408" target="_blank">Follow This Blog</a>
</div>

9. Lalu Save dan Lihat hasilnya.

Keterangan :

1. Tulisan yang berwarna Merah dan biru tulis sesuai yang punya sobat.
2. Tulisan yang warna kuning ganti dengan ID blog sobat.
3. Selesai..

#SEMOGA BERMANFAAT