Halo yozers,
Beberapa waktu lalu ada yang request "Cara Membuat Kotak Di Bawah Header Ala Go Yozers"
Nah,mumpung saya lagi ada waktu senggang,langsung saya post aja deh. :D
Gambar di atas adalah contoh "KOTAK DI BAWAH HEADER"
Cara membuatnya cuma membutuhkan CSS dan HTML aja kok,
Dan ga terlalu susah. ;)
Yuk,tanpa basa basi lagi,langsung aja kita bahas inti artikel ini.
1. Buka Dasbor Blogger
2. Pergi ke "Template->Edit HTML"
3. Cari kode ]]></b:skin> ( Gunakan Ctrl+F atau F3 Untuk Mempermudah Pencarian ).
4. Copy kode CSS di bawah ini,
CSS :
.Yzkotakheader{
width: 990px;
height: 275px;
float: left;
margin-left: 212px;
margin-top: 10px;
border: 5px inset #fff;
background: #111
}
5. Paste kode CSS di atas,tepat di atas kode ]]></b:skin> .
6. Lalu,cari kode header-wrapper ( Gunakan Ctrl+F atau F3 Untuk Mempermudah Pencarian ).
7. Copy kode HTML di bawah ini,
HTML :
<div class='Yzkotakheader'>
8. Paste kode HTML di atas tepat di bawah kode header-wrapper .
9. Selesai. :)
CSS dan HTML di atas bisa kalian edit lagi kok,
Tetapi ini tutorial "Cara Membuat Kotak Di Bawah Header Loh Ya",
Jadi bukan tutorial "Cara Membuat Element Widget Di Bawah Header" ,
Jadi nanti yang muncul di bawah header blog kalian cuma sebuah kotak yang entah kalian gunakan sebagai apa,Bisa di jadikan hiasan untuk blog kalian,kalian bisa meletakkan gambar sebagai background dari kotak tersebut,
Mungkin hanya ini yang bisa saya sampaikan untuk post kali ini,
Sekian,
Terimakasih.
Sumber http://yo-zers.blogspot.com/2013/10/cara-membuat-kotak-di-bawah-header.html
Kotak Di Bawah Header V.1
9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Anda baru saja membaca artikel yang berkategori Tutorial Blog
dengan judul Kotak Di Bawah Header V.1. Anda bisa bookmark halaman ini dengan URL http://jamesb-s.blogspot.com/2013/10/kotak-di-bawah-header-v1.html. Terima kasih!
Ditulis oleh:
Unknown - Kamis, 03 Oktober 2013
0 komentar:
Posting Komentar