Fixed Header Blog dengan Box Search Engine


Dalam tutorial kali ini saya akan membahas tentang cara membuat Fixed Header Blog dengan Box Search Engine, Sebenarnya kegunaanya adalah sebagai search engine di blog namun widget ini di lengkapi dengan gambar logo yang anda bisa ganti sendiri, dan di bawah ini adalah screenshotnya:


Berikut Cara membuat Banner Iklan 125x125 di Blog:

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>.

    /* Floating Menu
    ----------------------------------------------- */
    #top-menuwrapper{background-color: #fff;border-top:3px solid #F4661A;box-shadow: 0px 1px 2px rgba(0,0,0,0.3);height:76px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:3px solid #F4661A}
    #top-menuwrap{width:1100px;margin:0 auto;}
    #top-menu{width:100%}
    #top-menu ul{list-style: none;margin-right:250px}
    #top-menu ul li{float:right}
    #top-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:30px;text-transform:uppercase;display:block;text-decoration:none;}
    #top-menu ul li a:hover{color:#555;}
    .logo{float:left;background:#fff;}
    .logo img{margin-top:-16px;}

    /* Kotak Pencarian
    ----------------------------------------------- */
    #search-wrapper{float:right;padding-right:210px;}
    #search-form-feed {
    width:210px; /* lebar kotak penelusuran */
    position:fixed;
    top:26px;
    margin:0 0 10px;
    padding:0 0;
    font:normal normal 11px Arial,Sans-Serif;
    color:#333;
    z-index:9999;
    }
    #feed-q-input {
    display:block;
    width:70%;
    height:16px;
    border:1px solid #ccc;
    background-color:white;
    padding:5px 5px;
    font:normal normal 13px Tahoma,Arial,Sans-Serif;
    color:#ccc;
    margin:0 0;
    }
    #feed-q-input:focus {
    border-color:#F4661A;
    color:#333;
    outline:none;
    }
    #sbutt {
    background: url(http://4.bp.blogspot.com/-CXDdSDF3B3I/UfOBGSddL9I/AAAAAAAABRQ/I9-xzsypT8o/s1600/search.png)no-repeat;
    color:none;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    padding: 1px;
    margin: 0px;
    border:none;
    width:58px;
    height:28px;
    cursor: pointer;
    margin-top:-28px;
    float:right;
    }
4. Sekarang Cari Kode <body> , dan letakan kode dibawah ini tepat dibawah <body>
    <div id='top-menuwrap'>
    <div id='search-wrapper'>
    <div id='search-form-feed'>
    <form action='/search' onsubmit='return updateScript();'>
    <input id='feed-q-input' name='q' onfocus='this.value=&apos;&apos;;' onkeyup='resetField();' type='text' value='Cari di sini...'/><input class='btnSearch' id='sbutt' type='submit' value=''/>
    </div></div></div>
5. Sekarang Cari Kode </head> dan letakan kode ini di bawah kode </head>


    <div id='top-menuwrapper'>
    <div id='top-menuwrap'>
    <div id='top-menu'>
    <div class='logo'>
    <a href='Url-Blog-Anda' target='_blank'><img alt='Home' border='0' src='http://3.bp.blogspot.com/-w028qj0XIEQ/UfOACkbC_RI/AAAAAAAABRE/58RV2Rpfdc4/s1600/henrylogov2.png' style='padding:0px;'/></a>
    </div>
    <ul>
    </ul>
    </div>
    </div>
    </div>

Catatan:
Ganti Kode Warna #F4661A dengan kode warna yang anda inginkan, untuk melihat pilihan warna klik disini

Ganti Kode Url-Blog-Anda dengan Alamat Url blog anda!

Ganti Kode http://3.bp.blogspot.com/-w028qj0XIEQ/UfOACkbC_RI/AAAAAAAABRE/58RV2Rpfdc4/s1600/henrylogov2.png dengan kode gambar logo yang anda inginkan!
 
Langkah-langkah di atas sudah saya coba sendiri dan berhasil. Bila dalam prosesnya anda mengalami kegagalan, mungkin itu dikarenakan ada hal di atas yang anda lewatkan. Demikian update saya kali ini mengenai Fixed Header Blog dengan Box Search Engine. Semoga bermanfaat !
Previous
Next Post »

19 komentar

Write komentar
July 31, 2013 at 9:59 PM delete

Terimakasih Mas @_Henry Dwi.s
Artikelnya yang Sangat Membantu Sekali Mas. Sukses selalu.

Reply
avatar
Henry Dwi.s
AUTHOR
August 1, 2013 at 6:50 PM delete

Sama-sama dan Terimakasih Kembali mas^_^

Reply
avatar
Anonymous
AUTHOR
August 3, 2013 at 10:25 AM delete

bagus juga templatenya, aku minta templatenya dong!

Reply
avatar
Adi evo
AUTHOR
September 5, 2013 at 5:28 PM delete

mas kenapa quick SEARCH tidak berfungsi??

Reply
avatar
Henry Dwi.s
AUTHOR
September 5, 2013 at 9:39 PM delete

mungkin ada script yang ketinggalan sob...

Reply
avatar
Adi evo
AUTHOR
September 6, 2013 at 7:34 AM delete

ok masalah dah fix.. thanks Admin share this tutorial. :)

Reply
avatar
October 3, 2013 at 3:51 PM delete

bang mau nanya.. saya sangat membutuhkan jawabannya... gini abang, kalau kita mau membuat menu tambahan, misalnya home, about dan kategory dan lainnya dengan dropdown pada navigasi tersebut ditambah kotak pencarian yang seperti ini, karena kalau yang kotak pencarian lain saya gak suka.. itu gimana yang??? tapi tetap fixed... tolong abang ya... kalau bisa di balas ke blog saya... soalnya saya sangat membutuhkan jawabannya...http://sikkahoder.blogspot.com/

Reply
avatar
Henry Dwi.s
AUTHOR
October 3, 2013 at 7:31 PM delete

waduh itu sih saya harus kotak katik kode HTML tapi saya lagi sibuk nih jadi blom bisa bantu nih, thank's ya kunjunganya mungkin saya akan buat postingan tutorialnya tapi blom tau nih bisa kapan :D

Reply
avatar
D'allsta
AUTHOR
October 14, 2013 at 1:39 PM delete

mas.. minta template blog punyamu dongg

Reply
avatar
Henry Dwi.s
AUTHOR
October 15, 2013 at 9:12 PM delete

blom bisa bro.. kan masih ane pake

Reply
avatar
adi zeverpen
AUTHOR
November 7, 2013 at 4:38 AM delete

cara ganti tinggi kotak searchnya gimana sih gan uda sy kotak atik belum ktemu juga codenya tolongbantuannya gan

Reply
avatar
Henry Dwi.s
AUTHOR
November 7, 2013 at 7:36 PM delete

cari kode [quote]height:16px;[/quote] lalu di ganti 16 dengan angka yang anda inginkan

Reply
avatar
adi zeverpen
AUTHOR
November 9, 2013 at 5:03 PM delete

gan file js nya uda kebened tuh gan tolong di ganti gan, lihat blognya agan jadi muncul kotak buat masukin username sama pasword.....
blog sy juga ikutan begitu gara2 file js search boxnya di baned....

Reply
avatar
Henry Dwi.s
AUTHOR
November 10, 2013 at 11:19 AM delete

kalau kebened ane gak tau ngatasinya gan, soalnya baru pertama kali nglamain kaya gini, bagi yang tau caranya kasih tau ane yaa..:D

Reply
avatar
Prediksi Bola
AUTHOR
December 3, 2013 at 1:58 PM delete

makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon