Membuat tombol share blogger kerren, loading cepat, dan mudah.

Membuat tombol share di postingan blog sangatlah mudah bagi para master blog yang sudah berpengalaman. Ada banyak di google yang kalau dicari cara membuat tombol share yang menarik. Sayangnya tutorial yang kita temukan hanya itu-itu saja.

Tombol share di sini tidak sembarang tombol, tapi bagaimana tombol share yang kita pasang itu menarik, responsive, dan tidak bikin lemot blog kita.

Sebenarnya ada cara yang sangat mudah membuat tombol share menarik yaitu menggunakan Share This atau Add This. Tetapi, sayangnya tombol share ini cukup membuat loading blog kita menjadi melambat, karena menggunakan css eksternal.

Nah, maka dari itu saya akan bagikan tombol share media sosial menarik seperti berikut.

1. Tombol Share Style 1

Sudah pernah lihat kan bagaimana kece-nya tombol share kece abis seperti gambar di bawah ini?

Tombol Share Blogger

Untuk membuatnya cukup mudah. Berikut langkah-langkahnya.

Masuk dashboard blogger, pilih tema, pilih Edit HTML

Cari css tombol share yang terpasang pada blog Anda. Setiap templete berbeda beda. Biasanya css ini ditandai dengan /* Share */ atau /* Tombol Share */ dan lain-lain. Silahkan lakukan pencarian dengan mengetik "share", temukan kode css yang serupa dengan ini #share atau .share atau #bagikan atau .bagikan. Pokoknya cari kode serupa dengan itu, biasanya ini sudah diberi tanda oleh sang pembuat templete seperti /* Share */ dsb.  Pilih kode tersebut dari mulai /* sampai pada di atas /* kode berikutnya.

Sebenarnya langkah ini tidak perlu ada lakukan. Cuma saya khawatir tombol share yang saya berikan memiliki elemen yang sama dengan yang ada di templete sobat. Karena akan menyebabkan tombol share menjadi kocar kacir.

Copy kode css di bawah ini dan paste-kan pada tempat kode css yang di atas tadi di hapus.

/* Share button */

#share {

width: 100%;

  text-align: center;

}

#share a {

    width: 16.6666666666%;

    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;

}

.googleplus {

  background: #dd4b39;

}

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

}

Sekarang cari kode pemanggilnya. Nah kalau tadi kode css yang kamu hapus itu #share misalkan maka cara mencarinya dengan mengetik ='share'. Atau biasanya oleh pembuat templete sudah ditandai dengan tanda <!-- Tombol share --> dan sejenisnya.

Hapus kode mulai dari yang ada kata share-nya dipaling atas pada sekitar kode itu. Biasanya <div class='share' .... atau <div id='share.... dsb. Jika kamu menghapus mulai dari kode <div pastikan hapus sampai kode </div> juga di bawah, jika tidak maka templete tidak bisa di simpan atau eror.

Setelah itu copy dan paste kode di bawah ini pada tempat kode yang kamu hapus tadi sebelumnya.

<div id='share'>

  <!-- facebook -->

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

  <!-- twitter -->

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

  <!-- google plus -->

  <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-google-plus'/></a>

  <!-- linkedin -->

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

  <!-- pinterest -->

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

<!-- whatsapp -->

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

Atau pastekan di bawah kode ini.

      <b:includable id='postsharebutton' var='post'>

Selesai, jangan lupa simpan tema dan lihat hasilnya.

Jika kamu merasa tombolnya terlalu banyak maka kamu dapat menghapus kode pemanggilnya, misal <a class='pinterest'.....</a>. Setelah itu pada #share a {

    width: 16.6666666666%;

Silahkan ubah dengan membagi 100 dengan banyaknya tombol share, misal tombolnya ada 5, maka 100/5 = 20, berarti width: 20%, jika 4 maka 25%.

2. Tombol Share VioToko

Tombol share VioToko sebenarnya sama dengan VioMagz. Cuma beda style saja. maka langkah-langkahnya sama. Hanya saja kode CSS yang dipasang berbeda.

Tombol Viotoko

Gunakan kode css dibawah ini sebagaimana cara pada VioMagz

/* Share button */

#share-container {

margin: 10px auto 0;

overflow: hidden;

border-top: 2px dotted #ddd;

padding-top: 10px;

}

#share {

width: 100%;

text-align: center;

}

#share a {

width: 36px;

height: 36px;

display: inline-block;

color: #fff;

opacity: 0.8;

transition: opacity 0.15s linear;

margin: 0 5px 5px 0;

border-radius: 18px;

line-height: 16px;

text-align: center;

}

#share a:hover {

opacity: 1;

}

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

}

Jika butuh pembatas di atas tombol share maka bisa menambah kode ini.

<div id='share-container'>

<! -- tombol share -->

</div>

Cari dan hapus kode ini.

#share a:first-child {

border-radius: 3px 0 0 3px;

}

#share a:last-child {

border-radius: 0 3px 3px 0;

}

Selesai, jangan lupa save dan lihat hasilnya.

3. Tombol Share EvoMagz v. 4.9.

Tombol share ini juga tidak jauh berbeda dengan VioToko, hanya saja ukurannya lebih besar. Maka caranya juga sama seperti pada VioToko.

Tombol Share Evomagz

Ganti kode css tombol share blog amda dengan kode di bawah ini.

/* SHARE BUTTONS */

#share {

width: 100%;

margin: 20px auto;

text-align: center;

}

#share a {

width: 50px;

height: 50px;

display: inline-block;

margin: 8px;

border-radius: 50%;

font-size: 24px;

color: #fff;

opacity: 0.75;

transition: opacity 0.15s linear;

}

#share a:hover {

opacity: 1;

}

#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: #008000;

}

Simpan dan lihat hasilnya.

Jika dibutuhkan adanya heading "Bagikan" misalnya maka dapat kamu tambah sendiri di atasnya menggunakan kode heading seperti <h3> dsb atau lainnya.

Selamat mencoba, semoga berhasil. Jika terjadi eror atau font awesome terlalu ke bawah, kamu bisa mengaturnya dengan mengubah pada kode:

 positions: relative;

 top: 50%;

Angka 50% silahkan dicoba ubah ke 40% dst.

Oke itu saja, semoga bermanfaat.