Postingan

Browsing Artikel: Tutorial Blog

Pada kategori Tutorial Blog ini saya akan berbagi tutorial blogger lengkap untuk blogger pemula yang sedang belajar ngeblog, serta tutorial blog tingkat lanjut, utamanya di platform Blogger atau blogspot

Seperti cara membuat blog untuk pemula dari nol, tips customisasi template, cara memasang dan kustomisasi widget Blogger dan lain sebagainya.

Pada kategori ini juga akan dibahas cara optimasi SEO blogspot, diantaranya cara memasang meta tag yang benar di blogger, search console, rearch results test, schema.org dan seterusnya.

Tunjukkan semua
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
Modifikasi Recent Posts Blogger/Blogspot dengan Nomor

Modifikasi Recent Posts Blogger/Blogspot dengan Nomor

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
Cara Mengatasi Related Posts Tidak Tampil di HP/Mobile

Cara Mengatasi Related Posts Tidak Tampil di HP/Mobile

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: <
Solusi Structured Data Error "Atribut logo.height memiliki nilai yang tidak valid"

Solusi Structured Data Error "Atribut logo.height memiliki nilai yang tidak valid"

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
Cara Memasang Komentar Facebook Responsive di Blogger Terbaru

Cara Memasang Komentar Facebook Responsive di Blogger Terbaru

Tutorial Blogger kali ini tentang cara mengganti komentar bawaan Blogger/Blogspot dengan komentar Facebook (FB Comments) responsive , yang memungkinkan tampilan komentar FB tersebut menyesuaikan dengan segala bentuk ukuran devices. Jika pada tutorial sebelumnya mengenai cara terbaru memasang komentar Disqus di Blogger , maka kali ini akan dibahas tentang cara pasang komentar FB di platform blog sejuta umat ini. Jika berminat, silahkan ikuti tutorialnya berikut ini. #Langkah 1 Silahkan tambahkan meta tag berikut di bawah kode <head> atau  &lt;!--<head>--&gt;&lt;head&gt; <meta content='FACEBOOK_APP_ID' property='fb:app_id'/> <meta content='ADMIN_PROFILE_ID' property='fb:admins'/> <meta content='ADMIN_PROFILE_ID' property='fb:profile_id'/> <meta content='FANPAGE_ID' property='fb:pages'/> Dari keempat kode meta tag di atas, direkomendasikan unuk memasang Facebook A
UPDATED: Cara Memasang Komentar Disqus Permanen di Blogspot/Blogger Terbaru

UPDATED: Cara Memasang Komentar Disqus Permanen di Blogspot/Blogger Terbaru

Tutorial blog kali ini tentang cara memasang komentar Disqus di blog platform Blogger/blogspot terbaru . Karena kita akan memasang komentar Disqus ini secara permanen, maka segala fitur atau semua script komentar bawaan blogger akan dihapus atau dihilangkan. Hal ini bertujuan untuk membuat blog lebih cepat diakses dari sebelumnya. Kita ketahui bahwa script komentar bawaan blogger itu memakan space baris kode yang cukup banyak. Hal ini pun yang membebani loading blog, mulai dari homepage lebih-lebih di halaman post atau post page. Baca jug: Inilah Kelebihan Komentar Disqus yang Perlu Anda Ketahui Karena cara kali ini memasang komentar Disqus secara permanen, maka berarti anda saya anggap sudah tidak tertarik lagi untuk menggunakan komentar bawaan blogger. Entah itu komentar asli dari blogspot atau komentar blogspot yang sudah di custom sedemikian rupa. Dengan kalimat lain, anda tidak akan mau kembali lagi menggunakan komentar bawaan blogger/blogspot tersebut. Berikut caranya. Ca
Cara Menampilkan Widget Related Post di Sidebar Blogger

Cara Menampilkan Widget Related Post di Sidebar Blogger

Untuk tutorial cara memindahkan widget Related Posts yang biasanya muncul di bawah artikel/postingan menjadi tampil dibagian sidebar blogspot, konsep dasarnya sebetulnya hampir sama dengan tutorial yang pernah saya bagikan beberapa waktu lalu. Yaitu tentang Cara Pasang Related Posts Responsive yang Stylenya Bisa Diubah Melalui Layout/Tata Letak Blogger , yaitu bisa konfigurasikan beberapa opsi penting langsung dari menu Layout atau Tata Letak Blogger. Hanya saja ada beberapa potongan kode lagi yang perlu diurai (dicerai-beraikan). Nah, sebelum melangkah ke tutorialnya, alangkah baiknya disimak dulu berbagai fitur yang bakal Anda dapatkan jika memasang widget ini. Fitur: Tersedia 6 jenis style (model tampilan) dalam satu widget. Bisa pilih 1 dari 6 style tersebut langsung dari Layout/Tata Letak Blogger. Bisa menentukan berapa jumlah post yang ingin ditampilkan pada widget melalu Layout/Tata Letak Blogger. Bisa menentukan juga jumlah summary (post snippet) langsung setting di m