Media Sosial Sidebar Blog dengan CSS Sprite

Media Sosial  Sidebar Blog dengan CSS Sprite  - Pada kesempatan kali ini saya akan sedikit berbagi tutorial Cara memasang widget Media Sosial  Sidebar Blog dengan CSS Sprite. Yuk disimak!

Media Sosial  Sidebar Blog dengan CSS Sprite

Widget media sosial untuk sidebar berikut ini menggunakan gambar/image CSS Sprite --yaitu menggabungkan gambar icon medsos menjadi satu file-- sehingga LEBIH Fast Loading:

1. KODE CSS
Dipasang di atas kode ]]></b:skin>
#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(http://1.bp.blogspot.com/-IWFniHoyd3A/T-YdTpaOuKI/AAAAAAAAG-0/tB_K-9hn02U/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}
#head-soc li#g a {background-position: 0px -32px;}
#head-soc li#g a:hover {background-position: 0px 0px;}
#head-soc li#rss a {background-position: -32px -32px;}
#head-soc li#rss a:hover {background-position: -32px 0px;}
#head-soc li#sub a {background-position: -64px -32px;}
#head-soc li#sub a:hover {background-position: -64px 0px;}
#head-soc li#fb a {background-position: -96px -32px;}
#head-soc li#fb a:hover {background-position: -96px 0px;}
#head-soc li#twit a {background-position: -128px -32px;}
#head-soc li#twit a:hover {background-position: -128px 0px;}
#head-soc li#li a {background-position: -160px -32px;}
#head-soc li#li a:hover {background-position: -160px 0px;}
#head-soc li#youtube a {background-position: -192px -32px;}
#head-soc li#youtube a:hover {background-position: -192px 0px;}

1. KODE CSS
Dipasang di atas kode ]]></b:skin>
<!--Social Sprite Html-->
<div id="head-soc" style="margin: 0 0 20px -10px">
<ul>
<li id="g"><a href="https://plus.google.com/ID ANDA/posts" target="-blank">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/CSCBLOGGER" target="-blank">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=CSCBLOGGER" target="_blank">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/ADAMSYFDOTNET" target="-blank">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/ADAMSYF" target="-blank">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/in/ADAMSYF" target="-blank">LinkedIn</a></li>
<li id="youtube"><a href="https://www.youtube.com/user/ADAMSYF" target="-blank">YouTube</a></li>
</ul>
</div>

Jika cara diatas masih belum pas dihati, desain bisa anda ubah sesuai keinginan terutama untuk besar kecilnya icon. Demikian tutorial Cara memasang widget Media Sosial  Sidebar Blog dengan CSS Sprite semoga bermanfaat ya!


Belum ada Komentar untuk "Media Sosial Sidebar Blog dengan CSS Sprite"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel