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 yakni 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 arahan css tersebut di awali dengan tanda /* Share */ atau /* Tombol Share */ dan lain-lain. Pokoknya cari arahan ibarat itu, biasanya sudah diberi tanda oleh sang pembuat template, Kalau sudah ketemu hapus semua, kemudian sebagai gantinya copy arahan 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 arahan pemanggilnya dan biasanya oleh pembuat templete awalnya ditandai ibarat <!-- Tombol share --> dan sejenisnya. Sudah ketemu Hapus semua arahan mulai dipaling atas di arahan itu. Biasanya <div class='share' .... atau <div id='share.... dan sebagainya.
Setelah itu copy arahan di bawah ini sebagai gantinya, terapkan di kawasan arahan yang anda hapus tadi.
<div id='share'>
<!-- facebook -->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a>
<!-- twitter -->
<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a>
<!-- google plus -->
<a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-google-plus'/></a>
<!-- linkedin -->
<a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'><i class='fa fa-linkedin'></i></a> -->
<!-- pinterest -->
<a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + 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='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
Atau pastekan di bawah arahan yang ibarat ini.
<b:includable id='postsharebutton' var='post'>
Selesai, jangan lupa klik simpan tema dan coba lihat hasilnya.
Namun jikalau anda tidak meninginkan tombolnya terlalu banyak maka anda pun sanggup menghapus arahan 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%, jikalau 4 maka 25%.
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 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.