Cara Membuat Widget Profil Social Media Dengan CSS3

Artikel kali ini adalah Cara Membuat Widget Profil Social Media Dengan CSS3 dengan adanya widget ini di blog anda, anda dapat meningkatkan pengunjung di social media dan reputasi blog anda dengan cara anda dapat memancing pengunjung blog untuk bergabung dan terlibat di Fanspage atau komitas blog anda di social media untuk mendapatkan update artikel menarik dan terbaru dari blog anda.

widget ini juga memiliki fitur yang sangat menarik yaitu :

• Terdapat empat tombol social media dan di tambah dengan tombol RSS.
• Efek memperluas secara mulus dengan penggunaan Hover.
• Menggunakan CSS Sprites.
• Asli CSS, tanpa JavaScript dan JQuery.
• Rapi, bersih dan enak di pandang.

Berikut cara pembuatannya :

1. Tataletak.
2. Tambahkan Widget.
3. HTML/JavaScript.
4. Masukkan kode di bawah ini.
5. Save.

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7FjPslOfL6IAVXHW84TJ7AAZZkIdeKEGZBFlXMKaU9ZS0F-Ck2p8uV0K6KfQnaUMTDZnwjjVTiF7_yaIONAqpg2jFWvQGtKLgqnECGBmHPwLbeq_DXoMvB99mRKqCzIfRhwSVSCR4g4/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://bloganzblog.blogspot.com/2013/07/cara-membuat-widget-profil-social-media-css3.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Keterangan :

• Merah ganti dengan ID Facebook anda.
• Orange ganti dengan ID Twitter anda.
• Hijau ganti dengan ID Google+ anda.
• Biru ganti dengan ID Pinterest anda.
• Ungu ganti dengan ID FeedBurner anda.

DEMO

• Follow us on Facebook
• Follow us on Twitter
• Follow us on Google+
• Follow us on Pinterest
• Subscribe with RSS

Terima kasih telah membaca : Cara Membuat Widget Profil Social Media Dengan CSS3