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...

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>
 <!-- untuk tombol Whatsapp -->
  <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>
 <!-- untuk tombol Facbook -->
  <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>
 <!-- untuk tobol Twitter -->
  <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @ismynr.xyz) &quot;' 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>
 <!-- untuk tombol Linkedin -->
  <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + 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>
   <!-- untuk tombol Telegram -->
  <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.url + &quot;&amp;text=Ada%20yang%20keren%20lho,%20nyesel%20kalo%20ga%20buka...%20kunjungi:&quot;' rel='nofollow' style='background: #32afed;' target='_blank' title='Share to Telegram'><svg viewBox='0 0 24 24'><path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z.083 -0.219,-0.037c-2.5,1.596 -6.939,4.43 -6.939,4.43Z'/></svg></a>
 </div>

Jangan lupa pada code @ismynr.xyz, ganti dengan username akun twitter anda

Kemudian, Cari kode berikut 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 code berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Kalo bingung intinya taruh kode HTMLnya setelah <data:post.body/> aja, cobain satu satu sampai sudah pas posisinya.

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 code berikut

]]></b:skin>

Letakan code CSS tadi di atas / sebelum code </style> atau ]]></b:skin>

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