Cara Membuat Tombol Share Keren, Simpel, Populer di Blog

Santos el Salam

29 Februari 2020

Ini merupakan artikel ketiga saya yang membahas tentang cara membuat tombol share di blog. Keberadaan tombol share ini memang cukup membantu dalam mendongkrak jumlah pengunjung blog.

Saat jumlah pengunjung organik dari hasil pencarian mentok stagnan itu-itu saja, salah satu solusi untuk menaikkan kembali jumlah pengunjung blog yang cukup ampuh adalah dengan membagikan artikel lewat media sosial.

Dengan adanya tombol share yang langsung terhubung kepada media sosial, maka artikel akan mudah ditemukan oleh banyak orang sehingga berbondong-bondong mereka akan menuju blog kita. 

Memang sebaiknya upayakan lebih dulu agar banyak pengunjung yang datang dari hasil pencarian organik melalui mesin pencari seperti google, bing, yahoo, dan sebagainya. Meski begitu, tombol share ini tetap penting keberadaannya untuk saat-saat tertentu sehingga lebih baik dipasang di blog anda.

Kalau pun anda tidak ingin membagikan artikel anda, barangkali ada pengunjung yang kebetulan mempunyai teman sedang membutuhkan ulasan dari artikel blog anda sehingga ia bisa membagikan artikel itu kepada temannya tersebut. Dengan begitu, maka setidaknya anda telah memberi manfaat kepada orang lain lewat tombol share tersebut. 

Seperti yang sudah saya sebutkan di muka, artikel pada kali ini adalah tutorial ketiga mengenai cara membuat tombol share untuk dipasang di blog. Tombol share yang hendak saya bagikan kali ini sebenarnya bentuknya hampir mirip dengan tombol share yang saya bagikan dulu pada artikel pertama saya (baca: Cara Membuat Tombol Share Simpel Keren di Blog). Bedanya, tampilannya lebih cerah dan elegan disertai keterangan di atasnya bertuliskan "Bagikan Artikel".

Selain itu, tombol share ini juga cukup populer alias banyak dipakai oleh blogger-blogger profesional karena tampilannya yang keren tapi simpel, ringan, lengkap, dan tentunya responsive. Adapun tampilannya seperti berikut ini:

Bagaimana cara membuatnya?, silahkan ikuti tutorial berikut ini. 

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Cari kode  ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya:

.share-judule {display: inline-block;margin: 10;color: #333333;text-transform: uppercase;font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}#share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;text-align: center;text-transform: uppercase;}.label-line {text-align: center;margin-bottom: 6px;position:relative;}.label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;top: 50%;left: 0;margin-top: -2px;}#share {width: 100%;text-align: center;}#share a {width: 20%;height: 40px;display: block;font-size: 24px;color: #fff;opacity: 0.8;transition: opacity 0.15s linear;float: left;}#share a:hover {opacity: 1;}#share i {position: relative;top: 50%;transform: translateY(-50%);}.facebook {background: #3b5998;}.twitter {background: #55acee;}.linkedin {background: #0077b5;}.pinterest {background: #cb2027;}.whatsapp {background: #25d366;}#share a:first-child {border-radius: 3px 0 0 3px;}#share a:last-child {border-radius: 0 3px 3px 0;}

4. Pastikan di template blog anda telah terpasang kode font awesome, jika belum silahkan tambahkan kode berikut ini di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5. Masih dalam edit html, berikutnya cari kode <data:post.body/> dan letakkan kode berikut ini di bawahnya: 

<center><div class='label-line'>
<p class='share-judule'>Bagikan Artikel ini</p>
</div></center><div id='share'>
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>
  <a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='blank'><i class='fa fa-linkedin'/></a>
  <a class='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.title' rel='nofollow' target='blank'><i class='fa fa-pinterest-p'/></a>
  <a class='whatsapp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>

Keterangan: Tulisan "Bagikan Artikel ini" bisa anda ubah menjadi Bagikan!, Bagikan Artikel, Please Share, atau apa pun sesuka anda. 

6. Silahkan simpan kembali template blog anda dan lihat hasilnya.

Demikianlah Cara Membuat Tombol Share Keren, simpel, dan Populer di Blog. 

Labels: Blogging

Thanks for reading Cara Membuat Tombol Share Keren, Simpel, Populer di Blog. Please share...!

Facebook

Twitter