Valid HTML 5 Tombol Share Melayang

Cara Membuat Floating Button Media Sosial valid HTML 5 di Blogger

Baiklah Sob, setelah Anda memahami cara membuat button/tombol share Valid HTML 5 Google Plus, Facebook Like, Twitter. Sekarang saatnya membahas bagaimana penerapannya button/tombol media sosial tersebut di setiap halaman posting blog kita. Widget Floating Button/Tombol Sosial Share yang jadi pembahasan kali ini, adalah Floating Button Share (Tombol Share Melayang) tepat disebelah kanan atau kiri halaman posting. Penambahan script JavaScript Asynchronously pada setiap button share (G +, Facebook Like, Tweet) akan membuat loading halaman posting (konten) lebih cepat, prinsipnya scripts asynchronously ini , memungkinkan halaman atau konten dimuat terlebih dahulu (pemakaian share button tersebut tidak mengganggu loading konten), orang akan membaca konten terlebih dahulu bukan?

Sebenarnya Tombol Share Melayang ini adalah hasil modifikasi dari Mashable Floating Button Share, yang telah tayang dipostingan yang lalu. Untuk Preview/DEMO widget ini dapat dilihat setiap halaman post blog ini sebelah kiri main post.

DEMO

Berikut langkah-langkah cara membuat Floating Button Share valid HTML 5:

Langkah Pertama

Masuk Blogger > pilih Template
Back Up Template > edit HTML > Check "Expand Widget Templates" Box
Lanjutkan > Tekan Control + F
Cari kode <data:post.body/>
Copy kode berikut dan letakkan sebelum/diatas kode <data:post.body/>

<div id='sharebox'> <div class="wdt"> <a class='twitter-share-button' data-count="vertical" href='http://twitter.com/share'> Tweet </a></div> <div class="wdt"> <div class='g-plusone' data-size='tall'></div> </div> <div class="wdt"> <div class="fb-like" data-layout="box_count" data-send='false' data-show-faces='false'></div> </div> </div>

Jangan lupa pasang script "Asynchronous JavaScript loading" untuk button share Google Plus, Twitter dan Facebook Like, caranya bisa dilihat lagi artikel Valid HTML 5 Google Plus, Facebook Like, Twitter Button Share

Note : jika terdapat lebih dari satu kode <data:post.body/> pada template Anda, pilih yang pertama. Kalau tidak berhasil coba yang kedua.

Langkah Kedua

Copy kode jQuery berikut dan letakkan tepat di bawah tag ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
Jika Anda sudah memasang jQuery libarary min., lewati langkah ini.

Langkah Ketiga

Tambahkan kode CSS berikut tepat diatas tag ]]></b:skin>

#sharebox { float: left; position: absolute; width: 70px; background: #ffffff; box-shadow: 0 -1px 1px rgba(98, 170, 204, 0.28), 0 1px 1px rgba(19, 99, 102, 0.31), 2px 0 120px rgba(51, 128, 131, 0.15) inset; border: 1px solid #dedede; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; left: 0%; height: 200px; height: auto; } #sharebox .wdt { float: left; clear: left; padding: 5px; }

Aturlah dan sesuaikan kode yang berwarna dengan kondisi blog Anda.

Important!!

1. Aturlah nilai "left: 0%" sesuai dengan lebar container blog posting (main) jika tidak sesuai tampilan yang diinginkan. Semaikin besar nilainya posisi sharebox akan semakin kekanan, set nilai "0 %" untuk test.
2. Jika mengalami masalah diblog Anda, gantilah "left:0%" menjadi "margin-left=0px;", Anda bisa menggunakan nilai/value min, misalnya "margin-left= -20px;" (intinya sesuaikan dengan lebar container dan pasang posisinya sesuai keinginan)

Langkah Keempat

Copy kode script scrolling ini dan letakkan tepat diatas tag </head>
<script type='text/javascript'> $(document).ready(function() { var $sidebar = $("#sharebox"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); </script>

Langkah Kelima

Save Template And That's All
Sekarang Anda bisa menikmati Widget Button/Tombol Share Melayang yang Valid HTML 5 di setiap halaman posting Anda.

Good Luck!!
UPDATE:15 Des 2013