Kesulitan memasang tombol jejaring sosial di blog, coba tip ini

Posted on January 24, 2011

2


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><script src='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:5px 0;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><script src='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…

3). Pekerjaan Rumah

Kedua cara di atas akan menampilkan tombol berbagi jejaring sosial pada berbagai halaman (baik halaman utama ataupun halaman artikel). Nah tugas anda adalah mengintegrasikan kedua cara menambahkan tombol jejaring sosial di atas kemudian mengatur tampilannya, jika kita buka halaman utama maka tombol jejaring sosial yang tampil adalah dari cara pertama (Tombol Berbagi Terintegrasi pada Artikel) dan jika kita buka halaman artikel maka tombol jejaring sosial yang tampil adalah dari cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel). Cara mengatur tampilan tombol berbagi adalah artikel sebelumnya yang membahas Conditonal Tag.

Jawaban: (Mohon tidak dibuka dulu sebelum mencoba…)

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. Happy Blogging🙂

Catatan kaki:
[1] Top 1000 Sites – August 2010, Google AdPlanner. Diakses 20 September 2010

Selengkapnya: Menambahkan Tombol Berbagi Jejaring Sosial | Blogger Tune-Up http://modification-blog.blogspot.com/2010/09/menambahkan-tombol-berbagi-jejaring.html#ixzz1C9MZ6sko
Under Creative Commons License: Attribution

 

Social Bookmarking Widget Untuk Homepage

Original by Zacky Adrishayuni | 04 Maret 201018 Comments

Social Bookmarking Widget Untuk HomepageAnda semua tentu sudah paham bahwa saat ini situs-situs social bookmark atau jejaring sosialsangat berperan penting dalam hal meningkatkan trafik blog. Dengan mengirim, membagikan, atau menyimpan link di situs tersebut, kita akan mendapatkan pengunjung yang lebih banyak dan membuat mereka akan selalu mengunjungi blog kita.

Dibeberapa postingan sebelumnya, saya telah menjelaskan cara-cara untuk mengirim url postingan dengan mudah ke situs social bookmark, di antaranya Widget Sharing & BookmarkingWidget Share the LoveShare on Facebook, dan terakhir widget buatan saya sendiri yaitu TBZ-Bookmarking Widget. Semua widget tersebut difokuskan untuk mengirim url postingan saja. Nha, kali ini saya akan menjelaskan cara membuat widget social bookmarking untuk membagikan url homepage blog. Dengan widget ini, kita bisa mengirim url homepage blog kita ke Facebook, Twitter, Digg, Stumbleupon, Linkedin, Yahoo Bookmarks, Google Bookmarks, Reddit, Mixx, Technorati, dan yang terkahir ke Google Buzz. Mau?

Berikut Cara Membuat Social Bookmarking Widget untuk Homepage

1. Login ke akun Blogger anda

2. Pilih LayoutPage Elements

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode di bawah ini ke dalam kotak

<a href=”http://www.facebook.com/share.php?u=http://blogger-driver.blogspot.com&#8221; target=”_blank” title=”Share on Facebook”><img src=”http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xkLYtsOI/AAAAAAAABPQ/bv6dHT6OG4c/s400/facebook_32.png&#8221; border=”0″ alt=”Facebook” /></a>
<a href=”http://twitter.com/home?status=I%20am%20currently%20on:%20Blogger%20Driver%20-%20http://blogger-driver.blogspot.com.%20It’s%20a%20great%20blogging%20tips&#8221; target=”_blank” title=”Tweet It!”><img src=”http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xzYSOXmI/AAAAAAAABQQ/yBISAcms8Ag/s400/twitter_32.png&#8221; border=”0″ alt=”Twitter” /></a>
<a href=”javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&

quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;

http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}” title=”Buzz This!”><img src=”http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xk3PjlVI/AAAAAAAABPg/VEbYKGKfCg8/s400/googlebuzz.png&#8221; border=”0″ alt=”Google Buzz” /></a>
<a href=”http://del.icio.us/post?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver&#8221; target=”_blank” title=”Bookmark to Delicious”><img src=”http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xjAbYwwI/AAAAAAAABPA/5UR-4UAFz08/s400/delicious_32.png&#8221; border=”0″ alt=”Delicious” /></a>
<a href=”http://del.icio.us/post?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver&#8221; target=”_blank” title=”Digg It!”><img src=”http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xjnuX_dI/AAAAAAAABPI/uDx9uwEYs8c/s400/digg_32.png&#8221; border=”0″ alt=”Digg” /></a>
<a href=”http://www.stumbleupon.com/submit?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver&#8221; target=”_blank” title=”Stumble it!”><img src=”http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xtlK02sI/AAAAAAAABQA/JXTSSfJs_PU/s400/stumbleupon_32.png&#8221; border=”0″ alt=”Stumbleupon” /></a>
<div style=”clear:both;height:0″></div>
<a href=”http://www.linkedin.com/shareArticle?mini=true&url=http://blogger-driver.blogspot.com&title=Blogger%20Driver&#8221; target=”_blank” title=”Share on Linkedin”><img src=”http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xsqJYCuI/AAAAAAAABPo/Ms0H4-_mfRA/s400/linkedin_32.png&#8221; border=”0″ alt=”Linkedin” /></a>
<a href=”http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://blogger-driver.blogspot.com&=Blogger%20Driver&#8221; target=”_blank” title=”Bookmark to Yahoo! Bookmarks”><img src=”http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xzwF9DJI/AAAAAAAABQY/1h81DtyolWM/s400/yahoo_32.png&#8221; border=”0″ alt=”Yahoo! Bookmarks” /></a>
<a href=”http://www.google.com/bookmarks/mark?op=add&bkmk=http://blogger-driver.blogspot.com/&title=Blogger%20Driver&#8221; target=”_blank” title=”Bookmark to Google Bookmarks”><img src=”http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xknWkOaI/AAAAAAAABPY/2Y863u5Unhk/s400/google_32.png&#8221; border=”0″ alt=”Google Bookmarks” /></a>
<a href=”http://reddit.com/submit?url=http://blogger-driver.blogspot.com/&title=Blogger%20Driver&#8221; target=”_blank” title=”Reddit”><img src=”http://1.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xtZhe55I/AAAAAAAABP4/mZiSul6x1Lg/s400/reddit_32.png&#8221; border=”0″ alt=”Reddit” /></a>
<a href=”http://www.mixx.com/submit?page_url=http://blogger-driver.blogspot.com&#8221; target=”_blank” title=”Share on Mixx”><img src=”http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xtOGwynI/AAAAAAAABPw/1SRy1Pk_YWU/s400/mixx_32.png&#8221; border=”0″ alt=”Mixx” /></a>
<a href=”http://technorati.com/faves?add=http://blogger-driver.blogspot.com&title=Blogger%20Driver&#8221; target=”_blank” title=”Fave this to Technorati”><img src=”http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S4-xuGq0neI/AAAAAAAABQI/G6YRR6lL8wc/s400/technorati_32.png&#8221; border=”0″ alt=”Technorati” /></a>


Keterangan:
– Ganti tulisan yang bercetak tebal dengan url dan nama blog anda
– Jika judul atau nama blog anda lebih dai satu kata, maka gunakan kode %20 sebagai pengganti spasi, misal “Blogger%20Driver” (tanpa tanda kutip)
– Saya sarankan anda meletakkan widget ini di bagian sidebar paling atas supaya mudah dilihat oleh pengunjung

4. Terkahir, klik Save Template.

===========

2. Selanjutnya untuk wordpress, bisa lihat berikut ini cara memasangnya.

Cara Pasang Tombol Social Network (Jejaring Sosial) di WordPress.com

install pasang sharing button wordpress.comPanduan Cara Pasang atau mengaktifkan Tombol Social Network (Jejaring Sosial) di setiap posting / artikel di blog WordPress.com

Jejaring sosial (social networking) saat ini memainkan peran sangat penting dalam promosi blog dan artikel di blog kita. Jejaring pertemanan Facebook dan mikroblogging Twitter memimpin di segmen ini.

Sebuah artikel yang banyak di rekomendasikan di Facebook dan Twitter juga akan meningkat statusnya di mesin pencari. Dari pengalaman saya, artikel saya di fatihsyuhud.com (bahasa Inggris) yang banyak mendapat tweet ke Twitter dan Like di Facebook selalu tampil di halaman pertama dan mampu bersaing dengan artikel-artikel internasional lain dari website yang lebih populer.

Saat ini pengguna WordPress.com patut bergembira, karena WordPress.com membuka kesempatan blogger untuk memasang tombol jejaring sosial di setiap tulisan / artikel / posting kita. Anda cuma perlu mengaktifkan tombol-tombol tersebut.

Tombol jejaring sosial yang dapat Anda pasang di WordPress.com adalah

  1. Facebook
  2. Twitter
  3. Reddit
  4. Digg
  5. StumbleUpon

Di samping itu Anda dapat juga memasang tombol-tombol berikut:

  1. Press This: berfungsi untuk pengguna WordPress.com lain yang hendak membookmark sebuah tulisan di blognya.
  2. Email to a friend: berfungsi untuk mengirimkan artikel yang dibaca ke email teman.
  3. Print: berfungsi untuk mencetak sebuah artikel bagi pembaca yang lebih suka membaca edisi cetaknya.

I. Berikut panduan bagaimana langkah-langkah aktivasi tombol social network:

  1. Login ke WordPress.com Anda
  2. Pengaturan / Setings -> Sharing
  3. Di Available Services akan tampak sejumlah tombol-tombol jejaring sosial seperti Facebook, Twitter, dll.wpcom shares button
  4. Drag and drop (tarik dan pindah) tombol yang akan diaktifkan ke kotak Enabled Services yang berada di bawahnya.wpcom shares button enabled services
  5. Di Show sharing buttons on -> pilih Posts and Index Pages
  6. Klik Simpan Perubahan / Save Updates. Selesai.
  7. Hasilnya di bagian bawah halaman artikel/posting kita akan seperti ini:wpcom share.3 hasil 1

Supaya tombol-tombol itu terlihat lebih rapi, tidak terlalu terkesan ramai dan berserak,

II. A. Anda bisa mengumpulkan seluruh tombol-tombol tersebut pada satu tombol  (+Share) saja.

Caranya, ikuti langkah berikut:

  1. Setelah semua tombol di pindah ke kolom Enabled Services ->wpcom share 3 hasil 2
  2. Pindah (drop & drag) tombol-tombol tersebut ke kotak di sebelah kananwpcom share.4 pindah kanan
  3. Klik Simpan Perubahan / Save Update. Hasilnya akan seperti ini, kalau diklik akan muncul tombol-tombol yang lain:wpcom share.3 hasil 3

II.B. Atau Menampilkan Sebagian Tombol dan Mengumpulkan Tombol yang lain di satu tempat (+Share)

  1. Drop and drag tombol-tombol yang ingin Anda jadikan satu di +Share dan biarkan tombol yang lain.
  2. Contoh, saya pindah ke kotak kanan tombol-tombol berikut: Digg, Reddit, Stumble Upon, Facebook, Cetak / Print, Press-kan Ini / Press This. Dan saya biarkan tombol Twitter dan Emailwpcom share.5 pindah kanan
  3. Klik Simpan Perubahan / Save Update. Hasilnya akan seperti ini:wpcom share.6  pindah kanan
Rate This

Mungkin tulisan tentang tombol jejaring sosial ini kurang lengkap. Tapi setidaknya dari sini, anda bisa lebih leluasa untuk mengembangkan gagasan-gagasan lain untuk memperluas dikenalnya blog atau situs anda. Namun dengan tombol jejaring sosial ini, saya yakin anda pasti puas.