Membuat Header blog dua kolom.
 |
Seperti kita ketahui,diantara element sebuah blog atau web diantaranya adalah HEADER.
Header tempatnya diatas Main atau Posting Blog.
Header sebuah Blog atau Web bervariasi,tergantung kesukaan blogger itu sendiri.Ada yg satu header,dua,atau tiga.
Disini saya akan membuat Header dengan dua kolom,dimana fungsinya sebagai judul blog dan adsense.
Okk...
Yg pertama dilakukan adalah login ke blog kita sendiri.kemudian setelah login kita masuk pada menu template sebelah kiri.
Klik menu template lalu masuk pada menu edit html.
Sesudah kita masuk pada edit html masukkan kode kode ini di bawah
<![CDATA[
#header-wrapper{width:100%;display:block;border-bottom:2px solid#787777;height:160px;}#header{margin:10px auto;padding:10px;float:left;width:400px;}#header h1 {font-size:40px;font-family:"Rye";color:#787777;text-shadow: 1px 0 2px #fa881e;margin-top:-5px;}#header h1:hover{text-shadow:1px 0 2px #787777;}#header .description{font-family:"Lemon";font-size:14px;color:#787777;}#header2{width:500px;height:130px;float:right;display:block;border:1px solid#3b5998;margin-right:10px;}#header2 .widget-content{margin-top:-20px;}#header2 .title{font-size:18px;font-family:"Pattaya";color:#78777;text-decoration:underline;display:inline-block;padding:0 0 5px 5px}]]>
Kalau sudah, lanjut ke deklarasi dibawah <body> ,
untuk yg pengen headernya seluruh kolom mengikuti ukuran layar monitor,atau bisa juga dibawah <div id='outer-wrapper'> untuk yg pengen mengikuti ukuran lebar template.
Masukkan deklarasi ini,
<div id='header-wrapper'><b:section class='header' id='header' maxwidget='1' preferred='no'><b:widget id='Header1' locked='true' title='Puisi Yusrian (Header)' type='Header' visible='true'/></b:section><b:section class='header' id='header2' preferred='yes'><b:widget id='HTML5' locked='true' title='Advertise' type='HTML' visible='true'/></b:section></div>
Kemudian save template.
Taraaa.... Jadilah header dengan dua kolom,satu berfungsi sebagai judul blog dan satunya sebagai tempat menaruh adsense atau iklan....
Nah sobat blogger,semoga tutorial ini bermanfaat.
Selamat berkreasi dan salam sukses.
Terimakasih
Terimah kasih artikel mudah bgt q pahamin jelas padat banget aku suka bgt
ReplyDeleteSelamat datang sobblog Firan,,makasih atas kunjungannya...salam silaturrahmi yaa...
ReplyDelete