Cara Membuat Tombol Share Simpel Keren di Blog

Santos el Salam

23 Oktober 2019

Agar sebuah blog semakin banyak pengunjungnya, ada beragam cara yang mesti dilakukan. Selain pengaturan judul dan artikel yang menarik, hal yang perlu diperhatikan lainnya adalah terkait kelengkapan fitur yang ada. Salah satunya yaitu keberadaan tombol share. 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 itu. Semakin banyak artikel dibagikan, maka akan semakin banyak pula peluang kita untuk mendapatkan trafik blog yang melimpah. 

Kita dapat contohkan misalnya seorang pengunjung telah membaca artikel kita, setelah dirasa menarik kemudian dia membagikannya lewat facebooknya. 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. 

Ada beragam cara untuk memasang tombol share ini, bagi pengguna blogspot, fitur itu juga sudah tersedia. Namun banyak dari kita yang beralih menggunakan tombol share yang disediakan oleh pihak lain. Selain tampilannya yang lebih menarik, fitur tombolnya juga kadang lebih lengkap dibanding versi standar. Pada kali ini saya juga akan berbagi cara membuat tombol share yang simpel namun keren di blog. Tampilannya seperti berikut ini:

Untuk membuatnya ikuti langkah-langkah berikut ini:

1. Buka akun blogger anda.

2. Pilih menu tema dan klik edit html.

3. Sebelumnya pastikan di blog anda sudah terpasang kode font awesome, jika belum silahkan tambahkan kode berikut ini di atas kode </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/> 

4. Jika sudah, langkah selanjutnya yaitu cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini tepat di atasnya:

#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 terakhir yaitu cari kode <data:post.body/>. Jika anda ingin tombol share berada di atas artikel maka letakkan kode berikut ini di atas kode tersebut. Tapi kalau anda ingin tombol sharenya di bawah artikel maka letakkan di bawahnya. 

<div id='sharesimpelkeren'>  <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'></i></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'></i></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>

4. Jika semuanya sudah dimasukkan, silahkan simpan template anda kembali dan anda bisa lihat hasilnya. 

Demikianlah Cara Membuat Tombol Share Simpel Keren di Blog. Semoga bermanfaat.

Labels: Blogging

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

Facebook

Twitter