KIta lanjutkan tulisan tentang header ,namun yang saya akan tulis sekarang yaitu membuat header dengan bantuan Stripe Generator 2.0. dan untuk eksekusinya saya mengunakan template dari Amanda Fazani di situsnya bloggerbuster.com.
karena secara keseluruhan aku suka dengan template ini, cuman warna headernya yang ngeping terlalu gerli bagi saya yang sangat macho.
Setelah mengalami pengeditan di headernya dan beberapa perubahan akhirnya yang ngeping itu menjadi seperti ini. lihat demo.
Jadi yang mau ikutan untuk ngerubah atau ngedit headernya silahkan donlot dulu Girl Web 2.0 Style Template di sini.
STRIPE GENERATOR 2.0
Setelah mendonlot template-nya buat blog baru dengan tata cara dan upacara seperti biasanya kita membuat blog. kemudian buka situsnya Stripe Generator 2.0.com, Setelah terbuka situsnya ganti settingan- nya semua dari mulai stripe size, spacing sampai dengan orientation seperti settingan gambar di bawah ini. ( bila kurang jelas tekan saja di atas gambarnya )
Keterangan Settingan :
Tripe Size : 8
Spacing : 1
Stripe Color (s) : 97080E
Background Style : yang bergaris kuning ( di tengah )
Gradient Height : 200
Background Color : 404040 dan A80F0F
Stripe Orientasi : yang bergaris kuning.
Setelah beres merubah semuanya kemudian tekan tombol tulisan download, dan simpan di hardisk.
Tambah Garis Sedikit
Sebenarnya dengan hasil settingan itu, gambarnya sudah cukup untuk di pasang, akan tetapi kita akan membuat dan menambah aksen garis sedikit di bawahnya dengan bantuan program Adobe Photoshop. (jika alergi dgn photoshop saya telah membuat hasilnya tenang saja ).
Sekarang file yang tadi di simpan buka di program photoshop.
Buat Kotak Kecil di bawahnya dengan Rectangular Marquee Tool dan beri warna Hitam . Kemudian simpan dengan format PNG Nilai Color 256. ( baca juga cara menyimpan gambar untuk web di sini )
hasilnya jadi seperti ini.
Tiba Saat-nya
Upload gambar di atas ke tempat kita biasa menyimpan gambar.( baca cara mengupload gambar di sini) . Setelah itu buka blog kita dan masuk ke dalam halaman pengeditan Template kemudian tekan tulisan Edit Html.
Cari kode di bawah ini.
top left;
margin:0;
color:$textcolor;
font:x-small Helvetica sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Ganti alamat gambar yang bertuliskan merah di atas yakni http://templates.bloggerbuster.com/girly_web_20/background.jpg dengan alamat gambar kita. ( baca cara mengupload gambar di sini)atau bagi yang biasa terima jadi bisa pake alamat gambar di bawah ini. http://jaloee.googlepages.com/stripe_9f.png
Setelah itu tekan tulisan SIMPAN PERUBAHAN. beres.
Oh kalau mau juga template perubahannya di donlot silahkan donlot saja di sini. ( akan tetapi perlu banyak di edit juga dink ) .
Untuk merubah Logo-nya cari kode di bawah ini. dan ganti alamat ulr-nya dengan alamat logo sendiri.
background: url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Header%20Stripe%
20Generator/Internet_Search.png) left center no-repeat;
padding: 0 0 0 80px;
margin: 0 auto;
Dan untuk menambah alamat url Tab Menu-nya cari kode di bawah ini. ( baca cara cepat menemukan kode html )
<a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration:
none;'>Home</a>
<!-- About link add your link here -->
<a class='nav-section' href='(alamat url )' style='color: #fff; text-decoration: none;'>About</a>
<!-- Contact link add your link here -->
<a class='nav-section' href='( alamat url )' style='color: #fff; text-decoration:
none;'>Contact</a></div>
Ganti Tulisan warnah merah di atas dengan link alamat yang kamu inginkan. Sedangkan keterangan yang lainnya baca di bloggerbuster.
No comments:
Post a Comment