Cara Membuat Share Button Sticky atau Melayang Seperti Igniplex

Cara Membuat Share Button Sticky Seperti Igniplex - Halo sobat blogger, ingin mempercantik tampilan blog sobat dengan Share Button Sticky ala Igniplex? Sobat mampir di blog yang tepat nih, hehe.

Oke, pada kesempatan kali ini saya akan memberikan sedikit tutorial yang kepada sobat sekalian agar Share Button di template sobat terlihat menarik dan enak dipandang. Cara ini sendiri saya terapkan di template Viomagz, untuk template yang lain bisa obat sesuaikan sendiri sampai benar-benar bisa work.

Perlu diketahui nih sobat, bahwasanya share button merupakan salah satu cara mencari sumber tambahan traffic pada blog kita. Jika informasi yang kita sajikan di blog kita itu menarik, maka pengunjung tidak akan segan untuk membagikan blog kita ke sosial medianya.

Pada tutorial kali ini, saya terinspirasi dari blog legendaris yaitu igniplex karya mbak igniel yang super wow lah wkwk. Saat pertama kali mengunjungi blog tersebut, tertarik saja begitu dengan Share Buttonnya yang melayang dan apik. Dan untuk tutorial kali ini, kita hanya perlu menambah dan merombak sedikit pada bagian CSS sharenya saja.

Yuk tunggu apalagi, simak berikut tutorialnya.

Cara Membuat Share Button Sticky atau Mengambang Seperti Igniplex

1. Silahkan sobat login ke akun blog kalian.

2. Masuk pada menu TEMA kemudian klik EDIT HTML.

3. Sebelumnya hapus terlebih dahulu kode CSS Share Button sobat.

4. Jika sudah langsung saja cari kode CSS yang persis seperti dibawah ini.

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

5. Ganti kode overflow: hidden; diatas menjadi  overflow: unset; seperti dibawah ini.

/* WRAPPER */
#wrapper {

background:$(posts.background.color);
max-width:1000px;
margin:0 auto;
padding:70px 30px 30px;

overflow:unset;
}

6. Hapus terlebih dahulu kode CSS Share Button bawaan template sobat.
7. Berikutnya copy kode CSS dibawah ini lalu pastekan di atas kode ]]></b:skin>

/* Share button */
.jejakpintarShare{width:100%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#f9f9f9;margin-top:30px;padding:10px 0 0;position:sticky;position:-webkit-sticky;bottom:0;z-index:1}.jejakpintarShare svg{width:17px;height:17px;vertical-align:-4px}.jejakpintarShare svg path{fill:#757575;transition:all .3s ease}.jejakpintarShare .total{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%;font-size:16px;font-weight:500;color:#009688;padding:10px 0;border-top:3px solid #009688;cursor:not-allowed}.jejakpintarShare .total i{font-style:normal;white-space:nowrap}.jejakpintarShare .total svg{margin-right:15px}.jejakpintarShare .total svg path{fill:#009688}.jejakpintarShare a{width:100%;padding:10px 0;border-top-width:3px;border-top-style:solid;text-align:center;box-shadow:none;transition:all .3s ease}.jejakpintarShare a:hover svg path{fill:#fff!important}.jejakpintarShare a.facebook{border-color:#3a579a}.jejakpintarShare a.facebook:hover{background-color:#3a579a}.jejakpintarShare a.facebook svg path{fill:#3a579a}.jejakpintarShare a.twitter{border-color:#00abf0}.jejakpintarShare a.twitter:hover{background-color:#00abf0}.jejakpintarShare a.twitter svg path{fill:#00abf0}.jejakpintarShare a.pinterest{border-color:#cd1c1f}.jejakpintarShare a.pinterest:hover{background-color:#cd1c1f}.jejakpintarShare a.pinterest svg path{fill:#cd1c1f}.jejakpintarShare a.linkedin{border-color:#2554BF}.jejakpintarShare a.linkedin:hover{background-color:#2554BF}.jejakpintarShare a.linkedin svg path{fill:#2554BF}.jejakpintarShare a.tumblr{border-color:#314358}.jejakpintarShare a.tumblr:hover{background-color:#314358}.jejakpintarShare a.tumblr svg path{fill:#314358}.jejakpintarShare a.whatsapp{border-color:#4dc247}.jejakpintarShare a.whatsapp:hover{background-color:#4dc247}.jejakpintarShare a.whatsapp svg path{fill:#4dc247}.jejakpintarShare a.messenger{border-color:#448AFF}.jejakpintarShare a.messenger:hover{background-color:#448AFF}.jejakpintarShare a.messenger svg path{fill:#448AFF}.jejakpintarShare a.telegram{border-color:#448AFF}.jejakpintarShare a.telegram:hover{background-color:#4B97D1}.jejakpintarShare a.telegram svg path{fill:#54A9EB}.jejakpintarShare a.gmail{border-color:#d93025}.jejakpintarShare a.gmail:hover{background-color:#d93025}.jejakpintarShare a.gmail svg path{fill:#d93025}.jejakpintarShare a.line{border-color:#25D366}.jejakpintarShare a.line:hover{background-color:#25D366}.jejakpintarShare a.line svg path{fill:#25D366}@media only screen and (max-width:480px){.jejakpintarShare .total{display:block;text-align:center}.jejakpintarShare .total svg{margin-right:0}.jejakpintarShare .total i{display:none}}

Kode diatas sudah saya minify, jadi sobat tidak perlu lagi memenify-nya kembali.

8. Kemudian cari kode <b:includable id='postsharebutton' var='post'> kemudian ganti dengan kode dibawah ini.

<b:includable id='postsharebutton' var='post'>
<div class='jejakpintarShare'>
<span class='total'><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'/></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'/></svg></a>
<a class='twitter' expr:href='&quot;https://twitter.com/share?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'/></svg></a>
<a class='pinterest' data-pin-config='beside' expr:href='&quot;https://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' 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'/></svg></a>
<a class='linkedin' 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' 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'/></svg></a>
<a class='whatsapp' data-notes='right' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; &quot; + data:post.url' 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 Whatsapp'>
<svg aria-hidden='true' class='svg-inline--fa fa-whatsapp fa-w-14' data-icon='whatsapp' data-prefix='fab' focusable='false' role='img' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z' fill='currentColor'/></svg></a>
<a class='telegram' expr:href='&quot;https://telegram.me/share/url?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share to Telegram'><svg viewBox='0 0 24 24'><path d='M.707 8.475C.275 8.64 0 9.508 0 9.508s.284.867.718 1.03l5.09 1.897 1.986 6.38a1.102 1.102 0 0 0 1.75.527l2.96-2.41a.405.405 0 0 1 .494-.013l5.34 3.87a1.1 1.1 0 0 0 1.046.135 1.1 1.1 0 0 0 .682-.803l3.91-18.795A1.102 1.102 0 0 0 22.5.075L.706 8.475z'/></svg></a>
<a class='line' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Line'><svg viewBox='0 0 24 24'><path d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/></svg></a>
<a class='gmail' expr:href='&quot;https://mail.google.com/mail/u/0/?view=cm&amp;ui=2&amp;tf=0&amp;fs=1&amp;su=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.canonicalUrl' rel='noopener' target='_blank' title='Share on Gmail'><svg viewBox='0 0 24 24'><path d='M20,18H18V9.25L12,13L6,9.25V18H4V6H5.2L12,10.25L18.8,6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z'/></svg></a>
</div>
</b:includable>

8. Kalau sudah, silahkan klik SIMPAN dan selesai

Bagaimana, mudah bukan? Itulah sedikit tutorial Cara Membuat Share Button Sticky atau melayang seperti Igniplex yang dapat JejakPintar berikan. Untuk sobat yang ingin melihat demonya bisa dilihat pada tampilan Share Button blog ini. Apabila ada pertanyaan, silahkan penuhi kolom komentar.

Jangan lupa dishare yaa, dan dukung blog ini agar terus dapat berkembang. Terima kasih:)

Subscribe Our Newsletter