Cara Membuat Tombol Social Media di Sidebar Blogger

Cara Membuat Tombol Social Media di Sidebar Blogger

Posted by Unknown

Selasa, 21 Januari 2014

Tips Blogger

Halo Sobat Venom'ers ,


Kali ini saya mau posting tentang tips Blogger  yang bermanfaat dan juga keren pastinya .. , setelah sebelumnya saya memposting Download CCleaner professional 4.06.4324 full serial.

saya beri penjelasan sedikit tenetang widget ini .. , jadi widget ini berisi tombol - tombol social media yang sudah umum diteinga para blogger sekalian .. yaitu , facebook, twitter, goggle +, pinterest dan juga tidak lupa subscribe lewat Rss . ini sudah saya pasang di sidebar blog saya .. dan tidak memeberatkan loading blogger sobat atau biasa disebut SEO friendly .. (^_^)

Langsung aja deh cekidot ....

1. Login ke akun blogger sobat ..
2. Pilih menu Tata Letak ..
3. Pilih Tambahkan Gadget...
4. pilih HTML / Java Script 
5. Lalu Copy Paste Code Ini Di kolom keduanya ...

<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/AVvXsEisBtu5KGisPBPLA1spJyJNzN3n02llKkB091h5uymMM8TLlO3OlJ1WKyJrOVJLhyXVfcKzkmN6x02B-zKLH8lgoVRZjkynQB6UvwM9gB4OX9VLkcLHIfXt7zI4pNQkAOmHTgGS_UZUqXI/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="http://www.facebook.com/anggi.moxer/">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/anggi_moxer">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/104876065208377114841">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://www.pinterest.com/anggi9b03sooko1/">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/Not">Subscribe with RSS</a></li> </ul><small></small>
<small><a href="http://anggivenom.blogspot.com/2014/01/halo-sobat-venomers-kali-ini-saya-mau.html" target="_blank">Get This Widget Here!!!</a></small>

Penting !!! 

ubah kode yang berwarna Kuning dengan akun Social media sahabat blogger masing - masing ..

6. selesai , tekan tombol simpan ...

Semoga Bermanfaat ... (^_^)