Cara Menyembunyikan Iklan di Homepage Blog

Iklan pada dasarnya merupakan penghasilan utama bagi para blogger. Seperti pada Dewa Inside Blog ini yang menggunakan google adsense. Namun kadang iklan sangat tidak disukai oleh pengunjung blog dikarenakan tata letak dan kerapian dari iklan tersebut yang mengganggu pandangan dari pengunjung blog. Sehingga ada beberapa orang yang menggunakan AdBlock pada browser mereka. Baca --> Cara Terbaik Menyikapi Adblock.

Saya sudah berusaha merapikan posisi iklan pada Dewa Inside Blog ini  dengan Memasang Iklan di Atas Postingan dan di Bawah Postingan pada template blog serta di samping kanan postingan dengan menambahkan gadget JavaScript/HTML yang diletakkan pada posisi samping. Sehingga tidak terlalu mengganggu pemandangan bagi pengunjung blog. Namun untuk iklan di atas dan di bawah postingan pada blog ini tidak akan tampil pada homepage Dewa Inside Blog. Fungsi-nya selain merapikan tampilan dari homepage (beranda) blog ini tetapi juga untuk mengurangi berat loading blog ini pada homepage-nya. Sobat dapat gunakan fitur dari google webmaster tools untuk memeriksa kecepatan dan loading blog sobat di --> Google PageSpeed Insight.

Cara menyembunyikan iklan di beranda

Untuk menyembunyikan iklan pada body post yang muncul di homepage blogger sobat caranya sangat mudah. Kode ini juga berlaku untuk konten lainnya yang dapat disembunyikan di homepage blogger. Sobat hanya cukup meletakkan kode iklan sobat diantara kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Kode Iklan Sobat
</b:if>

Contoh gambar:

Artikel Terkait :

~ Kode HTML Tag Kondisi Blogger
~ Memasang Iklan ditengah Postingan Blog
~ Memasang Iklan dibawah dan diatas Judul Blog
~ Menampilkan Gadget Blogger di Tampilan Mobile

Simpan Tema
Silahkan Mencoba. :)

Cara Membuat Auto Zoom Gambar Posting di Blog

Teman-teman blogger tentunya kadang mempunyai keinginan untuk membuat gambar pada postingan blog menjadi auto zoom, sehingga pengunjung blog tidak usah repot-repot untuk meng-klik gambar yang kecil agar terlihat lebih jelas. Ini biasa terjadi pada sobat blogger yang sengaja mengatur gambar-nya menjadi small atau medium sewaktu sedang mengedit postingan-nya.

Untuk itu bagi sobat blogger yang sengaja melakukan hal tersebut, berikut cara membuat seluruh gambar pada postingan menjadi auto zoom dengan menambahkan kode CSS pada template blogger sobat.

Cara Memasang CSS:
1. Pergi ke Template --> Costumise

2. Klik Advance --> Add CSS (Scroll paling bawah)

3. Lalu Copy dan Paste kode CSS berikut di dalamnya.

.post img {

height: 100%;

width: 100%;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img:hover {

width: 150%;
height: 150%;

}

Catatan: Anda dapat merubah ukuran zoom gambar dengan mengganti tulisan berwarna Merah.

4. Apply to Blog (Pojok kanan atas)

Selamat Mencoba. :)

Technorati

62ff3204db2708dda1e40800dd1d31df65879e4a1ed18574763bc84c1f34811235398b1226cbf229

Cara Memodifikasi Email Subscribe Feedburner

Email Subcriber dari Feedburner merupakan fitur yang sangat berguna untuk menghubungkan Anda dengan pembaca blog Anda. Tapi sayangnya design dari email subcribe feedburner ini terlalu simple dan sederhana. Sehingga banyak orang yang ingin merubah design-nya agar terlihat lebih menarik. Pada posting kali ini saya akan menyajikan 4 cara untuk mengubah design dari email subcribe default feedburner ke design sesuai yang Anda inginkan agar terlihat lebih menarik dengan merubah beberapa script di dalamnya.

Secara default kode email subscribe feedburner seperti ini:

<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”><p>Enter your email address:</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”ID Feedburner Anda” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p>Delivered by <a href=”http://feedburner.google.com” target=”_blank”>FeedBurner</a></p></form>

Jika Anda belum dan ingin memasang email subscribe feedburner silahkan klik --> Cara Memasang Email Subscribe di Blogger

Cara Memodifikasi:
1. Mengganti Warna Background

Untuk mengganti warna background dapat Anda tambahkan url gambar yang Anda upload dengan kode dibawah ini setelah  text-align:center; :

background: url(http://www.example.com/image.jpg)

Jadi akan terlihat seperti ini: <form style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://www.contoh.com/gambar.jpg);"


2. Mengubah Ukuran kotak email

Merubah ukuran lebar dapat Anda rubah di width:140px, sedangkan untuk merubah tinggi cukup Anda tambahkan height:20px setelah kode width:140px. Ukuran angka pixelnya dapat Anda sesuaikan dengan kebutuhan Anda.

Jadi kode akan terlihat seperti ini: <input type="text" style="width:140px;height:20px;" name="email"/>
  

3. Mengganti Background dengan Gambar

Sama seperti menambahkan warna background, Anda masukkan alamat gambar yang Anda upload dengan kode dibawah ini setelah text-align:center; :

background: url(http://www.contoh.com/gambar.jpg)

Jadi akan terlihat seperti ini: <form style="border:1px solid #ccc;padding:3px;text-align:center;background: url(http://www.contoh.com/gambar.jpg);"
 

4. Menambahkan Text di dalam kotak

Anda dapat menambahkan tulisan ke dalam kotak email subscribe dengan mengganti kode berikut:

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>

dengan kode:

<p><input type="text" style="width:140px" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/></p>

 
*Setelah mencoba ke-4 cara, berikut hasil email subscribe Dewa Inside Blog:

Selamat Mencoba. :)

Cara Memasang Email Subscribe di Blogger

Email Subscribe?

Memasang email subscribe adalah salah satu cara untuk menjaga pengunjung blog kita untuk tetap mendekat, sehingga pengunjung bisa mendapatkan info - info terbaru mengenai konten dari blog kita. Email subscribe ini merupakan layanan dengan menggunakan notifikasi email yang di-submit sehingga pengunjung yang men-submit emailnya akan mendapatkan update info terbaru apabila blog itu mem-posting konten atau artikel baru.

Untuk memasang widget ini sobat harus mendaftarkan alamat blog sobat dulu di feedburner. Setelah menambahkan alamat blog sobat baru sobat dapat menggunakan widget ini.

1. Kunjungi: --> http://www.feedburner.com --> Login dengan akun google sobat. Masukkan alamat blog sobat --> Next

2. Pilih salah satu feed (bebas) --> Next

3. Selanjutnya sobat cukup klik "Next" trus sampai pada gambar berikut: Klik Edit Feed Details

*Feed Address: Alamat yang nanti  dipakai untuk membuat email subscribe.
untuk original feed aslinya sama, cuma biasanya dipakai untuk membuat widget artikel terbaru (recent post)

Selanjutnya untuk memasang pada blog, Ada 2 cara untuk menggunakan widget ini:

Cara 1:
1. Layout --> Tambah Gadget --> Follow by Email (Scroll ke bawah)

2. Masukkan Feed Address sobat.

3. Save

Cara 2:
1. Layout --> Tambah Gadget --> HTML/Java Script
Copy dan Paste kode berikut didalamnya:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Dewainside', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="Dewainside" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form> 

*Dewainside ganti dengan Feed Address sobat
*Enter your email address dapat sobat ganti, misal: Masukkan email, dkk.

2. Save

Catatan: Untuk Cara 2 dapat dimodifikasi script-nya sehingga dapat terlihat lebih menarik. Untuk memodifikasi-nya sobat dapat lihat --> Cara Memodifikasi Email Subscribe

Selamat mencoba.
Good luck. :)

Memeriksa Kecepatan Blog dengan PageSpeed Insights

Apa itu PageSpeed Insights?

PageSpeed Insights adalah alat bawaan dari google yang ada pada webmasters tools dimana berguna untuk memeriksa kecepatan blog atau situs dan memberikan saran bagaimana agar loading pada blog lebih cepat di semua perangkat baik itu komputer maupun mobile phone. Apalagi sekarang google memperhatikan kecepatan situs yang dapat mempengaruhi ranking di pencariannya (sedikit). Walapun tetap isi dari konten tersebutlah yang lebih diutamakan. Dimuat pada google webmaster central blog, Anda dapat membacanya di --> using site speed in web search ranking. Memeriksa Kecepatan Blog dengan Google PageSpeed Insights ini sangat bermanfaat. Dimana hasil dari analisis-nya dapat memberitahu kita tentang rekomendasi apa yang harus kita lakukan seperti:

• Optimalkan konten gambar, script ataupun css untuk mempercepat loading page,
• Dimana alamat yang harus di-optimalkan
• Dan menampilkan nilai loading page dari blog kita

Artikel Terkait:

1. Menghilangkan plusone.js di blogger yang memblokir perenderan konten paruh atas

Cara Menggunakan PageSpeed Insights

Untuk menggunakan fitur ini, anda dapat langsung kunjungi link berikut: --> PageSpeed Insights

atau pada Alat Webmaster --> Sumber Daya Lainnya --> PageSpeed Insights

• Masukkan url blog (misal: http://dewainside.blogspot.com/)
• Analisis

Setelah proses analysis selesai, maka PageSpeed Insights akan menampilkan hasil dari load page blog dengan nilai dan saran yang dianjurkan seperti yang terlihat pada gambar di posting ini.

Skala nilai yang diberikan oleh tools ini sampai dengan 100. Kalau kita ibaratkan saja,

A=85-100          B=71-84          C=61-70           D=51-60           E=0-50

Sebagai contoh nyata, berikut screenshot dari uji kecepatan blog ini menggunakan tool tersebut:

Karena setiap kita meng-edit template dengan menambah atau mengurangi widget, javascript, html dan CSS, tentunya akan mempengaruhi nilai kecepatan dari loading blog anda sendiri. Maka ada baiknya apabila anda memeriksa kecepatan blog anda lagi setelah selesai meng-edit template blog anda.

Cara Memindahkan Judul Blog ke Kanan Judul Posting

Secara default ketika kita menggunakan platform blogger untuk membuat blog dan lalu mem-publish-nya, maka ketika kita melihat header judul pada browser kita akan terlihat dengan susunan 

Judul Blog: Judul Postingan.

Contoh: Dewa Inside Blog: Tips, Tricks, Tutorial Blog dan SEO.

Hal tersebut merupakan hal yang wajar mengingat itu merupakan setting default dari template kita yang menggunakan platform blogger.

Ini hanya opini saya saja, mungkin dari pihak team google sengaja melakukan hal itu. Mungkin mereka menganggap domain blogspot.com itu kan gratis dan biasanya digunakan oleh pemula untuk menulis blog. Jadi mereka tidak terlalu tahu mengetahui tentang SEO sehingga akan lebih memudahkan search engine mereka, yakni google dalam proses crawling dan menyeleksi manakah blog yang lebih mahir SEO dan memungkinkan konten dari blog tersebut lebih berkualitas. Mungkin team google menganggap nanti apabila blogger itu mengerti tentang SEO, maka blogger itu sendiri yang akan merubahnya sehingga blog dari blogger itu nantinya akan mencapai taraf kualitas yang lebih dari sebelumnya dan lebih friendly SEO. Sekali lagi pernyataan itu adalah opini saya saja, namun kalau dimasukkan logika cukup kuat kok.

Untuk seorang blogger pemula maka mereka tidak akan sadar. Bahwa judul merupakan kunci utama dalam SEO. Dimana google membaca dari kiri ke kanan dan  apabila posisi untuk tiap postingan adalah Judul Postingan: Judul Blog dan search engine google untuk judul hanya mengambil 50-60 karakter pada proses crawling mereka, kalau Judul Blog di depan pada hasil search engine, tentunya judul dari posting kita yang berada di belakang, yang lebih dari 60 karakter akan tidak dihitung oleh goole. Tentunya rugi, dimana urutan untuk posisi 1, 2 dan 3 teratas pada hasil search google akan diambil oleh blog lain yang memiliki kemiripan kata kunci.

Untuk itu marilah kita merubah posisi untuk tiap postingan menjadi Judul Postingan: Judul Blog agar lebih friendly SEO.
Langkah-Langkah:
1. Pada Dashbord blogger Anda pergi ke Template --> Edit HTML

2. Klik area kotak Edit HTML dan Cari (CTRL+F) kode di bawah ini:

<title><data:blog.pageTitle/></title>

3. Ganti script di atas dengan script berikut ini:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/><title> <data:blog.pageName/> | <data:blog.title/></title> </b:if>

4. Save Template
View salah satu posting Blog Anda apakah sudah tersusun Judul Post: Judul Blog
Contoh Hasil:

Selamat Mencoba.