Cara Terbaru Membuat Tombol Share Yang Keren Dan Responsive Di Bawah Postingan Blog Seperti Lapak Info

==Iklan Dipate Disini===

Lapakinfo.net - Pada kesempatan kali ini saya akan berbagi tutorial terbaru yaitu Cara Terbaru Membuat Tombol Share Yang Keren Dan Responsive Di Bawah Postingan Blog Seperti Lapak Info Pada Template Viomagz, Tombol share yang saya bagikan ini sangat responsive sekali dan sangat ringan sekali karena menggunakan Icon SVG dalam pembuatannya. Jadi jika kalian menggunakan tombol share ini tentu tidak akan memberatkan blog kalian di saat proses dan sudah pasti membuat blog kalian lebih menarik dan cantik.

Tombol share ini sangat penting keberadaannya karena dengan adanya tombol share pembaca bisa mudah membagikan informasi yang kita punya dengan mudah yang menurut pembaca informasi tersebut sangat penting. Tombol share ialah salah satu syarat wajib yang bisa membuat blog dan artikel kalian menjadi SEO, Tapi bagaimana jika tombol share bawaan template kalian kurang menarik? Disini saya akan berbagi tutorial membuat tombol share kalian menjadi menarik, responsive, dan bisa bikin pembaca lebih mudah untuk mengkliknya.

Cara Terbaru Membuat Tombol Share Yang Keren Dan Responsive Di Bawah Postingan Blog Seperti Lapak Info Pada Template Viomagz

1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Silahkan kalian Cari dan Hapus kode CSS di bawah 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. Salin kode di bawah ini dan letakan tepat di atas kode ]]></b:skin>.

/* Share button Lapakinfo.net */
.share-this-pleaseeeee{display:inline-block;margin:0;color:#000;text-transform:uppercase;font-size:16px;background:#ffffff;z-index:1;position:relative;padding:0 10px;font-weight:700;transition:all .5s ease}
#share-container {
background: #fff;
width:100%;
display: inline-block;
flex-wrap: nowrap;
align-items: center;
position: -webkit-sticky;
position:sticky;
bottom: 0px;
z-index: 1;
}
#share{width:100%;text-align:center}
#share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;transition:opacity .15s linear;float:left}
#share i{position:relative;top:50%;transform:translateY(-50%)}
.facebook{border-color:#3a579a;border-top-style:solid;border-top-width:3px}
.facebook:hover{background:#3a579a}
#share svg{width:24px;height:24px;vertical-align:-12px}
#share a:hover svg path{fill:#fff}
.twitter{border-color:#55acee;border-top-width:3px;border-top-style:solid}
.twitter:hover{background:#55acee}
.linkedin{background:#0077b5}
.pinterest{border-color:#cb2027;border-top-width:3px;border-top-style:solid}
.pinterest:hover{background:#cb2027}
.whatsapp{border-color:#25d366;border-top-width:3px;border-top-style:solid}
.whatsapp:hover{background:#25d366}

5. Masih dalam mode Edit HTML, sekarang kalian cari kode yang mirip dengan kode di bawah ini yang terletak di bawah kode <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;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
  <!-- linkedin 
  <a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a> -->
  <!-- pinterest -->
  <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://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a>
</div>
</div>

6. Hapus kode tersebut lalu ganti dengan kode di bawah ini

<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-container'>
<div id='share'>
  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='#3a579a'/>
</svg>
</a>
  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
<path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z' fill='#55acee'/>
</svg>
</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'>
<svg style='width:24px;height:24px' 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' fill='#cb2027'/>
</svg>
</a>
  <a class='whatsapp' expr:href='&quot;https://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'>
<svg style='width:24px;height:24px' 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' fill='#25d366'/>
</svg>
</a>
</div>
</div>

7. Simpan template kalian dan selesai.

Jika kalian ingin membuat tombol share tersebut menjadi sticky atau melayang silahkan kalian baca dan ikuti tutorialnya : Cara Membuat Tombol Share Melayang ( Sticky ) Yang Responsive

 Jika kalian mengikuti langkah - langkahnya dengan benar maka tidak terjadi error dalam membuat tombol share yang responsive tersebut.

Bagaimana sangat mudah sekali bukan untuk tutorial Cara Terbaru Membuat Tombol Share Yang Keren Dan Responsive Di Bawah Postingan Blog Seperti Lapak Info Pada Template Viomagz, jika kalian mempunyai pertanyaan seputar postingan di atas atau seputar blogger lainnya silahkan kalian bertanya melalui kolom komentar di bawah ini atau melalui Contact Us. Semoga bermanfaat dan terimakasih sudah berkunjung.

==Iklan Dipate Disini===