CARA ICON MEDIA SOSIAL ADA DI BLOG KITA
Contoh bisa dilihat di blog: erwinkohar1.blogspot.com
Penambahan
icon sosial media berbentuk sprite untuk blog. Yang mana bisa mempercantik blog
dan mempopulerkannya, karena dilengkapi akses langsung ke facebook, twitter,
google+ dan lainnya hanya dengan sekali klik. Langsung saja bisa dilihat caranya di bawah ini
:
1. Masuk
ke Blogger.com
2. Klik
Template --> Ubahsesuaikan --> Tingkat Lanjut --> Tambah CSS. Lalu
kamu masukkan kode CSS di bawah ini kedalam kotak CSS tersebut.
/*Social Sprite Css*/
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKIAdnj77sRGOyEu6dZJL8CehIg5D6IE7v-IWzn8FPqyP_Of4tBG15xqJxJZMTY0x_KHIVnMI3f85i6aWSv0ZEKxVVynC5yaY9jrZBn2pG-IrKIpiFgf6gmaWLNCEF-0_pxIkDEn24vvGX/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}
#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}
#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}
#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}
#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}
#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}
#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}
#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
/*Social Sprite Csshttp://www.hzndi.blogspot.com */
/*Social Sprite Css http://www.spiceupyourblog.com */
3. Klik
Terapkan ke Blog, setelah itu kamu klik bagian Tata Letak.
4. Di
bagian Tata Letak, kamu klik Tambah Gadget --> HTML/Javascript --> Dan
kamu masukkan kode Javascript di bawah ini.
Read more: erwinkohar1.blogspot.com
5. Catatan bisa diganti yang berwarna biru, diatas selera kamu
Semoga sukses, bermanfaat
Tidak ada komentar:
Posting Komentar