Cara membuat menu navigasi Horizontal Dengan kotak pencari di blog

Kemarin ada sobat blogger Yang bertanya .

Kak..gimana caranya buat pages kayax web kakak seperti home,daftar isi dll. tlong pencerahannya

Nah oleh pertanyaan dari sobat blogger kita ini saya tertarik untuk memposting tutorial ini.

Seperti yang kita lihat sudah banyak blogger yang menggunakan menu navigasi horizontal , yang sudah disediakan oleh masing-masing template , tapi ada juga template baru yang belum menyediakan fasilitas ini . Bagi yang menggunakan template baru yang sudah menyediakan fasilitas ini . sobat hanya perlu mengisi link-link yang sudah disediakan. Tetapi bagi yang tidak mempunyai fasilitas ini , sobat harus membuatnya .

Tutorial kali ini membahas tentang cara membuat menu navigasi horizontal dengan kota mesin pencari. Menarik kan mendengar tutorial ini ada kotak mesin pencarinya . Nah apakah sobat ingin mencobanya ...? kalau mau ikuti langkah-langkah berikut ini.

Cara membuat menu navigasi Horizontal Dengan kotak pencari di blog.

1.Login ke blogger.
2.Dihalaman Dasbor klik Rancangan.
3.klik lagi Edit Html.
4.Centang kotak Expand Template Widget.
5.Sobat cari kode ]]></b:skin>. dianjurkan menggunakan Control F . hhe kayak dokter nih ...
6.Letakkan kode dibawah ini di atas kode ]]></b:skin>.

       /*-- (Nav & Search Box) --*/

        #nav{

        background: #1c426d; /* Warna backgroud Kotak Navigasi */

        height:31px; /* Tinggi Kotak Navigasi */

        padding:0px;

        margin-bottom:5px

        }

        #nav-left{

        float:left;

        display:inline;

        width:580px

        }

        #nav-right{

        float:right;

        display:inline;

        width:275px;

        padding:1px 0px 0px 0px;

        }

        #nav ul{

        position:relative;

        overflow:hidden;

        padding-left:5px;

        padding-top:1px;

        margin:0;

        font:1.1em /* Ukuran font tab navigasi */

        Arial,Helvetica,sans-serif;

        font-weight: bold;

        }

        #nav ul li{

        float:left;

        list-style:none

        }

        #nav ul li a, #nav ul li a:visited{

        display:block;

        color:#ffffff; /* Warna teks pada kotak navigasi */

        margin:0 8px;

        padding:5px 7px

        }

        #nav ul li a:hover{

        color:#ffffff;

        background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */

        margin:0 8px;

        padding:5px 7px

        }

        #nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}

        #searchform {

        margin: 0;

        padding: 0;

        overflow: hidden;

        display: inline;

        }

        #searchbox {

        background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA5HJAmFNXpuoqbvEavB5M60T9gJ_JWiVrNMxFVv389fQaExmPi85sLXdQfalmDuElUNN5_psVV8EiPDsMr2yU6Ufd3EaednC_ZVj-BEpyubfT3iWsRY6E4KyuzCRylvT5fe5cwJOv1-k9/) no-repeat left top;

        width: 180px;

        height: 16px;

        color: #202020;

        font-size: 12px;

        font-family:Verdana,Arial,Helvetica,sans-serif;

        font-weight: normal;

        margin: 2px 0px 0px 15px;

        padding: 4px 0px 3px 25px;

        border-top: 1px solid #DDD;

        border-right: 1px solid #666;

        border-left: 1px solid #DDD;

        border-bottom: 1px solid #666;

        display: inline;

        #searchbutton {

        background: #1c426d; /* Warna background tombol pencari */

        color: #FFF; /* Warna teks tombol pencari */

        font-size: 11px;

        font-family:Verdana,Arial,Helvetica,sans-serif;

        margin: 0px;

        padding: 3px 0px 3px 2px;

        font-weight: bold;

        border-top: 1px solid #DDD;

        border-right: 1px solid #666;

        border-left: 1px solid #DDD;

        border-bottom: 1px solid #666;

        }

Tulisan yang berwarna orange , adalah keterangan dari masing-masing kodenya , silahkan sobat ubah suaikan dengan keinginan sobat .

7.Kemudian sobat cari kode yang mirip seperti ini .

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>

</b:section>

<div style='clear: both'/>

</div>

Yang perlu sobat perhatikan adalah kode yang kedua dari bawah, yaitu.

<div style='clear: both'/>

</div>

8.Kalau sudah ketemu masukkan kode berikut ini dibawahnya.

<div id='nav'>

<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<div class='widget-content'>

<b:if cond='data:title'/>

<div id='nav-left'>

<ul>

<li><a href='/'>Home</a></li>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

</div>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

<div id='nav-right'>

<form action='/search' id='searchform' method='get' style='display:inline;'>

<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>

<input id='searchbutton' type='submit' value='GO'/>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

Sehinggan kodenya menjadi seperti ini .

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>

</b:section>

<div style='clear: both'/>

</div>
<div id='nav'>

<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<div class='widget-content'>

<b:if cond='data:title'/>

<div id='nav-left'>

<ul>

<li><a href='/'>Home</a></li>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

</div>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

<div id='nav-right'>

<form action='/search' id='searchform' method='get' style='display:inline;'>

<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>

<input id='searchbutton' type='submit' value='GO'/>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

Keterangan .

Jika sobat tidk menginginkan kotak mesin pencarinya , tinggal hapus kode yang bercetak tebal, beres.
Untuk mengisi menunya , pergi ke elemen laman isikan link yang sobat inginkan di menu tob tabs.

Sumber: http://yudatfort814.blogspot.com/2011/06/cara-membuat-menu-navigasi-horizontal_22.html#ixzz1QR5t6M7r

AlfaGakure | AlfaKage

Sunday, June 26, 2011

Cara membuat menu navigasi Horizontal Dengan kotak pencari di blog

1 komentar:

post comment not spam !!!