Cara Membuat Tombol Sosial Media Keren Di Blog


Hello sobat Cimanggis Software selamat malam . Pada postingan malam hari ini saya akan share tutorial blogger nih namanya Cara Membuat Tombol Sosial Media Keren Di Blog .Yaps menurut saya widget ini keren + bagus  banget dengan fitur fitur CSS Sprite dan efeknya itu loh bikin greget hahah

Fitur Dari Widget ini :
  • Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS
  • Efek memperluas ke samping
  • Penggunaan CSS sprite
  • Sangat rapi dan bersih
Langsung Saja Ikutin Caranya :

  • Langkah Pertama Login Dulu Akun Blogger Sobat
  • Ke DashBoard > Tata Letak > Tambah Gadget > pilih Html /Java Script 
  • Copy Script di Bawah Ini dan Paste di Html/java script
<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://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/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://cimanggis-software.blogspot.com/" target="_blank" title="Widget Follow Us">Widget By </a></div></small>

Nb : Untuk kode yang bewarna Biru Silahkan Sobat Ganti dengan Url/alamat masing masing media sosial sobat

  • Simpan Dan akan menjadi seperti ini


Semoga Bermanfaat :D
Regards,Admin Muhammad Danny Waskito

Share this

Related Posts

Previous
Next Post »

1 komentar:

komentar
30 Juni 2013 18.59 delete

Wah keren nih ... namun ini sangat menghabiskan tempat gan .... commentback di www.novaibnu.com

Reply
avatar

Admin Blog Cimanggis Software Tidak selalu Online 24 Jam untuk memantau Komentar yang Masuk, Jadi tolong berikan Komentar Sobat dengan Baik,Sopan Dan Jelas

No SARA, SPAM DLL

Blogger Bijak Selalu Ninggalin Komentar !

Terima Kasih Atas Kerja Samanya!

Admin Cimanggis Software