Cara Membuat Tombol Share Media Sosial di Blog

Agar sebuah blog tampilanya terlihat rapi dan prosesional tentunya akan 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. Cara Memasang di Tempelat Blog

1. Anda Login ke blogger.com

2.Pilih > Tema > Edit HTML

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

#share-container{margin:20px auto;overflow:hidden}#share{width:100%;text-align:center}#share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;transition:opacity .15s linear;float:left}#share a:hover{opacity:.8}#share i{position:relative;top:50%;transform:translateY(-50%)}.facebook{background:#3b5998}.twitter{background:#55acee}.googleplus{background:#dd4b39}.linkedin{background:#0077b5}.pinterest{background:#cb2027}.whatsapp{background:#25d366}.status-msg-wrap{font-size:110%;width:90%;margin:0 auto 15px;position:relative}.status-msg-border{border:0;filter:alpha(opacity=40);-moz-opacity:.4;opacity:.4;width:100%;position:relative}.status-msg-bg{background-color:transparent;opacity:.8;filter:alpha(opacity=30);-moz-opacity:.8;width:100%;position:relative;z-index:1}.status-msg-body{text-align:center;padding:.3em 0;width:100%;position:absolute;z-index:4}.status-msg-hidden{visibility:hidden;padding:.3em 0}.status-msg-wrap a{padding-left:.4em}

4. 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='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='pinterest' expr:href='&quot;https://id.pinterest.com/pin-builder/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:blog.pageName' rel='nofollow' target='blank'><i class='fa fa-pinterest'/></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>

Catatan :

Karena kode <data:post.body/> tidak hanya satu ada beberapa kode tersebut cari dan letakan kode diatas, pada posisi yang pas kalau belum pas bisa diulang lagi hinga sesuai

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

2. Cara Masang Menggunakan Widget blog

Berikut Cara Menambahkan Widget share media sosial di blog.

Pertama Anda Login ke blogger.com
Pilih > Tema > Edit HTML

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

Pilih > Tata Letak > Tambahkan Gadget > HTML/JavaScript
Tempelkan kode script berikut:

<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='pinterest' expr:href='&quot;https://id.pinterest.com/pin-builder/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:blog.pageName' rel='nofollow' target='blank'><i class='fa fa-pinterest'/></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>

Bebas mau ditempatkan di mana saja bisa Sidebar, Footer, atau dibagian Header. Jika semuanya sudah dimasukkan, silahkan simpan, anda tinggal lihat hasilnya.

Demikianlah Cara Membuat Tombol Share di Blog sangat mudah sekali ya silahkan anda praktekan sendiri. Semoga berhasil Terima Kasih atas kunjungannya.

Cara Membuat Tombol Share Media Sosial di Blog

0 Response to "Cara Membuat Tombol Share Media Sosial di Blog"

Posting Komentar