Blog bungfrangki

Baru-baru ini saya mengubah Schema Markup dan Structured Data blog ini dari Article ( https://developers.google.com/search/docs/advanced/structured-data/article ) menjadi type  BlogPosting ( https://schema.org/BlogPosting ), dalam format Json-LD, dengan menghapus Microdata bawaan Blogger. Mengapa menggunakan format JSON-LD? Karena (saat ini) itu yang direkomendasikan oleh Google Developer ( https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=id ). Lagipula format ini yang (menurut saya) paling mudah digunakan, tidak ribet bila ingin mengganti type atau menambahkan atau menghilangkan item lainnya sewaktu-waktu. Dibanding dengan penerapan Microdata yang menempel pada konten HTML. Mengapa memutuskan mengganti (lagi) Schema dan Stuctured Data menjadi schema BlogPosting markup? Secara garis beasr BlogPosting markup kurang lebih sama dengan Article markup. Namun bagi saya schema BlogPosting markup lebih cocok dipasang di platform Blogger / blogspo

Kolom komentar Blogger terbaru ini disebut dengan Contempo Style atau Contempo Skin. Mengganti tampilan kolom komentar Blogger atau Blogspot ke veri terbaru ini sebetulnya sangat mudah. Beberapa template di Themeindie.com yang sebelumnya menggunakan tampilan komentar versi lawas, kini telah diganti dengan tampilan komentar Blogger versi baru (Blogger v3). Pada tutorial kali ini, saya akan coba tunjukkan langkah-langkah cara mengganti tampilan kolom komentar Blogger ke versi paling baru. Langkah tutorial juga dapat diikuti oleh siapapun yang hendak mengganti jenis komentar yang digunakannya. Baik itu pengguna komentar Facebook atau komentar Disqus yang hendak mengubahnya ke komentar Blogger versi terbaru. Cara Mengubah Tampilan Komentar Blogger Versi Lama Menjadi Versi Baru  Berikut ini langkah-langkah cara mengubah tampilan komentar Blogger ke veri baru, biar tampilan kolom komentarnya macam komentar pada template Contempo, Soho, Emporio dan Notable. Wajib menambahkan Variable Defi

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='