Postingan

Browsing Artikel: Widget
Tunjukkan semua
Cara Memasang HTML Parse Codes di Blogger

Cara Memasang HTML Parse Codes di Blogger

Cara Pasang Parse Code HTML Widget Tools di Blog yang Valid HTML5 - Parse HTML adalah salah satu tools yang digunakan untuk mengkonversi kode, macam kode iklan. Biasanya kode iklan yang di parse adalah iklan yang nantinya akan tampil di dalam postingan, baik di atas, di tengan, maupun di bawah postingan. Tools ini juga sangat mudah digunakan oleh newbiew sekalipun, sebab cukup menekan satu tombol saja kode HTML langsung diparse. Tools ini sangat cocok dipasang pada blog yang membahas tentang berbagai tutorial seputar script/coding website atau blog. Baca juga: Cara Membuat Photoshop Online di Blog Bagi yang ingin tau seperti apa tools parse HTML itu, kolom di bawah ini adalah contohnya. Silahkan masukkan kode iklan anda disana, lalu klik Parse Script. Gunakan HTML Parse yang lebih baik. Cara pasang widget parse kode HTML di blogspot/Blogger Anda pun dapat memasang parse HTML sendiri di blog anda. Kopi kode di bawah ini dan letakkan dimana saja yang ingin anda ingi
Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru

Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru

Widget blogger kali ini adalah cara membuat daftar isi/sitemap yang berlabel ‘new’ atau ‘baru’ sesuai label yang mendapat artikel terbaru . Widget ini untuk mempermudah menavigasi penjelajahan blog dengan melihat label dari blog tersebut. Dengan begitu para pengunjung akan mengetahui label mana saja yang baru saja mendapatkan update artikel terbaru di blog tertentu. Seperti yang sudah saya ungkapkan sebelumnya, fungsi #Widget daftar isi ini untuk melihat semua artikel secara lengkap dan supaya mudah di temukan oleh pengunjung dan memudahka bot menjelajah juga untuk merayapi semua artikel di blog anda. Baca juga:  Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan Jadi, penggunaan sitemap atau daftar ini di blog sangatlah penting, semakin banyak blog anda di crawl/dijelajahi, maka semakin banyak pula page views yang dihasilkan setiap harinya. Cara Pasang Widget Daftar Isi di Blog Alangkah baiknya widget ini diletakkan pada laman statis, dengan cara masuk ke dashbo
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
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
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 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
Position sticky not working? Begini Triknya Agar Berhasil!

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 &lt;/head&gt;&lt;!--<head/>--&gt; <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
Membuat 3 Iklan yang Tampil Sesuai Paragraf dan Bisa Diedit pada Layout, untuk Blogger Layout v3

Membuat 3 Iklan yang Tampil Sesuai Paragraf dan Bisa Diedit pada Layout, untuk Blogger Layout v3

Trik kali ini terkait slot iklan yang letaknya khusus di tengah postingan/artikel (post page), namun bisa di edit melalui menu Layout atau Tata Letak Blogger. Keunggulan dari widget slot iklan ini dapat di setting ingin ditampilkan pada paragraph tertentu. Cara penerapannya masih mirip-mirip dengan tutorial yang telah saya bagikan sebelumnya, yaitu Trik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout/Tata Letak . Hanya saja bedanya, kali ini saya menerapkannya pada Blogger yang layout versi 3 ( b:defaultwidgetversion='2' b:layoutsVersion='3' ). Jadi, cara ini tidak akan berhasil diterapkan begitu saja pada HTML yang biasanya. Namun kalau Anda sudah mengerti sedikit kode HTML, maka akan sangat mudah bagi Anda untuk utak-atik ini dan menerapkannya pada jenis html yang lama. Karena sebetulnya hanya butuh sedikit perubahan pada bagian html pemanggil widgetnya saja, yang bisa dikonfigurasi pada layout. Mengapa saya pilih menerapkannya di Blogger layout ve
Cara Pasang Disqus Comment, dan Membuat Disqus Shortname Bisa Diedit pada Layout Blogger

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

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