Membuat tombol share di blog sebenarnya salah satu cara untuk mendapatkan pembaca di blog lebih banyak. Karena, dengan memasang tombol share ini, pengguna internet yang sudah membaca, akan merasa sangat mudah untuk bisa membagikan kepada orang lain.
Belum lagi, jika artikel atau konten yang kalian tulis sangat bermanfaat buat pembaca dan calon pembaca di luar sana.
Google juga menilai blog atau website dengan cara melihat berapa banyak jumlah share dari pembaca dan tentunya yang paling banyak akan mendapat perhatian lebih. Ya, mendinganlah kalo nggak dapet perhatian dia, diperhatiin Google. Mendingankan..
Nah, pada panduan kali ini, Pangeran akan membagikan banyak sekali atau boleh dibilang kumpulan cara membuat tombol share yang bisa kalian pilih sesuai selera masing-masing. Mulai dari yang memiliki efek, sampai yang responsive dan fast loading tentunya.
Btw, buat kalian pengguna platform wordpress, silakan baca panduan : Cara membuat tombol share di wordpress,
Oke, selengkapnya silakan baca dan pilih jenis tombol share mana yang paling keren untuk diterapkan di blog kalian.
Cara Membuat Tombol Share di Blog by Arlina Design
Inilah demo tampilan dari tombol share by Arlina Design :
1. Login ke Blogger.com > Template > Edit HTML. Caranya seperti ini :
2. Silakan cari code
<data:post.body/>. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code <data:post.body/> di kotak pencarian lalu Enter 2x. Begini hasilnya jika codenya ketemu :
Note :
<data:post.body/> biasanya dalam satu template terdapat 1-4. Jadi, silakan pilih yang ke-2
3. Jika codenya sudah ketemu. Copy dan pastekan code di bawah ini, tepat di bawah code
<data:post.body/> (jika ingin membuat tombol share di bawah postingan blog) atau tempat di atas code <data:post.body/> (jika ingin membuat tombol share di atas postingan blog).
<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. Cari kembali code
]]></b:skin> atau </style> pada Edit HTML. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code ]]></b:skin> atau </style> di kotak pencarian lalu Enter. Begini hasilnya jika codenya ketemu :
5. Jika codenya sudah ketemu. Copy dan pastekan code di bawah ini, tepat di atas code
]]></b:skin> atau </style>.
/* 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://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/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}
}
6. Pastikan dulu penempatan codenya sudah benar. Jika sudah, langsung klik Simpan Template.
Kelebihan Membuat Tombol Share Arlina :
- Fas Loading
- Responsive
- Rapi
- Share tampil pada new tab
- Menampilkan Judul Deskripsi dan URL
Kelemahan Membuat Tombol Share Arlina:
- Share link pada tombol twitter tidak disertai judul post
- Share twitter tanpa Username
Cara Membuat Tombol Share di Blog by Bung Frangki
Inilah demo tampilan dari tombol share by Bung Frangki :
1. Login ke Blogger.com > Template > Edit HTML. Caranya seperti ini :
2. Cari code
]]></b:skin> atau </style> pada Edit HTML. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code ]]></b:skin> atau </style> di kotak pencarian lalu Enter. Begini hasilnya jika codenya ketemu :3. Jika codenya sudah ketemu. Copy dan pastekan code CSS di bawah ini, tepat di atas code
]]></b:skin> atau </style> :
* 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://1.bp.blogspot.com/-8EBLsebvDcE/VetKoqEQEHI/AAAAAAAAFYQ/WcZiHE4k2pw/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}
}
4. Silakan cari code
<data:post.body/>. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code <data:post.body/> di kotak pencarian lalu Enter 2x. Begini hasilnya jika codenya ketemu :
Note :
<data:post.body/> biasanya dalam satu template terdapat 1-4. Jadi, silakan pilih yang ke-25. Jika codenya sudah ketemu. Copy dan pastekan code di bawah ini, tepat di bawah code
<data:post.body/> (jika ingin posisinya di bawah postingan) atau tempat di atas code <data:post.body/> (jika ingin posisinya di atas 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>
6. Pastikan dulu penempatan codenya sudah benar. Jika sudah, langsung klik Simpan Template.
Kelebihan Membuat Tombol Share Bung Frangki:
- Fas Loading
- Responsive
- Rapi
- Share tampil pada Pop Up
- Menampilkan Judul Deskripsi dan URL
Kelemahan Membuat Tombol Share Bung Frangki:
- Share twitter tanpa Username
Cara Membuat Tombol Share di Blog by Tulisan Wortel V.1
Inilah demo tampilan dari tombol share di blog by Tulisan Wortel V.1 :
Sebenarnya ini adalah tombol share yang menjadi favorit Pangeran di blog selama ini. Namun, karena banyak temen-temen blogger yang minta scriptnya, ya Pangeran mencoba merelakan untuk nggak menggunakan ini.
Biarlah kalian yang menggunakannya. Panduannya sebagai berikut :
1. Login ke Blogger.com > Template > Edit HTML. Caranya seperti ini :
2. Silakan cari code
<data:post.body/>. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code <data:post.body/> di kotak pencarian lalu Enter 2x. Begini hasilnya jika codenya ketemu :
Note : <data:post.body/> biasanya dalam satu template terdapat 1-4. Jadi, silakan pilih yang ke-2
3. Jika codenya sudah ketemu. Copy dan pastekan code di bawah ini, tepat di bawah code
<data:post.body/> (jika ingin posisinya di bawah postingan) atau tempat di atas code <data:post.body/> (jika ingin posisinya di atas 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='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'/> <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>
- Ganti code warna merah dengan username twitter kalian tanpa @
- Ganti 2 code warna kuning untuk mengatur posisi tombol menjadi di
leftatauright
4. Pastikan dulu penempatan codenya sudah benar. Jika sudah, langsung klik Simpan Template.
Supaya Tombol Share tampil di Mobile pada template default (bawaan) blogger
Jika blog kalian memang sudah resposive, tidak perlu menerapkan cara ini. Cukup ikuti panduan di atas sudah bisa tampil pada versi mobile. Cara ini hanya untuk pengguna template default (bawaan) blogger.1. Masih berada pada edit HTML kalian tadi. Kemudian silakan cari code <a href='javascript:void(0);'><data:shareMsg/></a>. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code <a href='javascript:void(0);'><data:shareMsg/></a> di kotak pencarian lalu Enter. Begini hasilnya jika codenya ketemu :
2. Jika codenya sudah ketemu. Copy dan pastekan code di bawah ini, tepat di bawah code
</div> setelah code <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='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'/>
- Ganti code warna merah dengan username twitter kalian tanpa @
(Ikuti cara mengeditnya) Sebelum ditambahkan code 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>
(Ikuti cara mengeditnya) Setelah ditambahkan code 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> <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>
4. Pastikan dulu penempatan codenya sudah benar. Jika sudah, langsung klik Simpan Template.
Kelebihan :
- Fas Loading
- Responsive
- Rapi
- Share tampil pada Pop Up (twitter) dan New tab (facebook)
- Akun twitter username yang bisa diganti
- Menampilkan Judul Deskripsi dan URL
Kelemahan :
- Pemasangan di blog yang sedikit rumit
Catatan :
Panduan membuat tombol share di blog ini bisa kalian terapkan pada template apapun di blog kalian. Asalkan 2 syarat ini kalian penuhi :
- Template belum memiliki tombol share apapun.
- Jika sudah ada dan ingin mengganti, silakan hapus code CSS dan HTML yang berada pada blog kalian kemudian baru terapkan panduan ini.
Panduan Terkait
Cara Baru Memasang Tombol Follow Twitter di Blog
Memasang tombol follow twitter di blog menjadi suatu hal yang sangat banyak dilakukan blogger untuk menambah followers melalui pembaca di blognya. Jangan lewatkan kesempatan ini. Terapkan panduannya sekarang.
—o0o—
Apakah panduannya sulit? Atau masih bingung? Tapi, Pangeran harap jika kalian mengikuti panduannya dengan baik, sangat mudah sekali untuk membuat tombol share di blog yang sudah Pangeran tulis pada panduannya di atas.
Okelah. Semoga panduannya bisa membantu kalian. Nanti, masih ada panduan selanjutnya masih tentang tombol share di blog dengan versi yang bisa kalian atur sendiri. Buat yang mau request tutorial, silakan tulis di komentar.
Supaya nggak ketinggalan, silakan berlangganan via email kalian, ya. Seperti biasa. Terimakasih sudah membaca panduan ini. Pangeran Wortel pamit. See you..
Thank’s to : arlina design dan bung frangki
Request Tutorial by : Duta MOD APK GAMES
Ngeliat koding lagi, barusan benerin script share button bawaan template di blog gue kemaren. Hmm, mungkin nanti kalo udah bener-bener senggang baru deh bisa maen kode-kode lagi deh, eh apasih, kode tempate widget blog maksudnya. hehe
Iya, widget ini penting banget, biar kalo pembaca kita mau recommend blog yang dia suka ke temennya jadi gampang.
Tiap baca post lo selain grafisnya rapi, penjelasannya itu loh ru, lengkap banget, terus semanget ya buat konten blognya, happy blogging. 🙂
wahhh makasih bro, udah bisa diterapin di blog gue ..
Sudah terlanjur pake aplikasi share button lain, sementara udah cukup buat saya..
Mungkin nanti kalau merasa bosan, bisa coba pake model yang ini.
Pankapan ah mau mainan koding HTML lagi buat nambah fitur share ini. Soalnya sekarang udah terlalu nyaman (dan takut berantakan) sama template saya. Hehe. Lama nggak megang koding kodingan karena tuntutan kerjaan jadi lupa lupa koding HTML X(
Makasih ilmunya ya, Pange 😀
*ikut ikutan Icha*
Wahhh… keren tuh, pengen dicoba..
O ya, kakak Pangeran aku mau nanya, kalau mau buat artikel terkait caranya gimana ya?
Soalnya aku udah coba semua cara yg ada di blog-blog tetangga, tapi nggak ada satupun yg berhasil..
Itu kenapa ya? Ada ada yg salah sama blog qu?
#SalamSapa
yang sekarang digunakan diblog ini bagaimana codenya kak?. kayaknya keren,, hehe
malam, pange!
saya deka, salam kenal.
sudah beberapa kali berkunjung dan belajar, sangat terbantu sekali karena pange blognya khas sekali, membahas sesuatu lumayan detail.
alhamdulillah saya terbantu hehehe.
saya adalah blogger baru yang mempercantik blog, dan kemudian sebelum membahas sesuatu melihat panduan yang diberikan pange, mudah mudahan pange bersedia mampir ke blog saya sebagai penilai dan mengkoreksi tulisan di blog saya.
semoga selalyu diberikan kesehatan, keberkahan, kesuksesan dan kebahagiaan buat pange dan keluarga, aamiin
Lah terus gimana cara buat tombol share social abang yang sekarang?
makasih tutornya,,,, otw praktek