Cara Membuat Kotak Space Banner Iklan Di Blog (Updated)

Menampilkan space iklan di blog memberi peluang & informasi pada advertiser bahwa blog tersebut menawarkan space iklan yg dapat disewa. Apalagi jika blog tersebut memiliki kredibilitas, rank, serta traffic tinggi, maka advertiser/pemasang iklan pasti akan berbondong-bondong untuk memasang iklan/banner iklan di blog tersebut. Namun tidak ada salahnya juga bagi blog baru memberikan space/ruang tersendiri sebagai tempat beriklan advertiser. Hitung-hitung sebagai persiapan dan kali saja ada advertiser yg tertarik. Selain itu penggunaan space iklan dapat menjadi daya tarik tersendiri apabila diletakkan dengan benar.

Nah, guna memasang space iklan, kita butuh menyusun template tersendiri agar iklan tersusun rapi dan enak dilihat. Jadi tidak asal pasang gambar dan link karena hasilnya bisa berantakan. Kali ini saya akan share kode template iklan yg saya buat serta gunakan untuk blog buka-rahasia.blogspot.com.

Fitur dari template iklan 125x125 buka-rahasia.blogspot.com:

• Fleksibel, susunan yg tampil sesuai dengan lebar widget.
• Efek Border radius.
• Efek Transparan/Opacity ketika gambar di-hover.
• Gampang di edit guna memasang gambar iklan & link.
• Update (28-01-2012, 19.03 WIB): Dengan menghilangkan width serta height, template space iklan ini sekarang bisa digunakan untuk berbagai jenis ukuran banner iklan, 125x125, 300x250, 468x60, dst. Gunakan gambar sesuai dengan ukuran yg diinginkan maka widget space iklan akan muncul sesuai dengan ukuran tersebut.

Cara Memasang Kotak Space Banner Iklan di Widget Blog:

1. Masuk ke dashboard > template/design < Edit HTML

2. Copy kode CSS berikut & letakkan di ATAS ]]></b:skin>

#bukarahasiaads {margin:0px;padding:0px;text-align:center}
#bukarahasiaads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#bukarahasiaads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Ganti nilai pada margin:1px 1px untuk mengatur jarak gambar iklan. Nilai pertama jarak atas bawah, nilai kedua jarak kiri kanan.

3. Save Template.

4. Buka layout/design > Add a widget > Pilih HTML/Javascript.

5. Copy kode HTML berikut (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan):

<div id="bukarahasiaads">
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
</div>

Jika ingin menambahkan/mengurangi kotak space iklan tambahkan/hapus bagian:
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a> di atas </div>.

6. Save. Drag/geser gadget ke posisi yg diinginkan, untuk ukuran yg lebar & besar, letakkan widget di bawah header atau di atas posting. Save lagi.

Anda dapat menggunakan gambar berikut sebagai gambar space iklan (ukuran 125x125), untuk ukuran lain atau ingin yg sesuai selera & desain blog, bisa dicari di Google dengan keywords "ads space banner image (ukuran banner)". Upload gambar, ganti URL GAMBAR dengan url gambar yg sudah di-upload.

Note: Host/upload gambar sendiri. Jangan hanya gunakan url gambar di atas karena sewaktu-waktu gambar dapat hilang/dihapus. Klik kanan di atas gambar, save as ke komputer, lalu upload.

Jika seorang advertiser tertarik, maka dia tinggal mengklik url yg ada pada gambar banner (biasanya link diarahkan  ke halaman pasang iklan/advertise atau ke email/contact form).
Have a nice Blogging.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Memasang Fitur Blogger Star Rating di Posting Blog

Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:

1. Masuk ke dashboard Blogger.

2. Buka halaman layout (page elements).

3. Klik "edit" pada bagian badan posting (blog posts).

4. Klik/centang "Show Star Ratings"

5. Setelah itu save.

Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Cara Memasang Star Ratings Widget Pada Custom Blogger Templates

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.

Ada dua langkah penting untuk memasang star rating blogger:

• Memasang Kode HTML star ratings:

1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.

2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".

3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>

Note:

-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.

- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.

• Memasang Script star ratings:

1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.

2. Save template.

Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.

Have a nice blogging * Have a nice learning!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

List Batasan Blogger & Akun Blogger Yang Wajib Diketahui

Blogger memiliki batasan penggunaan blog serta akun Blogger sama seperti layanan-layanan blog maupun internet lainnya. Nah, apa perlunya mengetahui batasan-batasan tersebut? Sebagai pengguna layanan Blogger, tentunya dengan mengetahuinya, seorang blogger dapat melakukan management penggunaan fitur layanan dengan baik.

Sebagai salah satu pengguna Blogger, saya juga sangat penasaran dengan hal-hal yg dibatasi penggunaannya oleh Blogger. Salah satu sumber utama yg saya gunakan adalah FAQ resmi tentang batasan akun Blogger. Secara garis besar, saya menyimpulkan bahwa batasan (limitation) tersebut sebenarnya tidak benar-benar membatasi karena akan sangat jarang sebuah akun Blogger mencapai limit tersebut. Berbeda dengan layanan blog wordpress gratis, mengganti template atau memasang iklan saja adalah hal yg haram. Sumber FAQ tersebut sebenarnya kurang begitu terperinci, sehingga kemudian akan saya buat per bagian sehingga menjadi lebih jelas, ditambah dengan beberapa update batasan lainnya yg saya temukan ketika menggunakan Blogger.

Berikut daftar lengkap batasan penggunaan Blogger & Akun Blogger:

1. Batasan Akun Blogger

• Jumlah Blog: 100 buah
• Panjang info "about me" (pada halaman profil akun blogger): 1200 karakter
• Panjang Info Hoby & Kesukaan: 2000 karakter
• Maksimal Jumlah Blog yg difollow per akun: 300 Blog
• Ukuran gambar berdasarkan dimensi: 
• Lebar gambar yg diupload melalui post editor: maks.1600px. Gambar yg lebih luas tetap dapat diupload namun kemudian secara otomatis di-resize (scaled down) menjadi 1600px
• Lebar gambar yg diupload melalui Template Designer (background): Tidak ada batasan
• Ukuran Gambar berdasarkan berat file:
• Gambar yg diupload lewat post editor: 8 MB
• Gambar yg diupload lewat Template Designer (background): 300 Kb
• Gambar yg diupload melalui mobile device: 250 Kb
• Kapasitas hosting gambar (di Blogger melalui partnership dengan Picasa Web Album): 1024 Mb per akun.
• Bandwidth hosting gambar: Tidak ada batasan

2. Batasan Blog

• Panjang judul/nama blog: 90 karakter
• Panjang nama subdomain (subdomain.blogspot.com): 37 karakter
• Panjang deskripsi blog (deskripsi pada gadget header): 500 karakter
• Jumlah anggota per blog: 100 orang
• Jumlah pembaca blog (untuk blog pribadi): 100 orang
• Jumlah posting: Tidak ada batasan. Tapi saat ini akses edit posting pada daftar posting hanya mencapai maks. 5000 posting. Posting sebelumnya (di bawah 5000 posting) belum dapat diakses. Blogger sedang memperbaikinya.
• Jumlah posting yg ditampilkan pada halaman-halaman list posting (homepage, label, archive) ditentukan oleh pilihan pada Settings > Formatting > Show at most. Apabila dipilih hari (day), maka batas maksimal tampilan pada satu halaman adalah 500 posting. Blogger sedang merencanakan fitur batas maksimal posting yg ditampilkan bukan berdasarkan jumlah posting, melainkan total berat halaman hingga 1 MB.
• Jumlah halaman statis (static page): Awal Desember 2011 lalu diupgrade hingga 20 buah (sebelumnya 10, mantap!!)
• Jumlah label: 5000 buah unique label per blog

3. Batasan Posting

• Panjang tiap posting: Tidak ada batasan
• Berat file tiap posting: Tidak ada batasan, namun seperti yg sudah disebutkan di atas, file posting lebih dari 1 MB mungkin dapat menyebabkan bagian di atas 1 MB ditampilkan pada halaman berikutnya (multiple pages for one post).
• Jumlah label tiap posting: 20 label unik.
• Jumlah komentar per posting: Tidak ada batasan
• Panjang nama file posting (nama file ada di bagian belakang url posting): 39 karakter, contoh nama file:  http://bukan-rahasiia.blogspot.com/2011/10/hindari-9-hal-dalam-berkomentar-di-blog.html
  Nama file digenerasikan dari judul posting ketika pertama kali dibuat. (Ini salah satu saja kelemahan blog Blogger, sehingga judul posting panjang dapat menyebabkan URL posting terpotong karena telah mencapai batas. So, perhatikan betul ketika membuat judul posting agar SEO Friendly, pelajari: Maksimalkan Keyword di URL Posting Blogger/Blogspot).

4. Batasan lain

• Panjang label: 200 karakter
• Panjang komentar: 4,096 karakter per komentar.

Yup, batasan (limitation) di atas memang akan sangat jarang ditemui karena Blogger merupakan salah satu platform blog yg memiliki banyak keleluasaan layanan. Namun demikian, dengan mengetahui batasan penggunaan Blogger & akun Blogger, diharapkan kita dapat lebih memahami beberapa karakter Blogger yg mungkin belum pernah kita jumpai sebelumnya & dapat memaksimalkan penggunaan layanan Blogger ke depan.

Happy blogging, as always...

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Menggunakan/Memasang Custom Font di Blogger

Custom Fonts adalah, singkatnya, font-font khusus yg ditambahkan secara individual & bukan merupakan font-font default yg telah dikenal browser (database-nya tidak dimiliki browser). Custom fonts saat ini telah berjumlah ratusan, memiliki variasi yg bermacam-macam, unik, memiliki tema yg lebih khas daripada font biasa, serta dapat meningkatkan kualitas tampilan blog/web.

Tulisan di atas memberikan kesan yg berbeda; lebih stylish dibanding font default di sekelilingnya. Pada posting Cara Mengubah/Mengganti jenis font di Blogger, Buka Rahasia Blogspot telah share cara mengganti font dengan menggunakan standar. Sebagai langkah advance, Buka Rahasia Blogspot akan share cara menggunakan & mengganti font Blog dengan Custom Fonts bagi sobat blogger yg tertarik untuk membuat font di blog tampak lebih stylish. Di platform Blogger, ada dua cara yg dapat digunakan untuk menggunakan/menampilkan Custom Fonts:

1. Menggunakan fitur Blogger Web Fonts melalui Template Designer.

2. Memasukkan snippets (kode) secara langsung melalui Edit HTML (manual template editing).

Cara Menggunakan Blogger Custom/Web Fonts Melalui Template Designer

Pada akhir Desember 2010, Blogger memperkenalkan fitur Web Fonts yg dapat diakses melalui Template Designer. Saat ini setidaknya telah ada 77 Web Fonts (dan terus bertambah) yg dapat digunakan untuk kostumisasi font blog Blogger guna memperindah desain blog.

Cara mengakses fitur Web Fonts:

1. Masuk Dashboard Blogger > Template > Customize > Advanced

2. Pada halaman Template Designer, setelah memilih "Advance", sobat dapat memilih bagian mana yg hendak dikostumisasi, misalnya page, header, sidebar header, post title, dan seterusnya. Kemudian pilih Web Fonts yg hendak digunakan.

3. Setelah semua kostumisasi font selesai, klik "Apply to This Blog".

Dengan cara ini, sobat dapat memilih Web Fonts yg telah disediakan oleh Blogger serta mempreviewnya sekaligus (WYSIWYG).
Note: Pengaturan Custom web fonts melalui "template designer" belum tentu dapat diaplikasikan pada custom blogger templates (bukan template bawaan Blogger). Jadi harus menggunakan cara kedua di bawah.

Cara Memasang Custom Fonts Dengan Mengedit Template Blog

Konsep sebenarnya dari memasang custom fonts adalah memasukkan font snippets pada template & merujukkannya pada font family dalam atribut pengaturan CSS elemen blog. Dibanding Blogger Web Fonts pada Template Designer yg jumlahnya masih terbatas, variasi Web Fonts gratis yg tersedia jauh lebih banyak. Kali ini, kita akan menggunakan Web Fonts milik Google (Google Font API), yg sampai saat ini telah memiliki koleksi 397 Font Family (dan terus bertambah), karena memiliki akses yg cepat & stabil.

Tahap 1: Instalasi Font Ke Blog

1. Masuk ke Google Web Fonts

2. Klik "start choosing fonts", cari font yg diinginkan, kemudian klik "quick use".

4. Pada halaman berikutnya, lakukan kostumisasi (jika font memiliki varian), lalu scroll ke bawah hingga kolom kode. Copy code tersebut.

Contoh kode dengan tag link untuk jenis template XML seperti Blogger:

<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"/>

Contoh kode dengan tag link untuk jenis plain HTML pada template web biasa:

<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"></link>

5. Buka Edit Template/Edit HTML.

6. Letakkan kode tersebut dalam tag <head>, tepatnya di antara <head> & </head>, atau agar lebih cepat diload, letakkan di bawah/dekat dengan <head>. Boleh juga di atas </head>.

Tahap 2: Aplikasi Custom Font Ke Elemen Blog Melalui CSS

1.Guna mengubah tampilan font pada elemen tertentu (judul posting, nama blog, isi posting, judul sidebar, dsb), yg perlu dicari adalah class atau id CSS yg mengaturnya. Sebagai contoh jika ingin mengganti font link judul posting, maka cari class/id yg mengatur judul posting, misalnya .post h3 a. 

2. Cari atribut yg mengatur font. Atribut pengatur font pada CSS biasanya ada dua yg digunakan pada template, font-family atau font saja. Jika sudah ada, cukup tambahkan nama font, setelah font-family atau font. Contoh pengaturan custom font pada font isi posting:

.post-body {font-family:'Custom Font', Times New Roman, Trebuchet, Serif; margin:......dst}

Ada dua poin penting yg mesti diperhatikan:

a. Font default diletakkan di awal serta harus dibubuhkan tanda kutip (boleh single ['] atau pun double ["]).

b. Gunakan font-font pengganti di belakang font default untuk berjaga-jaga apabila Browser gagal merender/memuat font tersebut.

Note: Jika masih kurang jelas, silahkan mempelajari CSS font pada posting Cara Mengubah/Mengganti jenis font di Blogger.

3. Setelah selesai melakukan editing pada CSS, preview terlebih dahulu. Apabila sudah beres sesuai yg diinginkan, Save Template.

Important!:

1. Jangan gunakan/pasang snippet font yg tidak dibutuhkan & jangan menggunakan custom fonts yg terlalu banyak jenisnya. Penggunaan snippet custom font (link tag) menyebabkan terjadinya proses rendering oleh browser sehingga mempengaruhi loading halaman blog (blog lebih berat, loading lebih lama).

2. Apabila Custom Font yg dibutuhkan hanya pada bagian kecil saja, misalnya text logo pada header blog, lebih baik gunakan gambar text. Buat dengan online text logo creator/generator.

Yup, demikian share saya mengenai cara memasang custom fonts di Blogger & sedikit review mengenai penggunaan web fonts pada blog. Have a Nice Blogging * Happy Designing!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Hindari Duplicate Content Karena Indeks Arsip Blog

Blogger sangat rawan dengan berbagai jenis duplicate (duplikasi) yg dapat dipantau melalui Google webmaster tools, yaitu duplicate title, duplicate description, serta duplicate content. Kasus duplikasi ini menyebabkan kerancuan indeks sehingga Google dapat melakukan ban karena suatu halaman dianggap memiliki isi, judul, atau deskripsi sama persis dengan halaman lain. Terlebih lagi apabila duplikasi tersebut dialami oleh lebih dari dua halaman. Penyebab lain duplicate content tentunya adalah copy paste dan publikasi artikel yg sama. Duplikasi berakibat buruk pada SEO blog, indeks suatu halaman akan menurun drastis. Apabila terlalu banyak duplikasi konten, maka ban akan dilakukan pada seluruh halaman. Google pun pernah menjelaskan tentang duplikasi konten yg mempengaruhi pagerank & SERP. Di antara ketiga jenis duplikasi tersebut, saya pernah share cara mengatasi duplicate meta description, yg notabene disebabkan oleh template blogger yg berjenis XML, yaitu deskripsi masing-masing halaman sama karena pengaturan meta deskripsi-nya juga sama. Kali ini, kita akan berfokus pada duplicate content karena halaman arsip blog.

Halaman arsip blogger (yg biasanya dibagi berdasarkan bulan, minggu, serta hari) dapat menyebabkan kasus duplicate content karena arsip tidak memiliki konten sendiri. Isinya merupakan bagian-bagian dari posting yg sebenarnya adalah milik halaman-halaman posting itu sendiri. Sehingga, dalam indeks Google, halaman arsip akan memiliki konten yg sama dengan beberapa posting lain. Dalam deskripsi di hasil indeks, arsip  juga demikian. Terkadang, halaman arsip memiliki deskripsi yg sama dengan halaman homepage. Seperti contoh berikut:

Jika dicari di Google dengan perintah / keyword site:namadomain, Google akan memprioritaskan homepage & arsip pada halaman awalnya, setelah itu baru disusul oleh halaman-halaman posting. Tentunya ini dapat berakibat buruk juga pada prioritas halaman posting yg seharusnya memiliki peringkat lebih tinggi dibanding halaman arsip. 

Berangkat dari itu, berarti setidaknya ada dua efek dari indeks halaman arsip Blogger:

1. Duplicate konten (konten yg sama dari dua atau lebih halaman berbeda)

2. Prioritas indeks halaman arsip lebih tinggi dari halaman posting.

Untuk menghindari hal tersebut, hal yg diperlukan adalah menghalangi Google search engine mengindeks halaman arsip. 

Cara Menghindari Indeks Search Engine Pada Arsip Blogger

Sebagai cara agar robot crawler tidak mengikuti halaman arsip, cukup digunakan conditional tag, serta menggunakan noindex & noarchive pada meta tag-nya robot. Crawler akan melewatkan setiap halaman arsip.

1. Buka halaman Edit HTML
2. Copy kode berikut & paste / letakkan di bawah  <head> (ctrl+F) atau di atas / di bawah meta tag lain.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>

3. Save template.

Dengan menggunakan kode tersebut, dalam beberapa waktu, halaman archive akan diabaikan oleh crawler search engine. Atau jika tidak sabar, dapat langsung mengajukan penghapusan indeks melalui removal tool di Google Webmaster Tools (site configuration > crawler access > remove url). Duplicate content kemudian dapat diminimalisir. Namun jika sobat tetap ingin halaman arsip menjadi prioritas indeks, tentunya tidak perlu menggunakan cara itu. Pada akhirnya, pilih saja mana yg sobat inginkan dalam mengoptimasikan blog di search engine.

Have a nice Blogging, folks!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com