Blog bungfrangki

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

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

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: <

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

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

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

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

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