Panduan Memasang Tombol Sosial Share Blogger Ala Mas Sugeng Terbaru

Bisa Oi - Kalian tahu apa itu tombol sosial share Blogger ? Saat kalian berkunjung di sebuah blog, pastinya akan menemui sebuah logo sosial media yang biasanya diatasnya ada tulisan share/bagikan. Adanya sebuah tombol share bertujuan memungkinkan sebuah artikel yang ada di blog dapat diketahui secara luas melalui media sosial. Jadi, tombol share merupakan menu navigasi yang tersedia di sebuah blog berfungsi untuk berbagi artikel secara luas melalui media sosial.


Media sosial merupakan tempat terbaik untuk para Blogger untuk mempromosikan artikelnya secara luas. Oleh karena itu, blog akan mendapatkan trafik banyak jika kalian bisa memanfaatkan dengan baik.

Pemasangan tombol share di sebuah blog itu sangat di anjurkan, selain dapat meningkatkan pengunjung juga bisa mempermudah untuk mengakses blog kalian lebih luas. Maka dari itu, kali ini saya akan membagikan tombol sosial share keren ala mas sugeng. Tombol share ini memiliki tampilan yang simple dan minimalis membuat semakin responsive di blog kalian. Langsung saja ikuti langkah untuk memasangnya pada ulasan berikut ini.

Langkah Memasang Tombol Sosial Share Ala Mas Sugeng

1. Masuk ke edit template blog kalian.
2. Letakkan kode berikut ini tepat di bawah kode <data:post.body/>. kode tersebut biasanya lebih dari satu, silahkan letakkan kode tersebut tepat di bawah kode <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>

3. Selanjutnya, letakkan kode CSS berikut tepat di atas kode </head> atau ]]></b:skin>.

<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>

4. Simpan template blog kalian.

Perhatian :
Jika widget tombol share masih belum muncul, coba letakkan kode pada <data:post.body/> yang lain. Selain itu, jika tombol share tidak rapi kalian bisa mengatur lebar pada kode 15% sesuai dengan keinginan. 

Demikian panduan memasang tombol sosial share Blogger ala mas sugeng terbaru. Terus update perkembangan turorial blogging dengan tampilan baru.