Postingan

Kombinasi Skin Variable Definition dan :root Selector di Blogger

Kombinasi Skin Variable Definition dan :root Selector di Blogger

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='data:skin.vars.body_backg…
Cara Menyalin Tulisan dari MS Word ke Blogger

Cara Menyalin Tulisan dari MS Word ke Blogger

Tidak sedikit Blogger pemula yang masih kebingungan untuk memindahkan tulisan dari MS Word ke Blogger atau cara mengcopy/memasukkan tulisan dari Word ke blogspot.

Pasalnya, jika kita melakukan dengan cara tradisional, yang memanfaatkan CTRL + V atau klik kanan pada bidang text lalu Paste, maka tampilan postingan menjadi berantakan. Mulai dari jenis font, besar font dan lainnya, persis mengikuti apa-apa yang kita lakukan di Microsoft Word tersebut.

Keadaan tersebut biasa disebut dengan formatted text atau teks terformat. Menyalin tulisan dalam keadaan formatted text akan memicu masalah luar biasa pada template Blogger/blogspot.

Bahaya Posting Formatted Text ke Blogspot Salah satu dampak yang paling berpengaruh jika tetap memaksa untuk memposting tulisan dalam keadaan terformat seperti, akan berdampak pada jumlah postingan di homepage tidak sesuai dengan yang telah disetting.

Dampak lainnya adalah, tentu saja tampilan konten menjadi berantakan. Fontnya tidak lagi sesuai dengan font baw…
Cara Mengatasi Warning pada Breadcrumbs Terbaru 2020

Cara Mengatasi Warning pada Breadcrumbs Terbaru 2020

Adapun notifikasi warning pada Breadcrumbs ini muncul dengan pesan "Search Console has identified that your site is affected by 1 Breadcrumbs issues" pada Google Search Console, dan "data-vocabulary.org schema is deprecated and not supported by Google anymore. Please migrate to using schema.org types." atau "Skema data-vocabulary.org tidak digunakan lagi dan tidak didukung lagi oleh Google. Harap migrasikan menggunakan jenis schema.org." di Structured Data Testing Tools.

Dalam hal ini, nampaknya struktur HTML Blogger tidak mau lagi menggunakan skema data-vocabulary.org. Artinya, arah solusinya menjadi dapat diketahui. Kita harus mengganti susunan HTML Blogger untuk Breadcrumb, dengan yang direkomendasikan Blogger.

Apa itu? Simak selanjutnya.

Mengatasi Notifikasi Warning Breadcrumbs pada Search Console dan Structured Data Testing Tools
Adapun mengganti kode HTML Breadcrumbs ini akan sekaligus menjawab masalah warning pada kedua sisi tools Google tersebut.

Cara Mengatasi Kesalahan CertificatesService.Insert APP_ERROR pada Blogger

Cara Mengatasi Kesalahan CertificatesService.Insert APP_ERROR pada Blogger

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, sertificate SSL …
Cara Menampilkan Teks Keterangan Timestamp (TimestampLabel)

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). Dibeberapa templa…
Cara Memasang Lazy Load Disqus Comments di Blogger

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/BlogspotDalam hal ini, saya…
Menampilkan Tanggal Posting Hanya pada Label Tertentu di Blogger

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:includable id='cust…
Cara Memasang Breadcrumbs Hanya Menampilkan Satu Label

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 Hanya Menampilkan …
Free and premium blogger templates