Blog bungfrangki

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

Tips website/blogger kali ini tentang cara memasang atau mengganti jenis huruf blog menggunakan huruf yang sangat cantik, yaitu Museo . FYI, sebetulnya font Museo ini adalah font yang berbayar untuk font-weight dan font-style tertentu. Tetapi juga ada yang gratis, yaitu untuk font-weight: 300, 500 dan 700 . Jadi, yang akan dijadikan bahan dalam tutorial kali ini ialah menggunakan yang format font yang gratis. Jenis huruf ini tidak tersedia di Google Fonts , sehingga jika ingin memasangnya di website atau blog, maka harus menghosting file dengan format woff ( woff2 ) pada hostingan sendiri. Entah itu hosting sewaan atau di hosting file berupa script yang bisa digunakan secara percuma, semacam Github. Simak juga: Cara Mudah Mengetahui Font yang Digunakan pada Blog atau Website Namun, berhubung ada seseorang yang telah berbaik hati menghosting berbagai format font Museo ini, maka Anda tidak perlu mencari-cari tempat hosting lagi untuk menaruh format font Museo yang dibutuhkan unt

Tutorial Blogger kali ini ialah cara memperbaiki adanya error pada struktur template (microdata) pada webmaster tools , search console. Postmeta yang tentu membingungkan pengguna platform Blogger ialah penampakan adanya missing author dan missing update pada search console. Padahal jika dicek menggunakan Structured Data Testing Tools , tidak ada satupun struktur microdata (schema) yang error/missing . Ternyata hal ini akibat dari tidak lengkapnya penerapan postdata pada bagian hatom diseluruh page blog. Mulai dari homepage , post page , dan static page . Harusnya penerapan postdata atau microdata hatom pada setiap page adalah seperti berikut ini: Atau jika ingin terapkan versi lengkapnya maka hasilnya akan seperti ini: Kecuali static page , karena pada static page tidak ada widget Tag atau label. Namun, untuk tutorial kali ini, yang difokuskan adalah perbaikan struktur hatom pada bagian missing author dan updated saja, karena kasus tersebut lebih sering dikeluhkan

Tutorial blogger kali ini tentang cara mengubah script/kode iframe menjadi SEO. Artinya, tidak akan terdeteksi oleh chkme.com (SEO Checker) menjadi kode yang merusak peringkat SEO blog/website. Penggunaan kode iframe memang tidak dianjurkan untuk blog yang masih menggunakan HTML5 atau HTML non-AMP. Karena dampaknya akan sangat buruk bagi SEO. Biasanya kode iframe ini diperoleh dari embed video Youtube atau script iframe fanpage Facebook, dan script video Vimeo, kode chatbox, script iklan dan lainnya. Lalu, apa itu iframe? Iframe juga diartikan sebagai bingkai, yang menampilkan webpage lain pada halaman tertentu. Dengan menggunakan iframe, berarti akan membuat browser seperti akan memuat dua halaman sekaligus, yaitu halaman yang diletakkan iframe, dan link yang ada pada kode iframe tersebut. Hal inilah yang mengakibatkan penggunaan iframe sangat tidak direkomendasikan. Karena sangat buruk pada SEO. Dalam kalimat lain, masing-masing halaman blog tidak menjadi SEO friendly, menjadi

Tips sederhana ini masih berkaitan dengan ‘alat tempur’ yang biasa digunakan oleh desain template/theme, yaitu cara cepat mengetahui jenis font atau huruf yang terpasang pada blog atau website orang lain. Bagi Anda yang suka dengan style font di blog/website seseorang namun Anda tidak mengetahui nama font di website itu apa, inilah cara mudah mengetahuinya. Jadi, dengan cara berikut ini, Anda akan diberitahu mengenai style font digunakan oleh blog tersebut, mulai dari size-font, lihe-height, serta color font. Anda tidak perlu buka source lagi dengan menggunakan trik CTRL+U pada website/blog tersebut. Penasaran bagaimana caranya? Simak berikut ini. Cara cepat mengetahui jenis font/huruf yang terpasang di website/blog Syaratnya ialah, silahkan gunakan browser Google Chrome, lalu install ekstensi bernama WhatFont . Setelah ekstensi WhatFont berhasil diinstal, silahkan buka website/blog yang ingin Anda ketahui nama fontnya. Lalu aktifkan ekstensi halaman website tersebut, dengan

Satu pertanyaan yang paling sering saya terima dari pengguna template Themeindie.com ialah tulisan link (contoh: Bungfrangki.com) pada postingan atau artikel blog, tiba-tiba menjadi link/URL yang bisa diklik, padahal sebelumnya mereka tidak merasa membuat link ditulisan itu. Bahkan bukan hanya pada postingan saja, diluar postingan juga terdapat tulisan url blog/website, menjadi link yang hidup. Adapun penampakan tersebut adalah gara-gara komentar Disqus. Dalam hal ini, komentar Disqus-lah yang jadi biang kerok kegaduhan terkait tulisan bukan link menjadi link di tampilan blog atau postingan Anda. Bagaimana cara mengatasinya? Mengatasi tulisan biasa yang jadi link akibat ulah Disqus Untungnya dalam hal ini disqus memberi sebuah kemudahan yang hakiki untuk mematikan fungsinya untuk  menterjemahkan tulisan link menjadi link hidup. Silahkan masuk ke akun disqus Anda, klik avatar Anda di sudut kanan atas, lalu pilih Admin . Pilih situs/website yang ingin Anda perbaiki pada men

The Open Graph meta tags are the social media meta tags for Facebook, Google Plus, and Twitter. Artinya, meta tag open graph ini gunanya untuk mengatur tampilan postingan saat di share ke media social, seperti Facebook, Google+ dan Twitter. Kalau tidak dipasang open graphnya, maka tampilan postingan saat di share ke media social tersebut akan terlihat berantakan. Seperti gambar letaknya jadi disamping, kadang gambar tidak muncul, dan lain sebagainya. Berikut cara memasang opengraph di Blogger agar gambar postingan selalu muncul. Silahkan masuk ke dashboard blog, klik Theme > Edit HTML Letakkan kode berikut di atas kode <b:template-skin> atau di atas kode &lt;style type=&quot;text/css&quot;&gt; <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:if cond='data:blog.url&#

Tutorial Blogger kali ini tentang cara memperbaiki lightbox image atau tampilan gambar yang tidak tampil sempurna pada halaman postingan blog saat diklik. Lightbox image ini perlu diperhatikan bagi blog yang masih menggunakan URL pada setiap gambar di postingannya. Untuk memperbaiki lightbox image, tidak membutuhkan JavaScript ataupun jQuery. Cukup dengan menggunakan CSS saja. Terutama pada custom template Blogger yang menonaktifkan fungsi Bundle CSS bawaan Blogger, maka CSS berikut ini sangat dianjurkan untuk dipasang pada HTML template. Memasang lightbox image pada Blogger Silahkan masuk ke dashboard blog, pilih menu Theme > Edit HTML. Letakkan kode berikut di atas kode </style> /* lightbox image, etc */ .CSS_LIGHTBOX {z-index:99999999!important;} .CSS_LIGHTBOX_BG_MASK_TRANSPARENT {opacity:.95!important;} .CSS_LIGHTBOX_SCALED_IMAGE_IMG {width:auto!important;max-width:100%;box-shadow:0 0 10px rgba(0,0,0,0.1);} .CSS_LIGHTBOX_BTN_CLOSE {background: url('https:

Membuat Breadcrumbs dengan Microdata Schema.org - Sedari dulu saya memang tidak begitu nyaman dengan struktur breadcrumbs yang berbeda dengan struktur yang lain. Seperti menggunakan itemtype='http://data-vocabulary.org/Breadcrumb' atau xmlns:v='http://rdf.data-vocabulary.org/#' . Bukan karena tidak bermutu atau tidak ada bedanya (alias sama saja, karena masih satu aliansi dengan Schema.org). Hanya saja saya begitu kasian dengannya, dia bagaikan kaum marginal yang wujud di tengah microdata Shema.org pada struktur HTML template. Maka berdasarkan arahan dari Developers Google Search saya memberanikan diri untuk mengutak-atik lagi struktur microdata Breadcrumb tersebut, menjadi valid Schema.org di alat pengujian struktur data. Kalau untuk platform Blogger, kemungkinan cara pemasangannya seperti berikut ini. Silahkan ganti atau sesuaikan html Breadcrumb pada template Anda seperti ini:     <b:includable id='breadcrumb' var='posts'> <b:if co

Sebuah custom search engine yang mampu membantu pengindeksian artikel di blog atau website Anda, yaitu dengan menjadikan hasil pencarian di widget searh box (form search) yang terpasang di blog/website, muncul sebagai hasil pencarian di search engine Google . Singkatnya, input keyword di search form blog kita, output dan action-nya di halaman pencarian Google. Menarik bukan? Kalau dirasa menarik, berarti Anda sudah mengerti what i mean . Saya jelaskan sekali lagi. Jadi begini, saat Anda menggunakan kolom pencarian di blog/website Anda dengan mengetikan beberapa kata untuk mencari artikel tertentu, maka hasil pencarian itu akan muncul di halaman pencarian Google, bukan di blog Anda. Tetapi link yang muncul di hasil pencarian Google itu, semuanya mengarah ke blog/website Anda sendiri. DEMO? Silahkan gunakan kolom search di blog ini, dengan mengetikkan kata kunci Tips Blogger , kemudian enter atau klik search, lalu perhatikan apa yang terjadi selanjutnya. Maka hasil pencarian pad

Tutorial kali ini tentang cara terbaru memasang rich snippet yang memunculkan rating bintang (review) di mesin pencarian Google menggunakan struktur Schema.org . Tutorial seperti ini memang telah dibahas bertahun-tahun lalu, tetapi tutorial-tutorial tersebut lebih banyak menggunakan item type dari https://data-vocabulary.org , seperti: itemtype="https://data-vocabulary.org/Review-aggregate" . Apa itu Rich Snippet? Rich Snippet adalah bagian struktur data yang ingin ditampilkan pada search engine. Diantaranya ialah judul artikel/blog, URL blog/artikel, deskripsi, author, lokasi, rating bintang atau ulasan, produk dan lain-lain. Tampilan Rich Snippet dapat dikonfigurasi sedemikian rupa. Beberapa pakar SEO menganjurkan untuk menyajikan Rich Snipet dengan data yang komplit. Dilengkapi ulasan rating bintang misalnya, sehingga mampu meningkatkan CTR, menggungah experience pengunjung dan lain sebagainya. Contoh optimasi Rich Snippet: Kotak merah: rating bintang atau ulasa

Sebetulnya ada banyak object properties open graph meta tag yang dapat digunakan di dalam blog atau website. Anda bisa cek langsung disini: https://developers.facebook.com/docs/sharing/opengraph/object-properties atau lebih jelasnya untuk langkah-langkah penerapan Anda bisa lihat disini: http://ogp.me/ Tetapi dianjurkan untuk tidak memakai semua elemen open graph tersebut untuk menjadi meta tag di blog. Setiap blog punya tujuan masing-masing, jika blog ditujukan untuk posting artikel-artikel atau berita, maka penerapan objek open graph pun seringkali akan menggunakan object properties open graph yang standar. Berupa: og:description , og:title , og:url , og:type , og:image dan lain sebagainya. Namun, tahukan Anda bahwa jika di template Anda menggunakan data blog all head content seperti berikut ini: <b:include data='blog' name='all-head-content'/> Maka akan ada beberapa objek open graph penting yang tidak perlu Anda pasang lagi, karena sudah disematkan ol

Setelah sebelumnya saya membuat tutorial tentang Cara Membuat Property fb:app_id dan fb:admins untuk Meta Tag , maka pada tips aplikasi kali ini akan dilanjutkan dengan dua property open graph Facebook lagi yang sebebutlnya tidak begitu penting. Artinya, meskipun property fb:profile_id dan fb:pages  ini tidak dipasang, tidak akan menyebabkan error pada tools Debugger Objek Graf . Penampakan meta tag keduanya adalah seperti berikut ini: <meta content='XXXXX' property='fb:profile_id'/> <meta content='XXXXX' property='fb:pages'/>  Berikut cara mengetahui ID masing-masing meta tag tersebut. Property Facebook Pages ID (b:pages) Untuk mengetahui ID untuk meta tag ini adalah sebagai berikut: Login ke Facebook. Buka halaman fanpage untuk blog Anda. Perhatikan menu list di samping kiri, klik Tentang. Scroll ke bawah, temukan ID halaman, seperti pada gambar berikut. Sehingga hasilnya menjadi seperti ini: <meta content='253664

Memasang atau mengetahui Admin ID dan FB App ID untuk poperti meta tag blog itu sebetulnya cukup penting. Sebab property ini akan menghindari terjadinya error pada tools debug object Facebook, pada setiap artikel di blog/website. Kurang lebih model property meta tag tersebut seperti ini: <meta content='XXXXX' property='fb:app_id'/> <meta content='XXXXX' property='fb:admins'/> Cara mendapatkan ID fb:app_id dan fb:admins itu berbeda caranya. Untuk tutorial kali ini, saya akan awali dengan cara mengetahui Facebook App ID (fb:app_id), kemudian akan dilanjutkan dengan Facebook Admin ID (fb:admins). Cara mendapatkan Facebook App ID (fb:app_id) Sebelum melakukan langkah-langkah ini, pastikan Anda sudah login ke akun Facebook. Jika sudah, silahkan lanjutkan: Buka halaman Developer Facebook . Pilih “Tambahkan Sebuah Aplikasi Baru”. Isikan Nama Tampilan dan Email lalu klik “Buat ID Aplikasi”. Masukkan teks acak-acak itu ke dalam kotak,