Cara Membuat Share Button Sticky Melayang untuk Blogger


Tombol share memang sudah menjadi bagian yang sangat penting di sebuah blog, dengan adanya tombol share pengunjung akan lebih mudah untuk membagikan sebuah artikel dari blog kita secara otomatis tanpa repot mengcopy link dari artikel.

Berikut ini saya akan membagikan sebuah tutorial cara pasang share button sticky yang melayang, tombol share ini banyak sekali diminati oleh anak blogger dan termasuk saya menggunakan share button ini.

Lansung saja simak dibawah ini, pastikan tidak ada yang terlewat.

Cara Pasang Share Button Melayang

1. Seperti biasa, kalian masuk dulu ke Blogger.
2. Kemudian pergi ke Tema dan Edit HTML atau kalian bisa cadangkan lebih dulu dan edit di notepad lain biar lebih mudah
3. Lalu cari kode seperti di bawah ini. 

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

4. Ubah yang bertuliskan hidden menjadi unset
5. Berikutnya copy code CSS di bawah ini letakkan 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}}

Jangan lupa hapus dulu CSS share button bawaan template kalian

6. Langkah berikutnya cari kode <b:includable id='postsharebutton' var='post'>  ganti dengan kode di bawah 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>


5. Kemudian Simpan Tema dan lihat hasilnya, untuk demonya seperti yang saya pakai ini.
Jika ada hal yang belum jelas kalian bisa tanya di kolom komentar di bawah, saya dengan senang hati untuk membantu.
avatar
Penulis
Tampilkan Komentar
Sembunyikan Komentar

3 Responses to "Cara Membuat Share Button Sticky Melayang untuk Blogger"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel