Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

Cara Membuat Floating Button Media Sosial valid HTML 5 di Blogger

Valid HTML 5 Tombol Share Melayang
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.


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
Artikel Terkait Lainnya:
Click here for comments

7 komentar

Ga bisa gimana gan? ga muncul sama sekali?
klo semua penempatan kodehtm,js benar seharusnya bisa gan
coba cek <data:post.body/> ada berapa ditemplate agan
lebih spesifik gan lebih enak

REPLY

sorry mas kesalahan ada di kode html saya, kurang tag </div>
kode sudah diupdate, coba lagi gan
thanks udah confirmnya:)

REPLY
Komentar ini telah dihapus oleh administrator blog.

artikel menarik,mohon kunjungan baliknya gan
www.mbahgahol.blogspot.com
follow aja nnti saya followbalik blog agan

REPLY
Komentar ini telah dihapus oleh administrator blog.

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|