Home » , » Tutorial Pasang Floating Share Button di Blogspot

Tutorial Pasang Floating Share Button di Blogspot

Written By Hafiz Rahman on Saturday, March 17, 2012 | 12:31 PM

Antara masalah paling besar dan perkara paling susah dalam dunia blogging salah satunya adalah menarik pembaca ke blog atau website anda. Kadang kadang entry dah menarik dan sepatutnya mendapat perhatian pembaca, tapi kerana kurang publisiti dan promosi untuk entry tersebut, ianya menajdi sia sia. Jadi bagaimana untuk menangani masalah ini? Jawapannya adalah dengan mengguna dan memanipulasi media sosial sebagai medium penyebaran . Laman sosial sperti facebook, twitter dan g+1 adalah medium terbaik untuk mempromosikan entry terbaik anda setiap hari bersama pengguna laman sosial tersebut.

Hari ni aku nak buat satu tutorial bagaimana untuk memasang widget social share yang akan float atau terapung setiap masa dihalaman yang dibuka walaupun anda skrol ke bawah seperti yang berada disebelah kiri entry yang sedang anda baca ini .

Sebelum bermula, seeloknya anda memasang button like disetiap entry kerana widget Floating Share Button ini lebih effektif jika dipasang bersama button like. Tutorial like button boleh dirujuk di Tutorial Letak Facebook Like Button Di Setiap Entry

image

Berbalik kepada widget ini. Widget Floating Share Button ini akan berada disebelah kiri setiap entry anda. Antara kelebihan widget ini :

  1. Fix widget: bermakna ianya akan tetap berada dihalaman yang dibuka walaupun anda skrol ke bawah
  2. Link ke entry atau address yang dibuka dan bukan halaman utama blog anda sahaja.
  3. Setiap like atau share akan dikira dan counter akan mula mengira berapa banyak entry anda dikongsi. (Contoh dalam gambar, entry TUTORIAL LENGKAP CARA LAJUKAN BROWSER FACEBOOK ANDA telah dikongsi sebanyak 582 orang pembaca. Bayangkan jika dari setiap  satu share dapat menarik 10-20 pembaca. Banyak kan pembaca yang anda boleh tarik untuk satu satu entry yang menarik. Banyak bukan?  )

Bagaimana untuk memasang widget ini? Mudah dan senang tanpa perlu edit apa apa coding dibahagian edit html. Hanya ikut beberapa langkah mudah dibawah :

  1. Login Blogger Dashboard --> Layout --> Add A Gadget --> HTML/Javascript.
  2. Copy dan paste kod  di bawah pada content HTML/Javascript.

<!-- floating page sharers Start -->
<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>

**Tambahan :

  1. Untuk mengubah warna background, sila edit kod background-color:#ffffff;
  2. Ada sesetengah template yang bersaiz besar akan menghadapi masalah widget ini bertindih dan menghalang halaman blog anda atau entry. Jangan risau, cuma perlu masuk ke dalam code tadi dan edit kod berikut  margin-left:-705px; . Edit jumlah 705px tersebut ke angka lain yang lebih besar atau kecil sehingga ia betul betul berada di posisi yang anda inginkan.

Selamat mencuba. Jika ada sebarang masalah, boleh bertanya diruangan komen. InsyaAllah akan dibantu sekadar termampu.

Kongsi Cerita Ini Bersama Rakan

1 comment

Post a Comment

Kindly Leave Your Comment Here..=)

Labels

TERKINI (175) ARTIS (116) TIPS BERGUNA UNTUK ANDA (85) DEDAH (74) FACT (71) DIARY (69) politik (69) INFO (66) Video (65) BERITA SUKAN (63) GOSIP TERKINI (44) HIBURAN (44) RENUNGAN (38) DESIGN (35) BLOG REVIEW (33) PRODUCT REVIEW (32) PENDIDIKAN (29) PANDUAN (28) tutorial (27) MAKLUMAN (26) TIPS BLOGGING (21) EVENT (20) Gadget (17) AGAMA (15) PERMOHONAN (15) HEADER DESIGN (12) CINTA (11) STATISTIK BLOG (6) SITEMAP (1)