Cara Membuat Tombol Share Responsive Terbaru

Cara membuat tombol share responsive terbaru, apakah Anda membutuhkan tombol berbagi untuk dipasang di blog Anda, kebetulan artikel ini saya akan menuliskan cara membuat tombol yang ringan keren dengan dilengkapi tombol share aplikasi whatsapp

Kotak berbagi adalah peralatan pelengkap paling penting di dalam sebuah website atau blog, karena dengan tombol ini kita bisa mendatangkan pengunjung dari beberbagai media sosial contohnya facebook, twetter, google-plus, whatsapp dan lain-lain.

Selain itu menurut beberapa artikel di google, tombol share juga bermanfaat untuk seo. Ada bermacam-macam jenis dan bentuk, dan ada bermacam-macam pula letaknya di sebuah blog ada yang terletak di bawah artikel, di samping artikel, diatas artikel dan tempat-tempat lainya

Nah di postingan ini saya akan membagikan cara membuat tombol share yang bentuknya kotak-kotak, dan ini adalah buatan dari ArlinaDesign. Karena ini sangat responsive dan bentuknya juga menarik saya tertarik untuk menambahkan tombol whatsapp di jejernya lihat gambar diatas

Demo langsung silahkan lihat disini www.oke-goo.web.id

Cara membuat tombol share responsive yang ada whatsappnya

Login blogger
Pilih menu tema
Edit html
Copy Pate kode di bawah ini kemudian letakkan di dalam kode CSS kalian

/* Share Button */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #0C89E6;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#00ABF0;}
.sharepost li .facebook{background-color:#334D87;}
.sharepost li .gplus{background-color:#DF4A32;}
.sharepost li .pinterest{background-color:#C92228;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#000;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
.wa-button{color:#fff;margin:0 auto;padding:0;font-weight:700}
.wa-button a{color:#fff;margin:0 auto;padding:12px 0px;background:#4dc247}
.wa-button i{font-weight:400;margin:0 0px 0 0}

Kemudian copy paste kode dibawah ini letakkan di atas Artikel terkait, atau gantikan pada tombol share yang sudah ada

<div class='clear'/><div class='sharepost'>
<ul>
<li><a class='facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook-square'/>Share</a></li>
<li><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Share'><i class='fa fa-twitter-square'/>Share</a></li>
<li><a class='pinterest' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' title='Pin It Share'><i class='fa fa-pinterest'/>Share</a></li>
<li><a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus-square'/>Share</a></li>
<li class='wa-button'><a 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'/>Share</a></li>
</ul>
</div>

Langkah terakir simpan selesai.

Diatas yang kita buat tadi adalah tombol untuk berbagi yang sangat responsive dan juga menarik, karena tampilan dalam mobile atau hanphone bisa menyesuakian dengan ukuran layar, yang digunakan untuk membuka blog tersebut.

Dan diatas sudah dilengkapi tombol share yang menuju ke aplikasi whatsapp, jadi siapapun sudah dengan mudah apabila ingin membagikan artikel melalui whatsapp ke teman-teman kontak hanphonenya. Itulah postingan artikel kali ini

Baca disini : Cara mendapatkan sitelink otomatis dari google

Mudah-mudahan artikel kali ini bisa bermanfaat tunggu artikel menarik berikutnya, terimakasih dan selamat berkarya.