Cara Membuat Share Button Blogger

Membuat Tombol Social Share Blogger Simple Ala Mas Sugeng
Daftar Isi Artikel []
Cara membuat tombol bagikan ke media sosial dengan css keren, responsive dan simple tanpa javascript di blogspot. Mirip seperti yang pernah digunakan oleh Mas Sugeng.
Cara Membuat Tombol Social Share Keren Responsive Blog
Media sosial merupakan tempat terbaik para blogger untuk mempromosikan kontennya kepada banyak orang.

Blog akan mendapatkan banyak trafik jika sobat pandai memanfaatkan social media seperti Twitter, Facebook, Instagram, WhatsApp, Gplus, dll.

Secara tidak langsung, sinyal sosial suatu blog juga dapat merampingkan ranking pada mesin pencari. Sehingga memudahkan blog untuk mendapatkan trafik organik.

Maka dari itu sangat disarankan bagi sobat untuk memfasilitasi pengunjung blog dengan tombol social share agar mereka bisa membagikannya ke orang lain melalui Social Media.

Nah, di sini saya akan membagikan script social share button simple, minimalis dan responsive. Jika sudah lama ngeblog, sobat pasti tidak asing lagi dengan tombol social share seperti ini karena widget ini pernah dipakai Mas Sugeng di blog pribadinya (sekarang sudah tidak dipasang).

Cara Memasang Tombol Social Share Keren di Blogger

Pertama buka editor template blog

Cari <data:post.body/>, kode tersebut biasanya lebih dari 1, silahkan letakan script dibawah pada <data:post.body/> yang kedua.
<b:if cond='data:view.isPost'>
<div class='social-buttons-box'>
<div class='social-share fb'>
<div class='logoshare'>
<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>
</div>
<div class='sharelink fcb'>
<a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow external noopener' target='_blank' title='Bagikan ke Facekook'>Share</a>
      </div>
</div>
<div class='social-share tw'>
<div class='logoshare'>
<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>
</div>
<div class='sharelink twt'>
<a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Bagikan ke Twitter'>share</a>
</div>
</div>
<div class='social-share gp'>
<div class='logoshare'>
         <svg viewBox="0 0 24 24">
    <path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z" />
</svg>
</div>
<div class='sharelink gpl'>
<a expr:href='"//www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id + "&amp;target=pinterest"' rel='nofollow noopener external' target='_blank' expr:title='"Pinterest -" + data:view.title'>Share
</a></div>
</div>
<div class='social-share wa'>
<div class='logoshare'>
<svg 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'/>
</svg>
</div>
<div class='sharelink wha'>
<a action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;.&quot; + data:post.url' rel='nofollow' target='_blank' title='Bagikan ke WhatsApp'>Share</a>
</div>
</div>
<div class='social-share tl'>
<div class='logoshare'>
         <svg viewBox='0 0 24 24'>
            <path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z'/>
         </svg>
</div>
<div class='sharelink tel'>
<a expr:href='&quot;tg://msg?text=&quot; + data:post.title + &quot; - &quot; + data:blog.url' rel='nofollow' target='_blank' title='Bagikan ke Telegram'>Share</a>
</div>
</div>
</div>
<div class='clear'/>
</b:if>

Kemudian, letakan CSS ini sebelum </head> atau setelah ]]></b:skin> pada template sobat.
<style>
/* Simple Social Share Widget by MASIHTERJAGA */
.social-buttons-box{margin:20px auto;width:100%;text-align:center}.social-buttons-box>div{display:inline-block}.social-share{position:relative;height:130px;display:block;width:15%}.social-share a{color:#fff;font-size:14px}.social-share:hover svg{fill:#fff}.logoshare svg{width:24px;height:24px;line-height:90px;height:90px}.sharelink{position:absolute;bottom:0;height:40px;line-height:40px;border-top-right-radius:3px;border-top-left-radius:3px;width:100%}.fb svg{fill:#3b5998}.fb{border:1px solid #3b5998;border-radius:3px}.fcb,.fb:hover{background-color:#3b5998}.tw svg{fill:#0084b4}.tw{border:1px solid #0084b4;border-radius:3px}.twt,.tw:hover{background-color:#0084b4}.gp svg{fill:#C92228}.gp{border:1px solid #C92228;border-radius:3px}.gpl,.gp:hover{background-color:#C92228}.wa svg{fill:#128c7e}.wa{border:1px solid #128c7e;border-radius:3px}.wha,.wa:hover{background-color:#128c7e}.tl svg{fill:#08c}.tl{border:1px solid #08c;border-radius:3px}.tel,.tl:hover{background-color:#08c}
</style>

Simpan template dan lihat hasilnya…
Jika widget masih belum muncul, coba letakan pada <data:post.body/> yang lain.

Jika ada tombol tidak rapih silahkan ganti lebar tombolnya dengan mengganti 15%. Sesuaikan sampai benar benar cocok dengan template yang sobat pakai.

Update

29/03/2019 = Mengganti Google Plus menjadi Pinterest karena tutup usia.
Info!: DEMO Widget Social Share ini masih menggunakan Google Plus (belum sempat saya ganti).

Selamat mencoba.