Blog bungfrangki

Beberapa hari belakangan ini saya mencoba bereksperimen dengan model Breadcrumbs yang hanya menampilkan 1 (satu) label saja di postingan Blogger. Alih-alih menampilkan semua label yang dibuat dalam postingan tersebut, bagi saya itu kurang menarik untuk tampilan blog. Di postingan Cara Memasang Syntax Highlighter Seperti Sublime Text (sampel uji coba) saya membuat 4 (empat) label di postingan, yaitu CSS , HTML , JavaScript dan Tutorial Blog . Tetapi jumlah label yang ditampilkan di Breadcrumbs hanya satu saja, yaitu Tutorial Blog. Sebanyak apapun label yang ditambahkan ke setiap postingan blog, tetap saja yang akan tampil di breadcrumbs hanya satu label saja. Dampaknya untuk SEO Sejauh ini, yang saya temukan di mesin pencarian Google terkait artikel yang menjadi sampel uji coba, juga hanya menampilkan 1 label saja di Breadcrumb. Dengan begitu, dapat disimpulkan bahwa eksperimen ini berjalan dengan baik di blog dan juga di indeksi mesin pencarian. Memasang Breadcrumbs yang H

Memasang Syntax Highlighter di Blogger merupakan salah satu upaya untuk mempercantik tampilan blog. Utamanya blog yang membahas koding atau bahasa pemrograman. Dengan Syntax Highlighting, tampilan kode menjadi berwarna-warni dan tersusun rapih, berdasarkan kategori kode. Sayangnya di platform Blogger fitur Syntax Highlighter ini tidak hadir secara default. Yang ada hanyalah Blockquote. Yang jika diatur sedemikian rupa menggunakan CSS, hanya akan menampilkan satu-kesatuan warna, pada saat kita memblok kode pemrograman dengan Blockquote. Namun begitu, kita bisa memasang Syntax Highlighter di Blogger dengan mudahnya. Menariknya, bagi yang suka dengan style Syntax Highlighter seperti software Sublime Text 3 , Anda bisa terapkan dengan beberapa langkah berikut ini. Cara Pasang Syntax Highlighting Seperti Sublime Text  Silahkan masu ke Edit HTML Blogger. Letakkan kode di bawah ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; <sty

Kali ini giliran widget Related Post yang bisa dilakukan setting atau kustomisasi dari menu Layout/Tata Letak Blogger. Dengan menerapkan tutorial ini, maka pengguna template disuguhkan setidaknya terdapat 3 style opsional widget Related Posts yang bisa dinavigasi langsung pada menu Layout Blogspot. Secara keseluruhan, adapun fitur yang dapat dikustomisasi dari widget Related Posts (Artikel Terkait) pada menu Layout adalah sebagai berikut: Terdapat 3 pilihan style atau model tampilan widget. Bisa mengatur jumlah post yang ingin ditampilkan pada widget. Bisa mengatur jumlah karakter yang ingin ditampilkan pada summary (post snippet), khusus style 2. Sudah responsive. Dapat mengubah judul/title widget. Terdapat navigasi khusus untuk masing-masing perangkat, desktop/tablet dan mobile. Gambar atau thumbnail widget Related Posts tidak gepeng (stretch). Contoh tampilan widget pada menu Layout/Tata Letak seperti pada gambar berikut: Style 1 Style 2 Style 3 Cara memasang widg

Memasang lazy load pada iklan Adsense ini sebetulnya adalah trik semata. Karena sebetulnya JavaScript lazyload yang dimaksud adalah memanfaatkan JS load on scroll. Sederhananya, penayangan iklan Adsense ditunda sementara sampai pengunjung melakukan scroll pada halaman blog atau website. Mengaktifkan lazy load Adsense akan membantu beberapa hal penting di Blogger atau Blogspot. Diantaranya mengatasi loading blog yang lama karena iklan Adsense, dan (kalau diperhatikan) lazy load ini cukup ampuh mencegah banned Adsense akibat pelanggaran trafik yang tidak valid. Dalam hal ini, trafik yang dimaksud adalah ulah bot atau jigling. Terkait dengan loading blog akibat tayangan iklan Adsense, fitur lazy load akan sangat membantu jika hanya menggunakan satu JavaScript Adsense saja. JavaScipt Adsense yang dimaksud adalah sebagai berikut. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> Nah, JS Adsense inilah yang akan kita elaboras

Mungkin ada yang penasaran bagaimana cara membuat tombol FULLSCREEN terpisah dari video controls di Blogger/blogspot untuk semua perangkat? dan menjadikan tampilan full screen tersebut berubah menjadi landscape atau melakukan rotasi layar HP secara otomatis? baik itu untuk laptop/komputer terutama di hp/smartphone. Tombol full screen memungkinkan pengunjung untuk dapat menyaksikan video di blog dengan tampilan satu layar penuh. Masalahnya adalah, ketika kita membagikan video denga kode iframe (dan lainnya) di blog, dan ingin menontonnya dalam mode full screen saat menggukanan handphone/smartphone, video tersebut tetap dalam posisi portrait, tidak melakukan rotasi landscape secara otomatis. Masalah ini sering ditemui pada tv online yang mengandalkan fitur navigasi bawaan dari video control. Fitur fullscreenya memang berfungsi dengan baik untuk pengguna di perangkat pc/laptop, tetapi tidak untuk pengguna device yang lebih kecil seperti tablet dan smartphone. Nah, bagaimana caranya

Tutorial Blogger/Blogspot kali ini ialah cara mengatasi emoji/emoticon pada komentar Blogger yang tidak muncul atau tidak tampil. Dalam hal ini, kode khusus yang kita ketikkan untuk memanggil emoji/emoticon tersebut tidak berubah menjadi emoticon yang dimaksud. Sebelum melakukan langkah-langkah untuk mengatasi hal tersebut, pastikan dulu kalau template Blogger Anda sudah mengikuti tutorial tentang  Cara Mengatasi Threaded Comment dan Reply Comment Blogger Error . Sebab cara berikut ini sangat direkomendasikan untuk diterapkan pada template blogger layout versi 2. Adapun cara memperbaiki gambar emoticon yang tidak muncul di komentar Blogger adalah sebagai berikut: Cara memperbaiki emoticon/emoji komentar Blogger/Blogspot yang tidak bekerja Langkah 1 Masuk ke Theme > Edit HTML Silahkan cari dan hapus semua kode-kode (yang mirip) seperti berikut ini:        <script type='text/javascript'>        //<![CDATA[        if (typeof(jQuery) == 'undefined') {

Berikut ini adalah tutorial tentang cara memasang sytax highlight js otomatis di blogger/Blogspot . Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna-warni . Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script HTML, JavaScript, jQuery dan lain sebainya. Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya. Baca juga:  Widget yang Tidak SEO Friendly di Mesin Pencari Dengan begitu, penggunaan Syntax Highlighter lebih cocok kepada blogger yang mengelola blogdengan niche yang terbatas dan sangat t

Berikut ini adalah tips Blogger atau Blogspot tentang cara membuat dan memasang widget Recent Posts (postingan terbaru) yang pakai nomornya. Sebetulnya tampilan widget Recent Posts ini adalah salah satu widget yang tampilannya akan saya terapkan pada salah satu project template di Themeindie . Hanya saja karena beberapa pertimbangan, akhirnya tampilan recent posts ini diganti dengan modifikasi terbaru. Dibunag sayang, pun saya memikirkan barangkali ada yang tertarik dengan tampilan widget Recent Posts semacam ini, jadi bisa bermanfaat bagi yang lainnya. Saya akan jelaskan mengapa widget Recent Posts ini layak dipertimbangkan untuk dipasang, adalah tampilan nomornya yang sengaja dibangun dari beberapa baris CSS. Sehingga mampu membikin dia tetap tampil di middle - center meski tinggi title artikel di widget tampil setinggi-tingginya. Jelasnya, seperti yang nampak pada featured image di atas. CSS-nya seperti ini: /* Recent Posts by Bungfrangki.com */ #recent-articles .widget-co

Untuk mengatasi masalah Related Posts yang tidak muncul di perangkat smartphone/mobile , dapat diselesaikan dengan mudah. Hanya saja ada beberapa hal yang perlu dipastikan, terkait pemasangan widget related posts tersebut oleh creator templatenya. Biasanya beberapa kreator template Blogger sengaja menyembunyikan (tidak menampilkan) widget related posts pada device mobile, dengan pertimbangan kecepatan loading halaman. Nah, biasanya untuk menyembunyikan widget related posts yang paling umum dilakukan ada 3 cara, yaitu sebagai berikut. Cara 1: Dengan menambahkan perintah CSS display:none pada tag ID/class dari widget Related Posts tersebut pada device tertentu. Contoh: @media screen and (max-width: 420px) { #related-posts,.related-post{display:none!important} } Jika benar demikian, tinggal hapus kode semacam itu di template blogger, melalui Edit HTML. Cara 2: Menyembunyikan widget related posts di tampilan mobile menggunakan tag conditional khusus mobile seperti ini: <

Tutorial Blogger kali ini solusi atau cara mengatasi structured data error tentang cara mengatasi  "Atribut logo.height memiliki nilai yang tidak valid" atau "The attribute logo.height has an invalid value." yang biasanya menyumbang error pada struktur scheme di template Blogger/blogspot. Sebtulnya untuk mengatasi hal ini sangat mudah. Hanya perlu merubah sebaris kode pada  itemtype='https://schema.org/ImageObject' karena sebetulnya masalahnya dari sana. Caranya mengatasi error data terstruktur seperti tersebut adalah sebagai berikut. Silahkan login ke Blogger, lalu masuk ke Theme > Edit HTML. Silahkan temukan kode seperti ini (atau yang mirip): <div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'> Lalu scroll sedikit ke bawah dan temukan kode seperti ini: <meta content='720' itemprop='height'/> Hapus kode tersebut. Lalu simpan Tema. Silahkan lihat hasi