Membuat Tombol Share dengan Count Realtime

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,

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

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 dilenkapi 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>

Share this

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Share this with short URL Get Short URL