Floating Share Button di Sidebar Blogspot | Tutorial

Blogging Tips
floating share button sidebar blogspot

floating share button sidebar blogspot

Tutorial Cara pasang Floating Share Button di Sidebar untuk pengguna Blogger Blogspot dibawa khas oleh blog Muazfaris dot com.

3 Cara mudah pasang floating social media sharing button ini boleh diaplikasi di blog korang semua tanpa segan silu tetapi haruslah tidak mengubah struktur [kod] tersebut.

Memasang Retweet dan Facebook Share button di sidebar blog anda hanya memerlukan kod html dan anda boleh lihat hasil Floating Share Button di Sidebar Blogspot selepas aplikasikan tutorial ini.

Kelebihan

Kelebihan menggunakan butang share float blogspot ini adalah :

1. Ramai orang akan share, like, retweet, dan digg sebab butang tu sentiasa terapung di tepi.

2. Tidak perlu banyak menggunakan widget share yang lain, cukup la yang ini satu.

3. Trafik mencanak jika entri menarik!

Tutorial Floating Sidebar Social Share Buttons in Blogspot Blog

1. Dashboard > Layout > Add A Gadget > HTML/Javascript.

2. Copy paste kod Floating Share Button Sidebar Blogspot di bawah ini ke dalam kotak HTML/Javascript

<!-- Mula Sidebar Floating Share Button di Sidebar Blogspot -->
<style>
 #pageshare {position:fixed; bottom:17%; margin-left:-705px; float:left;
 -moz-border-radius:5px 0px 5px 0px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:0px;
 -webkit-border-top-left-radius:5px;
 -webkit-border-top-right-radius:0px;
 background-color:#ffffff;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;/*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='pageshare' title="Share this">
 <div class='sbutton' id='fb'>
 <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>
 </div>
 <div class='sbutton' id='rt'>
 <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
 </div>
 <div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
 <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
 <a class="DiggThisButton DiggMedium"></a>
 </div>
 <div class='sbutton' id='gplusone'>
 <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
 <g:plusone size="tall"></g:plusone>
 </div>
 <div style="clear: both;font-size: 8px;text-align:center;"><a href="http://muazfaris.com" rel="dofollow" target="blank"><font color="black">[Kod]<font></font></font></a></div>
 </div>
<!-- Tamat Sidebar Floating Share Button di Sidebar Blogspot -->

Customize Social media sharing button

1. kod #ffffff (warna merah) : untuk mengubah warna background butan float share.

2. ubah kod margin-left:-705px; (warna hijau) : mengikut kesesuaian template blog yang anda gunakan.

Selamat mengunakan step by step Floating Share Button di Sidebar Blogspot yang dibawa khas kategori blogging tips dan blogging tutorial di blog Muazfaris

Ingat, harap jangan ubah tulisan [kod]. Terima kasih.

Tutorial Floating Share Button ini membantu?

18 comments… add one

Leave a Comment

CommentLuv badge

Tick jika mahu update PERCUMA


Tip Rahsia Bina Website daripada saya!

Sebentar! Mahu tak saya kongsikan tips rahsia bina website dalam bentuk ebook?

Sila masukkan nama dan emel aktif anda di bawah untuk saya hantarkan tips rahsia ini kepada anda..

Maklumat anda 100% selamat.

Tip Rahsia Bina Website daripada saya!

Sebentar! Mahu tak saya kongsikan tips rahsia bina website dalam bentuk ebook?

Sila masukkan nama dan emel aktif anda di bawah untuk saya hantarkan tips rahsia ini kepada anda..

Maklumat anda 100% selamat.