Blog bungfrangki

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

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

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

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

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

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

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

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 &lt;!--</body>--&gt;&lt;/body&gt; tambahkan kode jQuery berikut ini di atas kode tadi: <script type='text/javascript'> //<![CDATA[ $('#sidebar-wrapper h2

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

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

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

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

Dalam hal ini saya asumsikan Anda sudah punya artikelnya, baik itu artikel berbahasa Inggris, bahasa Spanyol, atau bahasa Korea. Termasuk juga, Anda sudah melakukan reset keyword dan embel-embelnya berdasarkan niche yang Anda pilih. Pokoknya artikel-artikel tersebut sudah siap 100% untuk di posting, dengan segala konsep yang sudah direncanakan secara matang-matang. Serta penggunaan grammar yang menurut Anda cocok untuk niche yang sudah dipilih tersebut. Adapun tiga alat tempur yang perlu disiapkan sebelum melakukan update postingan di blog bule akan dijabarkan seperti berikut ini. 3 tools yang harusnya digunakan sebelum update artikel unruk blog bule Bagi sebagian Blogger mungkin tools berikut ini terlihat tidak penting-penting amat, atau bahkan bisa jadi ada yang akan bilang kalau toolsnya tidak berguna. Namun, menurut saya ini perlu dipertimbangkan untuk digunakan, mengingat target market kita adalah orang-orang nun jauh disana. Adapun ketiga tools/alat tersebut adalah sebaga

Tutorial blog kali ini tentang cara mengubah alamat website/blog saat dibuka menggunakan sedikit potongan kode dari JavaScript dan jQuery. Konsepnya seperti redirect link, tetapi untuk tutorial kali ini tidak mengganti seluruh link yang ada melainkan hanya mengganti sebagian kata/huruf dari permalink. Peran kode JavaScript dalam tutorial ini adalah mengganti/replace permalink dengan yang kita tentukan, serta meload/me-refresh kembali address bar dengan permalink yang baru itu. Sementara peran kode jQuery ialah menghentikan reload/refresh yang berulang-ulang, dalam arti lain, kode jQuery dalam tutorial ini hanya akan mengijinkan laman melakukan refresh cukup sekali saja. Perlu dicatat bahwa cara ini bukan mengganti hyperlink. Karena mengganti hyperlink pada platform blogger tidak disupport. Cara ini hanya cocok digunakan untuk mengarahkan user untuk mengakses laman yang sesuai. Kira-kira begitulah penjelasannya. Lalu cara menerapkannya adalah seperti berikut ini. Kode yang dip

Tutorial Blogger kali ini yaitu tentang cara memperbaiki widget related post (DTE) yang tampilan gambar/thumbnailnya terlihat gepeng, peang, penjol. Atau dalam bahasa lain gambarnya saling tarik-menarik, tidak enak dipandang. Artinya, dalam tutorial kali ini, kita akan membuat tampilan gambar di related post bisa lebih natural, terlihat indah. Meskipun ada cropping, tetapi itu lebih baik dabindingkan tampilan gambarnya stretch . Selain itu, tentu saja scriptnya tetap akan support HTTPS (SSL). Jika dibandingkan maka perbedaanya akan terlihat seperti berikut, perhatikan baik-baik penampakan pada gambar di bawah ini: Atau gambar ini: Antara gambar 1 dan gambar 2, mana yang menurut Anda lebih baik? Gambar nomor 3 bukan? Ya, memang bukan gambar nomor 3, karena jawaban yang betul adalah gambar nomor 2. Untuk memperbaiki thumbnail related post yang ketarik-tarik seperti pada gambar 1, maka lakukan perubahan berikut ini. Ganti JavaScript related post yang lama dengan code berikut

Cara kali ini membahas tentang solusi mengatasi tombol redirect non www to www . Contohnya, blog yang domainnya seperti themeindie.com , jika dibuka maka akan tampil www.themeindie.com Adapun tombol redirect yang dimaksud adalah terletap pada menu Setting > Basic > Publishing . Lalu silahkan klik Edit pada bagian TLD untuk blog Anda. Saya pernah mengalami tidak bisa centang tombol redirect tersebut pada blog ini. Setiap kali dicentang, hanya akan muncul pesan seperti berikut: You have not been authorized to use this domain. Please follow the settings instructions. Lihat gambar berikut ini: Hasilnya, jika blog saya dibuka tanpa menggunakan www (khusus browser yang belum ada history/cache blog saya), maka yang muncul adalah tampilan error seperti ini: Padahal pada settingan Nameserver di provider domain tempat kita beli, tidak ada masalah, sama seperti yang diarahkan oleh CS provider tersebut. Pun pengaturan DNS tidak ada yang keliru penerapannya. Blog Anda meras

Tips Blogger kali ini tentang cara mengatasi ikan Google Adsense yang kadang tidak muncul pada postingan atau halaman tertentu setelah menggunakan SSL pemberian Google (khusus platform Blogger). Banyak yang mengeluhkan hal ini. Pasalnya, dengan memutuskan untuk menggunakan HTTPS Google maka formasi seluruh link artikel blog akan tampak berbeda dari sebelumnya. Dengan demikian, hal ini dianggap menjadi link postingan baru oleh algoritma Adsense. Kira-kira begitulah situasinya. Jika keliru, silahkan koreksi saya melalui form komentar di bawah, terkait alasan pasti tentang penyebab urgensi iklan Adsense yang pilih-pilih muncul diberbagai artikel yang ada di blog. Jika Anda baru mengetahui informasi tentang pemberian HTTPS oleh Google ini dan ingin mengaktifkannya untuk blog Anda, silahkan aktifkan melalui https://draft.blogger.com/ . Agar iklan Google Adsense cepat muncul setelah menggunakan HTTPS di Blogger, maka lakukan cara berikut ini, langkah kedua tidak terduga, ternyata mem