Cara Membuat Widget Sticky Valid HTML5

Cara Membuat Widget Social Sticky Valid HTML5 . Update tahun baru 2015 :), sobat blogger gimana nih malem tahun baru kalian? pasti kalo yang sudah punya do'i sudah nyiapin rencana dari awal untuk jalan-jalan bareng someone..! wah seru ya..!! oia gimana juga kabar-nya untuk para jomblowers? hemm.. pasti kalo untuk jomblower itu harapannya pada ngarep malem tahun baru itu bisa turun hujan yang lebat ya? hehe becanda, tapi jomblower jangan sedih ya, karena menurut saya para jomblowers itu sejatinya adalah orang yang mempunyai prinsip yang kuat, karena dia hanya memberikan cintanya hanya untuk cinta sejatinya saja, So..key to be lasting in love is a consistent belief ..! Maaf ya agak menyimpang, sekarang kembali ke topik..

Sobat blogger kali ini saya ingin berbagi sebuah tutorial tentang cara membuat widget social media sticky keren dan sudah valid HTML5 , jadi widget ini berisi social button yang di  terapkan sekaligus di satu kolom widget, untuk kegunaan widget ini sendiri, tentu saja untuk menambahkan followers kita dan untuk penampakannya silahkan lihat gambar di bawah ini.

Nah itu adalah contoh untuk gambarnya, kalo mau lebih jelas bisa lihat di sidebar blog saya, karena saya juga menggunakan widget ini dan jika anda juga tertarik untuk memasangnya silahkan ikuti tutorial yang saya berikan :

Cara Membuat Widget Social Sticky Valid HTML5.
1. Buka akun blogger anda
2. Pilih Menu Template > Klik Edit HTML.
3. Sekarang letakan kode di bawah ini tepat di atas kode </body>

 
 <script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
$(document).ready(function(){
    $("#on-top").sticky({topSpacing:0});
      });
    </script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'>
//]]>
</script> 

4. Klik Save template anda.
5. Sekarang Pilih Menu Tata Letak > Add Gadget > HTML/Javascript dan paste kode di bawah ini di kolom.

<div id="on-top"><div style="background:#3498db;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;"><a href="http://www.blogger.com/follow-blog.g?blogID=ID-BLOGGER" target="_blank" title="Follow this blog"><span style="color:#fff">Join</span> <span style="color:#000">Now</span></a></div><div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'><div style='background:#fff;margin:0;'><div class="fb-like-box" data-href="https://www.facebook.com/ID-FACEBOOK" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div><div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/ID-TWITTER" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @NAMATWITTER</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://www.madamvia.web.id/"></div></div></div><div class="g-person" data-href="//plus.google.com/ID-GOOGLE+" data-layout="landscape" data-rel="author"></div></div>

Silahkan anda ubah yang saya tandai biru sesuai ID anda dan klik save template.

Selesai, nah itulah tutorial cara membuat widget  button social di sidebar blog anda, oke sobat, atas rasa syukur yang sedalam-dalamnya kepada Allah SWT,mari kita ucapkan Alhamdulillah dan semoga di malem tahun baru ini tahun 2015 dan untuk kedepannya, semoga kita menjadi manusia sebaik-baiknya manusia, yang pasti semoga kita menjadi lebih baik dari tahun sebelumnya, lebih sukses, paling utamanya semakin taat kepada sang khaliq.. selamat malam..

Share to:

Google+ Facebook Twitter