Blog bungfrangki

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,

Adapun menu dropdown dalam tutorial ini adalah bentuk versi lain dari Viralisme Blogger Template . Bedanya ialah pada tutorial ini menu dropdown dibantu dengan jQuery, kalau yang di template tersebut pure CSS, dengan sticky-menu yang sama-sama bisa diaktifkan atau dinonaktifkan. Menu dropdown ini akan bersifat hover event pada tampilan desktop. Sementara itu akan bersifat on-click event pada mobile/tablet/smartphone. Sebetulnya menu dropdown (atau bahkan menu) ini adalah salah satu widget yang tidak berguna. How many people care about your blog menu? Terkecuali orang itu punya tujuan-tujuan seperti berikut ini: Ingin kopi paste artikel blog Anda pada label tertentu, Ingin milih-milih artikel pada label tertentu untuk di rewrite, Ingin auto post blog Anda pada label tertentu menggunakan software auto-post, dan Cari inspirasi, sebab dia kebingungan menentukan label pada artikel yang dia buat. Tetapi tidak semuanya seperti itu, ada juga yang lebih parah dari itu atau lebih ba

Masih sibuk ngutak-atik template blog? Ini ada beberapa baris css yang bisa dimainkan untuk mempercantik tampilan blog. Yaitu membuat gradient atau gradasi warna pada text dengan CSS . Misalnya gradient warna pada judul header blog (#header h1, #header h2) atau judul postingan (.post h1, .post h2). Kalau mengubah background dengan gradient warna kan sudah biasa, tetapi kalau mengubah text atau judul blog menjadi gradient warna (warna-warni) itu biasa juga. Kalau Anda suka dengan hal tersebut, maka terapkanlah caranya di bawah ini. Niscaya blog/website Anda akan kebanjiran pengunjung, 2 atau 3 tahun lagi. Pertama terlebih dahulu, yang perlu diketahui ialah: Cara membuat text warna-warni (gradient) dengan CSS Letakkan CSS berikut ini dibagan template mana yang ingin Anda buatkan gradient pada textnya. Misalnya pengen bikin gradient di judul postingan, maka tinggal tambahkan css-nya dibagian .post h1 dan .post h2, begitu seterusnya dan selanjutnya. Adapun kodenya adalah sebagai

Berikut cara membuat blog tidak dapat dibuka dengan Opera Mini dan langsung di redirect/dialihkan secara otomatis ke Google Chrome . Cara ini sama seperti dengan r edirect otomatis UC Browser ke Google Chrome . Alsan harus memasang cara ini di blog atau website juga kasusnya sama persis dengan UC Browser, karena menghindari ekstensi/tools AdBlocker (AdBlock plus), yang sudah tertanam pada browser tersebut. JavaScript (Anti Adblock) Auto Redirect Opera Mini ke Google Chrome Cari kode ini di Edit HTML: </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Lalu letakkan kode JavaScript berikut ini di atas kode tadi: <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> <script type='text/javascript'> //<![CDATA[ var findmove2 = navigator.userAgent; var redirect = findmove2.search("Opera Mini"); if(redirect>1) { var queries2 = window.location.assign("googlechrome://navigate?url="+ windo

Tutorial kali ini tentang cara mengalihkan (redirect) secara otomatis URL yang dibuka dengan UCBrowser ke Google Chrome . Cara ini lebih baik dari yang pernah saya bagikan pada artikel sebelumnya, tentang Agar Blog Tidak Bisa dibuka dengan UC Browser . Cara ini semacam anti adblock, namun lebih mantap daripada anti adblock. Pengguna tidak perlu ngapa-ngapain, akan langsung dipindahkan/dialihkan ke browser Google Chrome, jika terdeteksi membuka URL blog/website kita dengan UC Browser. Pensaran bagaimana caranya? Silahkan ikuti caranya berikut ini. Script anti Adblock pada UCBroser, redirect otomatis ke Google Chrome Silahkan masuk ke dashboard blog Anda. Pilih Theme > Edit HTML . Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Lalu letakkan JavaScript berikut ini di atas kode tadi: <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> <script type='text/javascript'> //<![CDATA[ var

Merubah post date atau tanggal postingan menjadi format Time ago tidak hanya dapat dilakukan pada Wordpress saja, tetapi juga dapat diterapkan di platform Blogger/blogspot. Konsep format timeago secara otomatis akan menampilkan waktu postingan secara berkala seiring waktu berjalan. Misalnya B eberapa detik lalu , 1 menit lalu , 7 menit lalu , 8 jam lalu , 9 hari lalu , 10 bulan lalu , atau 2 tahun lalu . For your information, Time Ago is display publish dates as time since posted, you know? Tanggal artikel dengan format timeago ini dapat Anda lihat seperti pada situs www.tribunnews.com dan media pemberitaan ternama lainnya. Format waktu seperti itu juga bisa Anda saksikan pada Facebook dan Twitter. Pada tutorial Blogger kali ini, saya akan coba berbagi cara membuat format date post timeago yang keterangan waktunya menggunakan bahasa Indonesia seperti di Tribunnews itu. Cara membuat format post date menjadi timeago dengan jQuery di Blogger/blogspot Caranya adalah, silahkan