Cara Menciptakan Tombol Social Share Melayang Di Bawah Judul Postingan Blog

Salah satu cara terbaik untuk mendapat banyak kemudian lintas Blog ialah dengan memasang tombol sosial media. Cara ini cukup epektif dan juga cukup penting biar postingan kita dapat di hargai oleh pembaca yakni dengan membagikannya ke sosial media.

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

Trik ini dengan memakai pertolongan jQuery yang akan menciptakan tombol sosial media ini dapat 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, kemudian edit HTML
3. Kemudian Anda cari arahan </head>, copy arahan 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> kemudian copy arahan 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 arahan 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 arahan 35px

6. Simpan template

Nah jadi iltulah langkah-langkah pemasangan tombol sosial melayang. Saya sangat merekomendasikan tombol sosial ini alasannya ialah benar-benar dapat membantu Anda dalam menambah kemudian lintas Blog.

Sumber http://www.websiteedukasi.com/