Monday, June 27, 2011

Hadiah Istimewa dari Google: PageRank Update! (Juni 2011)

Sore tadi (27/6/2011) setelah membuat dan mempublish artikel Cara Membuat Menu Pulldown Plus Tombol/Button, saya menyempatkan ngobrol lewat YM dengan seorang teman Blogger dari US. Dalam percakapan itu, dia sempat menyinggung bahwa pada hari ini (di US masih pagi banget , 27/6/2011) Google melakukan update, yaitu Panda Update (yang dilakukan secara diam-diam sebelumnya) dan juga Google PageRank update: June 2011. Dia menyarankan saya untuk melakukan check Pagerank, kali aja ada perubahan Pagerank pada blog ini.

Akhirnya iseng-iseng saya pake tool Pagerank Checker di blog ini. Dan ternyata hasilnya mengejutkan! Tanpa diduga sebelumnya, ternyata PR blog ini naik 2 tingkat dari 0 ke 2. Masih belum percaya, lalu saya mencoba menggunakan 11 PageRank Checker yang lain. Dan, ternyata, hasilnya sama pula. Hal ini menepis anggapan beberapa orang bahwa semakin banyak backlink, maka semakin tinggi PageRank. Pada kenyataannya, semakin jelas dan terbukti bahwa backlink berkualitaslah yang menentukan (di antaranya: kualitas situs pemberi backlink, keterkaitan niche, link building yang dibuat secara natural dan bukan spamming, etc).

Seperti kita ketahui, PageRank adalah rank Google pada setiap halaman. Jadi penilaian diakukan secara independen pada setiap halaman web. Setiap halaman tersebut memiliki kualitas sendiri-sendiri yang bisa jadi sama maupun berbeda. Saya juga melakukan checking PageRank pada masing-masing halaman posting dan static page. Hasilnya, ada satu halaman yang memiliki pagerank lebih tinggi halaman root (homepage) blog ini, ada yang sejajar, dan ada pula yang di bawahnya. 

Berikut halaman-halaman dengan Pagerank teratas:
http://bukan-rahasiia.blogspot.com/2011/02/auto-publish-kontenartikel-blog-ke.html PR 2
>> 50+ posting yang lain ber-PR 1
Sisanya ber-PR 0 dan N/A (tidak memiliki pagerank/unranked).

Dan alhamdulillah, blog saya yang lain, Buka Rasa juga dapat PR 2  Google. Herannya, nih blog baru berumur dua bulan dan optimasinya sangat "miskin". Eh, malah pageranknya sama dengan blog ini. Selain itu, dua blog saya yang lain (maaf, tidak bisa menyebutkan disini karena itu blog bisnis dan marketing sih, malu kalo nyebutin... hehe :D) masing-masing naik dari PR 1 ke 2 dan dari 3 ke 5. Jadi total ada 4 Blog yang terupdate secara positif (naik) pada Pageranknya.

Yah memang belum ada apa-apanya sih untuk Buka(n) Rahasia Lagi!. Tapi lumayanlah sebagai bahan untuk evaluasi dan terus belajar. Bahkan rank ini belum ada apa-apanya loh dibanding halaman profile facebok saya yang langsung dapat PR 5 dari sebelumnya PR 2 pada update ini! hehehe..... Harusnya yang senang malah Facebook ya, karena pada update ini banyak halaman-halaman non utama Facebook yang PR-nya naik pesat (ingat. setiap halaman punya PR beda). Tapi, kalo halaman utama Facebook (home) sih ga heran lagi, PR 10, coy... :D Jadi pada update kali ini, ga mungkin kan jadi PR 11 atau 12. Hahahaha.... Sedangkan Google sendiri PR-nya turun jadi 9, sejajar dengan Youtube, twitter, dan Adobe.

SEO (search engine optimization) pada blog ini secara aktif dilakukan 2 bulan setelah pembuatannya (05 Desember 2010), jadi mulai bulan Februari 2011 atau sekitar 4 bulan hingga  Google melakukan update PageRank pada hari ini. Salah satu tujuan pembuatan blog ini sendiri adalah untuk membuktikan pula bahwa SEO yang natural dan originalitas konten justru dapat menjadi cara yang paling ampuh untuk meningkatkan SERPs dan Ranking.

Sepertinya semua persyaratan PageRank yang biasa kita dengar ditepis habis, bro and sist, karena usia blog/web tidak lagi menjadi perhitungan, jumlah backlink tidak wajib banyak, dan masih banyak lagi perbedaan pada update mayor Google pada juni 2011 ini. Apakah karena Panda Update? Satu-satunya yang masih bisa diraba menurut saya adalah tentang konten. Ya, konten. Originalitas dan keunikan sepertinya berperan. Seolah-olah Google seperti memakai konsep "human edited directory" deh. Saya tadi sempatkan  diri jalan-jalan ke blog teman-teman blogger dengan konten-konten unik dan original, semuanya dapat pagerank update yang positif! Entah ini karena kekacauan data center Google, Perubahan revolutif dari Panda Update, atau karena apa, kita tunggu saja analisis para ahli SEO yang sebentar lagi artikelnya pasti bertebaran di search engine. Dugaan saya sebenarnya adalah, bahwa Google Pagerank pada toolbar sebenarnya semakin tidak penting bagi Google dan Google menyebarnya kemana-mana, tapi bukan ke spammer tentunya (forever enemy!) hehehe...

Namun demikian, PageRank Toolbar memiliki perbedaan dengan PageRank yang sesungguhnya. PageRank yang muncul pada toolbar yang berwarna hijau dan berparameter antara 0 dan 10 itu hanyalah salah satu wujud apresiasi dari Google atas arti penting suatu halaman. Keberadaanya tidak mempengaruhi SERPs dan SEO secara faktual dan sehari-hari. Sistem PageRank yang sesungguhnya dan menjadi tolok ukur sebuah halaman oleh Google hanya diketahui oleh Google sendiri. Sedangkan cara Google untuk menilai sebuah halaman adalah dengan mempertimbangkan ratusan bahkan ribuan faktor, seperti yang dibilang oleh Matt Cutts.

Bagaimana dengan sobat semua? Apakah sudah check Google Pagerank Update? Salam hangat untuk semua sobat Blogger. Keep on Blogging, keep on Posting Good Articles, and keep the Friendship lasting! Salam Blogger!

Cara Membuat Menu Pulldown Plus Tombol/Button


Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down karena list menu akan muncul setelah bagian atas menu diklik/ditekan, dan disebut pula dropdown menu karena setelah di-klik sederet list menu akan muncul secara berurutan ke bawah. 
Pull down menu/drop down menu sangat bermanfaat untuk menampilkan list pilihan yang sangat panjang karena dapat memperpendek panjang halaman blog/web dan akan membuat blog/web tampak lebih elegan dan professional. Anda dapat menggunakan menu pull down ini untuk menyusun link-link blogrol, label, arsip, kategori dan lain sebagainya.

Dalam kesempatan ini saya akan sedikit mengulas dan share tentang cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript itu.

Secara mendasar, pulldown menu merupakan rangkaian opsi tag option di dalam selection yang semuanya dirangkum menjadi sebuah form:
<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>
Dan akan tampil seperti ini:
Untuk memberikan isi atau list menu, tambahkan value dan anchor text pada tag option, identitas fungsi (name) pada selection, dan fungsi form:
<form name="lompat">
<select name="menu">
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
</form>
Akhirnya, tambahkan perintah javascript input button dan link option ketika di klik pada urutan sesuai identitas (name):
<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
Ups, karena apa yang tampak di bagian form adalah nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung tentang isi menu tersebut:
<option> -- Pilih Tutorial -- </option>
Berikut script lengkapnya:
<form name="lompat">
<select name="menu">
<option"> -- Pilih Tutorial -- </option>
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">
</form>
 Contoh implementasinya (sekalian chek the link):
Kostumisasi:
- Ganti -- Pilih Tutorial -- dengan text yang ingin dimunculkan pada baris paling atas menu pull down.
- Ganti GO dengan kata/perintah lain yang lebih disukai.

Di blog blogger, anda dapat dengan mudah memasangnya sebagai widget/gadget.
Dashboard > Design/Rancangan > Add a Gadget/ Tambah Gadget > HTML/Javascript
That's it. Have fun!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Friday, June 24, 2011

Cara Membuat List HTML & Menu Sederhana (Basic of Unordered List)



Pada dasarnya, hampir semua menu menggunakan struktur HTML list, dalam hal ini adalah unordered list (tag ul) atau daftar tak berurutan yang merangkum keseluruhan list (tag li). Segala bentuk navigasi yang berupa menu menggunakan struktur dari tag-tag tersebut dan kemudian ditambahi dengan aturan-aturan yang membentuk tampilan, fungsi, serta efek yang menarik (CSS dan Javascript).
Unordered list digunakan untuk membentuk susunan list/daftar yang tidak disusun berdasarkan urutan angka.  Sedangkan untuk struktur list yang berurutan (ordered list <ol>) disusun berdasarkan urutan angka; dari 1, 2, 3, dan seterusnya. Tentang ini, akan saya bahas pada kesempatan posting selanjutnya.

Dengan sedikit styling, list tersebut akan muncul dengan diawali titik, gambar, ataupun simbol lain sesuai dengan aturan list styling yang dibawa oleh template. Secara advanced, dengan ditambahi styling, fungsi, dan efek, list akan menjadi menu horizontal, vertical, atau menu-menu lain yang sangat menarik dan eye-catching.

Struktur dasar dari unordered list diawali dengan tag <ul> dan ditutup dengan closing tag <ul>. Di dalamnya terdapat susunan list-list yang masing-masing berada dalam tag <li> dan </li>.
<ul>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
<li>text/item disini</li>
</ul>
Tanpa aturan luas dan tinggi, baik dengan HTML maupun CSS, tampilan list akan muncul dalam urutan per baris:
  • text/item disini
  • text/item disini
  • text/item disini
  • text/item disini
  • text/item disini
Ide penggunaan list sederhana ini akan mempermudah dalam membuat list secara manual, baik untuk kepentingan membuat list di dalam posting maupun membuat menu yang akan ditampilkan di sidebar. Hampir seluruh navigasi menu di bagian sidebar blog ini saya buat dengan menu list manual. Mengapa? Ada beberapa alasan kuat mengapa saya membuat menu list secara manual:
  1. Kostumisasi isi lebih mudah daripada harus menggunakan widget khusus, misalnya label. Kita dapat dengan mudah melakukan perubahan tanpa harus mengedit Template HTML. Misalnya ketika harus mengubah anchor text, mengaplikasikan atribut (misalnya atribut nofollow) pada label, dan bebas melakukan CSS styling.
  2. Tahukah bahwa sebagian besar widget yang memuat automatic generated list seperti popular post, recent post, dan widget-widget navigasi lain yang kebanyakan menggunakan feed links atau redirect links? Link-link semacam itu tidak di-indeks oleh search engine, sebagaimana yang telah dijelaskan Google dalam Panduan dan Kriteria Google Quality Content. Untuk memperkuat page structure, sebaiknya perbanyak link list yang langsung mengarah ke link/halaman yang dituju.
  3. Dapat dengan sesuka hati mengatur isi menu, tanpa hasil generating dari widget yang kadang tidak sesuai dengan keinginan. Misalnya, untuk popular post, anda dapat dengan mudah memanipulasi isinya untuk memaksimalkan posting yag jarang terjamah pengunjung. :P
  4. Dapat membuat list non menu (yang bukan digunakan sebagai navigasi) dengan mudah di bagian sidebar. Misalnya untuk membuat list tertentu yang berfungsi sebagai informasi (anda dapat melihat contohnya di bagian sidebar kanan bawah, tepatnya di bawah logo copyscape  ^_^).
Untuk membuat list menu yang berisi link, cukup tambahkan tag a beserta anchor text-nya di dalam tag li:
<ul>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
<li><a href="#">anchor text</a></li>
</ul>
Contoh hasilnya:
Anda dapat dengan mudah membuatnya di sidebar sebagai pengganti widget menu yang isinya dapat diatur secara manual, sehingga dapat di-handle secara penuh. Untuk membuat list menu semacam ini di sidebar, masuk ke Dashboard > Design/Rancangan > klik add a gadget/tambah gadget > pilih HTML/Javascript. Beri judul sesuai isi menu dan susun list sesuai keinginan. Tampilan list menu akan mengikuti aturan yang telah dibawa oleh template blog (inherited).

Itulah dasar dari unordered HTML list dan menu list. Selanjutnya ke depan saya akan presentasikan beberapa konsep lain dari berbagai macam elemen dan struktur list web/blog beserta styling-nya dan juga akan ada beberapa menu horizontal dan vertical yang akan saya persembahkan (Insya Allah).

Cara Mudah Membuat Logo Blog Keren! (6 Online Text Logo Generators)



Tampilan logo blog pada header yang khas dan memiliki desain yang bagus pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan sebagai bagian dari header yang berupa paduan gambar dan gambar teks yang berisi nama atau ciri dari suatu blog.  Umumnya, logo blog digunakan untuk menggantikan teks pada bagian title dan deskripsi header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text, bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan untuk membuat teks logo dengan menggunakan software image editing semacam Correl Draw maupun Photoshop.

Pengen punya logo teks blog yang seperti ini?


 Atau yang seperti ini?
Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat dengan mudah membuat teks logo blog maupun logo blog untuk header dengan hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6 online logo generator/creator yang mudah untuk digunakan sebagai berikut:


Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.


FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.


Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.


Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.


Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Header Blogger/Blogspot

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

Monday, June 20, 2011

Mengapa Kamu Ngeblog? Komen Di Sini Yuk!


Sobat-sobat Blogger semua, tips-tricks Blogger lagi rehat sejenak nih dari hal-hal yang berkaitan dengan coding-coding-an dan SEO-SEO-an, hihi. Maunya nih ngobrol-ngobrol aja dengan sobat Blogger semua, yang ringan tapi masih tentang blogging juga.
Rencananya nih ni posting bisa jadi thread yang panjang dimana kita bisa bikin forum-foruman yang kecil-kecil. Ups, maksudnya forum kecil yang bisa jadi tempat ngobrol seputar Blogging dan diawali dengan topik "Mengapa Kamu Ngeblog?" (maunya gitu, entah apa jadinya nanti :D) cuz pastinya ada banyak hal yang memotivasi sobat Blogger untuk ngeblog dan pastinya beragam pula. Pastinya akan jadi asyik tuh kalo diobrolin di sini.
Sobat bisa memulai dengan poin-pon berikut:
1. Bagaimana bisa berkenalan dengan dunia Blogging?
2. Apa yang menarik sehingga memutuskan untuk ber-Blogging ria?
3. Apa motivasi awal untuk Ngeblog?
4. Apa lagi ya? Apa aja deh, asal sobat bercerita tentang alasan mengapa sobat Ngeblog and silahkan keluarkan semua uneg-uneg sobat tentang blogging.

Sudilah kiranya sobat berkomentar ya... Sekalian juga saya pengen punya list teman-teman Blogger baru yang belum pernah saya kunjungi sebelumnya (lumayan ga perlu susah cari-cari referensi blog baru di search engine and bisa cepet blogwalking ke teman2 Blogger semua, hehe).  Posting ini akan saya jadikan sticky post sehingga bisa dengan mudah diakses dan menjadi tempat berdiskusi kita selama mungkin :P

Ke depannya diskusi melalui komentar di posting ini natinya tidak menutup kemungkinan untuk dilanjutkan pada diskusi tentang permasalahan-permasalahan kita di dunia Blogging and dengan berdiskusi moga bisa kita cari solusi bersama. Setuju yak? And pastinya, kita bisa jalin persahabatan di dunia Blogging dengan lebih erat lagi.

Silahkan teman-teman sampaikan cerita "Mengapa Kamu Ngeblog?"
Ceritanya panjang juga ga papa kok,hehe. Makasih banyak sebelumnya. :D

Saturday, June 18, 2011

Dapat Blogger Friendship Award dari Sahabat


Blogging tidak dapat disangkal lagi memberi banyak manfaat dan efek positif. Beberapa di antaranya tentu saja adalah ilmu tentang dunia maya, ilmu web design and web mastering, ilmu pengetahuan lain yang tak terbatas, dan yang tak kalah pentingnya adalah: PERSAHABATAN. Meskipun hanya di dunia maya, kita dapat dengan luas menjalin tali silaturahmi dan persahabatan dengan sesama Blogger maupun dengan pembaca umum, sama halnya dengan di dunia nyata.

Saya sangat berbahagia hari ini karena memperoleh kehormatan untuk mendapatkan "Friendship Award- The Best Blogger" dari sobat Oen-Oen, sang penunggu Jalan-jalan Dingin (^_^). Sungguh betapa senangnya saya mendapat blog award ini, bro. Bukan karena terlalu bangga dan membangga-banggakan diri mendapat sebuah award, tapi bagi saya Friendship Award adalah sebuah penghargaan/award paling tinggi di antara award-award lainnya karena menjadi penanda terjalinnya sebuah persahabatan antar Blogger dan diterimanya saya sebagai salah seorang sahabat dari sang pemberi. Persahabatan itulah yang membuat saya bangga. Bukan kata "blogwalking"-nya, melainkan aktivitas blogwalking dan penerimaan sobat-sobat Blogger-lah yang membuat saya merasa menjadi bagian dari komunitas para Blogger dan menjadi salah satu sahabat dari kalian semua.  Mari bersahabat dan mengukir prestasi dengan menjadi Blogger dan membanggakan dunia Blogging!

Sekali lagi, thank you beri-beri imut, buat sobat Bloggger Oen-Oen yang telah memberikan saya award  yang membahagiakan ini. Selanjutnya, kelak saya juga akan meneruskan rantai award ini buat sobat-sobat Blogger lainnya. Dan, yang paling penting adalah, seperti yang sobat Oen-Oen bilang, "Ga ada loe, ga rame, coy!"

Salam Blogger!

Cara Membuat Efek Bayangan Pada Gambar (CSS3 Box Shadow)



Tips-Tricks Blogger: Browsers compatible with CSS3 Box Shadow
Memperindah blog/website kini menjadi hal yang semakin mudah dan merupakan kebutuhan bagi setiap web designer dan developer. Keberadaan CSS3 memungkinkan kita untuk membuat berbagai macam efek tampilan dan fungsi. Sedangkan saat ini hampir seluruh browser telah compatible dengan CSS3.

Pada awal posting tentang CSS3 ini, saya akan mempresentasikan penggunaan CSS3 Box Shadow pada gambar untuk memunculkan efek bayangan (image shadow). Basic penggunaan CSS3 Box shadow adalah dengan menggunakan syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
h shadow: posisi dan besar bayangan horizontal
v shadow: posisi dan besar bayangan vertical
blur: besaran dan jarak blur (opsional)
spread: ukuran bayangan (opsional)
inset: aturan yang ditambahkan untuk mengubah bayangan jatuh ke bagian dalam objek (opsional)

Contoh:
(Biasanya aturan yang lazim digunakan tidak menggunakan spread dan inset)
box-shadow: 5px 5px 3px #666666;

Aturan di atas sangat lah sederhana, pada prakteknya kita harus menambahkan property lain agar compatible dengan browser-browser lainnya (yang berplatform webkit dan moz). Maka property lengkapnya adalah:
-webkit-box-shadow: 5px 5px 3px #666666;
-moz-box-shadow: 5px 5px 3px #666666;
box-shadow: 5px 5px 3px #666666;
Efek bayangan Box Shadow ini sebenarnya dapat diterapkan pada berbagai objek blog/web yang berbentuk kotak dan bahkan juga pada objek yang berlekuk, yang dalam hal ini adalah rounded corners. Untuk mengaplikasikan ke gambar, kita dapat memasukkannya langsung ke dalam dengan menggunakan atribut style atau memberikan atribut class dan meletakkan aturan CSS-nya di bagian lain, baik di bagian HTML posting, widget, atau meletakkannya langsung sebagai aturan umum untuk semua objek yang diberi class/id yang sama di bagian head (antara <head> dan </head>).
Contoh pengaplikasiannya:

Salah satu cara yang digunakan untuk memasukkan kode CSS3 Box Shadow-nya:
Tambahkan class pada tag html gambar dan beri aturan CSS3 Box shadow yang sesuai dengan classnya. Contoh:
<img class="boxshadow" border="0" class="bayang2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRKqb-Z69B-SuM5wWd33_oZ3EFpDzQ4DzxKx-mkpTp0wiUkJGIuHlOa6GQ38vE-ryPPYSSDbQRc12sGXG8x69w9oV-ekqR1CT3yUcmGCalxVMKt38-0fLnXhVMI3KCO9DT5q9s40Z5lLC/s1600/anti_copycats-pencuri+konten.jpg" />
Untuk membuat efek bayangan box shadow pada blog anda:
Masuk ke dashboard > design/rancangan > Edit HTML (untuk Blogger), kemudian masukkan kode CSS ini di bagian head, lebih tepatnya di ATAS </head>, dan save template.
<style type="text/css">
.boxshadow {-webkit-box-shadow: 5px 5px 3px 0px #666666;-moz-box-shadow: 5px 5px 3px 0px #666666;box-shadow: 5px 5px 3px 0px #666666;}</style>
 Kemudian setiap anda ingin memberikan efek bayangan (image shadow) pada gambar di posting, sidebar widget yang bergambar, tinggal tambahkan class="bloxshadow" pada tag HTML image-nya:
<img class="boxshadow" border="0" src="http://urlgambar.com/gambar.jpg" />
Kostumisasi efek bayangan:
a. Anda dapat mengubah nilai h shadow, v shadow, dan blur (dalam px) serta kode warna sesuai dengan keinginan. Untuk mengetahui koleksi kode warna silahkan lihat Hex Color Code Generator.
b. Untuk mengubah efek bayangan jatuh ke kiri, gunakan nilai negatif (-) pada h shadow dan v shadow, contoh:
-webkit-box-shadow: -5px -5px 3px #666666;
-moz-box-shadow: -5px -5px 3px #666666;
box-shadow: -5px -5px 3px #666666;
 Hasilnya:


Coba terus dan silahkan bereksperimen dengan nilai vertical, horizontal, blur, dan warna, serta efek jatuhnya bayangan.

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

Thursday, June 16, 2011

Fitur Baru: Blogger Custom Favicon dan Cara Membuat-nya


Blogger baru saja memperkenalkan fitur baru "Blogger Custom Favicon" yang akhirnya memberi kemudahan baru bagi anda pengguna Blogger/Blogspot untuk membuat favicon pribadi blog. Kita tidak perlu repot-repot lagi mengupload file .ico ke hosting lain dan memasang script-nya melalui edit HTML. Cukup siapkan file ico sebagai favicon yang telah dibuat dan dipersiapkan untuk favicon blog blogger anda, dan upload melalui fitur "edit favicon".

Cara mengakses dan membuat "Blogger Custom Favicon":
Note:
Jika belum memiliki gambar favicon berformat .ico, convert terlebih dahulu file gambar (jpg/png) secara online dengan menggunakan ICO converter. Download file ico yang telah terbuat di komputer.
1. (update: fitur ini sekarang sudah dapat diakses langsung melalui dashboard Blogger)
2. Klik Design/Rancangan.
3. Di halaman page elements, di bagian atas editor akan ditemui fitur Edit favicon seperti gambar berikut, dengan default favicon bergambar logo Blogger di sebelah kiri:
4. Klik "edit" di sebelah kanan tulisan "Favicon".
5. Kemudian akan muncul pop-up window:
6. Klik Browse dan cari folder dimana anda menyimpan file .ico yang telah dipersiapkan, klik open. Tunggu sampai favicon terupload dengan hasil gambar seperti di bawah ini:
7. Setelah favicon terupload, klik save.
8. Di bagian design/page elements, favicon akan muncul menggantikan favicon berlogo Blogger:
9. Custom Favicon telah tampil di Blog anda.
10. Done!

Note:
Paling tidak butuh waktu 1 hari untuk Blogger melakukan generating favicon. Jadi, sobat akan melihat hasil tampilan favicon baru di browser setelah proses itu.

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

Wednesday, June 15, 2011

Cara Membuat/Mengubah Label Blogger Jadi Nofollow

Seperti yang telah di bahas di posting sebelumnya, Memahami Karakteristik dan Cara Optimalkan Label Blogger, label Blogger/Blogspot bukan berupa link yang bersifat permanent (permalink) melainkan link yang hanya terbentuk sebagai hasil perintah pencarian dan pengelompokan posting-posting dengan label tertentu. Oleh karena itu, bagi search engine (terutama Google) link-link semacam ini bukan merupakan link yang sah untuk diindeks. Untuk menghindarkan proses indeks terhadap link label, atribut nofollow perlu ditambahkan pada semua label, termasuk link label yang dimasukkan di dalam badan posting/artikel. Dengan memberikan atribut nofollow pada label, diharapkan proses optimalisasi SEO Blogspot menjadi lebih maksimal.

Jika link-link label ditambahkan secara manual, maka cukup tambahkan atribut rel="nofollow" pada tag a label. Contoh:
<a href="http://bukan-rahasiia.blogspot.com/search/label/HTML-CSS%20Tricks" rel="nofollow">HTML-CSS Tricks</a>
Namun pada label yang ditampilkan pada widget yang bersifat otomatis, misalnya widget labelBlogger dan label yang ditampilkan di atas/di bawah posting, maka harus ditambahkan atribut nofollow pada bagian tag xml label.

1. Masuk ke dashboard > design/rancangan > Edit HTML.
2. Klik/check "Expand Widget Templates"
3. Cari data:label.url (gunakan Ctrl + F)
Secara utuh, kode tersebut ada dalam tag seperti ini:
<a expr:href='data:label.url'>
4. Tag itu biasanya ada yang berjumlah satu atau dua tergantung pada jenis template XML Blogger tysng digunakan. Bahkan dalam beberapa template XML Bogger tertentu, ada pula yang berjumlah lebih dari dua. 
Untuk mengubah label menjadi nofollow, tambahkan atribut rel='nofollow' ke dalam semua tag tersebut seperti pada contoh berikut:
<a expr:href='data:label.url' rel='nofollow'>
5. Setelah anda menambah atribut nofollow pada tag-tag tersebut, kemudian save template.
6. Done!

Note (IMPORTANT!):
Bagi yang menggunakan menu/navigasi breadcrumbs, akan ditemukan tag sejenis dengan di belakangnya dibubuhi atribut rel='tag':
<a expr:href='data:label.url' rel='tag'>
Jika ditemukan tag seperti di atas, sebaiknya JANGAN ubah atribut rel='tag' menjadi rel='nofollow', karena itu bagian dari breadcrumbs yang berfungsi memberi tahu search engine bahwa url link tersebut berfungsi sebagai tag yang bersifat informatif bagi search engine.

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

Memahami Karakteristik dan Cara Optimalkan Label Blogger

Label pada blog ber-platform Bloggger (Blogspot) memiliki fungsi sebagai pengelompok posting berdasarkan kriteria/kategori tertentu. Dengan adanya label, diharapkan pengunjung/pembaca blog dapat dengan lebih mudah mencari bagian/kategori tertentu dari posting-posting (artikel-artikel) sesuai dengan yang dia inginkan. Akan tetapi ada beberapa karakteristik khusus yang membuat "Label Blogger" berbeda dengan fitur  kategori pada blog berplatform lain (category pada WordPress misalnya). Memahami beberapa karakteristik ini diharapkan dapat memaksimalkan fungsi label dan juga menghindarkan dampak buruk terutama untuk SEO blog Blogger/Blogspot:

 1. Cara Membuat Label Blogger/Blogspot (Basic Step untuk Pemula)

a. Membuat label ketika di halaman new post/buat posting baru (post editor)
Ketika sedang membuat posting, anda dapat langsung membuat label.
Lihat di bagian bawah kotak post editor
Tuliskan label yang diinginkan, bisa lebih dari satu
atau jika anda sudah memiliki label-label, klik "show all" dan klik label-label yang diinginkan
b. Membuat dan mengedit label di halaman "edit posts".
Centang satu atau beberapa posting yang ada di bagian bawah label editor seperti di atas, kemudian pilih label/buat label baru/hapus label pada menu dropdown "Label Actions..."

 2. Karakteristik Umum Label Blogger

a. Susunan label yang ditampilkan pada bagian link label baik di atas atau di bawah posting disusun sesuai abjad, misalnya: Label: Blogging, Cheat, Download, dan seterusnya.

b. Label Blogger bukan lah pengelompokan dengan sistem direktori, namun hanya pengelompokan berdasarkan hasil posting yang ditandai dengan label tertentu dan merupakan perintah pencarian (search label). Ini merupakan kelemahan dan perbedaan Label Blogger dengan category WordPress, dimana category merupakan pengelompokan direktori, sehingga ada parental category, child category, dan seterusnya.

c. Karena url label sebenarnya merupakan perintah search (contoh url-nya: http://bukan-rahasiia.blogspot.com/search/label/Blog%20Design), maka label bukanlah link permanent (permalink). Atau, lebih mudahnya, bisa dibilang label bukan lah url yang sesungguhnya. Label hanya terbentuk sebagai hasil url perintah pencarian (contohnya seperti url pencarian seach engine). Oleh karena itu, search engine tidak memperhitungkan label sebagai link/url yang sah untuk diindeks. Itulah mengapa ketika anda masuk ke Google Webmaster Tools, ada informasi bahwa link-link label di-restricted oleh robot.txt. Efeknya, label yang terindeks justru malah berdampak buruk pada SEO.

d. Jika anda menggunakan menu/navigasi breadcrumbs (khususnya seperti yang telah saya buat dan beberapa lain yang sejenis), label yang diambil adalah label yang paling terakhir, sehingga apa bila anda membubuhkan lebih dari satu label pada suatu posting, dan karena label diurutkan sesuai abjad, maka label yang ditampilkan di menu breadcrumbs adalah label dengan abjad paling akhir dari posting tersebut. Jika label yang dimunculkan oleh breadcrumbs kurang tepat dan tidak sesuai dengan yang diinginkan, maka optimalisasi SEO pun jadi kurang maksimal.
Contoh: suatu posting memiliki label: "Design, HTML, Trik". maka hasil generating menu breadcrumbs adalah:
Browse >> Home >> Trik >> Judul Posting.

 3. Memaksimalkan Fungsi Label untuk Navigasi dan SEO

a. Pasang label sebagai alat navigasi berdasarkan kelompok posting, baik pada link list label yang sudah disediakan sebagai widget bawaan Blogger/Blogspot ataupun pada menu/navigasi lain, misalnya menu horizontal. Fitur-fitur semacam ini dapat membantu pengunjung/pembaca blog mencari posting yang diinginkan sesuai kelompok/kategori tertentu.

b. Disarankan untuk tidak terlalu banyak membubuhkan label pada suatu posting, sehingga tidak membingungkan pengunjung/pembaca blog. 4 atau 5 label pada suatu posting sudah merupakan batas maksimal yang dapat diterapkan.

c. Karena label bukanlah url yang sesungguhnya (permalink), untuk SEO, maka sebaiknya label tidak diikutsertakan sebagai link yang harus diindeks search engine. Caranya adalah dengan membuat link label bersifat nofollow. Tambahkan rel=nofollow pada setiap link label ketika anda membuat/membubuhkan link label secara manual. Cara ini digunakan apabila anda menambahkan link label secara manual di bagian isi posting atau menu/navigasi tambahan.
Contoh penambahan atribut nofollow pada hyperlink (tag a):
<a href="http://bukan-rahasiia.blogspot.com/search/label/Widgets" rel="nofollow">Widgets</a>
 Jika anda ingin menambahkan nofollow widget label otomatis bawaan Blogger dan juga label yang muncul di bagian bawah/atasposting, maka atribut nofollow harus ditambahkan melalui edit HTML pada tag xml label. Lihat: Cara Membuat/Mengubah Label Blogger Jadi Nofollow

d. Untuk mengatasi pemunculan urutan breadcrumbs dengan label yang tidak sesuai atau yang tidak diinginkan, maka berhati-hatilah dalam membuat label untuk suatu posting. Pastikan label yang anda ingin munculkan di breadcrums adalah label yang ingin dioptimalkan. Sebaiknya jangan terlalu banyak menggunakan label pada suatu posting dan lihat apakah urutan abjad terakhir pada nama label adalah yang ingin dimunculkan di breadcrumbs. Label yang sesuai dapat berpengaruh baik pada SEO.

Happy blogging, mates!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Sunday, June 12, 2011

Tips Membuat Page/Halaman About Me di Blog

Tips ini dibuat setelah saya melihat ada banyak incoming search tentang "cara membuat halaman/page about me". Sebenarnya about me, atau lazim juga disebut sebagai about us, tentang saya, atau tentang kami, adalah halaman atau bagian khusus dari sebuah website/blog yang berisi informasi dan garis besar isi blog/web serta penulisnya. Sebagai bagian dari blog/web, about me sifatnya relatif dan tergantung pada muatan umum dari blog/web itu sendiri. Dengan demikian, pada akhirnya halaman atau bagian about me bersifat subjektif dan terserah pada penulis blog/web itu sendiri untuk mendesain isinya.

Namun demikian, menurut saya, setidaknya ada 4 hal utama sebagai bagian penting dan informatif dari halaman about me/tentang saya dan sekaligus menjadi tips untuk membuat halaman atau bagian "about me":
1. Isi halaman about me dengan informasi mengenai diri anda namun jangan terlalu detil. Untuk memberikan informasi lebih lanjut, beri link account twitter, facebook, atau pun social media lainnya.
2. Tambahkan informasi mengenai pengalaman anda dalam satu atau beberapa hal. Jika blog atau web anda membahas tentang suatu topik/tema tertentu, tambahkan informasi mengenai pengalaman anda di bidang tersebut dan alasan kuat yang menunjukkan anda menguasai suatu bidang keahlian dan layak memuat dan membahas tentang topik/tema tertentu.
3. Sertakan link-link dari web/blog anda yang lain serta link-link yang menurut anda penting untuk diikutsertakan dalam "about me". Ini berfungsi untuk mempromosikan web/blog anda yang lain dan menunjukkan hal-hal mengenai pribadi dan keahlian/kemahiran/dan ketertarikan anda di bidang lain.
4. Sertakan link kontak atau alamat kontak dimana pembaca blog yang tertarik dengan anda dan membutuhkan informasi atau jasa dapat dengan mudah melakukan kontak. Untuk privacy dan menghindari spam ke email, saya sarankan gunakan "contact form/contact me".

Dengan memuat poin-poin tersebut dalam about me, setidaknya ada beberapa keuntungan yang didapat:
1. Memberi informasi mengenai pribadi, kemahiran/pengalaman/hobi, serta garis besar topik/tema yang diusung dalam blog anda.
2. Memberi keyakinan dan alasan kuat bagi pengunjung/pembaca mengapa dia harus membaca artikel-artikel blog anda.
3. Mempromosikan diri anda sebagai seseorang dengan keahlian di bidang tertentu. Apabila ada pembaca yang tertarik dan mengontak anda, maka kesempatan untuk mendapatkan tambahan finansial, pekerjaan, (sebagai penulis, misalnya) dan bahkan popularitas akan terbuka lebar. 
4. Setiap orang dapat menulis blog, akan tetapi, menurut pengalaman, kebanyakan pembaca mencari blogger-blogger yang gaya menulisnya khas, unik, menyenangkan, dan tentunya menguasai apa yang ditulisnya. Maka, tidak ada salahnya pula, jika anda menyampaikan poin-poin mengapa para pembaca harus membaca, mengikuti, dan merasa bahwa apa yang anda tulis memiliki nilai penting (value) bagi mereka.

Dalam kaitan membuat halaman "about me", sebenarnya untuk blog semacam Blogger, anda dapat langsung menggunakan halaman profil account Blogger sebagai halaman about me, karena telah memiliki fitur-fitur yang dapat dengan mudah diisi dengan informasi-informasi penting seperti yang telah disampaikan di atas. Anda dapat dengan mudah pula mencantumkan linknya di link list/menu atau pun membuat widget "about me/tentang saya" di blog (yang telah disediakan oleh Blogger). Akan tetapi, jika ingin membuat halaman about me secara khusus, buatlah di halaman statis karena sifatnya yang timeless (tidak mengandung bagian link yang memuat tanggal dan bulan) serta tidak menjadi bagian posting.
Cara membuat halaman statis Blogger/Blogspot:
Dashboard >Edit Posts/New Post > Edit Pages > Add a new Page
Happy Blogging!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Wednesday, June 8, 2011

Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot



Seperti yang telah ramai diberitakan di dunia internet, Google telah membuat satu fitur baru:" Official Google +1 Button" yang merupakan tool bagi pengunjung blog/web serta search engine untuk memberikan "voting" bagi sebuah halaman blog/web yang menurutnya memiliki nilai (value) manfaat yang besar. Menurut Google, +1 Button juga memberikan referensi dan rekomendasi bagi Google dalam menentukan peringkat suatu halaman web di search engine (SERPs). Oleh karena itu, memasang tombol +1 Google bisa menjadi salah satu alternatif bagi pemilik blog/web untuk meningkatkan SEO blog/web tersebut. Meskipun saat ini fitur Google +1 baru muncul di domain google.com, namun memasangnya mulai sekarang tidak ada salahnya, karena di domain tersebut pun semua website di berbagai belahan dunia juga diperhitungkan, apalagi jika nanti fitur ini juga muncul di domain google.co.id, pasti lebih bermanfaat dan berkali lipat efeknya terhadap SEO dan SERPs.

Untuk template blogger yang default atau secara official merupakan bawaan blogger, fitur ini dapat dibuat dengan mudah melalui halaman page elements/edit gadget, karena fitur ini sudah secara resmi ditambahkan ke Blogger. Perhatikan gambar berikut:


Tombol +1 Google dapat dengan mudah ditampilkan dengan mencentang "Show Share Button". Masuk ke dashboard > design/rancangan > kemudian klik "edit post " di bagian badan template dan akan tampil pop up window seperti gambar di atas.

Namun, bagi template yang sudah dimodifikasi dan bukan default template, fitur "share button" biasanya telah dihapus. Oleh karena itu diperlukan editing template HTML untuk menambahkan fitur/tombol +1 Google tersebut.
Secara official, ada 3 jenis button atau tombol Google +1:
standard
medium
small

1. Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"
2. Copy kode berikut dan paste tepat SEBELUM </head>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
3. Copy kode berikut:
<!-- Google +1 Button  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone size="standard"></g:plusone>
</div>
</b:if>
<!-- http://bukan-rahasiia.blogspot.com -->
Kostumisasi Tombol Google +1:
a. Ganti standard dengan medium atau small jika ingin mengubah ukuran tampilan button/tombol seperti contoh di atas.
b. Ganti right dengan left jika ingin button/tombol berada di sisi kiri.
c. Kode berwarna biru akan menampilkan tombol hanya ketika halaman posting dibuka. Jika anda menggunakan auto readmore, maka tombol tersebut tidak akan muncul di post summary, sehingga tampilan post summary tidak akan rusak.  Jika anda tidak menggunakan auto readmore atau menggunakan readmore tapi tetap ingin menampilkannya di post summary, hapus kode biru tersebut.

Cara Memasang Google +1 Button:
(Update: Ini sekaligus untuk menjawab beberapa permasalahan yang disampaikan dalam beberapa komentar di bawah):

>> Karena banyaknya permasalahan ketika memasang tombol Google +1, kode yang harus dicari saya ubah untuk memudahkan pemasangan (meskipun sebenarnya sama saja, hanya untuk memudahkan pencarian)
4. Jika ingin memasang button di bagian bawah posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya. Jika kode tersebut tidak ketemu, letakkan kode di ATAS <data:post.body/>.
5. Jika ingin memasang button di bagian bawah posting, cari  <data:post.body/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.
6. Save template.

>> Tombol Google +1 sebenarnya sampai saat ini masih menjadi uji coba Google, baik dalam script-nya (beta) maupun dalam fungsinya sebagai vote dan share hasil pencarian. Seperti yang saya amati, script Google +1 masih tidak stabil; baik dalam fase file downloading-nya maupun ketika diload oleh beberapa browser tertentu. Kadang-kadang tombol tidak muncul atau kita tidak bisa melakukan vote, sehingga, ketika setelah script dipasang tombol tidak muncul, kemungkinan juga disebabkan oleh permasalahan itu.


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

Friday, June 3, 2011

Cara Membuat Facebook Page dan Like Box di Blog/Website

Facebook Page/Fan Page - Like Box semakin lazim digunakan di blog/website mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Facebook Fan Page dan memasang Like Box di blog/website merupakan hal yang sangat dianjurkan untuk blog/website anda.
1. Ada beberapa langkah berbeda untuk membuat Facebook Page. Untuk langkah yang lebih mudah, sebaiknya anda telah login terlebih dahulu di account Facebook anda.
2. Kemudian buka halaman ini:  http://www.facebook.com/pages/create.php.
3. Pilih/klik opsi Brand or Product.
 4. Pilih opsi "website" dan isikan nama Page sesuai dengan yang diinginkan. centang "agreement" dan klik "Get Started", seperti contoh gambar berikut:
5. Selanjutnya anda akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.

Cara Membuat dan Memasang Facebook Like Box di blog/website

1. Jika anda masih berada di halaman Fcebook Fan Page tadi, pilih menu nomer 5, klik "add like box":
Atau bisa juga buka halaman berikut: http://developers.facebook.com/docs/reference/plugins/like-box/
Penting: Sebelumnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/Bukan-Rahasia-Lagi/196418780373882
2. Selanjutnya, isikan spesifikasi seperti gambar berikut:

Setting Facebook Like Box:
- Facebook Page url: url Facebook Page anda
- Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget.
- Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.
- Show Faces: Centang untuk menampilkan foto profil likers.
- Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.
- Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.
- Show header: Centang jika ingin menampilkan tulisan header "Find Us on Facebook".
Lihat preview tampilan di sebelah kanan form tersebut.

3. Jika settingan yang dibuat sudah beres, klik get code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, iFrame dan XFBML, pilih salah satu dan copy kodenya. (Untuk Blogger, saya sarankan pilih HTML 5).

4. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.
5. Pilih opsi HTML/Javascript.
6. Masukkan kode yang telah dicopy ke dalam kotak kode.
7. Save.
8. Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website anda dapat dengan mudah meng-klik like pada like box yag telah disediakan.
------------------------------------------------------------------------------
 Update  bagi yg masih bingung dengan pemasangan kode dan like box tidak muncul:
Copy paste saja semua kode ke dalam HTML/Javascript. Misalnya ketika memilih HTML 5, kemudian ada dua kolom yang masing-masing berisi dua kode, jangan pisahkan pemasangan kode, pasang saja keduanya ke gadget HTML/Javascript secara berurutan, yaitu taruh kode kedua di bawah kode pertama. Kemudian save.
------------------------------------------------------------------------------

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