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 </style>

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

Unknown

Mencoba Berbagi Pengalaman di bidang Internet di blog asli Indonesia

Share this