Tutorial butang share terapung pada blog

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

Previous
Next Post »