Cara Membuat Tombol Social Share Melayang di Bawah Judul Postingan Blog

Salah satu cara terbaik untuk mendapatkan banyak lalu lintas Blog adalah dengan memasang tombol sosial media. Cara ini cukup epektif dan juga cukup penting agar postingan kita bisa di hargai oleh pembaca yakni dengan membagikannya ke sosial media.

Pada ulasan kali ini saya akan berbagi tutorial membuat tombol sosial media stiky ata melayang di bawah judul postingan Blog. Sehingga ketika pengunjung menggulung halaman kebawah, Ia masih bisa melihat tombol sosial media tanpa perlu kembali keatas halaman.

Trik ini dengan menggunakan bantuan jQuery yang akan membuat tombol sosial media ini bisa melayang, baik itu dari bawah ke atas atau ketempat semula waktu pertama kali ia menggulirkan halaman postingan Blog. Tombol sosial media ini terdiri dari Google+, Facebook, Twitter dan Pinterest.

Cara Memasang Tombol Social Media Melayang

1. Login ke akun Blogger
2. pilih Template, lalu edit HTML
3. Kemudian Anda cari kode </head>, copy kode script dibawah ini dan pastekan diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
offset = $movesbuttons.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
} else {
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

4. Langkah selanjutnya Anda cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatasnya.

#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 18px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}

5. Lalu Anda cari kode <div class='post-header'> dan copy kode dibawah ini dan pastekan di bawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='floating-social-buttons'>
<ul class='floating-social-buttons'>
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>
<li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>
<li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>
</ul>
</div>
</div>
</b:if>

Note: Untuk mengatur tinggi widget sosial media ganti kode 35px

6. Simpan template

Nah jadi iltulah langkah-langkah pemasangan tombol sosial melayang. Saya sangat merekomendasikan tombol sosial ini karena benar-benar bisa membantu Anda dalam menambah lalu lintas Blog.

Subscribe to receive free email updates: