Salah satu cara agar blog kita terintegrasi dengan media sosial seperti facebook atau twitter adalah dengan membuat tombol "share" melayang.
Cara Pertama:
1. Copas script floating social media.
2. Pasang di blogspot dengan "add gadget HTML/Jawascript" pada "layout".
Script Floating social media:
<style>
/*-Penempatan-*/
#cdfloat {
position:fixed;
bottom:15%;
margin-left: -115px;
z-index:10;
float:left;
padding-bottom:2px;
}
#cdsidebar {
background:#67A194;
border-top:4px solid #ddd;
border-left:4px solid #ddd;
border-bottom:4px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
/*-Button Script-*/
.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=”cdfloat”>
<div id=”cdsidebar”>
<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=”shintahandini”>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 0 2px 0;”>
<a href=”http://pinterest.com/pin/create/button/” class=”pin-it-button” count-layout=”vertical”><img border=”0″ src=”//assets.pinterest.com/images/PinExt.png” title=”Pin It” /></a>
</td>
</tr>
<tr>
<td style=” padding:5px 0px 0px 0px;”>
<script src=’http://apis.google.com/js/plusone.js’ type=’text/javascript’> {lang: 'en-US'} </script>
<g:plusone size=”Tall” expr:href=”data:post.url”>
</g:plusone></td>
</tr>
</table> </div> </div>
atau
<!-- Floating social media buttons by www.howbler.com --><style>
#floatingbuttons{background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border:1px solid #1E4A8A;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> </div>
</div>
<!-- end Floating social media buttons by www.howbler.com -->
Cara Kedua:
1. Pasang script ini di HTML "edit template" sebelum </body>
<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
2. Copas script floating social media ini, dan pasang di blogspot dengan "add gadget HTML/Jawascript" pada "layout".
<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="background:#67A194;
border-top:4px solid #ddd;
border-left:4px solid #ddd;
border-bottom:4px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:80px 0 0 45px;">
<div class="addthis_toolbox addthis_default_style">
<span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span>
<span><a class="addthis_button_tweet" tw:count="vertical"></a></span>
<span><a href="http://pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a> </span>
<span><a class="addthis_button_google_plusone" g:plusone:size="tall">
<span><a class="addthis_counter"></a></span>
</a></span></div> </div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
Sumber:
0 komentar :
Posting Komentar