Cara Membuat Tombol Share Media Sosial di Bawah atau Diatas Postingan Blog

Agar sebuah blog banyak pengunjung kita harus memodfikasi atau mempercatik tampilan blog dengan berbagai cara. Selain pengaturan judul dan artikel yang menarik perlu diperhatikan kelengkepan fitur, salah satunya Tombol share pada sebuah blog dapat membantu untuk meningkatkan visitor.

Dengan adanya tombol share ini, pengunjung yang telah membaca artikel kita dapat dengan mudah membagikannya kepada orang lain lewat sosial media mereka. Kita pun mendapat keuntungan dari hal itu, sehingga pengunjung pun akan berdatangan karena bantuan yang tidak disangka-sangka. Semakin banyak artikel dibagikan, maka akan semakin banyak pula peluang kita untuk mendapatkan trafik blog yang melimpah.

Seperti seorang pengunjung telah membaca artikel kita, setelah dirasa menarik kemudian dia membagikannya lewat whatsap, twitter, dan facebook. Karena pastinya dia mempunyai banyak teman di facebook, maka besar kemungkinan teman-temannya juga kemudian akan tertarik mengunjungi artikel kita dari yang telah dibagikan oleh pengunjung kita sebelumnya itu. Kita jadi tidak perlu bersusah-susah untuk melakukannya, karena dengan sendirinya artikel telah dibagikan secara sukarela oleh pengunjung kita.

Tombol share ini memang terbukti efektif, karena selain trafik dari search engine, kita juga bisa lebih mengoptimalkan pengunjung dari sosial media. Tapi tentunya hal itu juga harus dibarengi dengan tulisan artikel yang berkualitas, sehingga benar-benar memberi manfaat bagi yang membacanya.

Untuk membuat beberapa tombol share dibawah postingan dapat anda ikuti langkah-langkahnya sebagai berikut:

1. Masuk ke blogger dengan akun anda masing-masing

2. Selanjutnya cari menu tema dan klik edit HTML.

3. Selanjutnya cari kode ]]></b:skin> atau </style> dengan bantuan CTRL + F

4. Jika sudah ketemu kode ]]></b:skin> atau </style> dan letakkan kode berikut tepat diatasnya:

#sharesimpelkeren {width: 100%; text-align: center;}#sharesimpelkeren a {width: 20%;height: 40px;display: block;font-size: 24px;color: #fff;opacity: 0.8; transition: opacity 0.15s linear; float: left;}#sharesimpelkeren a:hover {opacity: 1;}#sharesimpelkeren 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: 0px 0 0 0px;}#sharesimpelkeren a:last-child {border-radius: 0 0px 0px 0;}

5. langkah selanjunya cari kode <data:post.body/>. Jika sobat ingin menampilkan tombol share berada di atas artikel maka letakkan kode berikut ini di atas kode tersebut. Tapi kalau sobat ingin tombol sharenya di bawah artikel maka letakkan di bawahnya.

<div id='sharesimpelkeren'> <a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a> <a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a> <a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'><i class='fa fa-linkedin'></i></a> <a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + data:post.title' rel='nofollow' target='blank'><i class='fa fa-pinterest-p'></i></a> <a class='whatsapp' data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a></div>.

6. Jika sudah di paste semuanya, silahkan simpan dan sobat akan bisa melihat hasilnya. Kalau menurut sobat tidak menarik, sobat hanya hapus kode nya saja.

Cukup mudah bukan, cara membuat tombol icon media sosial dibawah postingan ataupun diatas.