Postingan

Browsing Artikel: Tutorial Blog
Tunjukkan semua
 Cara Mengganti Kolom Komentar Blogger ke Versi Terbaru (Contempo Skin)

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 Defi
Cara Membuat Read Time Otomatis di Blogspot atau Blogger

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='postBo
Mengatasi Thumbnail Homepage Blur di Blogger Versi Terbaru

Mengatasi Thumbnail Homepage Blur di Blogger Versi Terbaru

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
Blogger Tag Conditional for Mobile, Menampilkan atau Menyembunyikan Widget di Mobile

Blogger Tag Conditional for Mobile, Menampilkan atau Menyembunyikan Widget di Mobile

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
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='
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, sert
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). Dibe
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/Blogspot
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
Cara Redirect 301 ke Domain Baru di Blogger/Blogspot

Cara Redirect 301 ke Domain Baru di Blogger/Blogspot

Cara redirect 301 dari domain lama ke domain baru di Blogger atau Blogspot ini juga berlaku bagi blog yang sudah menggunakan TLD (Top Level Domain). Intinya, masih pakai platform Blogger untuk membuat postingan. Apa Itu Redirect 301? Redirect 301 ialah upaya untuk me-redirect (mengalihkan) URL atau permalink blog lama ke permalink blog baru secara otomatis. Yang dialihakan bukan hanya antar halaman homepage saja, tetapi juga berlaku untuk halaman post dan static/page. Adapun model redirect 301 ini bisa dengan mengalihkan nama domain lama ke nama domain baru, misalnya https://domainlama.blogspot.com di redirect ke https://domainbaru.blogspot.com . Atau bisa juga mengahlikan ke TLD yang baru (dengan nama domain yang sama). Contohnya https://www.namadomainku.com menjadi https://www.namadomainku.net Secara lengkapnya, ilustrasi redirect 301 adalah sebagai berikut: https://www.namadomainku.com/ https://www.namadomainku.com/p/halaman-static.html https://www.namadomainku.com/20
Free and premium blogger templates