Teknologi dan Komputer

Menambahkan Tombol Share Jejaring Sosial (Facebook, Twitter, Google +, Digg) di Bawah Postingan Blog

Teknologi Virtual


Gambar di atas adalah contoh button (tombol share) yang dipasang di bawah postingan blogger. Keuntungan memasang tombol share membantu para pembaca untuk membagikan artikel yang Anda tulis kebeberapa jejaring sosial seperti Facebook, Twitter, Google Plus, dan Digg.

Penggunaan jejaring sosial mampu mendongkrak pengunjung website Anda, sehinggan tombol share banyak digunakan admin webmaster utuk mengotimalkan SEO (Search engine optimization).

Cara menambahkan tombol share jejaring sosial di bawah positngan blog :
  • Login ke dashboard blogger > Template > Edit HTML.
  • Cari kode berikut ini, biasanya ada tiga dan pilih yang kedua.
<data:post.body/> 
  • Letakkan kode berikut ini di bawah kode <data:post.body/>
Share :</div><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on FB</a> <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #808080  ; text-decoration: none; border: 1px solid #808080; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Submit to Digg'>Submit to Digg</a> 
  • Simpan dan lihat hasilnya. 

Update !!
Tombol Share Stylish Jejaring Sosial di bawah postingan blog.

Tombol Share Stylish Jejaring Sosial di bawah postingan blog
Cara memasang tombol Share Stylish jejaring sosial di bawah postingan blog :
  • 5. Simpan kode dibawah ini tepat diatas kode </head> 
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script> 
  • Lalu cari kode <data:post.body/> dengan menekan tombol CTRL + F.
  • Simpan kode dibawah ini tepat dibawah kode <data:post.body/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding: 5px;margin: 10px;}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/><span class='st_plusone_hcount' displayText='Google +1'/><span class='st_twitter_hcount' displayText='Tweet'/><span class='st_pinterest_hcount' displayText='Pinterest'/><span class='st_digg_hcount' displayText='Digg'/><span class='st_stumbleupon_hcount' displayText='StumbleUpon'/><span class='st_fblike_hcount' displayText='Facebook Like'/></p></b:if> 
Catatan : link yang berwarna merah bisa disesuaikan dengan yang Anda inginkan, misalnya mengurangi tombol share button.

0 comments:

Posting Komentar

= > Silahkan berkomentar sesuai artikel di atas
= > Berkomentar dengan url (mati/ hidup) tidak akan dipublish

 

Recent Post

Ilmu Komputer

Linux

Indoamaterasu