Cara Membuat Widget Share Simple Tanpa Javascript

Cara Membuat Widget Share Simple Tanpa JavascriptAssalamu'alaikum sahabat blogger, dipostingan kali ini saya akan berbagi tutorial blogger lagi nih setelah kemarin mempost Cara Mengganti "Poskan Komentar" Teks Dengan Gambar di Blog, namun di sore hari ini saya akan berbagi tentang Cara Membuat Widget Share Simple Tanpa Javascript. Langsung saja,

Widget Share, menurut saya sih widget ini salah satu widget penting untuk sebuah blog, soalnya kenapa? agar artikel-artikel kita yang bermanfaat dapat langsung di share ke situs jejaring sosial, seperti Facebook, Twitter, Google+ dan Lain-lain, dan tentunya dapat menambah traffict juga ke blog kita. Widget Share ini kenapa saya sebut simple karena tidak menggunakan gambar dan Javascript. berikut screenshot nya :

Cara Membuat Widget Share Simple Tanpa Javascript

Tertarik ga nih? Jika agan agan ingin memasangnya bisa ikuti langkah-langkah di bawah ini :

Login Ke Akun Blogger
Pergi Ke Halaman Edit Template => klik edit HTML
Cari kode </b:skin> (Ctrl+F untuk pencarian agar lebih mudah)
Copy paste kode dibawah ini tepat di atas kode tadi
.sharecontain {background: #cccccc;border: 1px solid #999;padding: 5px;}
.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; border-radius: 2px;}
.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.lkshare {color: #fff !important; background: #005a87; text-decoration: none !important; border: 1px solid #003f5e; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
Jika Sudah, Cari kode <data:post:body/>, lalu tambahkan kode di bawah ini tepat di bawah kode tadi :
<div class='sharecontain'>
Bagikan Ke:
<a class='fbshare' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twshare' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='plshare' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkshare' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tcshare' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='dgshare' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
</div>
 Oke, cukup sekian post saya tentang Cara Membuat Widget Share Simple Tanpa Javascript, semoga berhasil :) jika ada yang ingin di tanyakan tinggal tanyakan di kolom komentar di bawah :) Terima Kasih..

Related

Tutorial Blog 1647712509854192435

Post a Comment

  1. wah waktu itu aku nyariin ini nih, kenapa ga di post dari kmren mas >>? #eh . hehehhe kidding .
    mksih ya :D

    ReplyDelete
  2. ane pernah lihat nih di blognya kompiajaib mas.. mgkn ini sedikit modifikasi yah ??

    ReplyDelete
  3. cobain dulu ah..keren nih. mksh ya mas :d

    ReplyDelete
  4. keren mas, tapi saya lebih suka widget yang ada gelembung untuk menampung jumlah share nya..
    kemaren saya pernah iseng coba-coba buat beginian pake php dengan framework CI hasilnya lumayanlah, lumayan sederhana maksudnya, hehehe

    ReplyDelete
  5. hehehe ini yang lebih simple yah sob :)

    ReplyDelete
  6. mengenai msalah crawl error:
    Postingan aslinya gak kehapus gan, cuma list yang ada dihasil pencarian google aja yang kehapus. makanya harus cermat memilih url mana yang akan dihapus.
    kalo salah hapus, dipilihan remove url juga ada menu undonya kok.
    salam kenal ya sob.

    ReplyDelete
  7. Apa kabar gan ? keren hasil oprekannya, dan bermanfaat untuk rekan-rekan blogger yang lainnya.

    Salam wisata

    ReplyDelete
    Replies
    1. alhamdulillah baik..
      thanks ya gan :)

      salam kembali..

      Delete
  8. boleh d coba gan
    thanks atas ilmunya

    ReplyDelete
  9. akhirnya yg di tunggu' keluar juga.. (h)

    ReplyDelete
  10. mantap maksih info na
    www.winarshop.com

    ReplyDelete
  11. Terima kasih infonya bos...membantu sekali
    www.gsb12.blogspot.com

    ReplyDelete

Terimakasih telah membaca artikel di atas. Silahkan berkomentar dengan sopan.

emo-but-icon

Side Ads

Facebook

Adv

item