Skip to main content
Website Mini

follow us

Membuat Share Button Ala VioMagz - Sebelumnya sudah membuat tutorial Membuat Widget Berlangganan Via Email Ala VioMagz. Pada kesempatan kali ini Saya akan coba posting dengan judul Membuat Share Button Ala VioMagz.

Share Button pada template viomagz memang bagus dan keren, mungkin sobat blogger ada yang ingin membuat tombol share seperti pada template viomagz. Share button atau tombol sosial share berguna untuk mempermudah pengunjung blog yang ingin membagikan artikel yang di sukai kepada kerabat atau orang lain melalui sosial media yang di sukai.

Nah, bagi sobat yang ingin membuat Membuat Share Button Ala Template VioMagz, mari kita ikuti langkahnya berikut ini.

1. Pertama masuk akun blogger > pilih menu Tema > klik Edit HTML.
2. Coppy CSS berikut ini dan simpan diatas kode </style>


/* Share button */
.share-this-pleaseeeee {
display: inline-block;
margin: 0;
color: #afafaf;
text-transform: uppercase;
font-size: 16px;
background: #fff;
z-index: 1;
position: relative;
padding: 0 10px;
font-weight: 500;
}
#share-container {
margin: 20px auto;
overflow: hidden;
}
#share {
width: 100%;
text-align: center;
}
#share a {
width: 25%;
height: 40px;
display: block;
font-size: 24px;
color: #fff;
transition: opacity 0.15s linear;
float: left;
}
#share a:hover {
opacity: 0.8;
}
#share i {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#share a:first-child {
border-radius: 3px 0 0 3px;
}
#share a:last-child {
border-radius: 0 3px 3px 0;
}
.facebook {
background: #3b5998;
}
.twitter {
background: #55acee;
}
.googleplus {
background: #dd4b39;
}
.linkedin {
background: #0077b5;
}
.pinterest {
background: #cb2027;
}
.whatsapp {
background: #25d366;
}

3. Kemudian coppy kode dibawah ini dan simpan tepat dibawah kode <b:includable id='shareButtons' var='post'>...</b:includable>


<b:includable id='postsharebutton' var='post'>
<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'>Share this post</p>
</div>
<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>
   <!-- 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>
</div>
</b:includable>

4. Selanjutnya untuk menampilkan share button, gunakan kode berikut. Simpan kode dibawah ini di bagian bawah potingan.


<b:include data='post' name='postsharebutton'/>

5. jika sudah, klik Simpan Tema.

Nah, itulah postingan kali ini yang bisa saya bagikan tentang Membuat Share Button Ala VioMagz. Dan jangan lupa baca juga Membuat Sosial Share Buttons Responsive Pada Blog Hanya Menggunakan CSS. Semoga bermanfaat.

You Might Also Like:

Buka Komentar