Penting!
Template ini gratis, boleh diedit, dan disebar luaskan sesuai keperluan, dengan catatan tanpa merubah credit.
Karena blog yang lama sudah tidak terpakai, sayang kalau dibuang begiu saja. Kebetulan templatenya lumayan. Nama templatenya Blunique. Gabungan dari kata "Blue" dan "Unique". Memang agak maksa sih... Template minimalis dengan warna dominan biru tua. Konsep desain sederhana yang ditambah beberapa efek CSS3 dan sedikit resource gambar, sehingga terlihat menarik walaupun dengan size yang kecil. Ini template buatan saya saat masih awal belajar desain blog, jadi masih rada jelek.
Template ini dilengkapi dengan: Menu navigasi yang unik; Efek slide pada preview posting di halaman utama; Efek emboss yang menggunakan pengaturan CSS border (sidebar) & trik gambar 1x1 px (footer); Serta threaded system comment dengan admin highlight. Didesain untuk blog yang mengedepankan kualitas konten, karena itu desainnnya dikembalikan ke fungsi semula (header, navigasi, sidebar, dan footer) tanpa menambah fasilitas yang kurang perlu.
Oke, ini dia :
Header dan Menu Navigasi
Header dibuat dengan efek 3D menggunakan CSS3, begitu juga dengan Description/Subheader-nya. Kemudian Menu Navigasi terdapat efek sliding saat di-hover, yang menggunakan efek CSS3 Transition, jadi ketika cursor berada diatas menu, menu akan bergeser seperti pada gambar. Keren kan :D Kekurangannya, nama menu nggak boleh lebih dari 100px. Jadi nama menu harus dibuat sesingkat mungkin. Tiap huruf 13px, tinggal dikalikan.
Untuk mengedit Menu Navigasi, cari kode berikut
<div id='menu'>
Ganti kata yang berwarna merah sesuai dengan kebutuhan. Jika belum terlalu mahir dengan HTML/CSS, akan lebih baik bila menunya jangan ditambah karena bisa overflow.
<ul>
<li><a href="/"><span>Halaman Utama</span>HOME</a></li>
<li><a href="/"><span>Tentang</span>ABOUT</a></li>
<li><a href="/"><span>Hubungi</span>CONTACT</a></li>
<li><a href="/"><span>Isi Blog</span>CONTENT</a></li>
<li><a href="/"><span>Menu Lain</span>OTHERS</a></li>
</ul>
<li><a href="/"><span>Halaman Utama</span>HOME</a></li>
<li><a href="/"><span>Tentang</span>ABOUT</a></li>
<li><a href="/"><span>Hubungi</span>CONTACT</a></li>
<li><a href="/"><span>Isi Blog</span>CONTENT</a></li>
<li><a href="/"><span>Menu Lain</span>OTHERS</a></li>
</ul>
Content Wrapper
Disini adalah bagian posting dan sidebar. Untuk posting di halaman utama terdapat tombol readmore (seperti terlihat pada gambar), thumbnail (gambar pertama dalam posting), dan terdapat comment-bubble (jumlah komentar). Juga ada efek bergeser saat di-hover (Cuma mempercantik sih sebenernya, gak terlalu fungsi banget :P ).
Untuk Sidebar, diberi sedikit sentuhan efek "emboss" dengan memanfaatkan pengaturan CSS Border. Simpel tapi tetep keren :)
Disini juga dilengkapi dengan quote-box. Bisa digunakan untuk kutipan teks atau barisan kode.
<div class='code'> ...isi kode... </div>
Dan ini untuk subjudul
<span class='ti'>....</span>
"ti maksudnya adalah title, biar pendek saja. Bisa diganti css-nya jadi "subjudul" dan sebagainya. Soalnya males upload lagi. Hehe.Komentar
Seperti yang bisa dilihat pada gambar, disini sudah menggunakan Threaded Comment System. Dan juga ditambah Admin Highlight. Jadi komentar admin akan terlihat berbeda dari komentar pengunjung.
Footer
Untuk Footer, tidak ada yang spesial, 3 kolom dengan garis pinggir menggunakan 2 gambar 1x1 pixel untuk menciptakan kesan emboss.
Pengaturan Format
Agar sesuai dengan desain defaultnya, silahkan atur format blog sesuai dengan yang terlihat pada gambar berikut:
- - - - -
</zep>
