Cara Menciptakan Tombol Menyebarkan Keren Ibarat Blog Template Viomagz

Membuat Tombol Share di blog ialah salah satu cara yang sanggup di bilang sangat efektif untuk mendapat pembaca blog kita lebih banyak. Karena, dengan memasang tombol menyebarkan 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 saluran ke pada sobat atau orang lain.

Sebenarnya untuk menciptakan tombol menyebarkan 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 menyebarkan tersebut, anda sanggup membuatnya dengan mudah.

Dan berikut dibawah ini ialah langkah-langkahnya.

Memasang Tombol Share Media Sosial Ala VioMagz

Pertama masuk ke Blogger kemudian pilih hidangan 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 menyerupai 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;
}
.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 menyerupai <!-- 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>
    <!-- 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 menyerupai ini.

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

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

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

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

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: