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

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

Cara Perbaiki Pinterest Share Button Blogger yang Tidak Menampilkan Judul Postingan

Tutorial Blogger kali ini tentang cara memperbaiki tombol berbagi Pinterest di Blogspot yang tidak menampilkan judul postingan yang hendak di share. Tidak hanya itu, ternyata thumbnail artikelnya juga terlihat blur, tampil dengan resolusi di bawah dengan ukuran kecil. Masalah ini hanya dialami oleh template-template Blogger yang memasang widget share button tanpa JavaScript atau tanpa plugin. Jadi, bagi yang blognya dipasangi widget share button menggunakan JavaScript, misalnya JavaScript dari SumoMe, Addthis, Sharethis dan lainnya, tidak perlu khawatir, semua tombolnya berjalan dengan lancer. Nah bagi pengguna Blogger yang menggunakan widget share button tanpa JavaScript dan juga menampilkan tombol berbagi untuk Pinterest, segera perbaiki kode tombolnya. Karena pada saat tombol Pinterest tersebut digunakan, kemungkinan besar tampilannya akan menjadi seperti ini: Cara perbaiki tombol share Pinterest yang seperti itu adalah sebagai berikut. Cari kode berikut ini (atau yang ser

Cara Menyembunyikan Widget Tertentu pada Tampilan Pratinjau Postingan (Preview Post)

Sesaat sebelum mem-publish sebuah artikel di Blogger, biasanya kita sering menggunakan fitur preview post untuk mengecek kembali susunan postingan yang baru saja kita buat. Nah, biasanya suka ada widget tertentu (seperti, Featured Post, Featured by Label, dll) yang sebenarnya cuma ditampilkan pada halaman utama (homepage), tiba-tiba muncul pada halaman Preview Post. Secara personal, penampakan widget yang tidak diinginkan ini, bisa saja amat mengganggu pandangan saat sedang berada dihalaman tersebut. Bagaimana caranya supaya widget tersebut tidak muncul saat Pratinjau Postingan? Berikut caranya! Cara hilangkan widget tertentu pada halaman Preview Post Silahkan masuk ke dashboard blog, lalu masuk ke Theme > Edit HTML Klik menu dropdown Jump to Widget , lalu pilih widget yang ingin disembunyikan pada halaman preview post (pada tutorial ini, misalnya yang ingin disembunyikan adalah widget Featured Post). Setelah dibawa pada markup widget Featured Post, silahkan tempatkan tag co

Solusi Snippet Untuk Homepage yang Muncul Link dan Tampilan Error pada Blogger Terbaru

Pada template Blogger terbaru layout versi 3, dalam sintaks snippet untuk membuat ringkasan postingan pada halaman utama (homepage), sudah tersedia secara default. Parameternya dipanggil dengan kode <b:include cond='data:post' data='post' name='postSnippet'/> . Masalahnya ialah, jika pada paragraf awal postingan terdapat elemen tag a (link), maka link tersebut muncul juga di snippet/description postingan homepage. Tidak hanya itu, tag elemen lainnya juga ikut muncul. Seperti tag bold , italic , underline dan lainnya. Dan eksistensinya sangat amat mengganggu tampilan blog. Ditambah lagi jika snippet ke- crop dan terdapat tag div atau tag lainnya, maka akan membuat berantakan tampilan selanjutnya. Kadang tampilan selanjutnya jadi bold semua, letaknya jadi gak karuan dan lainnya, pokoknya berantakan! Nah, bagaimana menanggulangi masalah-masalah krusial tersebut, tanpa harus mengubah kode pemanggil parameternya yang seperti di bawah ini? <b:inc

Saran: Membuat Template Model Grid Lebih Baik Menggunakan display:flex

Untuk membuat template style grid, sangat disarankan untuk menggunakan property dan value display:flex pada selectornya. Dibandingkan menggunakan yang lainnya, seperti display:block , display:inline-block ataupun display:grid . Kelebihannya display:flex ialah tidak perlu lagi menambahkan property height pada selector yang sama. Sehingga jika dalam satu baris grid yang sama terdapat tampilan bidang yang berbeda tingginya, maka bidang yang lainnya akan mengikuti bidang yang paling tinggi diantaranya. Contoh, Biasanya untuk membuat style grid menggunakan kode seperti ini: .post {display:inline-block; float:left; height:450px; margin-right:4%; width:calc(50% - 4%)} Jika menggunakan display:flex maka kurang lebih cara penerapannya menjadi seperti ini: #main-wrapper .blog-posts {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap: wrap;} .post { f

Custom Structured Metadata JSON Blogger Versi Terbaru (Blogger Layout Versi 3)

Setidaknya ada dua cara memasang structured metadata di blog/website yang paling popular digunakan. Yaitu dengan format Microdata dan JSON. Masing-masing cara pemasangan structured metadata keduanya berbeda. Intinya, structured metadata ini ditujukan untuk optimasi Rich Snippet sebuah blog/website untuk hasil penelurusan yang ideal dalam niche atau bahasan blog. Structured data dengan format Microdata lebih sering ditempelkan dan memanfaatkan selector serta markup HTML secara struktur atas HTML itu sendiri. Pokoknya tinggal di tempel-tempel saja pada markup yang ingin disajikan untuk membentuk rich snippet yang ideal (juga memenuhi spesifikasi). Kalau structured data dengan format JSON, itu dihidangkan secara terpisah. Karena sifatnya yang terbungkus menjadi satu script. Structured data dengan format JSON bisa diletakkan dimana saja, baik itu di dalam <head> dan di dalam <body> . Contohnya ini, yang sering kita liat nimbrung bersama meta tag, di bawah kode <head

Format Cara Memasang datePublished dan dateModified pada Template Blogger Terbaru (Layout Versi 3)

Adapun datePublished dan dateModified merupakan property yang sangat dibutuhkan dalah penyusunan struktur data sebuah template, dalam hal ini platform Blogger. Baik itu untuk format structured data dalam bentuk Microdata, Json atau lainnya (RFDa, RDFa). Masalahnya, dalam update Blogger terbaru (untuk layout versi 3), terdapat sejumlah tag mengalami perubahan yang cukup ekstrim, beberapa tag ditambahkan dan beberapa tag juga dihilangkan. Pokoknya update-nya fresh, hampir semua baru! Masalah besar sebetulnya ada pada beberapa elemen yang diganti, alias tidak bisa lagi digunakan, harus merujuk dan menggunakan yang baru. Diantaranya ialah penggunaan datePublished dan dateModified, yang sudah tidak bisa lagi menggunakan cara-cara lama. Jika cara lama memasang datePublished dan dateModified biasanya diterapkan seperti ini: <meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/> <meta expr:content='data:post.lastUpdatedISO8601' it

Cara Lain Memasang Thumbnail Post di Homepage tanpa JavaScript

Salah satu item yang memberi sumbangsi vital terhadap loading blog untuk platform Blogger/blogspot ialah pemuatan gambar, tidak terkecuali thumbnail post di homepage. Lebih-lebih jika elemen gambar tersebut tidak di scale dengan benar. Yang mana size atau resolusi gambar yang besar, ditampilkan dengan custom ukuran (lebar dan tinggi) yang lebih kecil. Cara tersebut tidak sepenuhnya mengubah dimensi gambar. Meskipun menggunakan trik resize image dengan JavaScript ataupun manipulasi CSS. Nah, berikut ini ada satu trik lagi untuk menampilkan thumbnail post di homepage (halaman utama). Yaitu menempatkan gambar pertama dari postingan, sebagai background untuk dijadikan thumbnail. Yang akan dipanggil dengan background-image: url(CUSTOM_IMAGE_URL_HERE) . Cek DEMO berikut, lalu IE/buka sourcenya, perhatikan pengkodean pada bidang thumb-wrapper . Demo Cara bikinnya adalah sebagai berikut: Langkah 1: Masuk ke Edit HTML, lalu ganti kode pemanggil thumbnail post (homepage) Anda dengan

Merubah Warna Kata Pertama pada Title Widget Sidebar

Teknik mengubah warna text pada kata pertama di judul/heading digunakan untuk mempercantik tampilan template blog. Trik ini biasanya diterapkan pada title widget sidebar dan tag heading di blog. Sehingga akan terlihat style judul widget menjadi dua warna yang berbeda antara kata pertama dan kata selanjutnya. Contohnya, sidebar di website/blog Anda terdapat widget yang berjudul “ Postingan Terbaru ”, maka jika diterapkan cara berikut ini, judul widget sidebar tersebut akan berubah menjadi “ Postingan Terbaru ”. Demo: https://berminat-template.blogspot.com Cara menerapkannya silahkan ikuti langkah-langkah pada tutorial berikut ini: 1. Masuk ke Edit HTML, tambahkan CSS berikut ini letakkan di atas kode </style> .FirstWord{color:#ce0a46;} 2. Lalu cari kode </body> atau </body> tambahkan kode jQuery berikut ini di atas kode tadi: <script type='text/javascript'> //<![CDATA[ $('#sidebar-wrapper h2

Cara Menyembunyikan Iklan AdSense di Halaman Pencarian Blog dan Label

Menjalankan iklan di halaman search label dan terutama search blog post, adalah suatu tindakan yang sangat beresiko untuk kesehatan akun Google Adsense. Bisa-bisa akun Adsense akan kena banned. Sebab, kita sebagai pemilik blog/website tidak dapat mengontrol keisengan pengunjung yang bisa saja memodifikasi URL pencarian label, dan memasukkan keyboard pencarian halaman blog, dengan kata kunci yang tidak ada hubungannya dengan konten blog, bahkan cenderung kurang pantas. Lebih-lebih jika pengunjung yang marah karena masalah keluarga atau karena masalah hutang, dan melampiaskan kemarahannya tersebut pada akun Adsense yang terpasang di blog kita, melalui kolom pencarian blog ( data:blog.searchQuery ) atau memodifikasi link URL halaman pencarian label ( data:blog.searchLabel ) menjadi sesuatu yang berbau kata kunci dewasa atau18+. Sebagai contoh, URL blog dari hasil keisengan pengunjung saat menggunakan widget pencarian blog, maka akan menjadi seperti ini: https://setuplaptopgamingmu

Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah

Tips blog kali ini tentang Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah . Terdapat berbagai macam sticky widget (widget melayang) yang dapat diterapkan pada Blogger/Blogspot. Salah satunya ialah widget sticky sidebar: stick to bottom when scrolling down, and top when scrolling up . Artinya, widget yang menempel bagian bawah jika scrollnya ke bawah, dan widget yang menempel bagian atas jika kita scroll halaman blog/website ke atas. Model widget sidebar seperti itu dapat Anda lihat langsung di website Jalantikus.com (halaman postingan), sangat keren bukan? Cara ini juga saya sudah terapkan pada template Viralisme Theme dan Risen Template (semua versi). Silahkan lihat demonya dengan klik tombol di bawah: Demo Nah melalui tutorial ini saya akan kasih tau bagaimana caranya pasang widget sticky sidebar seperti itu di platform Blogger/Blogspot. Namun tidak menutup kemungkinan jQuery dari sticky sidebar ini bisa juga diterapkan pada platform lain seperti W

Cara Memasang 3 Slot Iklan di Tengah Postingan Artikel

Jika rasa-rasanya memasang 2 slot iklan Adsense di tengah postingan masih kurang, maka tambahkan satu slot iklan lagi, sehingga akan nampak 3 slot iklan di tengah-tengah artikel blog/website. Sebetulnya tutorial memasang tiga slot advertise di tengah postingan blog kali ini tidak benar-benar terletak Nampak di tengah postingan, melainkan posisinya berada di dalam postingan. Iklan bakal tampil menurut paragraph artikel yang kita tentukan di script. Adapun script untuk tutorial ini adalah hasil modifikasi dari artikel yang sudah saya bagi sebelumnya, yaitu tentang cara pasang 2 iklan Google Adsense di tengah artikel . Cara pemasangannya pun sama persis dengan langkah-langkah pada tutorial di artikel tersebut. Biar cara menerapkannya tidak bingung, alangkah baiknya cara pasangnya saya jabarkan disini juga. Berikut caranya! Demo Cara pasang 3 iklan Adsense di tengah postingan menurut paragraf 1. Cari kode yang seperti ini (atau serupa, biasanya yang kedua) <b:if cond='data

Membuat Komentar Disqus dengan Tombol Onclick Load

Tutorial Blogger kali ini tentang cara memasang widget Disqus comment dengan fungsi onclick load . Artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan ditampilkan jika pengunjung mengklik tombol untuk load komentar Disqus. Memasang tombol load komentar Disqus dengan fungsi onclick event ini ialah salah satu cara mempercepat loading blog. Karena seperti diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, saat halaman postingan tersebut dibuka. Apalagi jika komentar-komentar tersebut sudah demikian banyak, dan terdapat file lampiran berupa gambar dan lain sebagainya. Dengan adanya tombol load Disqus comments, maka pemuatan komentar Disqus akan “tertunda”, lalu seluruh konten komentar tersebut akan terbuka seutuhnya setelah pengunjung mengklik tombol onload komentar Disqus. Caranya memasangnya adalah sebagai berikut! Cara memasang komentar Disqus dengan fu

Blog bungfrangki