Memasang Tombol Social Share

Menambahkan widget social network pada blog, banyak direkomendasikan oleh para pakar SEO.  Hal ini menjadi penting, karena dengan terpasangnya widget tersebut secara signifikan dapat meningkatkan trafic blog yang beasal dari situs social networkWidget yang akan dibahas kali ini adalah Tombol Social Share dari situs jejaring sosial populer seperti Twitter, Facebook, Stumbleupon serta Google +1, ditambah tombol advance dari Addthis.

Tombol-tombol ini dapat digunakan untuk blog dengan platform Blogger maupun Wordpress.  Jika ingin artikel anda menyebar di berbagai situs jejaring social, gunakanlah widget berharga ini pada blog anda dan nikmati trafic yang mengarah ke blog anda dari situs jejaring sosial populer.  Metode implementasi yang akan dibahas pada artikel ini dikhususkan bagi blog dengan platform Blogger sedangkan untuk Wordpress silahkan menyesuaikan.


Berikut adalah langkah-langkah untuk Menambahkan Tombol Social Share di Bawah Judul Posting
  • Login ke Blogger dengan ID anda
  • Pilih menu Template dan silahkan Backup Template anda terbeih dahulu.
  • Klik Template >> Edit HTML >> Proceed
  • Beri tanda ✔ check pada kotak "Expand WIdget Templates"
  • Kemudian cari kode <data:post.body/>
  • Copy kode di bawah ini dan paste tepat di atas kode <data:post.body/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='background:transparent; border:none; padding:10px;'>
    <table border='0'>
    <tr>


    <td><!-- Twitter -->

    <a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
    <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
    </script>
    </b:if>
    </td>

    <td><!--Facebook-->
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
    </td>

    <td><div style='margin-right:25px;'><!-- STUMBLE UPON -->
    <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div>
    </td>

    <td><div style='margin-right:5px;'><!-- GOOGLEPLUS -->
    <g:plusone expr:href='data:post.url' size='medium'/></div>
    </td>

    <td><!-- AddThis Button BEGIN -->
    <div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style'/></div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/>
    <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MULTI PASTE | Menabur Ketulusan Menuai Kebahagiaan&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; }
    </script>
    </td>

    </tr>
    </table></div> </b:if><br/>
  • Ganti kode yang ditulis tebal "Tips SEO Blogger | Menabur Ketulusan Menuai Kebahagiaan" dengan title blog anda, selanjutnya cari kode ]]></b:skin> dan tepat di bawahnya paste kode berikut ini, sebagai catatan jika anda sudah pernah memasang tombol Google+ pada blog, abaikan saja langkah ini :
    <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
  • Simpan perubahan Template dengan menekan tombol Save Template dan periksa blog anda, pastikan widget ini hanya tampil pada halaman posting dan tidak pada homepage,  jika widget tampil pada Homepage dan anda tidak menginginkannya silahkan hapus kode yang diarsir kuning.
  • Jika anda berhasil memasang widget ini Silahkan komen :) ...

0 komentar:

Posting Komentar






Selamat Datang di Blog MainTracker™
 
Free Joomla TemplatesFree Blogger TemplatesFree Website TemplatesFreethemes4all.comFree CSS TemplatesFree Wordpress ThemesFree Wordpress Themes TemplatesFree CSS Templates dreamweaverSEO Design