Puisi Yusrian

Membuat menu Navigasi di atas Header.

Sebelum mengedit template,ada baiknya anda backup dulu template anda,caranya copy seluruh isi kode template kemudian buat berkas baru pada notepad ++,untuk instal notepad ++ disini.Download Notepad++

Okk kita mulai ya,bagaimana cara membuat menu navigasi.

Setelah masuk pada edit html silahkan copy css dibawah ini dan letakkan di dibawah <![CDATA[

#nav{width:100%;height:40px;background:#787777;color:#efefef;font-family:"Ubuntu";font-size:19px;}

#nav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #787777;}

#nav li {float: left;}

#nav li a {display: block;color: white;text-align: center;padding: 8px 10px;text-decoration: none;}

#nav li a:hover {background: #646362;text-shadow:1px 0px 2px #fa881e;color:white;}

Okk gimna...Sudah belum..
Kalau sudah,kita masuk pada tahap berikutnya yaitu memanggil kode tersebut...Ingat !!! gk perlu teriak teriak manggilnya yaa...

Masukkan kode ini di atas <div id='header'>,itu kalau mau mengikuti lebar header,
kalau pengen membuat selebar layar,masukkan diatas kode <div id='outer-wrapper'>,

Ini kodenya:

<div id='nav'>

<left><nav><ul>

<li><a href='/' title='Beranda'>Beranda</a></li>

<li><a href='/p/isi-blog.html' title='Isi Blog'>Isi Blog</a></li>

<li><a href='/search/label/Puisiku' title='Puisiku'>Puisiku</a></li>

<li><a href='/p/blog-page.html' title='Template Ini'>Template Ini</a></li>

</ul></nav></left>

<right>

<form action=' ' id='searchblog' method='get'>

<input Style='height:38px;width:250px;margin-top:1px;margin-right:-4px;font-size:18px;' name='q' placeholder='Cari Artikel Disini...' type='text'/>

<input id='search-button-top' style='width:110px;height:38px;background:#fcc38d;color:#fff;font-size:18px;' type='submit' value='Pencarian'/></form>

</right>

</div>

<div style='clear'/>

Saya membuat navigasi menu itu setinggi 40px dan diatas header.Lebarnya mengikuti header.Seperti menu navigasi yg saya punya. Silahkan baca tutorial membuat header 2 kolom punya saya.

Sederhana sekali bukan??.
Itulah yg bisa saya suguhkan buat anda sekedar berbagi apa yg saya bisa buat dan saya berharap bisa bermanfaat.

Saya bukan seorang pakar pembuat template,saya hanya suka mencoba dan mempraktekkan pengetahuan tentang blog dan koding.

Selamat mencoba dan salam sukses.

Selengkapnya

TUTORIAL BLOG
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

Selengkapnya