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

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

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

Blog bungfrangki