Membuat Tombol Share di Setiap Postingan dengan CSS3 di Blog

Banyak cara yang bisa dilakukan dalam membuat tombol share, baik di atas postingan, di bawah postingan, disamping, melayang, mengambang, dan lain sebagainya. Namun tombol share atau share button yang saya bagikan kali ini lebih sederhana dan tidak menggunakan sederet kode yang dimuat .js dari pihak ketiga, yang hal itu sangat buruk akibatnya pada size dan loading blog.

Membuat Tombol Share di Setiap Postingan dengan CSS3 di Blog

Mengapa harus memasang tombol share di setiap postingan? Hal ini dilakukan untuk memungkinkan pengunjung blog yang tertarik dengan artikel yang anda publish, membagi kembali link dari artikel tersebut ke social media yang diinginkannya, dengan kepentingan yang berbeda-beda tentunya.

Cara membuat tombol share di setiap postingan dengan CSS3 di Blog

Kopi kode CSS di bawah ini tepat di atas ]]</b:skin> atau </style>
/* Tombol Share dengan CSS */
#share-this{overflow:hidden;margin:10px 30px;line-height:1.4em}
#share-this a{float:left;display:block;color:#fafafa;padding:10px 14px 8px;margin:0 3px 3px;font-family:&#39;raleway&#39;, arial, sans-serif;border-radius:2px;font-size:15px}
#share-this a.this-fb{background:#395796;border-bottom:3px solid #0e2e6e}
#share-this a.this-tw{background:#4cb0ea;border-bottom:3px solid #3397db}
#share-this a.this-gp{background:#bb0202;border-bottom:3px solid #a20606}
#share-this a.this-fb:hover {background:#0e2e6e}
#share-this a.this-tw:hover{background:#3397db}
#share-this a.this-gp:hover {background:#a20606}
#share-this i {margin-left:8px;}

Temukan kode <data:post.body/> lalu letakkan kode di bawah ini di atas atau di bawah dari kode tersebut.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-this'>
<a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'>Share this<i class='fa fa-facebook'/></a><a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'>Plus this<i class='fa fa-google-plus'/></a>
<a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'>Tweet this<i class='fa fa-twitter'/></a></div>
</b:if>

Kode <data:post.body/> terdapat lebih dari satu, sesuaikan dengan kode template anda. Atau cari kode <data:post.body/> yang paling akhir, jika ingin meletakkan tombol share tersebut di bawah postingan.

Catatan:

Kopi kode di bawah ini dan letakkan di atas kode </head> jika di template anda belum ada FontAwesome
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Sekian artike ini, semoga bisa membantu. Salam blogging.

4 komentar

  1. Profil:
    Kayaknya tampilannya keren ijin pakai bung franki, fotawesome itu apa yah... maklum masih baru jadi gak ngerti
    • Profil:https://www.blogger.com/profile/13162875744493565460
      font awesome itu icon2 yang dibentuk dari huruf2 dan angka2 unik, artinya tidak lagi menggunakan gambar lagi untuk membuat suatu icon dalam membuat tombol di blog
  2. Profil:
    Udah terpasang, makasih atas sharing nya bung frangki. Salam kenal
    • Profil:https://www.blogger.com/profile/13162875744493565460
      mantab gan, makasih juga atas kunjugannya
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan diluar artikel silahkan buat topik baru di .
  • Untuk menyisipkan gambar, silahkan upload gambar terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code