Sesaat sebelum mem-publish sebuah artikel di Blogger, biasanya kita sering menggunakan fitur preview post untuk mengecek kembali susunan postingan yang baru saja kita buat. Nah, biasanya suka ada widget tertentu (seperti, Featured Post, Featured by Label, dll) yang sebenarnya cuma ditampilkan pada halaman utama (homepage), tiba-tiba muncul pada halaman Preview Post. Secara personal, penampakan widget yang tidak diinginkan ini, bisa saja amat mengganggu pandangan saat sedang berada dihalaman tersebut. Bagaimana caranya supaya widget tersebut tidak muncul saat Pratinjau Postingan? Berikut caranya! Cara hilangkan widget tertentu pada halaman Preview Post Silahkan masuk ke dashboard blog, lalu masuk ke Theme > Edit HTML Klik menu dropdown Jump to Widget , lalu pilih widget yang ingin disembunyikan pada halaman preview post (pada tutorial ini, misalnya yang ingin disembunyikan adalah widget Featured Post). Setelah dibawa pada markup widget Featured Post, silahkan tempatkan tag co
Tips blog kali ini tentang Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah . Terdapat berbagai macam sticky widget (widget melayang) yang dapat diterapkan pada Blogger/Blogspot. Salah satunya ialah widget sticky sidebar: stick to bottom when scrolling down, and top when scrolling up . Artinya, widget yang menempel bagian bawah jika scrollnya ke bawah, dan widget yang menempel bagian atas jika kita scroll halaman blog/website ke atas. Model widget sidebar seperti itu dapat Anda lihat langsung di website Jalantikus.com (halaman postingan), sangat keren bukan? Cara ini juga saya sudah terapkan pada template Viralisme Theme dan Risen Template (semua versi). Silahkan lihat demonya dengan klik tombol di bawah: Demo Nah melalui tutorial ini saya akan kasih tau bagaimana caranya pasang widget sticky sidebar seperti itu di platform Blogger/Blogspot. Namun tidak menutup kemungkinan jQuery dari sticky sidebar ini bisa juga diterapkan pada platform lain seperti W
Jika rasa-rasanya memasang 2 slot iklan Adsense di tengah postingan masih kurang, maka tambahkan satu slot iklan lagi, sehingga akan nampak 3 slot iklan di tengah-tengah artikel blog/website. Sebetulnya tutorial memasang tiga slot advertise di tengah postingan blog kali ini tidak benar-benar terletak Nampak di tengah postingan, melainkan posisinya berada di dalam postingan. Iklan bakal tampil menurut paragraph artikel yang kita tentukan di script. Adapun script untuk tutorial ini adalah hasil modifikasi dari artikel yang sudah saya bagi sebelumnya, yaitu tentang cara pasang 2 iklan Google Adsense di tengah artikel . Cara pemasangannya pun sama persis dengan langkah-langkah pada tutorial di artikel tersebut. Biar cara menerapkannya tidak bingung, alangkah baiknya cara pasangnya saya jabarkan disini juga. Berikut caranya! Demo Cara pasang 3 iklan Adsense di tengah postingan menurut paragraf 1. Cari kode yang seperti ini (atau serupa, biasanya yang kedua) <b:if cond='data
Tutorial Blogger kali ini tentang cara memasang widget Disqus comment dengan fungsi onclick load . Artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan ditampilkan jika pengunjung mengklik tombol untuk load komentar Disqus. Memasang tombol load komentar Disqus dengan fungsi onclick event ini ialah salah satu cara mempercepat loading blog. Karena seperti diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, saat halaman postingan tersebut dibuka. Apalagi jika komentar-komentar tersebut sudah demikian banyak, dan terdapat file lampiran berupa gambar dan lain sebagainya. Dengan adanya tombol load Disqus comments, maka pemuatan komentar Disqus akan “tertunda”, lalu seluruh konten komentar tersebut akan terbuka seutuhnya setelah pengunjung mengklik tombol onload komentar Disqus. Caranya memasangnya adalah sebagai berikut! Cara memasang komentar Disqus dengan fu
Setelah membahas postingan tentang cara memasang kode iklan Adsense yang benar tanpa perlu di parse, berikut ini saya akan bahas tentang cara memasang dua unit/slot iklan Google Adsense ti tengah postingan dan tampil secara otomatis. Sebetulnya konsepnya hampir sama dengan tutorial tentang cara memasang iklan Adsense di tengah artikel yang sudah saya buat sebelumnya. Persamaanya ialah, kita bisa menampilkan iklan pada paragraph manapun secara otomatis. Adapun cara memasang 2 iklan Google Adsene di tengah artikel/postingan blogger/blogspot silahkan ikuti tutorialnya berikut ini. Cari kode seperti ini: <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> Atau yang seperti ini (khusus pengguna template Themeindie.com): <b:if cond='data:blog.pageType == "item"'> <div class='artbody'><data:post.body/></div> </b:if> Hapus kode tersebut, lalu ganti denga
Tutorial Blogger kali ini yaitu tentang cara memperbaiki widget related post (DTE) yang tampilan gambar/thumbnailnya terlihat gepeng, peang, penjol. Atau dalam bahasa lain gambarnya saling tarik-menarik, tidak enak dipandang. Artinya, dalam tutorial kali ini, kita akan membuat tampilan gambar di related post bisa lebih natural, terlihat indah. Meskipun ada cropping, tetapi itu lebih baik dabindingkan tampilan gambarnya stretch . Selain itu, tentu saja scriptnya tetap akan support HTTPS (SSL). Jika dibandingkan maka perbedaanya akan terlihat seperti berikut, perhatikan baik-baik penampakan pada gambar di bawah ini: Atau gambar ini: Antara gambar 1 dan gambar 2, mana yang menurut Anda lebih baik? Gambar nomor 3 bukan? Ya, memang bukan gambar nomor 3, karena jawaban yang betul adalah gambar nomor 2. Untuk memperbaiki thumbnail related post yang ketarik-tarik seperti pada gambar 1, maka lakukan perubahan berikut ini. Ganti JavaScript related post yang lama dengan code berikut
Tutorial Blogger/blogspot kali ini ialah tentang cara membuat share Button/tombol berbagi responsive dilengkapi dengan share button WhatsApp (WA), Line dan BlackBerry Messenger (BBM) . Selain itu, juga terdapat tombol lainnya seperti tombol share ke Email, Tumblr, Pinterest, LInkEdin dan tombol share yang sudah umum dipasang seperti Facebook, Twitter dan Google Plus. Tidak hanya itu, tombol share kali ini juga dilengkapi dengan show-hide OnClick event, memperlihatkan antarmuka yang modern dan legal. Sehingga tidak meresahkan masyarakat. Sebetulnya ada banyak widget share button yang pernah saya bagikan di blog ini. Salah satunya ialah cara membuat tombol share di blog dengan efek peekaboo (ciluukbaaa). Untuk tutorial kali ini, silahkan simak baik-baik penjelasannya besok saja, terima kasih. Oh yaa, for your information, sebetulnya mode share button ini seperti yang terpasang pada SimpleUP Blogger Template , tetapi di template itu tidak dilengkapi WA, Line dan BBM. Cara membu
Tutorial Blogger/blogspot kali ini tentang cara memasang widget recent post (artikel terbaru) berwarna-warni , ala-ala pelangi saat hujan gerimis. Sebetulnya hal ini juga dapat diterapkan pada widget lain seperti widget Popular Posts . Bagi Anda yang ingin mengkreasi tampilan blog biar kelihatan fresh dan sedikit nor#k, silahkan tambahkan widget recent post bermodel warna-warni berikut ini. Memasang Widget Recent Posts tampil Warna-warni Widget recent post yang dibuat ini adalah versi recent post yang sederhana , tidak menggunakan thumbnail dan meta post (seperti tanggal posting, author dll). Langkah-langkah pembikinannya adalah sebagaimana berikut: Login ke Blogger > Theme > Edit HTML Tambahkan CSS berikut ini di atas kode </style> (yang pertama) /* Recent Wrapper By Bung Frangki */ #recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px} #recent-wrapper ul{margin:0;padding:0;list-style-type:none;} #recent-wrapper ul li{position:relati
Bagi pengguna custom template yang kode </body> pada template sudah diganti dengan kode <!--</body>--></body> kode <head> telah diganti dengan kode <head> dan kode </head> telah diganti dengan kode </head><!--<head/>--> serta masih menggunakan subdomain Blogger, dot blogspot dot com (namablog.blogspot.com), maka widget Contact Form tidak akan berfungsi, alias tidak bisa digunakan untuk mengirim pesan. Namun bagi blog yang sudah berdomain TLD (top level domain), kayak .com, .net, .id dan lain sebagainya, meskipun pada html template kode </body> kode <head> dan kode </head> telah diganti dengan kode lain, contact form akan berfungsi. Cukup dengan mengikuti tutorial pada artikel: Mengatasi Contact Form yang Tidak Bisa Mengirim Pesan Artinya, untuk membuat widget contact form agar bisa mengirim pesan kembali, berbeda caranya bagi yang sudah berdomain TLD dan ya
Tutorial Blogger/blogspot kali ini tentang cara memasang widget recent comment atau komentar terbaru Disqus pada sidebar blog. Widget ini paling cocok digunakan untuk blog yang menggunakan komentar Disqus. Bagi yang tertarik memasang widget ini di blognya, silahkan baca terlebih dahulu tentang cara memasang komentar Disqus di blog . Baik yang sudah menggunakan domain TLD (top level domain) maupun yang masih menggunakan domain bawaan Blogger, blogspot. Memasang widget Recent Comment Disqus di Blogspot Silahkan login ke Blogger Masuke dashboard blog > Theme > Edit HTML Letakkan CSS ini tepat di atas kode </style> (yang pertama) /* Recent Disqus Comments CSS */ #recent_comments{display:block;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;} #recent_comments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto} #recent_comments ul.dsq-widget-list::-webkit-scrollbar {height:8px;width:8
Artikel kali ini masih seputar tutorial Blogger, yaitu tentang cara membuat widget most recent post pada Blogger/blogspot seperti yang terpasang di Xadow Magz theme . Sedikit saya kasih informasi mengenai template Xadow Magz ini, template tersebut terdapat 4 desain style yang unik dengan optimasi SEO yang maksimal, serta masih banyak lagi fitur lainnya, dan ke-empat style template itu cuma bisa Anda dapatkan seharga 300 ribu Rupiah saja atau sekitar 23 USD untuk pembayaran melalui PayPal. Untuk mengetahui fitur template tersebut lebih lanjut, silahkan baca pada artikel XadowMagz Fully Responsive Blogger Template . Demikian sekilas info kali ini. Terima kasih sudah membaca. Kita kembali ke topik tentang widget recent post. Topik yang sebetulnya adalah modus untuk meningkatkan penjualan template-template saya. Bagaimana? Keren kan cara promosi saya? Nah, Bagi yang tertarik memasang widget recent posts tersebut pada blognya masing-masing, alangkah baiknya Anda perlu ketahui dulu
Tips blogspot/blogger kali ini tentang cara membuat widget Popular Post seperti yang digunakan oleh Berminat Template. Widget Popular Post pada Berminat Template tersebut memiliki tampilan yang responsive dan sederhana. Seperti namanya, widget ini menampilkan artikel atau postingan paling banyak dibaca atau paling sering dikunjungi pada blog/website. Widget Popular Post seperti halnya widget Related Post , Random Post dan Recent Post , yaitu untuk memancing keterlibatan pengunjung dalam menjelajahi blog/website. Baca juga: Membuat Thumbnail pada Popular Post Tidak Bergambar Bagi Anda yang penasaran seperti apa tampilan widget Popular Post di Berminat Template, silahkan menuju ke tombol demo di bawah ini. Demo Cara membuat widget Popular Post seperti digunakan Berminat Template Widget Popular Post pada tutorial kali ini adalah untuk script Popular Post yang terbaru di update oleh Blogger, jadi pastikan Popular Post yang akan dimodifikasi ialah script Popular Post Terbaru. Simak
Tutorial blog kali ini tentang cara membuat tombol berbagi atau social share button seperti yang terpasang pada Template Berminat . Bagi siapa saja yang sudah bertanya bagaimana cara membuat tombol berbagi ke media sosial pada template tersebut, silahkan membaca artikel ini. Beberapa widget tombol berbagi dengan gaya berbeda yang telah saya posting sebelumnya juga dapat anda lihat pada link-link berikut ini. Siapa tahu ada style yang sesuai dengan selera anda. Artikel serupa: Membuat Social Share Button Responsive Tanpa JavaScript di Blog Membuat Tombol Social Share dengan Counter di Blog Cara Membuat Tombol Share di Blog dengan Efek Peekaboo Nah, untuk membuat social share button seperti yang terpasang pada Template Berminat, berikut kode atau script yang anda butuhkan. Demo # Kode CSS Letakkan dan simpan kode CSS berikut ini di atas kode </head> atau </head><!--<head/>--> <b:if cond='data:blog.pageType == "item&am