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='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<!-- twitter -->
<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<!-- linkedin
<a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'><i class='fa fa-linkedin'></i></a> -->
<!-- pinterest -->
<a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/></a>
<a class='whatsapp' expr:href='"https://wa.me/?text=" + data:post.title + "%20%2D%20" + 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='"http://www.facebook.com/sharer.php?u=" + 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='"http://twitter.com/share?url=" + 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + 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='"https://wa.me/?text=" + data:post.title + "%20%2D%20" + 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.
