Cara Membuat Tombol Share Melayang di Blog

Cara Membuat Tombol Share Melayang di Blog- Apakah Anda pernah melihat di blog Wordpress menggunakan tombol share melayang?. Sekarang saatnya Blogger untuk menambahkan bagian widget tombol melayang. Dalam tutorial ini saya akan memberitahu Anda metode yang dapat digunakan untuk menerapkan widget ini ke Blogger dengan menggunakan fitur dari jQuery. Ini akan muncul di luar bagian posting Anda dan saat Anda menggulir halaman, widget ini juga akan bergeser dengan beberapa efek animasi.
Lalu bagaimana cara membuatnya atau memasangnya pada blog kita? ikuti tutorial dibawah ini :

1. Pergi ke Desain> Edit tab HTML dan centang "Expand Template Widget". Cari <data:post.body/> dan tambahkan kode di bawah ini sebelum kode tersebut:
   

   <b:if cond='data:blog.pageType == "item"'>
   <div id='sharebox'>
   <div class='wdt'> Tweet Tombol </ div>
   <div class='wdt'> Facebook Berbagi </ div>
   <div class='wdt'> StumbleUpon </ div>
   <div class='wdt'> Digg </ div>
   <div class='wdt'> Tombol bookmark yang ingin Anda tambahkan berikutnya </ div>
   </ Div>
   </ B: if>

   Tambahkan script tombol share diantara "<div class='wdt'> menambahkan kode tombol saham </ div>". Anda dapat mendapatkan kode script dari situs bookmark yang ingin Anda tamambahkan. Berikut adalah contoh bagaimana untuk menambahkan kode:
   

   <div class='wdt'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"> </ script> </ div>

2. Tambahkan jQuery setelah kode ]]></b:skin>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/ 1.6.2 /jquery.min.js' type='text/javascript'> </ script>


3. Berikutnya adalah dengan menambahkan JavaScript yang akan membuat kotak share melayang dengan menambahkan " .ready() "fungsi.
   copy kode brikut ini :
   

   <script type='text/javascript'>
   $ (Dokumen) siap (function (). {
   
   var $ sidebar = $ ("# sharebox"),
   $ = $ Jendela (window),
   offset = $ sidebar.offset (),
   topPadding = 15;
   
   $ Window.scroll (function () {
   if ($ window.scrollTop ()> offset.top) {
   $ Sidebar.stop () bernyawa (. {
   marginTop: $ window.scrollTop () - + offset.top topPadding
   });
   } Else {
   $ Sidebar.stop () bernyawa (. {
   marginTop: 0
   });
   }
   });
   
   });
   </ Script>

   dan tambahkan sebelum kode </head> :
   


4. Sekarang adalah bagian CSS. Tambahkan script di bawah ini styling di atas ]]></b:skin> :
   

   # Sharebox {
   float: left;
   margin-left: 80px-;
   background: # 992211;
   position: absolute;
   -Moz-border-radius: 5px;
   border-radius: 5px;
   }
   # Sharebox. Wdt {
   float: left;
   jelas: kiri;
   padding: 5px;
   }
   

5. Simpan template Anda dan lihat hasilnya.

Artikel Terkait Blogging

• Cara Mengetahui Blogger Sekota atau Sedaerah
• Cara Membuat Spoiler di Blog
• Cara Membuat ReadMore Otomatis di Blogger
• Cara Bikin Kotak Dengan Sudut Melengkung
• Cara Mudah Membuat Menu Tab View di Blogspot
• Cara Mudah Menghilangkan Read More Otomatis Pada Laman Blog
• Membuat Icon Burung Twitter Berterbangan di Blog
• Cara Menambah Gambar Sebelum Judul Posting
• Cara Membuat Footer 3 Kolom di Blogger
• Cara Mengganti Template Blog
• Cara Membuat Blog agar SEO Friendly
• Cara Menambahkan Gambar Background Pada Blog
• Cara Membuat Tombol Share Melayang di Blog
• Cara Menambahkan Google Analytics di Blogger
• Cara Membuat Slideshow Postingan Blog