Cara Memasang Tombol Share Whatsapp With Thumbnail

Pada kesempatan kali ini tutorial yang saya akan bahas masih seputar blogger. Dan untuk tutorial yang saya akan bahas yaitu Cara Memasang Tombol Share Whatsapp With Thumbnail. Dan tutorial ini hanya untuk tombol share whatsapp nya saja. Jadi bilamana kalian di blog nya belum ada tombol share whatsapp nya kalian bisa mencoba nya dengan mengikuti tutorial yang akan saya bagikan kali ini.

Banyak maanfaat nya bila di blog kalian terdapat tombol share whatsapp. Salah satu nya bila kalian mempunyai grup di whatsapp akan mempermudah bagi kalian bisa berbagi hal" yang menarik yang kalian punya di blog yang kalian miliki. Untuk contoh kalian bisa lihat gambar di bawah ini.

Cara Memasang Tombol Share Whatsapp With Thumbnail

1. Silakan kalian copy code CSS di bawah ini dan paste tepat di atas code ]]></b:skin> atau </style>


/* Social */
.social{
 float:left;
 font-size:16px;
}
.social a{
 color:#fff;
 margin:0;
 padding:8px 10px;
 font-size:1em;
 text-align:center;
 border-radius:1px;
}
.social a i{
 color:#fff;
 text-align:center;
 padding-right:5px;
 display:inline-block;
}
.social a.whatsapp{
 display:none;
 background:#43d854;
}
.social a.whatsapp:hover{
 background:#38b046;
}
@media only screen and (max-width:768px) {
.social a{
 display:inline-block;
 padding-left:0;
 padding-right:0;
 padding:5px;
 white-space:nowrap;
 font-size:1.5rem;
 line-height:0;
 border-radius:6px;
 width:35px;
}
.social a i{
 padding-left:0;
}
.social a.whatsapp{
 display:inline-block;
}
.social a i{padding:0}}

2. Setelah itu silakan kalian copy code di bawah ini dan paste ke tempat yang kalian ingin kan. Bebas bisa kalian taro di bawah judul artikel atau di bawah artikel. Atau bisa juga di tempat di mana tombol share yang sudah kalian punya dan letakan code ini di bawah nya.


<div class='social'>
<a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.url'><i class='fa fa-whatsapp'/></a>
</div>

3. Terakhir save template kalian dan lihat hasil nya pada mode mobile di browser kalian.

Bila ukuran tidak sesuai dengan template kalian, silakan kalian tinggal sesuaikan pada code CSS yang di atas.

Mungkin itu saja yang bisa saya bagikan di tutorial Cara Memasang Tombol Share Whatsapp With Thumbnail. Semoga artikel ini bermanfaat buat kalian semua. Selamat mencoba dan salam blogger.