Tutorial butang share terapung pada blog

Tutorial butang share terapung pada blog

Baca Juga

Selamat sejahtera kepada semua rakan. Sihat hari ini?

Ingin widget butang share terapung di tepi blog anda?

Hari ini Sop hendak berkongsi dengan rakan-rakan yang ingin memasang widget ini pada blog masing-masing. Seperti semua tahu, widget share/kongsi sangat penting kepada blog untuk mendapat lebih banyak trafik. Jika tiada pelawat yang hendak share, sekurang-kurangnya kita sendiri boleh share, bukan?

Widget butang share terapung ini dilengkapi dengan 6 laman sosial yang popular iaitu Facebook, Twitter, Google+, Pinterest, StumbleUpon dan Digg.

Untuk memasang ini tidak susah, sila ikuti tutorial berikut:

- Sila ke akaun blogger anda, pilih edit HTML
- Tanda / pada Expand Widget Templates
- Cari kod <data:post.body/> dan masukkan kod di bawah selepasnya:

<!--Butang Share Terapung Mula|www.sop.name.my-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-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='pageshare' title='Share with your friends'>
<div class='sbutton' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='sbutton' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='sbutton' id='gplusone'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/>
</div>

<div class='sbutton' id='gb'>
<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</div>
<div class='sbutton' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThisButton DiggMedium'/>
</div>

<br/>

<div style='clear: both;font-size: 8px;text-align:center;'><a href='http://www.sop.name.my/' style='text-decoration: none;' target='_blank'><font color='#816D77' decoration='none'>Get widget</font></a></div><!-- Do not remove this link -->
</div>
</b:if>
<!--Butang Share Terapung Tamat|www.sop.name.my-->

- Preview untuk memastikan tiada sebarang masalah
- Simpan

Untuk mengubah kedudukan widget tersebut, sila cari kod di bawah:
#pageshare {position:fixed; bottom:15%; right:10px; to this: #pageshare {position:fixed; bottom:15%; left:10px;


Tutorial asal boleh dirujuk di sini