Memasang Tombol Share di Blog - Pada postingan ke dua di hari ini akan membuatkan sebuah share button pada postingan yang digunakan blog ini. Tutorial ini Saya buat atas undangan teman blogger di sini.
Share button ini mempunyai kegunaan untuk memudahkan pengunjung yang ingin membuatkan artikel yang dirasa bermanfaat ke jaringan sosial media mereka. Seperti Facebook, Twitter, Google plus, dan Linkedin. Share button ini nantinya akan muncul di setiap postingan blog sobat.
Baca juga : Memasang Widget Share Button di Postingan
Untuk tampilan menyerupai screenshot di bawah ini atau dapat dilihat eksklusif di bawah artikel blog ini (jika belum diganti)
Berikut cara penerapannya :
1. Login ke Blogger > Template > Klik Edit HTML > Cari isyarat di bawah ini lalu pilih yang ke dua dalam markup post (bukan mobile post)
<data:post.body/>2. Kemudian salin isyarat di bawah ini sempurna sesudah isyarat yang disebutkan tadi
<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>3. Selanjutnya terapkan isyarat di bawah ini sempurna sebelum ]]></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfKOAWgQxES3-Ug32Gm3I72bdSeE3WzlENh0_E5Ip40dfkHeP4Y4MV__LdFeO8xM5yteylBri0SXhcgMmLce5m2X9LV0QgrLwhU2dpIngppA4GODYg39DveghXFC_kN5Q7n-nUcOtt6LoQ/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}}4. Simpan template.
Bagi teman yang ingin mempunyai Kode Promo Hosting Terbaru, silakan kunjungi Promo Hosting
Demikian cara Memasang Tombol Share di Blog, biar bermanfaat.
Menambahkan widget share button merupakan salah satu cara untuk mendapat pembaca lebih banyak di blog kita. Karena, dengan memasang widget share ini pengunjung akan jadi lebih gampang untuk membagikan konten di sosial media miliknya.
Mungkin sudah banyak yang sudah tahu bagaimana cara menambahkan widget share dan mungkin juga ada sebagian yang belum tahu, jadi tidak ada salahnya kali ini akan menyebarkan tips Cara Memasang Widget ShareThis di Blogger dengan efek melayang di pinggir halaman atau dipasang di dalam postingan blog. Tips ini juga sekaligus untuk menjawab ajakan dari Andika Pandanu lewat formulir kontak blog ini sebagai berikut
Bagi yang ingin memasang widget ShareThis ini silakan ikuti langkah-langkah di bawah ini.
Pertama, kalau teman belum mempunyai akun di ShareThis silakan daftar terlebih dahulu di link ini https://www.sharethis.com. Cara daftarnya klik hidangan Account di pojok kanan atas halaman ShareThis, lalu akan muncul halaman ibarat ini dan klik goresan pena Sign up - it's free
Kemudian tambahkan keterangan email, password dan alamat blog di halaman selanjutnya. Klik tanda centang di Privacy Notice dan klik tombol GET STARTED - IT'S FREE
Setelah masuk di dasbor ShareThis, klik tombol Get The Code untuk memverifikasi
Kemudian klik tombol Copy dan pastekan instruksi tersebut di dalam template editor blog sebelum instruksi </head> atau instruksi </head><!--<head/>-->, kalau sudah ditambahkan klik tombol Simpan tema.
Jika terdapat pesan kesalahan dikala klik tombol Simpan tema, silakan tambahkan instruksi amp; pada link JS ShareThis misalnya ibarat ini
Tambahkan dengan instruksi yang saya tandai di bawah ini
Jika sudah, kembali ke dasbor ShareThis dan klik tombol Verify. Setelah itu akan muncul pesan All systems go! We've verified sharethis.js in installed dan Widget ShareThis siap digunakan. Biar lebih afdol, kini teman klik hidangan Property Settings. Kemudian klik tombol Resend Verification Email dan cek email untuk verifikasi email dari ShareThis.
Nah kini teman tinggal mengaktifkan tombol mana yang ingin dimunculkan di blog, klik hidangan Share Buttons dan pilih style yang ingin digunakan. Misalnya saya pilih Sticky Share Buttons, maka aktifkan tombol dari off ke on ibarat ini
Di sini teman juga sanggup mengatur tombol share apa saja yang ingin diaktifkan dan beberapa pengaturan lainnya dengan mudah.
Reaction Buttons
Untuk mengaktifkan tombol Reaction Buttons, teman hanya perlu pilih hidangan Reaction Buttons lalu klik Inline Reaction Buttons dan klik tombol radio dengan posisi off ke on
Kemudian tambahkan instruksi HTML Reaction Buttons ini ke dalam template sesudah instruksi <data:post.body/> paling bawah
GDPR Compliance tool
Untuk mengaktifkan fitur GDPR Compliance tool, cukup klik hidangan GDPR lalu klik tombol dari off ke on pada hidangan sebelah kanan dan edit bab pengaturannya sesuai kebutuhan
Itulah wacana Cara Memasang Widget ShareThis di Blogger, agar bermanfaat dan wassalam.
Mungkin sudah banyak yang sudah tahu bagaimana cara menambahkan widget share dan mungkin juga ada sebagian yang belum tahu, jadi tidak ada salahnya kali ini akan menyebarkan tips Cara Memasang Widget ShareThis di Blogger dengan efek melayang di pinggir halaman atau dipasang di dalam postingan blog. Tips ini juga sekaligus untuk menjawab ajakan dari Andika Pandanu lewat formulir kontak blog ini sebagai berikut
Bagi yang ingin memasang widget ShareThis ini silakan ikuti langkah-langkah di bawah ini.
Cara Memasang Widget ShareThis di Blogger
Pertama, kalau teman belum mempunyai akun di ShareThis silakan daftar terlebih dahulu di link ini https://www.sharethis.com. Cara daftarnya klik hidangan Account di pojok kanan atas halaman ShareThis, lalu akan muncul halaman ibarat ini dan klik goresan pena Sign up - it's free
Kemudian tambahkan keterangan email, password dan alamat blog di halaman selanjutnya. Klik tanda centang di Privacy Notice dan klik tombol GET STARTED - IT'S FREE
Setelah masuk di dasbor ShareThis, klik tombol Get The Code untuk memverifikasi
Kemudian klik tombol Copy dan pastekan instruksi tersebut di dalam template editor blog sebelum instruksi </head> atau instruksi </head><!--<head/>-->, kalau sudah ditambahkan klik tombol Simpan tema.
Jika terdapat pesan kesalahan dikala klik tombol Simpan tema, silakan tambahkan instruksi amp; pada link JS ShareThis misalnya ibarat ini
<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5aee32b17782d000113e1528&product=social-ab' async='async'></script>Tambahkan dengan instruksi yang saya tandai di bawah ini
<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5aee32b17782d000113e1528&product=social-ab' async='async'></script>Jika sudah, kembali ke dasbor ShareThis dan klik tombol Verify. Setelah itu akan muncul pesan All systems go! We've verified sharethis.js in installed dan Widget ShareThis siap digunakan. Biar lebih afdol, kini teman klik hidangan Property Settings. Kemudian klik tombol Resend Verification Email dan cek email untuk verifikasi email dari ShareThis.
Nah kini teman tinggal mengaktifkan tombol mana yang ingin dimunculkan di blog, klik hidangan Share Buttons dan pilih style yang ingin digunakan. Misalnya saya pilih Sticky Share Buttons, maka aktifkan tombol dari off ke on ibarat ini
Di sini teman juga sanggup mengatur tombol share apa saja yang ingin diaktifkan dan beberapa pengaturan lainnya dengan mudah.
Tambahan
Reaction Buttons
Untuk mengaktifkan tombol Reaction Buttons, teman hanya perlu pilih hidangan Reaction Buttons lalu klik Inline Reaction Buttons dan klik tombol radio dengan posisi off ke on
Kemudian tambahkan instruksi HTML Reaction Buttons ini ke dalam template sesudah instruksi <data:post.body/> paling bawah
<b:if cond='data:blog.pageType == "item"'> <div class='sharethis-inline-reaction-buttons'/> <div class='clear'/> </b:if>GDPR Compliance tool
Untuk mengaktifkan fitur GDPR Compliance tool, cukup klik hidangan GDPR lalu klik tombol dari off ke on pada hidangan sebelah kanan dan edit bab pengaturannya sesuai kebutuhan
Itulah wacana Cara Memasang Widget ShareThis di Blogger, agar bermanfaat dan wassalam.
Tombol Back To Top Ala Blog Kang Ismet Terbaru - Halo, Kali ini saya mau ngasih sebuah tombol back to top yang keren ala blog kang ismet. Siapa sih yang gak kenal kang Ismet, kang Ismet ialah seorang blogger yang populer di Indonesia lewat keunikan dari tutorial blog yang selalu menciptakan pengunjung betah berlama-lama nangkring di blognya.
Singkat cerita, tahun kemarin entah kenapa blog kang Ismet yang beralamat di blog.kangismet.net jadi jarang update. Saya sendiri kurang tahu penyebabnya apa, kemungkinan ada urusan atau aktivitas di dunia aktual yang tidak memungkinkan untuk update di dunia maya hehe... Tapi sekarang blog kang ismet sudah berdiri kembali dan mulai membuatkan tutorial-tutorial menarik untuk Anda teman Blogger.
Oke tanpa panjang lebar, di sini saya akan share sebuah tombol back to top yang digunakan pada blog kang Ismet dengan tampilan terbarunya. Yang menarik dari tombol ini ialah adanya embel-embel icon link sosmed yang dapat Anda isi dengan link akun sosmed. Bagaimana tertarik untuk mencobanya? Silakan ikuti tutorial berikut
1. Login ke blog > Buka Template > Salin isyarat di bawah ini sebelum ]]></b:skin> atau </style>
2. Kemudian salin isyarat di bawah ini sebelum </body>
Ganti isyarat yang ditandai dengan alamat sosmed Anda.
3. Simpan template.
Mungkin itu saja sedikit yang dapat saya bagi, kalau ada kurang dan lebihnya dapat ditambahkan di kolom komentar. Terima kasih sudah membaca, agar bermanfaat.
Singkat cerita, tahun kemarin entah kenapa blog kang Ismet yang beralamat di blog.kangismet.net jadi jarang update. Saya sendiri kurang tahu penyebabnya apa, kemungkinan ada urusan atau aktivitas di dunia aktual yang tidak memungkinkan untuk update di dunia maya hehe... Tapi sekarang blog kang ismet sudah berdiri kembali dan mulai membuatkan tutorial-tutorial menarik untuk Anda teman Blogger.
Oke tanpa panjang lebar, di sini saya akan share sebuah tombol back to top yang digunakan pada blog kang Ismet dengan tampilan terbarunya. Yang menarik dari tombol ini ialah adanya embel-embel icon link sosmed yang dapat Anda isi dengan link akun sosmed. Bagaimana tertarik untuk mencobanya? Silakan ikuti tutorial berikut
Memasang Tombol Back To Top Ala Blog Kang Ismet Terbaru
1. Login ke blog > Buka Template > Salin isyarat di bawah ini sebelum ]]></b:skin> atau </style>
#fixed-bar{position:fixed;bottom:0;right:0;z-index:100;width:25%;height:38px;clear:both;margin:0;overflow:hidden}#fixed-bar a{float:right;margin:0;padding:0;width:38px;height:42px;font-size:22px;text-align:center;color:#fff;transition:all .3s ease-in}#fixed-bar a.first{background-color:#48cf89}#fixed-bar a.first:hover{background-color:#40bb7b}#fixed-bar a.gplus{background-color:#c95325}#fixed-bar a.gplus:hover{background-color:#bd4e23}#fixed-bar a.fb{background-color:#4591b1}#fixed-bar a.fb:hover{background-color:#3f84a1}#fixed-bar a.twit{background-color:#76bdda}#fixed-bar a.twit:hover{background-color:#67acc8}#fixed-bar a.impoh{background-color:#f8b26b}#fixed-bar a.impoh:hover{background-color:#e9a25a}.bottom-wrapper{max-width:100%;;margin:0 auto}2. Kemudian salin isyarat di bawah ini sebelum </body>
<div id='fixed-bar' style='display:none'> <div class="bottom-wrapper"> <a class="go-top first" href="#"><span class="fa fa-arrow-up"></span></a> <a class="gplus" href="#" target="_blank" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-google-plus" style="margin-top:8px"></span></a> <a class="fb" href="#" target="_blank" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-facebook" style="margin-top:8px"></span></a> <a class="twit" href="#" target="_blank" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-twitter" style="margin-top:8px"></span></a> <a class="impoh" href="#" title="Tombol Back To Top Ala Blog Kang Ismet Terbaru"><span class="fa fa-paperclip" style="margin-top:8px"></span></a> </div> </div> <script type='text/javascript'> $("#fixed-bar").hide(),$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#fixed-bar").slideDown(200):$("#fixed-bar").slideUp(200)}),$(".go-top").click(function(){return $("html,body").animate({scrollTop:0},600),!1})}); </script>Ganti isyarat yang ditandai dengan alamat sosmed Anda.
3. Simpan template.
Mungkin itu saja sedikit yang dapat saya bagi, kalau ada kurang dan lebihnya dapat ditambahkan di kolom komentar. Terima kasih sudah membaca, agar bermanfaat.
Lycoris 2 Responsive Blogger Template - Template kali ini merupakan versi ke dua dari template Lycoris dan kembali aku bagikan secara gratis.
Fitur tidak jauh berbeda, untuk random post pada sajian surprise me sendiri aku terinspirasi dari blog besar yang menyediakan download anime yaitu www.narutobleachlover.net tentunya dengan script yang berbeda.
Karena aku sering berkunjung kesana untuk sekedar download anime terbaru khususnya One Piece hehe... Untuk tampilan memang berbeda dengan sebelumnya.
| Features | Availability |
|---|---|
| Responsive | True Cek |
| SEO | True Cek |
| Google Testing Tool Validator | True Cek |
| Custom Threaded Comment | True |
| Facebook Comment | True |
| Masonry Grid Base Homepage Post | True |
| Light Base Theme Color | True |
| Auto Read More with Thumbnail | True |
| Responsive Ad Slot | True |
| Breadcrumbs | True |
| Related Posts with Thumb | True |
| Search Box | True |
| Social Share Button | True |
| Fixed Top Navigation | True |
| Main Side Navigation | True |
| Sidebar Recent Post Slider | True |
| Custom 404 Page | True |
| Smooth Scroll back To Top | True |
| Better Print Page Layout | True |
| Sitemap Widget | True |
| Well Documentation | True |
Bagi yang tertarik dengan versi ke dua ini silakan download disini (demo blog digunakan versi 2.1)
Langganan:
Postingan (Atom)