Cara Membuat Tombol Share Melayang

Untuk mengisi posting kali ini penulis akan memberikan tutorial mengenai widget share social button di blog yang dapat mempercantik tampilan blog sobat, namun untuk kali ini bentuk share social buttonya letaknya berada di side bar blog, dengan efek loop ketika kursor mouse di arahkan ke social buttonnya, penasaran berikut penampakanya

Baiklah bagi yang berminat untuk mengaplikasikannya di blog sobat, berikut cara membuat tombol share melayang.

1. Masuk ke Blogger 
2. Masuk ke pilihan Template lalu pilih edit HTML jangn lupa untuk memback up template sobat terlebih dahulu
3. Centang Expand Template Widget
4. Cari kode berikut  
   ]]></b:skin>
5. Kemudian Copy - paste kode CSS berikut, tepat diatas kode yang sudah sobat cari tadi  

   .flt-wdt {
   position: fixed;
   right: 5px;
   top: 40%;
   }
   .flt-wdt img {
   float: right;
   clear: right;
   margin: 5px;
   -moz-transform: scale(.8) ;
   -webkit-transform: scale(.8) ;
   -o-transform: scale(.8) ;
   -ms-transform: scale(.8) ;
   transform: scale(.8) ;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
   }
   .flt-wdt img:hover {
   -moz-transform: scale(1.1) rotate(6deg);
   -webkit-transform: scale(1.1) rotate(6deg);
   -o-transform: scale(1.1) rotate(6deg);
   -ms-transform: scale(1.1) rotate(6deg);
   transform: scale(1.1) rotate(6deg);
   }

6. Kemudian buat widget baru >> masuk ke Tata Letak 
7. Kemudian pilih Buat widget baru >> HTML/ Java script
8. Copy - paste kode di bawah ini  

   
   <div class='flt-wdt'>
     <!-- Twitter -->
     <a href='http://twitter.com/blogger_raju' target='blank'><img alt='Twitter' height='48' src='https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png' width='48'/></a>
     <!-- Facebook --> 
     <a href='http://www.facebook.com/Blogger.Tutorials' target='blank'><img alt='Facebook' height='48' src='https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png' width='48'/></a>
     <!-- RSS --> 
     <a href='http://feeds.feedburner.com/om-simplebloggertutorials' target='blank'><img alt='Feed' height='48' src='https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png' width='48'/></a>
   </div>
   
   

9. Keterangan :

• Untuk Tulisan berwarna merah dan di coret pada kotak di atas, silakan ganti dengan url ID facebook, twitter dan feedburner sobat 

Demikian, yang bisa penulis bagikan, semoga dapat bermanfaat..

Tweet

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di baca31.blogspot.com