Iklan Bawah Artikel

Cara Membuat Share Button Sticky atau Melayang Seperti Igniplex

Cara Membuat Sticky Share Button 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

Previous
Next Post »
avatar
Kecanduan Berbagi Ilmu dan Wawasan

Related Posts

Buka Komentar
Tutup Komentar

9 Cuitan

  1. Alhamdulillah blog sy sdh ada Mas. Krn menggunakan Template Igniplex. Memang tombol share stickynya bagus dan responsiv banget Mas.

    Oia kita partneran blog yuk Mas.

    ReplyDelete
  2. Mantap mas, terimakasih...

    ReplyDelete
    Replies
    1. Sama sama mas, Terima kasih sudah mampir diblog kami🙏

      Delete
  3. replica watches are amazing reproduction of original authentic swiss luxury time pieces. ux san francisco

    ReplyDelete
  4. Websites we think you should visit… [...]although websites we backlink to below are considerably not related to ours, we feel they are actually worth a go through, so have a look[...]…… ux designer san francisco

    ReplyDelete
  5. Min kalo gak ada kode gantinya dimana?

    ReplyDelete
    Replies
    1. cari aja kode share yang ditemplate agan

      Delete
  6. Biar profilnya di bawah next prev bukan di bawah postingan gmna mas caranya

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel