Widget berbagi pasti sangat penting untuk sebuah website, karena denagan adanya widget tersebut akan memudahkan bagi pembaca / author untuk membagikan article nya ke media sosial,

Tentunya selain mesin pencari Google, peran media sosial juga berguna bagi sebuah website, karena dengan media sosial mereka dapat mendatangkan / menambah trafik pengunjung.

Nah kali ini saya akan share sebuah widget berbagi sederhana yang dilengkapi dengan counter (jumlah) , dan inilah salah satu cara optimasi loading blog / website. karena widget ini tidak membuat beban loading blog menjadi berat, karena pluginnya yang cukup ringan.

Tersedia dua tampilan untuk widget ini,

Minima Shared Count

Style 1
Lihat Demo

Langkah penerapan theme Minima Shared Count :

  • Login Blogger
  • Pilih Template
  • Edit HTML
  • Tekan CTRL + F
  • dan cari kode </head>
  • Salin dan letakkan CSS dibawah ini tepat diatas kode yang kamu temukan tadi
<link rel="stylesheet" href="http://obs-project.googlecode.com/svn/trunk/minima_theme.css"/>
  • Cari kode <div class='post-footer'> dan letakkan HTML ini tepat diatas kode <div class='post-footer'>
<div class='bagi besar cf' expr:data-url='data:post.url'>
<h4 class='judul-share'>Do you like it? Share it perhaps?</h4>
    <div id='facebook'>
    <a class='berbagi facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank'>
        <div class='jumlah'/>
      <div class='bagikan'/>
    </a>
      </div>
    <div id='twitter'>
    <a class='berbagi twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;amp;text=lebih lengkap kunjungi :&amp;amp;via=hidayat_rifan&quot;' target='_blank'>
        <div class='jumlah'/>
      <div class='bagikan'/>
    </a>
      </div>
    <div id='pinterest'>
    <a class='berbagi pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot;+data:post.snippet' target='_blank'>
        <div class='jumlah'/>
      <div class='bagikan'/>
    </a>
      </div>
    <div id='googleplus'>
    <a class='berbagi googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' target='_blank'>
        <div class='jumlah'/>
      <div class='bagikan'/>
    </a>
  </div>
</div>

Elegant Shared Count

Style 2
Lihat Demo

Langkah penerapan theme Elegant Shared Count :

  • Login Blogger
  • Pilih Template
  • Edit HTML
  • Tekan CTRL + F
  • dan cari kode </style>
  • Salin dan letakkan CSS dibawah ini tepat diatas kode yang kamu temukan tadi
<link rel="stylesheet" href="http://obs-project.googlecode.com/svn/trunk/elegant_theme.css"/>
  • Cari kode <div class='post-footer'> dan letakkan HTML ini tepat diatas kode <div class='post-footer'>
<div class='bagi kecil cf' expr:data-url='data:post.url'>
<h4 class='judul-share'>Do you like it? Share it perhaps?</h4>
    <a class='berbagi facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank'>
        <div class='jumlah'/>
        <div class='bagikan'>Like</div>
    </a>
    <a class='berbagi twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;amp;text=lebih lengkap kunjungi :&amp;amp;via=hidayat_rifan&quot;' target='_blank'>
        <div class='jumlah'/>
        <div class='bagikan'>Tweet</div>
    </a>
    <a class='berbagi pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot;+data:post.snippet' target='_blank'>
        <div class='jumlah'/>
        <div class='bagikan'>Pin it</div>
    </a>
    <a class='berbagi googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' target='_blank'>
        <div class='jumlah'/>
        <div class='bagikan'>+ 1</div>
    </a>
</div>
Langkah Terakhir cari kode </body> , letakkan Javascript ini diatasnya 

<script type="text/javascript" src='http://obs-project.googlecode.com/svn/trunk/sharedC_by_rifan.js'></script>
Pastikan template anda sudah dilengkapi dengan JQuery. Jika belum salin jquery dibawah ini dan letakkan diatas kode</head> ! 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>