Membuat Tombol Social Share Blogger Simple Ala Mas Sugeng - Masgunggoyo

Membuat Tombol Social Share Blogger Simple Ala Mas Sugeng


Cara Membuat Social Share Button Responsive di Blogger Membuat Tombol Social Share Blogger Simple Ala Mas Sugeng
Media sosial merupakan daerah terbaik para blogger untuk mempromosikan kontennya kepada banyak orang.

Blog akan mendapat banyak trafik kalau teman cerdik memanfaatkan social media menyerupai Twitter, Facebook, Instagram, WhatsApp, Gplus, dll.

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

Maka dari itu sangat disarankan bagi teman untuk memfasilitasi pengunjung blog dengan tombol social share biar mereka Harus membagikannya ke orang lain melalui Social Media.

Nah, di sini aku akan membagikan script social share button simple, minimalis dan responsive. Jika sudah usang ngeblog, teman niscaya tidak ajaib lagi dengan tombol social share menyerupai ini alasannya widget ini pernah digunakan 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/>, instruksi 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 sehabis ]]></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 hingga benar benar cocok dengan template yang teman pakai.

Update

29/03/2019 = Mengganti Google Plus menjadi Pinterest alasannya tutup usia.
Info!: Widget Social Share ini masih memakai Google Plus (belum sempat aku ganti).

Selamat mencoba.
(https://www.masgunggoyo.com/)

0 Response to "Membuat Tombol Social Share Blogger Simple Ala Mas Sugeng"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel