Lembar Coretan

Navbar, lagi - lagi yang dibahas Navbar Blogger. Memang, blog ini sudah beberapa kali memposting tentang hal yang sama, yakni navbar blog platform blogspot. Di artikel - artikel sebelumnya membahas beberapa trik agar navbar bisa kelihatan lebih nyaman dari aslinya apabila navbar di padukan dengan desain - desain template yang dibuat. Di artikel sebelumnya juga terdapat trik untuk menghilangkan navbar dengan menambahkan beberapa kode di kode template yang digunakan. Kenapa harus dihilangkan ? ya..karena Blogger.Com tidak memberi navbarnya fasilitas hidden, auto hide, ganti warna sesuai selera, ganti bentuk, dan lain sebagainya jadi tentu saja model dari navbar membuat risih para blogger.

Memang, beberapa ( banyak juga sebenarnya ) blogger blogspot menganggap menghidden, atau me-remove, navbar dari blognya hal itu melanggar TOS ( Terms of Services ) Blogger.Com dan bisa mengakibatkan dihapusnya blog. Tentu ini sangat membahayakan. Ada pula yang beranggapan bahwa menghilangkan navbar tidak akan mengakibatkan resiko melanggar TOS, dikarenakan tidak ada aturan resmi dari blogger.com mengenai navbar. Sudah sejak lama hal ini menjadi perdebatan. Semua beradu dengan pendapatnya masing - masing. Tapi tetap saja orang dalam ( Blogger dan Google ) belum saja merespon. Hal ini menjadikan tidak adanya kejelasan tentang hukum blogger menghilangkan navbar.

Mungkin karena hal di atas, Blogger menambahkan dua model baru pada navbarnya yakni Transparent Light dan Transparent Dark. Dua warna baru agar navbar bisa bersatu dengan desain template blog. Hal ini diinformasikan oeh blogger melalui Blogger Buzz.

Bagi sobat - sobat sekalian, bisa mencoba warna baru ini dengan cara :

( Picture by Blogger )

Dan sobat akan menemukan dua model warna baru pada navbar seperti di bawah ini

Transparent Dark ( Picture by Blogger )

Selamat menikmati navbar barunya.

Telah sudah kita ketahui pada artikel sebelumnya yang membahas mengenai keuntungan dan kerugian navbar blogger.com, bahwa navbar blogger mempunyai beberapa kekurangan di balik kelebihan yang dimilikinya sehingga mungkin beberapa blogger platform blogspot membuat kurang nyaman atau bahkan tidak suka dengan adanya navbar bawaan blogspot tersebut. Ada beberapa faktor yang membuat blogger platform blogspot merasa tidak nyaman dengan navbar default blogspot. Salah satunya yaitu pada style atau tampilan dari navbar yang kelihatannya memang tidak cocok kalau tetap ditampilkan bersama dengan template blogspot yang banyak bertebaran sekarang ini. Maka dari itu rata - rata para blogger berinisiatif untuk menghilangkan ( menghapus ), menyembunyikan ( auto hide ), dan bila ada blogger platform blogspot yang sudah menyadari, membutuhkan, dan menyukai akan kelebihan dari navbar blogspot mereka hanya akan mengganti warna navbar saja. Dan mereka yang tidak menyukai biasanya mencari navbar alternatif navbar blogspot seperti contohnya yang populer sekarang ini wibiya toolbar.

Nah, berdasarkan bahasan materi di atas atau pada artikel sebelumnya, saya berangan - angan untuk membuat navbar default blogspot menjadi "sedikit" lebih nyaman untuk dilihat dan digunakan. Dan akhirnya, setelah melakukan sedikit percobaan sederhana di salah satu blog saya, akhirnya saya bisa mewujudkan angan - angan saya itu. Tapi sayangnya masih ada kekurangan di hasil percobaan saya ini, yaitu hasil dari percobaan tidak berhasil pada browser Internet Explorer 6, tapi bisa bekerja pada browser Opera walaupun agak sedikit kasar daripada dilihat dari browser Mozilla Firefox. Sampai di sini, bagi yang tidak berminat untuk melanjutkan ke langkah selanjutnya bisa berakhir di sini.

Ok, kalau masih ingin terus melanjutkan silahkan ikuti langkah - langkah di bawah ini. Caranya cukup mudah seperti biasa, sobat tinggal copy-paste saja script yang telah disediakan di bawah ini di atas kode ]]></b:skin>

/******************************************
Blogger Navbar Customise (untuk Blogspot)
(C)2009 by Muhammad Umar Hasyim Asyari
kunjungi http://lembar-coretan.blogspot.com
********************************************/
.navbar {
width:98%;
position:fixed; bottom:5px;left:5px;
display: yes;
border: 4px groove black;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
}

Atau kalau sobat menggunakan template default minima dari blogspot seperti saya, sobat bisa meletakkannya tepat di bawah credit author template. Pokoknya tempatkan code di atas di dalam tag code css sobat.

Langkah terakhir, silahkan sobat memilih keempat warna navbar dari blogspot yang sudah disediakan di widget navbar blogspot. Dari sini memang sudah berakhir, tapi biar lebih jelas saya jelaskan "sedikit" arti kode/ script di atas dengan pemahaman saya ( alias ngawur... hihihi. ).

width : Bagian ini untuk mengatur panjang dari navbar. Kenapa saya pakai "%" , itu dikarenakan navbar selalu bisa menyesuaikan panjangnya sesuai dengan resolusi dari layar monitor. Maka dari itu, bila menggunakan "pixel" ( px ) maka navbar akan menjadi terkekang. Dan Akhirnya penampilan akan menjadi tidak enak dipandang ( muncul jadi separuh bagian ).

position : fixed; bottom:5px;left;5px; : Bagian ini mengatur letak dari navbar. Position:fixed, bisa diganti dengan position:absolute, tapi navbar tidak akan tinggal menetap di bawah saat halaman di scroll ( menempel di bagian halaman blog ). Sedangkan bila "fixed" maka navbar akan tetap tinggal dimana dia ditempatkan. Untuk kode di atas saya meletakkan navbar di bawah atasnya status bar browser dengan jarak 5 pixel.

display: yes; : Bagian ini tentu saja untuk mengatur navbar hendak ditampilkan atau tidak. Bila tidak ingin menampilkan navbar, sobat tinggal mengganti kata "yes" ( tanpa tanda petik ) dengan kata no.

border: 4px groove black; : Bagian ini mengatur border dari navbar. 4px berarti tebal border 4 pixel, groove berarti salah satu jenis dari border, black berarti sudah tentu ini mengatur warna dari border.
-moz-border-radius-bottomright:10px; : Mengatur lengkungan border pojok kanan bawah. Biar kelihatan seperti wibiya toolbar gituu.. hehe
-moz-border-radius-topleft:10px; : Mengatur lengkungan border pojok kanan kiri atas.
-moz-border-radius-topright:10px; : Mengatur lengkungan border pojok kanan atas.
-moz-border-radius-bottomleft:10px; : Mengatur lengkungan border pojok kiri bawah.

Nah.. bila tidak ingin sama dengan Navbar Customisenya si Tukang Corat -coret yang bisa sobat lihat di bawah halaman ini, silahkan rubah sendiri. Untuk saat ini saya masih bisa menjadikan seperti itu saja. Bila kawan - kawan blogger yang lebih berpengalaman ataupun belum, bisa membantu saya untuk menyempurnakan ( memperbaiki tampilan dan memperbaiki bugs ) Navbar Customise saya ini.

Untuk saat ini sampai di sini dulu. Terima Kasih dan sampai jumpa di materi sharing berikutnya. Salam Blogger. Oh ya, sampai lupa mengucapkan Terima Kasih banyak kepada Mas Doyok yang sudah mensupport saya, Om Agus Ramadhani dan Kang Rohman yang sudah menginspirasi saya. Dan Tak lupa pada Wibiya.

Semoga berguna. !

Seperti kita ketahui bahwa setiap kita membuat blog di Blogger.Com secara default blog kita akan diberi sebuah navigation bar. Blogger navbar ditampilkan di halaman blog paling atas. Navbar blogger mempunyai fitur sebagai berikut

Navbar Blogger pada saatnya bisa menjadi sangat berguna dan pada saat yang lain bisa memunculkan suatu masalah yang tentunya menjadikan navbar blogger menjadi hal yang tidak berguna sama sekali bahkan sangat mengganggu.

Pada kenyataannya, navbar blogger sampai pada saat dimana tulisan ini dibuat, tampilan atau model dari navbar blogger belum sesuai dengan keinginan rata - rata dari para blogger. Navbar yang ada saat ini masih belum bisa memuaskan keinginan dari para blogger dan blogger template desainer, karena navbar akan terlihat tidak cocok dengan desain template yang dipakai oleh para Blogger. Seandainya saja navbar blogger berpenampilan seperti Wibiya Toolbar, wah pasti tidak akan tega untuk mematahkan dari tubuhnya ( Blogger ). Namun sebelum angan - angan  itu menjadi kenyataan, kita  punya  tiga  cara  penyelesaian mengatasi hal tersebut, yaitu dengan :

1. Menghapus / menyembunyikan Navbar blogger yang ada

Sobat bisa melakukan hal tersebut dengan cara copy kode di bawah ini di atas atau sebelum kode ini ]]></b:skin> dan jangan lupa disimpan.

2. Menjadikan navbar auto hide ( otomatis tersembunyi ketika mouse tidak menyorot letak navbar blogger , dan muncul ketika mouse menyorot navbar blogger )

Pilihan Navbar

Sebagai blogger sudah sewajarnya kita sering menemui masalah di sekitar desain ( code ) template, artikel. Seperti halnya kurang / tidak validnya kode desain template kita, broken link dan lain sebagainya. Yang kesemuanya itu dapat mengurangi kualitas dari sebuah situs atau blog termasuk dalam SEO. Nah pada kesempatan ini saya ingin berbagi kepada sobat blogger sekalian, sebuah tool untuk menambah kualitas dari sebuah blog yang dibangun oleh sebuah organisasi yang mungkin para sobat blogger sekalian juga sudah tidak asing lagi dengan nama World Wide Web Consortium (W3C) . Sebuah organisasi internasional yang dikepalai oleh Tim Berners-Lee.

Tool yang tersedia di web ini sebenarnya cukup banyak dan enaknya lagi tool web ini opensource. Berikut beberapa web tool yang disediakan oleh W3C untuk kita.

Dan Selain dari W3C, sobat juga bisa mencoba layanan dari iweebtool yang lumayan juga.

Selamat mencoba

Bagi sobat - sobat blogger yang juga aktif di Facebook. Saya punya tips kecil untuk sobat Facebook sekalian. Tips yang akan saya bagi kali ini adalah membuat facebook dapat memunculkan emoticon yang menarik bila user Facebook mengupdate statusnya di wall dengan menambahkan kode emoticon yang biasanya dipakai di aplikasi chatting Yahoo Messenger. Seperti Contohnya bila user facebook mengetikkan kode :) maka akan muncul emoticon lucu seperti ini . Nah, sudah mengerti maksud saya kan?. Ingin tau bagaimana caranya?? Pasti donk. Cepet . cepet uda gak sabar nich.. hehe Ok.. ok.. sabar yach.. ( Dasar narsis pakai bahasa begituan segala ).

Agar facebook sobat sekalian bisa memunculkan emoticon lucu seperti itu, kita membutuhkan si Monyet dari Mozilla yaitu GreaseMonkey. Pasti para blogger tidak akan asing lagi kan dengan nama ini. Karena greasemonkey hanya bekerja di Mozilla Firefox saja maka yang bisa melakukan ini hnaya pengguna browser mozilla firefox saja. Untuk browser lainnya maaf saja. Maka dari itu agar bisa ikut menikmati, silahkan ganti browser sobat dengan Mozilla Firefox yang bisa didownload di sini. Kalau sudah mempunyai Mozilla Firefox, Kita mulai langkah - langkahnya.

Untuk diingat, sekali lagi hal ini hanya berlaku bagi pengguna browser Mozilla Firefox, dan hanya Mozilla Firefox yang sudah terinstal greasemonkey saja lah yang bisa menikmati ini.

Bagaimana ?? tambah asyik kan?! Ok, sampai jumpa di sharing berikutnya. Happy Blogging and Happy Social Networking. Semoga berguna.

Artikel ini masih melanjutkan bahasan artikel selanjutnya pada artikel permasalahan emoticon kotak komentar yang saat saya baca kembali ternyata cukup membuat bingung juga yach . Mungkin pembaca sempat bertanya - tanya apa sih maksudnya??. Bikin artikel kok gak jelas begini. Untuk itu saya bahas kembali dengan sejelas - jelasnya dengan mulai dari awal cara memasang emoticon kotak komentar diblogspot. Mungkin yang ini bisa memperjelas artikel permasalahan emoticon kotak komentar sebelumnya bagi sobat - sobat newbie sekalian.

Untuk memasang emoticon pada kolom komentar, pertama masuk pada halaman Edit HTML. Centang pada Expand Widget Templates. Saya kira sobat sudah mengetahui caranya iyaaa kaaann..hehe

Setelah itu cari kode </body> dan copy-paste kode warna merah di bawah ini di atas kode </body>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

:D

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

:p

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

:)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

:(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

:|

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

Selesai?? eits belum. Ini nih yang biasanya membuat masalah. Kebanyakan tutorial yang membahas cara pemasangan emoticon di atas kotak komentar berhenti sampai di sini saja. Padahal kalau sudah dicoba dan dilihat pada tampilan blog yang mencoba hal seperti di atas. Belum tentu semua menemui keberhasilan. Karena kalau berhenti di sini saja emoticon yang dimaksud untuk tampil di atas kotak komentar tidak akan muncul. Mungkin juga ini disebabkan berbedanya code template - template blog. Dan bila para blogger newbie menemui hal ini, tentu saja pasti timbul kepanikan dan mulai mengutak - atik kode yang memang sudah benar sebenarnya. Dan bila emoticon yang dimaksud muncul di atas kotak komentar eeh.. ternyata munculnya di tempat lain. Tentu ini sangat menyebalkan sekali. Begitulah perasaan saya saat mencoba dan terjadi seperti di atas. Menyebalkan sekali.

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

:D

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

:p

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

:)

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

:(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

:|

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

x(

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

Sudah banyak tutorial blogging ( Platform Blogspot ) menambahkan emoticon di kotak komentar. Tapi seringkali masih ada juga kesalahan dalam melakukan apa yang dituturkan dalam tutorial tersebut. Dibawah ini merupakan masalah yang saya temui saat pemasangan emoticon di kotak komentar. Mungkin sobat pernah mengalami seperti yang saya alami di bawah ini. Kalau pernah semoga coretan ini bisa membantu.