Membuat Tombol Share Keren, Responsive, Simple Di Bawah Postingan Blog Tanpa Javascript ~ Coding IsmyNR - Cara Dan Contoh Pemrograman

Membuat Tombol Share Keren, Responsive, Simple Di Bawah Postingan Blog Tanpa Javascript

Bagi anda yang sedang mencari membuat tombol share keren dan responsive di postingan , apa kegunaanya ? Pasti anda sangat memerlukanya, mungkin karena jika ada pengunjung yang merasa tertarik dengan artikel yang kita buat dan ingin share artikel tersebut ke social media mereka, tentunya blog kita di promosikan, pasti ada orang yang tertarik dan ingin membaca artikel kita, otomatis blog kita mendapatkan banyak pengunjung lainya...

Demo tombol share

Dengan adanya tombol share social media ini akan memudahkan pengunjung untuk membagikan artikel kita ke social media mereka... Jadi pengunjung pun merasa betah di blog kita karena blog memiliki fitur untuk memudahkan pengunjung, yaa salah satunya tombol share social media ini...

Bukan hanya itu, katanya sih dapat berpengaruh baik untuk SEO, karena banyak yang share jadi artikel kita dibutuhkan dan berkualitas. makadari itu saya akan membuat bagaimana membat tombol share social media keren dan responsive tanpa javascript, pasti anda tau jika kebanyakan javascript pasti dapat membuat blog lelet karena kebanyakan me load javascript seperti di blog ini. tanpa javascript pun responsive kok...

Selain itu tombol share social media ini tidak menggunakan gambar png ataupun font awesome, karena daripada anda membuat tombol share dengan gambar png, tentunya blog jadi berat, makanya saya membuat icon tombol share simple ini dengan menggunakan html dan css saja seperti icon svg.

Tutorial memasang tombol share social media responsive dan simple :
1.  Masuk ke blog anda ==> Tema ==> Edit HTML

2.  Copy code HTML di bawah ini :
<div id='share-button'> <p>Share : </p>
  <a expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow' style='background:#4dc247;' target='_blank' title='Whatsapp'><svg viewBox='0 0 24 24'><path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg></a>
  <a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><svg viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg></a>
  <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " (by: @ismynr.xyz) "' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><svg viewBox='0 0 24 24'> <path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg></a>
  <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><svg viewBox='0 0 24 24'><path d='M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z'/></svg></a>
  <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippet' rel='nofollow' style='background:#2554BF;' target='_blank' title='Linkedin'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg></a>
 </div>
Jangan lupa pada code @ismynr.xyz, ganti dengan username akun twitter anda
Kemudian, Cari kode dengan ctrl+f :
<data:post.body/>
Letakan code HTML tadi di bawah / setelah <data:post.body/>, kalo kodenya banyak pastikan pilih kode yang ada di dalam tag :
<b:if cond='data:view.isPost'>
atau
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Kalo bingung intinya taruh kode HTMLnya setelah <data:post.body/> aja.

3.  Copy code CSS di bawah ini :
#share-button{margin:10px 0;padding:5px;border: 1px solid #bdc3c7;overflow:hidden;border-radius:2px 30px;}
#share-button p{font-weight:bold;float:left;display:block;padding:10px 5px 8px 8px!important;margin:0 3px 3px 0;}
#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);display:block;border-radius:1px 1px;color:#fafafa;padding:5px 8px;margin:0 5px 3px;border-radius:50%;box-shadow:4px 4px 0px #000000}
#share-button a:hover{top:2px; left:2px;box-shadow:1px 1px 0px #000000} 
#share-button a svg{width:24px; height:24px;}
#share-button a svg path{fill:#fff}
Kemudian, Cari code dengan ctrl+f :
</style>
atau
]]></b:skin>
Letakan code CSS tadi di atas / sebelum code ]]></b:skin> atau </style>

4.   Simpan Tempelate nya

Silahkan anda kreasikan sendiri dengan css nya, jika tidak suka dengan style nya, speerti di bawah :

  • menggati kotak share buttonnya di #share-button, 
  • mengganti huruf / aphabet tulisan share berarti ubah cssnya di #share-button p
  • mengganti tampilan tombol sharenya ada di #share-button a
  • mengubah efek ketika di klik / ketika kursor ke tombol share ada di css #share-button a:hover
  • memperbesar atau memperkecil icon social media di dalam tombol ada di #share-button a sgv
  • ingin mengubah warna fill nya icon social media ada di #share-button a sgv path

Klo ingin menambahkan social media lainya atau mengganti icon iconya silahakan kunjungi icon svg di material design icon, dan tambahkan pada HTML nya persis seperti diatas... Tinggal diubah link dan icon svg nya saja

tag :
cara membat tombol share di blog
membuat tombol share dibawah postingan 
membuat tombol share di setiap postingan 
membuat icon social media diblog
cara membuat share button
tombol share responsive
tombol share keren
membuat tombol share whatsap di blog
membuat tombol share simple
logoblog

Share :

No comments:

Post a Comment

Berkomentarlah jika ada pertanyaan mengenai artikel ini, Kesan pembaca atau saran yang membangun blog ini.
*Gunakan akun google dan ceklis kolom (Notify Me) agar mendapatkan pemberitahuan balasan komentar

 
Back to Top