Home » » Membuat widget social share di bawah postingan

Membuat widget social share di bawah postingan



widget social share

Membuat  Widget Social Share Di Bawah Postingan - widget social share memang sangat penting untuk memenuhi kebutuhan blog sebagai sarana upaya untuk menyebarluaskan postingan blog kita ke dalam jejaring-jejaring sosial seperti facebook, twitter, RSS, dll.

Tombol share sangat penting untuk meningkatkan pengunjung ke blog. sebenarnya blogspot sendiri sudah menyediakan widget share yang default akan tetapi tampilannya kurang menarik membuat pengunjung kurang tertarik untuk membagikannya..Namun untuk menarik perhatian pengunjung blog agar mau berbagi artikel yang dibaca ke berbagai jejaring sosial, tentunya anda membutuhkan tombol share yang menarik. Sebelumnya saya juga membuatkan tutorial cara membuat widget sharing is sexy ,tapi kali ini saya berikan widget share versi yang lain.

Berikut Cara membuat Widget Social Share Di Bawah Posting Blog :

  1. Pada Dashboard Blogger anda pilih Template >> Edit HTML
  2. Gunakan tombol Ctrl + F untuk mencari kode <data:post.body/>
  3. Copy dan pastekan  kode dibawah kemudian letakan di bawah kode <data:post.body/>
    <style>
    .sharebelow a { display:block; height:48px; width:48px; padding:0 4px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfS-b9sGisU-sf10GVBZPeBsk1D4Gan8sHwqIaCtQhL3Mz8_NaRPaVQVrr99uljZjchBt4-uVY7Brh9VdK6R_FSDPOlVHhpvQ6h3md8R4ZmU_c3uJp6NBcaG0sbtOIdJTQsJqgsIU3bUA/s1600/sharebelow.png) no-repeat; }
    .sharebelow a.googleplus { background-position: 0px -348px; }
    .sharebelow a.googleplus:hover { background-position: 0px -406px; }
    .sharebelow a.pinterest { background-position: 0px -464px; }
    .sharebelow a.pinterest:hover { background-position: 0px -522px; }
    .sharebelow a.delicious { background-position: 0px 0px; }
    .sharebelow a.delicious:hover { background-position: 0px -58px; }
    .sharebelow a.digg { background-position: 0px -116px; }
    .sharebelow a.digg:hover { background-position: 0px -174px; }
    .sharebelow a.stumbleupon { background-position: 0px -812px; }
    .sharebelow a.stumbleupon:hover { background-position: 0px -870px; }
    .sharebelow a.technorati { background-position: 0px -928px; }
    .sharebelow a.technorati:hover { background-position: 0px -406px; }
    .sharebelow a.twitter { background-position: 0px -928px; }
    .sharebelow a.twitter:hover { background-position: 0px -986px; }
    .sharebelow a.facebook { background-position: 0px -232px; }
    .sharebelow a.facebook:hover { background-position: 0px -290px; }
    .sharebelow a.reddit { background-position: 0px -580px; }
    .sharebelow a.reddit:hover { background-position: 0px -638px; }
    .sharebelow a.rss { background-position: 0px -696px; }
    .sharebelow a.rss:hover { background-position: 0px -754px; }
    </style>
    <div class='sharebelow'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="shareandbookmark">
    </div>
    <!--Facebook-->
    <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
    <!--Google Plus-->
    <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
    <!-- Twitter -->
    <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/> <!-- Pinterest -->
    <a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/> <!-- Delicious -->
    <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/> <!--Stumble--> <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
    <!--DIGG-->
    <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
    <!-- Reddit -->
    <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
    <!--RSS -->
    <a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>
    </b:if>
    </div>
    <div style="clear:both"/>

  4. Save Template , lihat hasilnya

Jika masih bingung tinggalkan komentar di bawah ini .

Description: Membuat widget social share di bawah postingan Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat widget social share di bawah postingan
Share this article :

Berikan Komentar :)

KET :
1.Jika ingin menyisipkan Gambar <i rel="image">URL Gambar</i>
2.Jika ingin menyisipkan Kode <i rel="pre">Kode Anda</i>
3.jika ingin menyisipkan ,<b>teks tebal</b> <i>teks miring</i>
Note :
Untuk mengetahui balasan dari saya lewat email silahkan klik subcribe by email di bawah ini .Last NO SPAM Live Link
Konversi kode HTMLEmoticonTop Komentator

Back to Top