Membuat tombol share responsive simple terbaru, pastikan terlebih dahulu bahwa blog Anda tidak ada tombol sharenya, atau ingin mengganti yang sudah Ada dengan yang lebih ringan dan simple seperti yang akan saya posting berikut iniTombol berbagi berikut sudah dilengkapi dengan share whatsapp jadi kelihatan moderen, tampilanya sangat simple, ringan dan tentunya responsive dapat menyesuaikan perangkat mobile, contoh penampakanya seperti gambar diatas
Ada banyak cara membuat tombol untuk membagikan artikel ke sosial media tentunya berbeda-beda, ada yang ringan dan ada yang tidak ringan, dibawah ini adalah cara yang menurut saya paling ringan (responsive)
Cara membuat tombol share responsive simple terbaru
Login blogger
Pilih menu tema
Edit HTML
Copy paste kode dibawah ini letakkan di dalam kode CSS Anda
#share-button {margin:0 0 8px;padding:0;overflow:hidden}
#share-button p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;font-weight: 700;}
#share-button a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}
#share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}
<div id='share-button' style='margin-top:8px;'>
<p>Share: </p>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<a data-action='share/whatsapp/share' style='background:#43d854' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a>
</div>
Sebelum di simpan pastikan didalam template blog kalian sudah ada link Font Awesome, apabila belum ada copy kode dibawah ini letakkan diatas kode <head/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Simpan kemudian selesai.
Seperti itulah cara membuat tombol share atau berbagi yang sangat responsive simple, mudah-mudahan bermanfaat. Kalau tidak berhasil atau merasa kebingungan silahkan ditanyakan di kolom komentar akan saya bantu sampai berhasil
Postingan ini adalah kelanjutan dari postingan kemarin tentang cara membuat tombol share responsive terbaru, cara yang sama akan tetapi menggunakan kode yang berbeda tentunya hasilnya juga berbeda model dan bentuknya juga berbeda. Satu yang pasti memiliki kesaman yaitu sama-sama responsive
Baca disini : Cara membuat tombol share responsive terbaru
Happy blogging, terimakasih dan selamat berkarya.