Blog bungfrangki

Menampilkan perkiraan waktu membaca (reading time) di Blogspot atau Blogger secara otomatis kita bisa lakukan dengan mudah menggunakan JavaScript. Widget ini kurang lebih dapat memberi gambaran kepada pembaca terhadap berapa banyak estimasi waktu yang dibutuhkan untuk membaca konten tersebut. Widget reading time Blogspot ini menjadi semacam hipnosis untuk membuat pembaca bertahan sedikit lebih lama saat sedang membaca sebuah konten blog. Kira-kira begitulah fungsi reading time. Tujuannya, tentu saja fitur ini soal pengurangan poin (persentase) terhadap bounce rate blog. Dalam hal ini, widget read time dapat menjadi teknik terapan tambahan lainnya dalam mengembangkan blog menjadi  user-friendly. Cara Memasang Estimasi Reading Time di Blogger/Blogspot Secara Otomatis Berikut ini cara menerapkan widget auto Reading Time di Blogspot atau Blogger: Perhatikan Struktur PostBody Pertama, silahkan perhatikan terlebih dahulu struktur halaman postingan  PostBody ( <b:includable id='postBo

Akhir-akhir ini saya menerima begitu banyak email/pesan mengenai thumbnail atau gambar di homepage menjadi blur, saat melakukan postingan dengan menggunakan Blogger versi terbaru. Setelah mengamati sebentar, ternyata URL gambar yang diposting pada dashboard Blogger terbaru itu sudah berubah. Maka dengan demikian, penggunaan JavaScript dalam memanggil thumbnail di homepage dengan kode seperti di bawah ini sudah tidak bekerja dengan baik: <script type='text/javascript'> //<![CDATA[ function bung_thumbnail(e,t){var n=400;var r=280;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'"/>';if(t!="")return image_tag;else return""} //]]> </script> Yang dalam HTML, kode pemangg

Tutorial blog kali ini tentang cara menyembunyikan atau menampilkan widget atau kode (JavaScript dan jQuery) tertentu pada template di device mobile . Selain tag conditional untuk menampilkan widget tertentu yang hendak ditampilkan pada halaman tertentu dan tag conditional untuk JavaScript atau jQuery yang akan ditampilkan pada ukuran device tertentu, sebetulnya jauh sebelum itu kita telah diperkenalkan dengan tag conditional yang berfungsi untuk menampilkan atau menyembunyikan widget tertentu pada device mobile. Hal ini sangat perlu diketahui, terutama bagi template creator yang masih kebingungan dalam menentukan penggunaan media query terhadap responsifitas sebuah template pada tampilan mobile yang sesungguhnya. Sebab, ukuran yang telah ditentukan pada media query tertentu untuk device tertentu terkadang meleset, yang kemudian membuat tampilan template menjadi berantakan. Terutama pada penggunaan menu (dropdown) untuk tampilan mobile. Baca juga: Solusi Gambar Mengecil Saat Share

Sebetulnya sudah lama saya ingin memposting trik ini. Hanya saja perlu sedikit bersabar sampai update tampilan Themeindie.com bernar-benar rampung. Mengingat trik kombinasi skin variable definition Blogger dan :root selector ini pertama kali saya terapkan disana. Variable Definition merupakan salah satu markup default Blogger yang dipergunakan sebagai translator atas perubahan yang kita lakukan di Theme Designer Blogger. Biasanya tersimpan di dalam <b:skin> atau <b:template-skin> . Syntax: <Variable name="body.background.color" description=" Backgrond" type="color" default="#ffffff" value="#ffffff"/> Contoh pemanggilannya di dalam <b:skin> atau <b:template-skin> : body {background:$( body.background.color)} Contoh pemanggilan yang lain dan penerapannya: <meta content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/> <meta content='

Masalah kesalahan CertificatesService.Insert APP_ERROR pada Blogger/blogspot akan muncul ketika kita tidak berhasil mengaktifkan fitur SSL pada setingan Blogger. Utamanya Blogger yang menggunakn Custom Domain atau mengganti blogspot.com dengan TLD (top level domain). Sebetunya masalah ini sudah dialami oleh beberapa pengguna Blogger saat awal-awal Google menerapkan penggunaan certificate SSL di blogspot. Namun, masalah ini baru saja saya alami pada salah satu blog saya yang belum kebagian update SSL terbaru. Dalam hal ini, harusnya SSL blogspot sudah menggunakan GTS CA 1D2 tetapi di blog saya yang satu ini masih Let’s Encrypt . Awalnya saya menonaktifkan setingan fitur SSL. Lalu mengaktifkannya kembali, sembari berharap bahwa SSL akan berganti ke GTS CA 1D2. Bagai gayung yang tak bersambut, yang saya dapat halnya sebuah warning seperti ini: Artinya, saya tidak dapat mengaktifkan fitur SSL. Seketika saya merasa menyesal karena telah melepas SSL yang sebelumnya. Padahal, sert

Timestamp label atau post date label ini adalah salah satu widget setting yang biasanya dapat diedit melalui form textarea Gadget Posting Blog , yang sejajar dengan format tanggal posting. Yang ditunjukkan oleh gambar ini: Di Edit HTML, kita bisa jumpai kodenya seperti berikut ini: <b:widget-setting name='timestampLabel'>[string]</b:widget-setting> Saya kurang yakin dengan nama yang diberikan oleh developer Blogger untuknya. Namun begitu, tentu Anda sudah mahfum dengan apa yang saya maksud. Melalui gambar dan kode yang saya kasih di atas. Jadi, mari kita sepakati saja memenaggilnya dengan nama teks keterangan timestamp, timestamp label, post date label, atau widget setting timestampLabel. Jika Anda kebetulan mengetahui nama sesungguhnya, tolong bagikan di komentar. Pada kebanyakan template Blogger, widget setting timestampLabel ini sangat jarang digunakan. Para desain template lebih memilih menggantinya dengan icon (Material icon atau Font Awesome). Dibe

Cara memasang Lazy Load Disqus Comments ini merupakan salah satu cara mempercepat loading blog. Cara kerja dan kegunaannya mirip dengan lazy load iklan AdSense . Nampkanya saya sering membahas tentang komentar Disqus. Mulai dari cara memasang komentar Disqus Onclick Event hingga cara mengembalikan komentar Disqus menjadi komentar Blogger . Pembahasan terkait Disqus comments juga pasti sudah seringkali Anda temui di berbagai blog, dengan beragam sudut pandang dan cara pemasangannya. Namun satu hal yang penting untuk diketahui, jika berani memasang komentar Disqus di Blogger/blogspot, maka mau tak mau harus menerima sumbangsi Disqus terhadap loading halaman blog. Sebab, kelengkapan fitur yang ditawarkan, seirama dengan kelemahannya yang akan membuat kecepatan website menjadi lambat. Namun demikian, dengan menggunakan trik lazy load Disqus Comments, maka andilnya yang turut memperlabat kecepatan situs akan gugur. Demo Penerapan Lazy Load Komentar Disqus di Blogger/Blogspot

Dengan menggunakan tag conditional khusus, kita bisa dengan mudah menampilkan tanggal postingan hanya pada label (tags) tertentu di Blogger/Blogspot. Menampilkan tanggal posting ini sangat dianjurkan untuk blog dengan niche berita harian (daily news), politik, blog cuaca, olahraga, dan konten lainnya yang bersifat continuous update. Nah, jika blog Anda punya beberapa artikel dengan kategori tertentu yang ingin ditampilkan tanggal postingannya pada template dan hasil pencarian, silahkan ikuti langkah-langkah berikut ini. Cara Menampilkan Post Date Hanya pada Label/Category Tertentu Mengingat pada masing-masing template menggunakan struktur HTML dan tag yang berbeda-beda, maka pada tutorial ini akan ditunjukkan bagaimana input dan callernya. Serta cara peletakannya pada Blogger gadget versi 1 (layout versi 1 dan 2) dan gadget versi 2 (layout versi 3). Untuk selector dan tag, tinggal disesuaikan dengan template masing-masing. Input: Blogger Gadget Version 1     <b:includab