Floating Tombol/Button Share Sosial Media

Pasang Widget Floating Tombol/Button Share Social Media di setiap Postingan

Floating Button Share Sosial Media

Kalau sebelumnya proBlogiz membagi tutorial cara memasang Tombol/Button Share Sosial Media Di Posting yang bertype bar button share, kali ini adalah cara memasang Floating Tombol/Button Share Sosial Media di setiap postingan. Floating button share jenis Mashable atau buton share mengambang / melayang ini terdiri dari tombol/button sosial terbaik seperti Facebook Share / Like, Twitter dan Google +1 ( 3 in 1 )

Floating button share ini murni menggunakan CSS dan kode HTML dan sepenuhnya kompatibel dengan semua browser utama. Anda akan melihat widget ini nempel di kiri dari posting blog. Saya telah mencoba untuk membuat agar proses instalasi / pemasangan widget button share ini semudah mungkin agar mudah buat Anda dalam memahami dan membuat floating tombol/button share sosial media untuk keperluan blog Anda.

Langkah Pasang Widget Floating Tombol/Button Share Sosial Media di setiap Postingan

1. Masuk Blogger > Tata Letak

2. Pilih add HTML/JavaScript widget

3. Copy kode berikut dan pastekan semua dalam widget

<style>
/*-------proBlogiz Sharing Widget------------*/
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="problogiz">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://problogiz.blogspot.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>

Kostum :

Untuk menyelaraskan widget lebih ke kiri atau kanan edit nilai ini margin-left: 70px-; Semakin kecil nilai angka akan menggeser widget ke kanan dan semakin besar nilai akan bergeser ke kiri.Untuk mengubah warna latar belakang widget floating edit background: # fff;

Gunakan generator warna HTML atau grafik warna untuk memilih warna.

4. Drag atau geser widget baru tersebut tepat dibawah post body, seperti gambar dibawah :

5. Save / Simpan

Sekarang bisa dilihat Floating share sudah menggantung di blog Anda.

Membuat agar widget floating share hanya tampil pada postingan saja

Untuk membuat agar widget floating share hanya tampil pada postingan saja, ikuti tutrial berikut :

1. Blogger > Template > Edit HTML

2. Backup template Anda

3. Check Expand Widgets Templates Box

4. Cari judul widget floating share Anda ( gunakan / tekan F3 )

Sebelumnya beri judul sementara widget baru Anda, misalnya: "Floating Share"

5. Kode widgetnya kurang lebih seperti berikut dibawah ini :

<b:widget id='HTML7' locked='false' title='Floating Share'  type='HTML'>
<b:includable id='main'>
..............
</b:includable> </b:widget>

Setelah Anda menemukan kode seperti diatas (judul widget floating share) kemudian tambahkan dua kode berikut warna biru tepat di bawah atau antara teks berwarna merah. Sebagai contoh jika Anda ingin menampilkan widget pada halaman postingan saja jadikan seperti ini kodenya :

<b:widget id='HTML7' locked='false' title='Floating Share'  type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
..............
</b:if>
</b:includable> </b:widget>

6. Save Template

Sekarang widget floating share Anda hanya tampil di halaman postingan saja

Untuk penjelasan lengkap cara menampilkan dan menyembunyikan widget di Blogger baca artikel Tampilkan Widget Pada Halaman Tertentu

Selesai

Salam, jika Anda suka artikel Pasang Widget Floating Tombol/Button Share ini monggo di-tweet saja atau di-like juga boleh....thank's bro