Cara Membuat Tombol Share Sosial Media di Blog

Cara Membuat Tombol Share Sosial Media di Blog - Tombol share merupakan suatu proses untuk membagikan artikel dalam sebuah blog berupa tombol ke berbagai sosial media antara lain, Facebook, Twitter, LinkedIn, Pinterest dan WhatsApp.

Dengan tombol ini, para pembaca artikel dapat dengan mudah membagikan informasi yang ada di artikel blog tersebut ke sosial media miliknya.

Keuntungan membuat tombol share sosial media adalah sebagai salah satu Cara Meningkatkan Visitor Blog dan masih banyak lagi keuntungan yang didapatkan.

Lalu bagaimana cara membuat tombol share sosial media di blog ? Nice Question, simak tutorialnya jangan sampai ada yang terlewatkan step by step dibawah contoh gambar di bawah ini.

Contoh Tombol Share Sosial Media di Blog

Sebelumnya, jika sudah ada tombol share sosial media di blog Anda dan ingin menggantinya dengan tombol share sosial media yang saya akan berikan disini, silahkan Anda hapus terlebih dahulu kode-kode yang terdapat di Edit Html, setelah dirasa sudah bersih, silahkan ikuti tutorialnya dibawah.

Cara Membuat Tombol Share Sosial Media di Blog

Inilah cara membuat tombol share sosial media di Blog.

1. Edit Html.

Langkah pertama, Silahkan Anda pergi ke Dashboard Blog > Tema > Edit Html. Untuk mengedit atau menyalin kode script yang akan saya berikan.

2. Cari kode ]]></b:skin>.

Setelah melakukan langkah pertama diatas, selanjutnya Anda mencari kode ]]></b:skin> di dalam Edit Html atau bisa menggunakan bantuan (CTRL+F).

3. Salin Kode Script.

Setelah ketemu kode seperti nomer 2 diatas, lanjutkan dengan menyalin kode berikut dibawah ini.

/* Share button by tutorial-lengkap07 */

#sharetutoriallengkap {

width: 100%;

text-align: center;

}

#sharetutoriallengkap a {

width: 20%;

height: 40px;

display: block;

font-size: 24px;

color: #fff;

opacity: 0.8;

transition: opacity 0.15s linear;

float: left;

}

#sharetutoriallengkap a:hover {

opacity: 1;

}

#sharetutoriallengkap i {

position: relative;

top: 50%;

transform: translateY(-50%);

}

.facebook {

background: #3b5998;

}

.twitter {

background: #55acee;

}

.linkedin {

background: #0077b5;

}

.pinterest {

background: #cb2027;

}

.whatsapp {

background: #25d366;

}

#sharetutoriallengkap a:first-child {

border-radius: 3px 0 0 3px;

}

#sharetutoriallengkap a:last-child {

border-radius: 0 3px 3px 0;

}

4. Tempatkan Kode Script diatas sebelum kode ]]></b:skin> 

5. Simpan setelan template.

Sebelum berlanjut ke langkah berikutnya, silahkan Anda simpan setelan template yang sudah dibuat tadi.

6. Cari kode <data:post.body>.

Masih di dalam Edit Html, selanjutnya Anda mencari kode <data:post.body> untuk mempermudah, silahkan gunakan bantuan dengan menekan tombol CTRL+F pada keyboard.

7. Salin Kode Script dibawah ini.

Setelah ketemu kode <data:post.body> salin kode dibawah ini, lalu tempatkan di sebelum kode <data:post.body>.

"Note : Untuk menempatkan tombol share sosial media di atas postingan, simpan kode script sebelum kode <data:post.body> dan jika ingin menempatkan tombol share sosial media di bawah postingan silahkan simpan kode script setelah kode <data:post.body>.

Salin Kode Script dibawah.

<div id='sharetutoriallengkap' mobile='only'>

<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>

Kode yang diberi tanda merah diatas mobile='only' untuk menyetel tampilan tombol share sosial media bisa dilihat dengan mode mobile saja. Jika ingin tombol share sosial media dapat di tampilkan dalam mode dekstop maka hapus kode tersebut.

Setelah selesai, Simpan kembali setelan Edit Html yang telah dibuat tadi, lalu lihatlah hasilnya.

Semoga bermanfaat.

Share this post