Cara Membuat Memasang Button Share Artikel

Unknown 09.09 , Tidak ada komentar


Membuat tombol share artikel/posting ke berbagai social bookmark saat ini seperti sudah menjadi satu kebutuhan bagi seorang web msater, termasuk juga para blogger biasa. Karena dengan memasang tombol/button share artikel ini akan menambah jumlah backlink kita di situs situs public hosted seperti  Facebook, Twitter, Reddit, Digg, StumbleUpon, Myspace, Google Buzz atau mungkin Google Plus One (+1). Pada artikel ini, kami akan sedikit mengulas script yang bisa anda terapkan di blog anda agar bisa menampilkan social bookmark.
Dibawah ini ada 3 script untuk membuat tombol/button share artikel berikut preview gambarnya yang kami ambil dari situs penyedia share butta addthis.com :
1.       Kode script button share style-1:
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>
<!-- AddThis Button END -->
2.       Kode script button share style-2:
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>
<!-- AddThis Button END -->
3.       Kode script button share style-3:
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>
<!-- AddThis Button END -->

Cara pemasangan ketiga script di atas adalah sebagai berikut :
      1.       Login ke dashboard blogger anda.
      2.       Pilih Rancangan > Edit HTML, centang Expand widget template.
     3.       Cari kode <data:post.body/>  atau kode <div class='post-header-line-1'/>  pada template anda (   salah satunya saja ! ) dan letakkan script button sharenya diatas kode tadi.
     4.       Save template dan lihat hasilnya.

4.  Side Page Share button
>> Login ke dashboard blogger anda.
>> Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
>> Copy script dibawah ini dan paste kedalam gadget baru tadi.
      <style>
    #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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="Get this code from yokotrix.blogspot.com">
    <div class="sbutton" id="fb">
    <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">
    </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="gb">
    <a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
    <script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
    </script>
    </a></div>
    <div class="sbutton" id="gplusone">
    <script src="http://apis.google.com/js/plusone.js" type="text/javascript">
    </script>
    <g:plusone size="tall"></g:plusone></div>
    </div>

           >> Save / Simpan.

    Semoga bermanfaat. :D

    tag : share button, social bookmark, cara, membuat, addthis.com, twitter, facebook, berbagi

    sumber : http://rayhanzhampiet.blogspot.com/2011/09/cara-membuat-floating-share-button.html

    Tidak ada komentar :

    Posting Komentar

    Langganan: Posting Komentar ( Atom )

    Formulir Kontak

    Nama

    Email *

    Pesan *