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.

Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K
Free and premium blogger templates