Nah yang membingungkan, gw masih sangat awam utk istilah2 HTML plus CSS... jadi asal kutak-katik aja... terutama saat mau ganti banner... duh! setangah mati deh!
Entah berapa kali instal ulang lantaran error atau gw bingung sendiri cara ngembaliin module yang terlanjur terhapus. Kemudian cara nyusun menu + content... yang satu ini sempat buat gw nyerah... tapi tetep penasaran.
Setelah beberapa hari ngaso, akhirnya gw tau trik menyusun menu + content justru di net, bukan dibuku. Tapi tetap aja gw males pelajari yang namanya code HTML plus CSS.
Sekarang masih sibuk nyusun menu n content...
Thank's atas masukan dari bbrp temen, terutama Deboy yang mata seninya tajem banget... hehehehe...
Tau kan apa yang dimaksud Duck Menu contohnya seperti gambar ini:
Cara buatnya sbb,
1. Ke Layout –> Edit HTMLNB: Jangan lupa Backup template dan Jangan klik expand widget templates
2. Masukkan kode dibawah ini tepat di atas kode ]]></b:skin>
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i73.photobucket.com/albums/ww306/gozhilaq/Menu-background-1.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i73.photobucket.com/albums/ww306/gozhilaq/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i73.photobucket.com/albums/ww306/gozhilaq/Menu-kanan.gif) no-repeat right top;
}
3. Kemudian masukkan kode dibawah ini diatas kode <div id=’content-wrapper’>
<ul class=’glossymenu’>
<li class=’current’><a href=’URL-Blog-Kamu’><b>Home</b></a></li>
<li><a href=’URL-Link-Tujuan1’><b>Judul-Tujuan1</b></a></li>
<li><a href=’URL-Link-Tujuan2’><b>Judul-Tujuan2</b></a></li>
<li><a href=’URL-Link-Tujuan3’><b>Judul-Tujuan3</b></a></li>
<li><a href=’URL-Link-Tujuan4’><b>Judul-Tujuan4</b></a></li>
<li><a href=’URL-Link-Tujuan5’><b>Judul-Tujuan5</b></a></li>
<li><a href=’URL-Link-Tujuan6’><b>Judul-Tujuan6</b></a></li>
<li><a href=’URL-Link-Tujuan7’><b>Judul-Tujuan7</b></a></li>
<li><a href=’URL-Link-Tujuan8’><b>Judul-Tujuan8</b></a></li>
</ul>
-Ganti kode berwarna Biru dengan URL Alamat Link Tujuan.
-Ganti kode berwarna Merah dengan Judul Dari Link Tujuan.
4. Save template ).. lihatlah hasilnya.
Ke Dashboard --> Layout --> Edit Html.
Selanjutnya, coba temukan baris kode yang sama dengan kode di bawah ini:
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
Kode yang berwarna hijau, merupakan ukuran lebar dari masing-masing komponen blog yang bisa dirubah sesuai keinginan. Jika ingin merubah float, padding, dll bisa dilakukan melalui cara ini agar modifikasi template sesuai keinginan.
Sebelum menyimpan template yang sudah kita rubah, jangan langsung di save. Lihat previewnya dulu, kalau kurang cocok, batalkan dengan "Clear Edits". Intinya... ukuran lebar/panjang kolom template bisa kita utak-atik sesuai dengan bentuk yang kita inginkan.
Setelah modifikasi, langkah selanjutnya adalah merubah Banner. Buat yang hobby grafis, gambar (yang sudah dibuat sesuai ukuran) tinggal di upload, yang gak hobby ya tinggal surf di net lalu install :D
Ke Dashboard --> Layout --.> Edit Html, centang "Expand Template Wigdet" (jangan lupa download dulu templatenya, untuk mencegah jika terjadi kesalahan). Lalu cari kode:
background :#ff0000;
Trus buang semua value (warna merah) yang ada hingga menjadi seperti ini :
background :;
Pada halaman Edit HTML, cari kode body {
kemudian letakan kode dibawah ini di atas kode body {
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)}
Selamat mencoba :)
Seminggu lalu gue kok jadi iseng design isi blog gue. Alasannya? ga ada... tiba-tiba kepengen aja. Ini salah satu penyakit gue dari dulu, selalu timbul ide saat isi kepala penuh. Gue sering meng-analogikan isi kepala seperti sebuah kotak yang setiap hari, setiap detik selalu terisi oleh banyak hal. Dan ketika volume-nya mulai pengap maka ia butuh 'udara'. Nah 'udara' ini gue peroleh dari gambar, bikin puisi, dan baca buku.
Awalnya gue bingung, gimana sih cara design blog? nyari-nyari template... yang cocok cuma 3, akhirnya yang kepilih cuma 1. Trus... abis ganti template apa lagi dong? kalo cuma begitu mending gak usah design deh... daripada pegel-pegelin tangan.
Ok. templatenya cocok, tapi ada yang kurang yaitu judul blog gue kurang tampil kalo dibandingin sama background template-nya. Jadi gue gambar judul blog ini dengan illustrator, photoshops... terus gue load buat kode html-nya. Sampai disini gue kebingungan lagi... mau diisi apa ya blog gue? soalnya gue udah keburu cape n keasyikan gambar trus jadi males nulis...hehehehe...
Ternyata gue menemukan keasyikan tersendiri di situ. Jadi tau gimana repotnya buat ngedesign sebuah blog dengan kode-kode html. Rasa kesel, seneng jadi satu waktu blog yang udah rapi-rapi dibuat jadi berantakan, ulang dari awal lagi... sampe akhirnya jadi seperti ini. Gue sadar banget... blog ini masih butuh banyak 'bebenah'... Jakarta, 3 Juli 2009
Ke Dashboard/dasbor --> Layout/tataletak -->Edit HTML"JANGAN CENTANG" Expand template widget.Saran gua, sebelum melakukan perubahan, kita harus mem-backup template dengan "download lengkap template", lalu cari kode dibawah ini:
body {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;text-align: center;color: $textColor;background : #000000font-family: arial,verdana,helvetica,tahoma,Sans-serif;font-size: 100%;width: 100%;}
Perhatikan warna merah, ganti dengan kode dibawah ini:background-image: url (http://ALAMAT URL GAMBAR);
Lalu tambahkan kode ini:background-attachment: fixed;
Contoh:body {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;text-align: center;color: $textColor;background-image: url (http://ALAMAT URL GAMBAR);background-attachment: fixed;font-family: arial,verdana,helvetica,tahoma,Sans-serif;font-size: 100%;width: 100%;}
Warna biru terdapat dua pilihan (pilih salah satu):- Fixed: agar letak gambar background tetap/statis- Scroll: agar gambar background ikut bergerak/bergeser saat kita men-Scroll mouse kita.
Jangan lupa klik tombol Save/simpan perubahan, lalu lihat hasilnya...
