Blogger v3 - Blog bungfrangki

Postingan

Browsing Artikel: Blogger v3

Menggunakan Post Labels Sebagai Meta Data Keywords dan Property article:tag

Setelah beres dengan urusan 'migrasi' ke Schema Markup BlogPosting , saya mencari-cari apalagi yang sekiranya bisa dioptimasi di platform Blogger atau Blogspot ini. Akhirnya ketemu 2 hal yang cukup penting tapi tidak begitu krusial untuk ditambahkan di blog masing-masing. Yakni, menjadikan Post Labels atau Entri Label sebagai Meta Data Keywords dan Property article:tag sebagaimana yang seringkali kita lihat pada meta data website platform WordPress, terutama pengguna plugin SEO Rank Math. Sayangnya, untuk Blogger kita tidak bisa menambahkan kedua keta data tersebut di dalam <head> . Kita hanya bisa melatakkanya di dalam <b:widget type='Blog' ...> . Sama dengan JSON LD untuk schema markup BlogPosting , juga lebih maksimal ditempatkan di dalam widget type Blog. Namun tidak menjadi masalah, yang penting bisa diterapkan dan terbaca dengan jelas oleh browser dan mesin penelusuran, yang kita kenal dengan istilah sers enjin . Contoh outputnya sebagai berikut...

Cara Mengganti Kolom Komentar Blogger ke Versi Terbaru (Contempo Skin)

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 ...

Cara Membuat Read Time Otomatis di Blogspot atau Blogger

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

Cara Menampilkan Teks Keterangan Timestamp (TimestampLabel)

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 di Blogger

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 ...

Menampilkan Tanggal Posting Hanya pada Label Tertentu di Blogger

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...

Cara Memasang Breadcrumbs Hanya Menampilkan Satu Label

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...

Cara Memasang Breadcrumb pada Blogger Terbaru Versi 3

Salah satu fitur yang hilang dari update HTML Blogger ialah breadcrumb. Lalu bagaimana cara memasang kembali fitur breadcrumbs tersebut? Lebih baik menggunakan breadcrumb atau tidak perlu lagi? Sejauh ini, itu pertanyaan yang masih menghantui saya. Mengapa Blogger Developers kok tega menghilangkannya? Apa memang breadcrumb udah gak guna lagi? Yang pakar SEO mudah-mudahan bisa jawab pertanyaan ini di kolom komentar. Nah, bagi yang terpaksa mengabaikan pertanyaan-pertanyaan tersebut, penuh keyakinan untuk nekat pasang breadcrumb di sintaks Blogger versi terbaru, berikut caranya! Tips: Dalam hal ini, kita tetap menggunakan parameter dan kode pemanggil parameternya. Sehingga output breadcrumb bisa diletakkan dan ditampilkan dimana saja. Alias bisa diletakkan di dalam dan d luar post page . Langkah 1: cari kode ini <b:defaultmarkup type='Common'> Langkah 2: letakkan kode parameter berikut di bawah kode tadi: <b:includable id='breadcrumb' var='...

Membuat 3 Iklan yang Tampil Sesuai Paragraf dan Bisa Diedit pada Layout, untuk Blogger Layout v3

Trik kali ini terkait slot iklan yang letaknya khusus di tengah postingan/artikel (post page), namun bisa di edit melalui menu Layout atau Tata Letak Blogger. Keunggulan dari widget slot iklan ini dapat di setting ingin ditampilkan pada paragraph tertentu. Cara penerapannya masih mirip-mirip dengan tutorial yang telah saya bagikan sebelumnya, yaitu Trik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout/Tata Letak . Hanya saja bedanya, kali ini saya menerapkannya pada Blogger yang layout versi 3 ( b:defaultwidgetversion='2' b:layoutsVersion='3' ). Jadi, cara ini tidak akan berhasil diterapkan begitu saja pada HTML yang biasanya. Namun kalau Anda sudah mengerti sedikit kode HTML, maka akan sangat mudah bagi Anda untuk utak-atik ini dan menerapkannya pada jenis html yang lama. Karena sebetulnya hanya butuh sedikit perubahan pada bagian html pemanggil widgetnya saja, yang bisa dikonfigurasi pada layout. Mengapa saya pilih menerapkannya di Blogger layout ve...

Solusi Snippet Untuk Homepage yang Muncul Link dan Tampilan Error pada Blogger Terbaru

Pada template Blogger terbaru layout versi 3, dalam sintaks snippet untuk membuat ringkasan postingan pada halaman utama (homepage), sudah tersedia secara default. Parameternya dipanggil dengan kode <b:include cond='data:post' data='post' name='postSnippet'/> . Masalahnya ialah, jika pada paragraf awal postingan terdapat elemen tag a (link), maka link tersebut muncul juga di snippet/description postingan homepage. Tidak hanya itu, tag elemen lainnya juga ikut muncul. Seperti tag bold , italic , underline dan lainnya. Dan eksistensinya sangat amat mengganggu tampilan blog. Ditambah lagi jika snippet ke- crop dan terdapat tag div atau tag lainnya, maka akan membuat berantakan tampilan selanjutnya. Kadang tampilan selanjutnya jadi bold semua, letaknya jadi gak karuan dan lainnya, pokoknya berantakan! Nah, bagaimana menanggulangi masalah-masalah krusial tersebut, tanpa harus mengubah kode pemanggil parameternya yang seperti di bawah ini? <b:inc...

Custom Structured Metadata JSON Blogger Versi Terbaru (Blogger Layout Versi 3)

Setidaknya ada dua cara memasang structured metadata di blog/website yang paling popular digunakan. Yaitu dengan format Microdata dan JSON. Masing-masing cara pemasangan structured metadata keduanya berbeda. Intinya, structured metadata ini ditujukan untuk optimasi Rich Snippet sebuah blog/website untuk hasil penelurusan yang ideal dalam niche atau bahasan blog. Structured data dengan format Microdata lebih sering ditempelkan dan memanfaatkan selector serta markup HTML secara struktur atas HTML itu sendiri. Pokoknya tinggal di tempel-tempel saja pada markup yang ingin disajikan untuk membentuk rich snippet yang ideal (juga memenuhi spesifikasi). Kalau structured data dengan format JSON, itu dihidangkan secara terpisah. Karena sifatnya yang terbungkus menjadi satu script. Structured data dengan format JSON bisa diletakkan dimana saja, baik itu di dalam <head> dan di dalam <body> . Contohnya ini, yang sering kita liat nimbrung bersama meta tag, di bawah kode <head...

Format Cara Memasang datePublished dan dateModified pada Template Blogger Terbaru (Layout Versi 3)

Adapun datePublished dan dateModified merupakan property yang sangat dibutuhkan dalah penyusunan struktur data sebuah template, dalam hal ini platform Blogger. Baik itu untuk format structured data dalam bentuk Microdata, Json atau lainnya (RFDa, RDFa). Masalahnya, dalam update Blogger terbaru (untuk layout versi 3), terdapat sejumlah tag mengalami perubahan yang cukup ekstrim, beberapa tag ditambahkan dan beberapa tag juga dihilangkan. Pokoknya update-nya fresh, hampir semua baru! Masalah besar sebetulnya ada pada beberapa elemen yang diganti, alias tidak bisa lagi digunakan, harus merujuk dan menggunakan yang baru. Diantaranya ialah penggunaan datePublished dan dateModified, yang sudah tidak bisa lagi menggunakan cara-cara lama. Jika cara lama memasang datePublished dan dateModified biasanya diterapkan seperti ini: <meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/> <meta expr:content='data:post.lastUpdatedISO8601' it...

Cara Lain Memasang Thumbnail Post di Homepage tanpa JavaScript

Salah satu item yang memberi sumbangsi vital terhadap loading blog untuk platform Blogger/blogspot ialah pemuatan gambar, tidak terkecuali thumbnail post di homepage. Lebih-lebih jika elemen gambar tersebut tidak di scale dengan benar. Yang mana size atau resolusi gambar yang besar, ditampilkan dengan custom ukuran (lebar dan tinggi) yang lebih kecil. Cara tersebut tidak sepenuhnya mengubah dimensi gambar. Meskipun menggunakan trik resize image dengan JavaScript ataupun manipulasi CSS. Nah, berikut ini ada satu trik lagi untuk menampilkan thumbnail post di homepage (halaman utama). Yaitu menempatkan gambar pertama dari postingan, sebagai background untuk dijadikan thumbnail. Yang akan dipanggil dengan background-image: url(CUSTOM_IMAGE_URL_HERE) . Cek DEMO berikut, lalu IE/buka sourcenya, perhatikan pengkodean pada bidang thumb-wrapper . Demo Cara bikinnya adalah sebagai berikut: Langkah 1: Masuk ke Edit HTML, lalu ganti kode pemanggil thumbnail post (homepage) Anda dengan...

Blog bungfrangki

Cari Blog Ini