Cara Memasang Tombol Follow Us Animasi di Blog

 
           Cara Memasang Tombol Follow Us Animasi di Blog ~ Sudah beberapa bulan saya tidak membuka blog dan tidak menulis artikel diblog terasa sepi sekali ketika masuk blog saya langsung terinspirasi ingin menulis kembali artikel mengenai cara memasang tombol follow us animasi di blog, pertama kalian harus masuk dulu ke Blog :
1. Log In to Blogger
2. Klick Tata letak dali halaman blog anda
3. Buatlah widget baru dengan mengKlick tombol add Gadget/Tambah Gadget
4. Setelah itu masukan source kode dibawah ini kedalam gadget yang sudah ditambahkan :

          <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/AVvXsEhmuRuuaVDJxe4qOsmJ3Hj7QAPS0X6iMvBcyUKBBUDW1xAlsRZvK2wFhoRqZ0YHBz5uEx0jjg89XldfhqHcRBcOU5I2iX6a662KKGJXZAHZBDAAD2XvOwt1cnSjRlen6OWYuqtbqEPpjAk/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="https://www.facebook.com/pages/Flasmaweb/223059397834098" >Follow us on Facebook</a></li>
    <li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://twitter.com/YOUR_USERNAME"  target='_blank'>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="http://feeds.feedburner.com/blogspot/MYOLH" >Subscribe with RSS</a></li>
    </ul><small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="
    http://flasmaweb.blogspot.com" title="Widget Follow Us">+ Get Widget </a></div></small>

 5. Simpan kode tersebut dengan mengklick tombol SAVE dan lihat hasilnya kurang lebih akan seperti ini :

     Sebenarnya bukan tampilan follow seperti diatas saja yang bisa digunakan masih banyak lagi, ini hanya sebagai sampel dan salah satu yang penulis sukai jadi saya memilih ini untuk diposting selamat mencoba.