Animasi jQuery Untuk Navbar Blogger

“Blogger meluncurkan navbar baru!”

Sepertinya kita (pengguna blogger) telah mengetahui hal tersebut. Blogger telah menambahkan 2 navbar yang bergaya transparan. Kebanyakan yang telah mereview fitur terbaru ini beranggapan bahwa blogger melakukan hal tersebut agar navbar yang disediakan menjadi lebih diminati karena dapat tampil lebih matching dengan template yang digunakan. Tetapi selama saya menyambangi blog-blog sahabat (pengguna blogspot) kebanyakan dari mereka memilih menghilangkan navbar termasuk saya sendiri.

Saat ini, banyak sekali blog yang membahas bagaimana memodifikasi navbar blogger agar menjadi lebih menarik misalnya navbar auto-hide agar navbar tidak mengganggu penampilan blog.

Kita dapat membuat semacam auto-hide pada navbar menggunakan jQuery. Metode ini memanfaatkan JavaScript untuk membuat efek transparansi pada navbar. Kita dapat mengatur transparansi navbar mulai dari 0% (normal) hingga 100% (tidak kelihatan) atau dengan kata lain Navbar akan kelihatan jika kita meletakkan pointer di atasnya.

Caranya sangat mudah yaitu tinggal copy & paste kode di bawah ini dan letakkan sebelum tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.1);
});
});
</script>

Nah, pada kode JavaScript di atas, dapat kita lihat huruf yang berwarna merah (0.1) berarti transparansi navbar sebanyak 90%. Jika menginginkan navbar tidak tampak samasekali, gantilah nilai 0.1 menjadi 0.0.
Jika menginginkan navbar tetap transparan saat mouseover, ubahlah nilai pada angka yang berwarna biru (1.0) menjadi 0,75 (untuk transparansi 25%).

Sangat mudah sekali bukan, selamat mencoba...

§ Live Demo

Baca & komentar..

Tipografi Untuk Blog

Sekarang ini banyak sekali website terutama blog yang mengandalkan tipografi sebagai desain utama. Hal ini dapat dijumpai pada blog-blog dengan template yang relatif sederhana yang sekarang lagi trend di era web2.0. Terdapat beberapa teori tentang penggunaan tipografi dalam dunia web desain mulai dari penggunaan font, ukuran font, warna font, spasi, dan lain-lain yang tujuannya antara lain agar pengunjung merasa nyaman saat membaca konten atau dengan kata lain menjadi lebih enak dibaca.

Mungkin selama ini kita kurang memperhatikan hal tersebut, Pengalaman saya sendiri saat saya blogwalking di beberapa blog (yang umumnya menggunakan template buatan sendiri) masih kurang memperhatikan masalah tipografi ini. Coba kita bayangkan, membaca tulisan berwarna biru tua (#0000EE) dengan background berwarna hitam (#000) dengan font Tahoma berukuran 12 pixel, Kalau saya pribadi jelas malas membacanya karena membuat mata sakit.

Lorem Ipsum Dolar Sit Amet...

Coba bandingkan saat kita membaca tulisan dengan warna latar yang cukup kontras dengan warna font (biasanya latar berwarna cerah) dengan ukuran font antara 12-14 pixel, dengan letter space yang tidak terlalu renggang dan tidak terlalu rapat, pasti kita akan lebih betah membaca artikel dalam blog tersebut. Imbasnya, komentar ngawur bernada spam bisa berkurang. Hal ini pula yang (menurut saya) template-template blog yang minimalis semacam Simpla, BlogTXT, white as milk, dll. bisa menjadi template yang terkenal dan terkesan professional. Kita tahu bahwa template-template tersebut tidak mengandalkan gambar-gambar dan hanya mengandalkan desain berbasis web tipografi.

Lorem Ipsum Dolar Sit Amet...

Sekarang saatnya berbicara statistik, menurut smashingmagazine.com terdapat beberapa poin penting dalam web design typography antara lain adalah:

1. Font yang digunakan
2. Background yang digunakan dan warna font
3. Ukuran font
4. Spasi atar baris (line height)

Berikut ini adalah data statistik yang diperoleh yaitu:

1. Font yang digunakan

• 60% website menggunakan sans-serif (font tidak berkaki) untuk headline semacam Arial, Verdana, Lucida Grande, dan Helvetica.
• Hanya 34% website menggunakan font tipe serif sebagai font konten
• Font tipe serif yang paling populer untuk headline adalah georgia (28%) dan Baskerville (4%) (blog ini menggunakan Georgia)
• Font tipe serif yang paling populer untuk konten adalah georgia (32%) dan Times New Roman (4%)
• Font tipe sans-serif yang paling populer untuk headline adalah Arial (28%) Helvetica (20%) and Verdana (8%).
• Font tipe sans-serif yang paling populer untuk konten adalah Arial (28%), Verdana (20%) and Lucida Grande (10%). (blog ini menggunakan Georgia)

2. Background yang digunakan

Kita dapat menggunakan backround berwarna terang atau gelap. Sebagian besar website dengan konten tulisan akan memilih warna terang dengan tulisan berwarna gelap. Beberapa website memilih backround gelap kemungkinan karena alasan konten yang ditampilkan. (misal: postsecret). Yang perlu diperhatikan adalah jangan sampai warna background menyebabkan tulisan susah untuk dibaca. Contohnya adalah menggunakan warna hitam(#000) untuk background dan warna abu-abau (#222) untuk font. Hal ini jelas membuat tulisan sukar dibaca. Selain itu hindarilah kontras yang berlebih. Misalnya font berwarna hitam aseli (#000) dipadu dengan background putih alami (#FFF) hal ini juga kurang baik. Banyak desainer yang memilih menurunkan kontras antara background dengan kontent. Misalnya menggunakan background putih (#FFF) dan font abu-abu (#222, #333, #444 dll).


3. Ukuran font rata-rata

Beberapa ukuran yang populer digunakan unutk headline berkisar antara 18 hingga 29 pixel, dengan 18-20px dan 24-26px adalah yang paling populer.
Ukuran yang sering digunakan untuk font konten berkisar antara 12-14 pixel. yang paling populer (38%) adalah ukuran 13px.

Terdapat beberapa studi yang menyebutkan bahwa perbandingan antara font hedline dan font body (konten) merupakan hal yang perlu diperhatikan. Perbandingan raa-rata yang baik untuk digunakan adalah antara ukuran headline dan konten adalah 1.96. Karena saya menggunakan pixel (bukan ems) dalam satuan ukuran, maka saya mengasumsikan perbandingannya adalah 2.

4. Spasi antar baris (line-height)

• Perbandingan line height ÷ ukuran fon konten =1.48/1.5
• line length (pixels) ÷ line height (pixels) = 27.8
• Spasi anttar paragraf ÷ line height (pixels) = 0.754
• space between paragraphs (pixels) ÷ line height (pixels) = 0.754

Begitulah kira-kira beberapa aturan yang biasa diterapkan dalam membuat desain web berbasis tipografi. Saya rasa informasi ini masih sangat terbatas dan saya sarankan anda untuk mencari lebih banyak informasi tentang tipografi dan desain web (blog) agar perkembangan dunia blog di Indonesia tidak tertinggal dengan negara lain. Sekedar masukan dari saya, perlu kita ingat bahwa blog adalah sesuatu yang unik yang (bisa dikatakan) merepresentasikan pemiliknya baik dari desain maupun konten yang terdapat di dalamnya. Kita mungkin dapat dengan mudah membedakan blog milik orang yang menyukai musik rock dan blog milik seorang penggila dangdut. Karena itu berkreasilah dengan bebas untuk mengekspresikan diri melalui blog. Saya menampilkan data di atas hanya sekedar ingin berbagi ilmu pengetahuna tentang dunia web desain dan tidak berarti saya menganggap blog yang bagus adalah yang mengikuti 'pakem' tersebut. Dan jika ada masukan yang membangun akan saya terima dengan senang hati.....

Gambar header diambil dari speckyboy.com

Baca & komentar..

Border Radius

Adakalanya kita menginginkan sebuah desain layout yang terkesan 'smooth' atau halus. Salah satu cara yang digunakan adalah menggunakan efek rounded corner atau border radius. Efek rounded corner dapat dimplementasikan menggunakan jQuery atau CSS3. Kali ini saya akan sedikit membahas tentang penggunaan CSS3 untuk membuat efek rounded corner pada elemen web.

Ini adalah contoh penerapan efek border-radius. Efek ini dapat dilihat jika anda menggunakan browser Mozilla Firefox, Google Chrome, atau Safari 3

Untuk membuat efek seperti contoh di atas caranya sangat mudah yaitu tinggal menambahkan css sebagai berikut:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Nah berikut ini adalah cara jika kita hanya menginginkan efek rounded pada salah satu sisi saja yaitu:

-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;

-moz-border-radius-topleft: 10px;
-webkit-border-bottom-right-radius: 10px;

Sangat mudah sekali bukan? Yang perlu kita ingat adalah tidak semua browser bisa menerjemahkan kode tersebut, misalnya IE6. saya telah mengujinya dengan Mozilla Firefox 3, Google Crome 2.0, dan Safari 4.


sumber: http://css3.info

Baca & komentar..

Hilangkan bintik-bintik pada Firefox

Dalam membuat desain web, salah satu hal yang kita perhatikan adalah penggunaan style untuk hyperlink. Secara default pada kebanyakan browser, hyperlink ditampilkan dengan warna biru dengan dekorasi berupa garis bawah. Biasanya, CSS digunakan untuk membuat agar tampilan hyperlink terlihat lebih bagus dan 'matching' dengan template blog. Seperti dengan mengilangkan garis bawah, mengubah warna saat rollover dan sebagainya.

Tetapi, adakalanya setelah kita mengubah penampilan hyperlink sesuai dengan keinginan, kita sering dibuat kesal dengan munculnya garis tepi berwujud titik-titik pada saat kita mengklik hyperlink tersebut. Secara, efek ini terjadi pada browser Modzilla Firefox yang notabene sangat populer dikalangan netter di dunia.

Nah, jika kita menganggap bintik-bintik garis tepi yang mengelilingi hyperlink adalah sesuatu yang cukup mengganggu dan harus dilenyapkan, caranya sangat mudah yaitu, tambahkan sedikit kode CSS pada atribut hyperlink seperti berikut ini:

1. a {outline:none;}

a {outline:none;}

atau jika masih kurang mantab,sekalian saja ditulis seperti ini
hehe...

1. a:link {
2. outline:none;
3. }
4. a:visited {
5. outline:none;
6. }
7. a:hover {
8. outline:none;
9. }
10. a:active {
11. outline:none;
12. }

a:link {<br /> outline:none;<br />}<br />a:visited {<br /> outline:none;<br />}<br />a:hover {<br /> outline:none;<br />}<br />a:active {<br /> outline:none;<br />}

Dan bintik-bintik itu hilang untuk selamanya....

Baca & komentar..

Tak Penting

Ah.. begitu hobi dan rajinnya aku mengupdate template (lebih rajin daripada posting heheh..) mengakibatkan beberapa postingan terdahulu yang bercerita tentang template yang kugunakan menjadi tidak berlaku lagi...

(1) (2) ZzZ....

dan ini tetaplah sebuah blog!

Baca & komentar..