CARA MEMBUAT TOMBOL SHARE KEREN DI BLOGSPOT
04 September 2019
Edit
4 Cara Membuat Tombol Share di Blogspot – (Baca Juga : Cara Membuat Formulir Kontak di WordPress). Sudah menjadi kewajiban bagi para blogger untuk memasang tombol berbagi pada website atau blog, karena blog tanpa tombol berbagi media sosial seperti kopi tanpa gula. Pahitnya tuh disini hehehe :)
Jika Anda menggunakan templat terbaru maupun premium, kemungkinan templat tersebut telah dilengkapi dengan tombol berbagi media sosial di bawah setiap posting artikel.
Tetapi jika Anda kurang nyaman dengan tampilan tombol share yang tersedia di templat, Anda dapat memanfaatkan tombol share media sosial dari Sumome (gratis loh) yang terlihat seperti ini.
Berikut Langkah Membuat Tombol Share Blogger Lewat Sumome
Silahkan Sign Up / Daftar ke Sumome terlebih dahulu untuk membuat akun.
Setelah data semua terisi, selanjutnya Anda akan diarahkan untuk menyalin code Sumo dan meletakkan di Edit HTML pada Akun Blogger seperti gambar berikut :
Pastekan code Sumo di bawah body (mencarinya dengan tekan CTRL + F).
Simpan dan lihat perubahannya.
Selanjutnya simpan, lalu lihat hasilnya setelah Anda melakukan langkah-langkah di atas.
Jangan lupa untuk backup terlebih dahulu template Anda, agar jika terjadi kesalahan penempatannya, Anda bisa mencobanya kembali.
Jika Anda pengguna WordPress .org, Anda bisa memasang plugin tambahan untuk menampilkan tombol berbagi. Anda dapat mendownloadnya dari SINI.
Cara Membuat Tombol Share Yang Ringan Dan Responsive
1. Langkah pertama silahkan masuk ke akun Blogger.
2. Pilih Tema, lalu klik Edit HTML
3. Salin code script di bawah ini dan letakkan di atas <data:post.body/>
- Letakkan di atas <data:post.body/> (maka tombol share berada di atas postingan)
- Letakkan di bawah <data:post.body/> (maka tombol share berada di bawah postingan)
<b:if cond='data:blog.pageType == "item"'> <div class='tombol-berbagi-arlina'> <div class='tombol-berbagi-arlina-fb'> <a class='tombol-berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='tombol-berbagi-arlina-tw'> <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a> </div> </div> </b:if>
4. Langkah terakhir, temukan code script ]]></b:skin> pada Edit HTML
5. Kemudian salin dan tempelkan code di bawah ini, tepat di atas code ]]></b:skin>
5. Kemudian salin dan tempelkan code di bawah ini, tepat di atas code ]]></b:skin>
/* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU7uniW5BtE_wJ1lsCWG2t8gSjLc6pQYe-sGuKScM5T87zP-Drhds96zsgazI5oDAr04n3jWL4ksHsZ8jxyBxqxEAkOP5PB2DZ8WgVD6j32WeGbUVOR2ryGqpc00swKD9-x-fIS0xq9YwJ/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}
}
Selanjutnya simpan, lalu lihat hasilnya setelah Anda melakukan langkah-langkah di atas.
Jangan lupa untuk backup terlebih dahulu template Anda, agar jika terjadi kesalahan penempatannya, Anda bisa mencobanya kembali.
Cara Membuat Tombol Share Keren dan SEO Friendly
1. Langkah pertama silahkan masuk ke akun Blogger.
2. Pilih Tema, lalu klik Edit HTML
3. Salin code script di bawah ini dan letakkan di atas <data:post.body/>
- Letakkan di atas <data:post.body/> (maka tombol share berada di atas postingan)
- Letakkan di bawah <data:post.body/> (maka tombol share berada di bawah postingan)
<div id='share-this'> <a class='this-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a> <a class='this-tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a> <a class='this-gp' expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div>
4. Langkah terakhir, temukan code script ]]></b:skin> pada Edit HTML
5. Kemudian salin dan tempelkan code di bawah ini, tepat di atas code ]]></b:skin>
5. Kemudian salin dan tempelkan code di bawah ini, tepat di atas code ]]></b:skin>
* share button */
#share-this{overflow:hidden;margin:10px 18px;line-height:1.4em}#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;width:44px;padding:0;text-align:center;height:41px;overflow:hidden;}#share-this a.this-gp i{margin:5px 0 0;text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pODYlTWZQshpfBzRxxoCNBC9fEW8xCZUFYEFwG-oa4povTbO9SqsVg7nqlEayxFxrE5M8bdJSvQ6f_e67nfO7ygUyjCYmJ2BNtaKdLFr8ti3EZjeVbv_HqmORNEJonG8V1E-Oq3EIKE/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}.gp-del{display:none}
.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}
@media screen and (max-width:414px){#share-this{margin:10px 15px}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}
}
Selanjutnya simpan, lalu lihat hasilnya setelah Anda melakukan langkah-langkah di atas.
Jangan lupa untuk backup terlebih dahulu template Anda, agar jika terjadi kesalahan penempatannya, Anda bisa mencobanya kembali.
Cara Membuat Tombol Share Ala Maz Fauzi Rizal
1. Langkah pertama silahkan masuk ke akun Blogger.
2. Pilih Tema, lalu klik Edit HTML
3. Salin code script di bawah ini dan letakkan di atas <data:post.body/>
- Letakkan di atas <data:post.body/> (maka tombol share berada di atas postingan)
- Letakkan di bawah <data:post.body/> (maka tombol share berada di bawah postingan)
<br/>
<br/>
<center><iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&&share=true&width=140&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' style='border:none; overflow:hidden; width:140px; height:21px;'/>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='fauzi_maz' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></center>
Selanjutnya simpan, lalu lihat hasilnya setelah Anda melakukan langkah-langkah di atas.
Jangan lupa untuk backup terlebih dahulu template Anda, agar jika terjadi kesalahan penempatannya, Anda bisa mencobanya kembali.
Cek dan pastikan code-code tersebut di taruh pada tempat yang benar, maka tampilannya akan seperti berikut.
Penting :
- Warna Biru adalah letak posisi Tombol Share, Anda bebas menentukan center, left, or right
- Warna Merah adalah username twitter saya wkwkwk :D Anda bisa rubah sesuai dengan username twitter Anda.
Cara Agar Tombol Share Default Dengan Tampilan Mobile
Nah cara ini saya tujukan untuk Anda yang tidak memiliki atau tidak menggunakan template yang responsive ya, jika Anda sudah menggunakan template yang responsive boleh skip cara berikut ini. Bagi yang punya template responsive harus bersyukur, namun bagi yang masih belum punya ya tetap semangat pasti ada solusinya hehe :)
Berikut ini cara untuk pengguna template bawaan asli milik blogger agar bisa responsive :
1. Langkah pertama silahkan masuk ke akun Blogger.
2. Pilih Tema, lalu klik Edit HTML
3. Langkah selanjutnya cari code :
<a href='javascript:void(0);'><data:shareMsg/></a>
Jika ketemu, maka tampilannya akan seperti berikut :
4. Salin dan tempelkan code di bawah ini, di bawah code </div> setelah code script <a href='javascript:void(0);'><data:shareMsg/></a> :
<a href='javascript:void(0);'><data:shareMsg/></a>
Jika ketemu, maka tampilannya akan seperti berikut :
4. Salin dan tempelkan code di bawah ini, di bawah code </div> setelah code script <a href='javascript:void(0);'><data:shareMsg/></a> :
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&&share=true&width=135&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' style='border:none; overflow:hidden; width:135px; height:21px;'/>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='fauzi_maz' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
NB : Anda bisa merubah warna merah dengan username twitter Anda (tanpa ada @)
Penampakan code script Edit HTML sebelum ditambahkan code script tombol share :
<b:if cond='data:top.showMobileShare'> <div class='mobile-link-button goog-inline-block' id='mobile-share-button'> <div class='mobile-link-button goog-inline-block' id='mobile-share-button'> <a href='javascript:void(0);'><data:shareMsg/></a> </div> </b:if>
Penampakan code script Edit HTML sesudah ditambahkan code scripttombol share :
<b:if cond='data:top.showMobileShare'> <div class='mobile-link-button goog-inline-block' id='mobile-share-button'> <div class='mobile-link-button goog-inline-block' id='mobile-share-button'> <a href='javascript:void(0);'><data:shareMsg/></a> </div> <iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&&share=true&width=135&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' style='border:none; overflow:hidden; width:135px; height:21px;'/> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='HeruAryaa' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a> <script src='https://platform.twitter.com/widgets.js' type='text/javascript'/> </b:if>
Kelebihan memakai tombol share di atas :
- Tentunya Responsive
- Fast Loading
- Dapat menampilkan URL dan Judul Deskripsi
- Share akan mengarah ke tab baru, jadi tidak akan menimpa halaman sebelumnya, maupun share akan tampil pada popup
- Rapi dan masih banyak lagi
Kesimpilan :
Gunakanlah code script dari panduan di atas dengan baik dan benar, agar Anda bisa menerapkannya dengan mudah. Pilih menurut Anda mana dari ke empat cara yang paling mudah Anda lakukan.
Oke sobat blogger, sudah tidak terasa kita telah berada di ujung konten panduan membuat tombol share keren di blogspot. Mudah-mudahan bisa membantu Anda khususnya bagi yang akan memasang tombol share.
Sekian dari saya dan terimakasih :)