Cara Membuat Tombol Share Seperti Igniel

Share merupakan kegiatan untuk berbagi kepada orang yang ingin dia tunjukan apa yang dia bagikan. Tujuannya banyak sekali mulai dari isinya yang menarik atau bahkan ingin membuat orang lain tahu tentang yang apa dia share.

Share juga sangat penting untuk blog karena kita bisa mendapatkan visitor dari berbagai media sosial selain dari mesin pencarian. Dengan begitu blog kalian akan lebih dikenal oleh banyak orang dan bisa mendapatkan pengunjung tetap atau bisa dibilang pengunjung yang berkunjung kembali.

Melakukan Share bisa dilakukan dengan 2 cara, yaitu Menekan Tombol Share Yang Ada di Artikel dan Menyalin Link Artikel ke Media Sosial. Tapi kebanyakan orang lebih menggunakan cara ke-1 karena bisa dibilang lumayan mudah.

Tampilan Tombol Share yang dibuat pada blog pun harus juga mudah dipahami oleh pengunjung. Jadi hari ini saya akan membagikan Cara Membuat Tombol Share Seperti Igniel.

Tutorial ini dikhususkan untuk pengguna template VioMagz tapi bisa juga digunakan di template lain asal kalian bisa memodifikasi scriptnya. Jadi kita langsung saja ke tutorialnya.

Membuat Tombol Share Seperti Igniel

1. Pergi ke Blogger > Tema > Edit HTML lalu cari kode #wrapper sehingga muncul seperti ini.

#wrapper {
background: $(posts.background.color);
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: hidden;
}

2. Ganti kode hidden ke unset sehingga menjadi seperti ini.

#wrapper {
background: $(posts.background.color);
max-width: 1000px;
margin: 0 auto;
padding: 70px 30px 30px;
overflow: unset;
}

3. Sekarang kalian cari kode /* Share button */ seperti ini.

/* Share button */
.share-this-pleaseeeee {
 display: inline-block;
 margin: 0;
 color: $(label.color);;
 text-transform: uppercase;
 font-size: 16px;
 background: $(label.bg.color);
 z-index: 1;
 position: relative;
 padding: 0 10px;
 font-weight: bold;
}
#share-container {
   margin: 20px auto 30px;
 overflow: hidden;
}
#share {
 width: 100%;
   text-align: center;
}
#share a {
    width: 25%;
    height: 40px;
    display: block;
    font-size: 24px;
    color: #fff;
    transition: opacity 0.15s linear;
    float: left;
}
#share a:hover {
 opacity: 0.8;
}
#share i {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}
.facebook {
  background: #3b5998;
}
.twitter {
   background: #55acee;
}
.linkedin {
   background: #0077b5;
}
.pinterest {
   background: #cb2027;
}
.whatsapp {
   background: #25d366;
}

4. Kemudian kalian ganti semua kode yang ada di atas dengan kode di bawah.

#share-container {
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
background-color: transparent;
margin-top: 10px;
padding: 10px 0px 0px;
position: sticky;
position: -webkit-sticky;
bottom: 0px;
z-index: 1;
}

5. Setelah itu carilah kode </b:skin> dan letakkan kode di bawah ini tepat di atasnya.

/* Igniel Share Button */
.ignielshare{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#fff;color:#fff;padding:10px 0;border-top:7px dotted #ddd;z-index:1;transition:all .3s ease}
.ignielshare.show{position:sticky;position:-webkit-sticky;bottom:0}
.ignielshare svg{width:17px;height:17px;margin:auto;text-align:center}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:0}
.ignielshare svg path{fill:#fff}
.ignielshare .count{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;font-weight:500;color:#7bbefa;font-size:1.5em;margin-right:20px}
.ignielshare .count svg path{fill:#7bbefa}
.ignielshare i{font-style:normal;margin:0 3px;line-height:0}
.ignielshare a{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:100%;color:#fff;padding:7px;border-radius:25px;box-shadow:none;transition:all .3s ease}
.ignielshare a:not(:last-child){margin-right:7px}
.ignielshare a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}
.ignielshare a.facebook{background-color:#3a579a}
.ignielshare a.twitter{background-color:#00abf0}
.ignielshare a.pinterest{background-color:#cd1c1f}
.ignielshare a.linkedin{background-color:#2554BF}
.ignielshare a.tumblr{background-color:#314358}
.ignielshare a.whatsapp{background-color:#4dc247}
.ignielshare a.messenger{background-color:#448aff}
.ignielshare i{display:none}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
@media screen and (max-width:900px){
.ignielshare i{display:block}
.ignielshare .facebook svg,
.ignielshare .pinterest svg,
.ignielshare .tumblr svg{margin:0}
}
@media screen and (max-width:680px){
.ignielshare{justify-content:space-between}
.ignielshare a i{display:none}
.ignielshare a{justify-content:center}
.ignielshare a:not(:last-child){margin-right:5px}
.ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
}
@media screen and (max-width:480px){
.ignielshare a:not(:last-child){margin-right:3px}
.ignielshare .count{margin-right:15px}
}
/* Igniel Share Button Dark Mode */
.Night .ignielshare{background-color:#292e38}

6. Cari lagi kode <div id='share-container'> seperti ini.

<div id='share-container'>
<div class='label-line-c'>
<p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p>
</div>
<div id='share'>
<!-- facebook -->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<!-- twitter -->
<a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/></a> 
<a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>

7. Kemudian kalian ganti seluruh kode di atas dengan kode ini.

<div id='share-container'>
<div class="ignielshare"> 
<span class="count"> 
<svg viewbox="0 0 24 24">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"></path>
</svg> <i>SHARE</i> </span> 
<a class="facebook" expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick="window.open(this.href,&quot;sharer&quot;,&quot;   toolbar=0,status=0,width=626,height=436&quot;);return false;" rel="nofollow" title="Share to 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"></path>
</svg><i>Share</i></a> 
<a class="whatsapp" expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' onclick="window.open(encodeURI(this.href),&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;" rel="nofollow" title="Share to 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"></path>
</svg></a> 
<a class="messenger" href='fb-messenger://share?link= data:post.url'  rel="nofollow" title="Share to WhatsApp">
<svg viewbox="0 0 24 24">
<path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z"></path>
</svg></a> 
<a class="twitter" expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;" rel="nofollow" title="Share to 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"></path>
</svg></a> 
<a class="pinterest" data-pin-config="beside" expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;" rel="nofollow" title="Share to Pinterest">
<svg viewbox="0 0 24 24">
<path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path>
</svg><i>Pin</i></a> 
<a class="linkedin" expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;" rel="nofollow" title="Share to 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"></path>
</svg></a> 
<a class="tumblr" data-notes="right" expr:href='&quot;https://tumblr.com/share/link?url=&quot; + data:post.canonicalUrl + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' onclick="window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;" rel="nofollow" title="Share to Tumblr">
<svg viewbox="0 0 24 24">
<path d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17"></path>
</svg><i><i>Share</i></i></a> 
</div> 
</div>

8. Selesai, simpan tema.

Penutup

Semoga artikel ini bermanfaat buat kalian semuanya dan jika ada kesalahan di dalam tutorial ini mohon dimaafkan. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA PAYPAL Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    2 Komentar

    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel