Cara Menciptakan Tombol Membuatkan Keren Ibarat Blog Template Viomagz

Baca Juga

Membuat Tombol Share di blog yaitu salah satu cara yang sanggup di bilang sangat efektif untuk mendapat pembaca blog kita lebih banyak. Karena, dengan memasang tombol membuatkan tersebut, akan sangat membantu dan memudahkan pengguna internet yang telah membaca, artikel blog kita, apabila artikel tersebut di anggap sangat bermanfaat maka pengunjung akan suka rela memperlihatkan share melalui media sosial, untuk memperlihatkan kanal ke pada teman atau orang lain.

Sebenarnya untuk menciptakan tombol membuatkan untuk blog sangatlah gampang bagi para master blog yang sudah berpengalaman. Namun tombol share yang akan admin berikan disini tombol share keren, menarik, responsive, dan tidak bikin lemot loading blog, tombol share ini, yang terdapat pada template blog VioMagz buatan dari Mas Sugeng.

Nah, Jika anda tertarik dan ingin menciptakan tombol membuatkan tersebut, anda sanggup membuatnya dengan mudah.

Dan berikut dibawah ini yaitu langkah-langkahnya.

Memasang Tombol Share Media Sosial Ala VioMagz

Pertama masuk ke Blogger kemudian pilih sajian tema, kemudian klik "Edit HTML".

Kemudian anda temukan css tombol share yang sudah terpasang di blog Anda. Tentuya setiap template Blog akan berbeda beda, dan biasanya instruksi css tersebut di awali dengan tanda /* Share */ atau /* Tombol Share */ dan lain-lain. Pokoknya cari instruksi ibarat itu, biasanya sudah diberi tanda oleh sang pembuat template, Kalau sudah ketemu hapus semua, kemudian sebagai gantinya copy instruksi css di bawah ini kemudian paste-kan.

/* 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;
}

Setelah simpulan cari lagi instruksi pemanggilnya dan biasanya oleh pembuat templete awalnya ditandai ibarat <!-- Tombol share --> dan sejenisnya. Sudah ketemu Hapus semua instruksi mulai dipaling atas di instruksi itu. Biasanya <div class='share' .... atau <div id='share.... dan sebagainya.

Setelah itu copy instruksi di bawah ini sebagai gantinya, terapkan di kawasan instruksi yang anda hapus tadi.

<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 instruksi yang ibarat ini.

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

Selesai, jangan lupa klik simpan tema dan coba lihat hasilnya.

Namun kalau anda tidak meninginkan tombolnya terlalu banyak maka anda pun sanggup menghapus instruksi pemanggilnya, misal <a class='pinterest'.....</a>. Setelah itu pada #share a { width: 16.6666666666%;

Bisa anda ubah dengan membagi 100 dengan banyaknya tombol share, misal tombolnya terdapat 5, maka 100/5 = 20, berarti width: 20%, kalau 4 maka 25%.

Mungkin itu saja yang sanggup admin berikan. saran admin Back Up terlebih dahulu template blog anda sebelum di otak atik. Dan kalau kode-kode tombol membuatkan yang admin kasih di atas mengalami erorr ketika menyimpan, sebaiknya di kembalikan sajah ibarat semula

Demikian untuk menciptakan Tombol Berbagi Seperti di Template VioMagz mudah-mudahan sanggup membantu.