Kesulitan memasang tombol jejaring sosial di blog, coba tips ini

by in 0


Bagi yang memiliki website atau blog tentu ini sangat penting, setidaknya visitor yang menyukai isi anda ingin mengirimkan ke temennya ada sesuatu yang dibutuhkan temen atau rekan visitor, sehingga memudahkannya dan di samping itu situs atau blog anda akan cepat terkenal sehingga banyak pengunjung yang dengan senang hati mengunjunginya.
Saat ini saya gunakan untuk blogger atau blogspot dan wordpress.
1. Untuk Blogger berikut ini?

Dua Cara Integrasi Tombol Berbagi Jejaring Sosial Pada Blog

1). Tombol Berbagi Terintegrasi pada Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke “Rancangan – Edit HTML” dan klik “Expand Template Widget”
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
.sharesoc {
display:inline-block;
float:right;
height:125px;
margin:5px 0;
width:60px;
}
Langkah 5
Cari kode dibawah ini:
<data:post.body/>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
1
<span class='sharesoc'>
2<div style='float: right; margin-right: 0px;'>
3<a href='http://www.facebook.com/sharer.php' name='fb_share'type='box_count'>Share</a><scriptsrc='http://static.ak.fbcdn.net/connect.php/js/FB.Share'type='text/javascript'/>
4</div>
5<div style='float: right; margin: 8px 0px 0pt 0pt;'>
6<script src='http://tweetmeme.com/i/scripts/button.js'type='text/javascript'/>
7</div>
8</span>
Langkah 7
Simpan template dan preview blog anda…
2). Tombol Berbagi Terapung pada Pinggir Artikel
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke “Rancangan – Edit HTML”
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
1#sharehal {position:fixed; bottom:20%; margin-left:185px;float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
2#sharehal .tblshare {float:left;clear:both;margin:5px 5px 0 5px;}
3.fb_share_count_top {width:48px !important;}
4.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
5.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important; -moz-border-radius:3px;-webkit-border-radius:3px;}
6.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
7.sharesoc {display:inline-block;float:right;height:125px;margin:5px0;width:60px;}
Langkah 5
Cari kode dibawah ini:
</body>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
01<div id='sharehal'>
02<div class='tblshare' id='fb'>
03<a href='http://www.facebook.com/sharer.php' name='fb_share'type='box_count'>Share</a><scriptsrc='http://static.ak.fbcdn.net/connect.php/js/FB.Share'type='text/javascript'/>
04</div>
05<div class='tblshare' id='rt'>
06<script src='http://tweetmeme.com/i/scripts/button.js'type='text/javascript'/>
07</div>
08<div class='tblshare' id='su'>
10</div>
11<div class='tblshare' id='digg'>
12<script src='http://widgets.digg.com/buttons.js'type='text/javascript'/>
13<a class='DiggThitblshare DiggMedium'/>
14</div>
15<div class='tblshare' id='gb'>
16<a class='google-buzz-button' data-button-style='normal-count'href='http://www.google.com/buzz/post' title='post on google buzz'>
17<script src='http://www.google.com/buzz/api/button.js'type='text/javascript'/>
18</a>
19</div>
20</div>
Langkah 7
Simpan template dan preview blog anda…

Keterangan :
Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :
  • bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol
  • margin-left:185px = ubah nilai 185 untuk mengatur jarak antara bagian pinggir browser dengan tombol
  • float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel
  • background-color:#fff = ubah nilai fff untuh mengatur warna latar belakang dan sesuaikan dengan warna latar belakang artikel blog anda
Selamat mencoba dan semoga berhasil.

Leave a Reply