add floating social media sharing button below blogger post title
* buka blog mu
* klik template >>> edit HTML
* cari kode <div class='post-header'>
* copy kode dibawah dan letakkan diatas kode <div class='post-header'>
<b:if cond='data:blog.pageType == "item"'> <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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + 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>* trus cari kode </head>
* copy kode dibawah dan letakkan diatas kode </head>
<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>* kemudian tambahkan kode css di bawah atau ]]></b:skin> tepat 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; }* terakhir silahkan di save / simpan
### GOOD LUCK GUYS ###
Baca Juga Artikel Terkait Lainnya