Tutorial Blog

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

Memasang Schema.org Organization atau Person Untuk Meta Tag Blogger

Schema.org Organization dan Person ini nantinya akan menjadi meta tag blog yang letaknya berada di bawah kode <head> . Hanya saja markupnya tidak menggunakan Microdata, melainkan menggunakan JSON-LD. Nantinya Schema.org dengan type Organization atau Person ini akan menjadi pemberi informasi metadata tambahan dari website/blog ke mesin pencari, pun sebagai tambahan structured data template Blogger/Blogspot. Cukup memasang salah satu yang diinginkan. Pilih type Organization atau Person. Sangat tidak dianjurkan untuk memasang keduanya dalam satu template. Sesuakan dengan kapasitas blog atau website. Jika blog dikelola secara bersama (multi author) alangkah baiknya menggunakan scturctured data Schema.org type Organization. Namun bila blog dikelola secara single , pilih saja menggunakan type Person. Baik Schema.org type Organization maupun Person, masing-masing akan berisi informasi nama dan url blog, serta url sosial media. Pasang Structured Data Schema.org type Organizatio

Cara Mengatasi Threaded Comment dan Reply Comment Blogger Error

Tutorial ini adalah lanjutan sekaligus jawaban dari artikel sebelumnya tentang komentar blog error, tombol reply not working . Tips blogger kali ini masih seputar komentar Blogger/blogspot, namun ini adalah benar-benar solusinya. Adapun rincian masalahnya adalah sebagai berikut: Threaded comment (balasan komentar) yang menjadi terlihat rata dengan komentar induk. Tombol reply comment not working, tidak berfungsi sebagaimana mestinya. Khususnya bagi pengguna template Themeindie.com dan mengalami error pada komentar blognya, maka disarankan untuk mengikuti tutorial sebagai berikut. How to fix threaded Blogger comment error and reply button not working? Sebelum melanjutkan ke tutorial, silahkan backup dulu XML template Anda, untuk menghindari sesuatu yang tidak sepatutnya terjadi di hidup Anda. Untuk mengikuti tutorial ini, anda harus masuk ke editor Blogger, pilih menu Theme > Edit HTML . Caranya sebagai berikut. 1. Kembalikan tag <head> dan </head> sebagaim

Komentar Blog Error, Tombol Reply Not Working, Apa Solusinya?

Beberapa hari ini saya banyak menerima pesan, keluhan tentang komentar Blogger/Blogspot yang error. Masalahnya tentang tombol reply comment yang tidak berfungsi saat di klik, dan semua konten balasan komentar menjadi lurus berjejer ke bawah. Tidak bisa dibedakan lagi mana main comments dan mana reply comments (komentar balasan). Baik komentar balasan dari Admin blog terkait dan juga komentar pengunjung. Anehnya, masalah ini hanya terjadi pada beberapa blog saja. Yaitu blog yang mempunyai ciri-ciri sebagai berikut: Blog yang sudah lama/berumur. Sudah dibuktikan dengan menginstall template yang sama pada blog yang baru, kolom komentar berfungsi sebagaimana mestinya. Blog yang masih menggunakan layout template lama (layout Versi 2). Blog yang sudah menggunakan template dengan layout v.3 aman-aman saja. Nah, apa yang harus dilakukan? Beberapa tips untuk mengatasi komentar Blogger error terkait tombol balas (reply) tidak berfungsi dan threaded comments yang menjadi lurus/berjeje

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

Cara Menampilkan Iklan di Halaman Postingan Hanya pada Label Tertentu

Menampikan iklan yang tampil pada postingan/artikel hanya pada label tertentu merupakan salah satu trick bagi Anda yang punya blog dengan berbagai macam label atau kategori. Ditambah lagi jika blog Anda dijalankan berbagai model platform periklanan. Misalnya Anda ingin menampilkan iklan Google Adsense pada semua artikel yang berlabel A dan B . Dan pada kategori/label C atau D , semua artikelnya ingin ditampilkan iklan sebagai Publisher MGID . Atau pada artikel dengan label tertentu, semua iklan tampil beriringan di dalam postingan. Semua itu sangat mungkin dilakukan pada Blogger/Blogspot tanpa harus menggunakan tambahan JavaScript atau jQuery. Cukup dengan menggunakan tag conditional khusus. Dasarnya, kode yang dibutuhkan adalah seperti ini: <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name == " NAMA LABEL "'> KODE IKLAN DISINI </b:if> </b:loop> Tetapi kode tersebut hanya dapat

Memasang Title Meta Tag Blogger dengan Tag Conditional Terbaru

Untuk membuat title meta tag saat ini, kodenya makin pendek saja. Mengingat tag conditional yang digunakan untuk merender title (judul blog dan artikel) di tiap-tipa halaman, telah diperpendek sama Blogger. Title meta tag ini biasanya diletakkan dibagian paling atas dalam sebuah HTML, yaitu diantara kode <head> dan </head> . Yang paling sering kita jumpai pada kebanyakan template Blogger/Blogspot, title meta tag diletakkan di bawah kode <head> bersama dengan barisan kode meta tag yang lain. Sederhanya, untuk kode title meta tag dengan menggunakan tak kondisional terbaru, kurang lebih nampak seperti berikut ini: <b:if cond='data:view.isHomepage'> <title><data:blog.title/></title> <b:elseif cond='data:view.isPost or data:view.isPage or data:view.search.label'/> <title><data:blog.pageName/></title> <b:elseif cond='data:view.search.query'/> <title><data:view.search.results

Menyembunyikan/Menampilkan Widget pada Halaman Tertentu di Blogger Terbaru

Berhubung sudah ada tag conditional terbaru, maka untuk menyembunyikan atau menampilkan widget/gadget di halaman tertentu untuk Blogger/Blogspot pun mengalami perubahan. Namun demikian, menggunakan cara-cara lama juga masih bisa dilakukan. Tutorial ini sebetulnya lanjutan dari tutorial sebelumnya, terkait cara agar iklan tidak tampil saat preview artikel . Untuk tutorial kali ini pun cara penerapannya hampir sama. Jika widget/gadget yang ingin kita sembunyikan atau tampilkan itu adalah bagian dari gadget header, sidebar, atau footer, maka caranya seperti berikut ini. Login ke Blogger > Tema > Edit HTML. Lalu pilih dropdown Lompat ke widget , seperti pada gambar berikut. Misalnya, widget/gadget yang ingin disembunyikan adalah seperti pada kode berikut ini: <b:widget id='HTML2' locked='false' title='Ads' type='HTML'>...</b:widget> Dan widget/gadget tersebut ingin disembunyikan pada halaman Preview Post, maka tinggal menambahka

Cara Agar Iklan Tidak Tampil Saat Preview Artikel

Untuk menyembunyikan atau menonaktifkan tampilan iklan saat sedang membuka halaman pratinjau (preview) artikel, kita butuh tag conditional khusus. Dan tag conditional tersebut baru ada sejak tahun 2017 lalu. Membiarkan slot iklan tetap tampil pada halaman preview post memang tidak ada pengaruh yang signifikan untuk blog terkait dan akun Google Adsense. Hanya saja, penampakannya yang sering blank itulah yang kadang mengganggu pandangan saat hendak pratinjau calon postingan blog. Nah, jika penampilan iklan di halaman preview/pratinjau post ini juga mengganggu kenyamanan Anda, maka lakukan cara berikut ini. Masuk ke Blogger > Theme > Edit HTML. Untuk iklan di dalam postingan (di bagian bawah, tengah dan akhir post) Sisipkan tag conditional ini pada slot iklan: <b:if cond='!data:view.isPreview'>  </b:if> Contoh: <b:if cond='!data:view.isPreview'> <ins class='adsbygoogle' data-ad-client='c

Mengalihkan/Redirect Otomatis URL Error 404 ke Homepage

Tutorial Blogger/Blogspot kali ini ialah cara mengatur redirect otomatis halaman yang Error 404 (broken link) ke halaman depan (homepage) atau halaman khusus. Tidak dapat dipungkiri bahwa broken link di blog dapat diakui cukup sulit diatasi. Penyebabnya bisa bermacam-macam, mulai dari kelalaian admin blog yang salah menempatkan atau menuliskan link pada artikel lainnya, telah menghapus link terkait. Atau bisa juga disebabkan oleh perayapan mesin pencari yang keliru menerjemahkan URL artikel di blog. Nah, URL yang error ini sangat bisa dioptimalkan dengan cara khusus. Yaitu dengan mengalihkannya ke homepage blog atau ke halmaan tertentu. Misalnya halaman sitemap blog, atau halaman khusus sebagai pemberitahuan terkait link yang error itu (semacam halaman error 404 tapi bikinnya di static page). Berikut tutorialnya. Untuk redirect halaman error 404 di Blogger, silahkan masuk ke menu Tema > Edit HTML. Lalu cari kode </body> atau &l

Cara Membuat Halaman Error 404 + Kolom Search

Membuat dan memodifikasi halaman error 404 cukup penting dilakukan agar makin informative dibandingkan dibiarkan tampil seadanya. Apalagi jika tampilan halaman error 404 itu dibuat responsive, pun ditambahin fitur search form. Pasti akan lebih menarik pengunjung, dan hampir bisa dipastikan akan menunda dia untuk segera kabur dari blog kita. Kebiasaan pengunjung (yang benar-benar mencari sesuatu yang dia butuhkan) itu suka cepat-cepat close tab, jika apa yang diinginkannya hanya berakhir di halaman error atau broken link. Itulah salah satu faktor penyebab bounce rate blog/website kita bisa sangat tinggi. Berikut, tutorial cara pasang halaman error 404 di Blogger responsive + search form. Langkah 1 Login ke Blogger lalu masuk ke Tema > Edit HTML. Langkah 2 Cari kode </head> atau </head> lalu letakkan kode berikut diatasnya: <b:if cond='data:view.isError'> <style type='text/css'> /* Er

Position sticky not working? Begini Triknya Agar Berhasil!

Untuk memasang sticky sidebar yang widgetnya berhenti di footer, sebetulnya dengan menggunakan CSS position:sticky akan lebih menarik, sebab tidak butuh JavaScript atau jQuery untuk membuatnya bekerja. Hanya saja ada beberapa syarat atau kondisi yang harus dipenuhi, jika ingin memasang widget sticky sidebar menggunakan position:sticky agar berhasil diterapkan. Sedikitnya ada dua syarat penting yang perlu diperhatikan, yaitu: Widget position:sticky tidak boleh dikurung lebih dari satu induk (tag div ). Termasuk tag seperti main , aside dll. Induk div (yang mengurung widget sticky) tidak boleh menggunakan property overflow . Mari kita praktekkan. Letakkan dulu CSS berikut ini di atas kode </head> atau </head> <style type='text/css'> #sticky-widget { position:-webkit-sticky; position:sticky; top: 20px; float: right; width: 300px; } </style> Catatan: Untuk tutorial kali ini, kita menggunakan

Cara Mewarnai Layout atau Tata Letak Blogger

Untuk memberi warna setiap section ataupun widget pada Layout Blogger/Blogspot, tidak bisa diterapkan pada jenis HTML5. Salah satu ciri struktur HTML5 yang paling mencolok adalah, tulisan HTML ditulis dengan huruf kapital, baik dibagian pembuka dan penutupnya. Contoh seperti ini: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <title>Hello world!</title> </head> <body> </body> <HTML> Syarat agar bisa mewarnai tampilan Layout/Tata Letak di Blogger, Anda harus ubah tulisan kode <HTML> (yang huruf kapital) tersebut menjadi huruf kecil. Sehingga pembukannya nampak seperti ini <html> dan penutupnya seperti ini </html> . Syarat selanjutnya ialah, kita harus menambahkan (atau mengganti) skin template, dengan yang seperti ini: <b:template-skin> <![CDATA[ // CSS Anda disini ]]></b:template-skin> Nah, pada skin tersebut kita sudah bisa me

Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Layout Blogger

Trik kali ini masih seputar custom template, yakni cara memasang komentar Disqus di Blogspot, dan membuat Disqus Shortname-nya bisa diedit langsung pada menu Layout atau Tata Letak Blogger. Artinya, pengguna template tidak lagi masuk ke Theme > Edit HTML atau menggunakan HTML Editor untuk mengganti username atau Disqus Shortname. Kurang lebih penampakannya akan seperti pada gambar berikut ini: Tentu saja hal ini akan mempermudah pengguna template, terutama yang masih awam tentang coding. Berbeda dengan tutorial sebelumnya yang menggunakan jQuery, yakni Trik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout/Tata Letak , trik kali ini tidak menggunakan script jQuery. Hanya memindahkan script peng-load komentar Disqus saja. Berikut caranya! Perhatian! Sebelum ke tutorial, hapus dulu semua JavaScript Disqus pada template, entah itu berupa widget (sidebar/footer), atau script yang ada di dalam Edit HTML (pengeditan tema). Langkah 1 Masuk ke menu Theme > Edit H

Cara Membuat Widget Social Bar yang Bisa Langsung Diedit pada Menu Layout

Lagi-lagi ini adalah salah satu tips untuk creator template Blogger. Agar pengguna template tidak lagi pergi ke menu Tema > Edit HTML, hanya untuk sekadar mengganti menu pada widget social media blog mereka. Mengganti dan menambahkan link akun social media, dapat langsung dilakukan dari menu Layout atau Tata Letak Blogger/Blogspot. Kita hanya butuh memanipulasi widget PageList (widget default), dengan sedikit modifikasi dan tambahan CSS. Cara kerjanya, pengguna tinggal menambahkan atau mengedit nama social media (dalam huruf kecil) serta link dari social medianya pada widget. Seperti pada gambar berikut ini. Berikut tutorialnya! Langkah 1 Masuk ke menu Tema > Edit HTML Langkah 2 Ganti atau tambahkan widget social media di template Anda dengan kode berikut ini: <div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/Person'> <link expr:href='data:blog.homepageUrl' itemprop='url'/> <b:se

Trik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout/Tata Letak

Adapun trik ini semacam memindahkan dan membuat tombol editing khusus untuk iklan dibagian postingan (di atas artikel dan di bawah artikel), berada di menu layout atau tata letak Blogger. Trik ini sebetulnya dikhususkan untuk creator template Blogger, sebagai tambahan customasi tampilan Layout Blogger, untuk mempermudah pelanggan templatenya saat ingin mengedit bagian-bagian yang ada di dalam postingan/artikel. Diantaranya adalah mengedit script atau kode iklan pada bagian postingan. Nah, dengan menerapkan trik ini, maka pengguna template tidak lagi masuk ke menu Tema > Edit HTML, untuk sekadar mengganti atau menambahkan kode iklan dibagian artikel (post page). Cukup edit dibagian menu Layout atau Tata Letak saja. Penasaran? Berikut tutorialnya! Cara membuat dan memindahkan editing kode iklan dibagian artikel, pada menu Layout/Tata Letak Blogger Cara menerapkannya sangat gampang namun agak sedikit rumit. Cobalah fokus sejenak dan sambil sruput kopi. Saya akan coba jelaskan l

Blog bungfrangki