Postingan

Browsing Artikel: Tutorial Blog
Tunjukkan semua
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:includab
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 H
Cara Memasang Syntax Highlighter Seperti Sublime Text

Cara Memasang Syntax Highlighter Seperti Sublime Text

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
Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout/Tata Letak Blogger

Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout/Tata Letak Blogger

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
2 Cara Memasang Lazy Load Iklan Adsense

2 Cara Memasang Lazy Load Iklan Adsense

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
Cara Membuat Tombol Full Screen Landscape Video iFrame di Blogger

Cara Membuat Tombol Full Screen Landscape Video iFrame di Blogger

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
Cara Mengatasi Emoticon di Komentar Blogger Tidak Muncul

Cara Mengatasi Emoticon di Komentar Blogger Tidak Muncul

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') {
Membuat Syntax Highlighter Otomatis Terbaru di Blogger

Membuat Syntax Highlighter Otomatis Terbaru di Blogger

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