You are here : / / / Fixed Header Blog dengan Box Search Engine

Sunday, July 28, 2013

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJnrRlbUOFOt-AKufZHg-f6hbcs4gJeCWMkD47_cDBqBiSQs5WMVZAzGaTMzg-nSNZwH3BJJS88ZZQwk0b69J0B2uWbd-zY3gGMNCvGnkE1A3AZGjX9iUGuwAAM5d46hTPp66yJ2CvYI/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklFsH50ghUYojE44-EjypVzu3P-pXwenAbQVkJWrfED7uhQqM8eBhu6pelQi6zsN1k6-B5oXcnLK1dyU6p9HuP_QpvTYojTggeainBYWoHNd2x6g8iDjEJOQgJXr7zyEPqswvOBgK8k0/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 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklFsH50ghUYojE44-EjypVzu3P-pXwenAbQVkJWrfED7uhQqM8eBhu6pelQi6zsN1k6-B5oXcnLK1dyU6p9HuP_QpvTYojTggeainBYWoHNd2x6g8iDjEJOQgJXr7zyEPqswvOBgK8k0/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 !

Related Posts

Fixed Header Blog dengan Box Search Engine
4/ 5
Oleh
Pada 19 Komentar

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

19 komentar

Tulis komentar
avatar
Unknown
July 31, 2013 at 9:59 PM

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

Reply
avatar
akuntest123
August 1, 2013 at 6:50 PM

Sama-sama dan Terimakasih Kembali mas^_^

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

bagus juga templatenya, aku minta templatenya dong!

Reply
avatar
Team Ultra
September 5, 2013 at 5:28 PM

mas kenapa quick SEARCH tidak berfungsi??

Reply
avatar
akuntest123
September 5, 2013 at 9:39 PM

mungkin ada script yang ketinggalan sob...

Reply
avatar
Team Ultra
September 6, 2013 at 7:34 AM

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

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

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
akuntest123
October 3, 2013 at 7:31 PM

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
Unknown
October 14, 2013 at 1:39 PM

mas.. minta template blog punyamu dongg

Reply
avatar
akuntest123
October 15, 2013 at 9:12 PM

blom bisa bro.. kan masih ane pake

Reply
avatar
Adi
November 7, 2013 at 4:38 AM

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

Reply
avatar
akuntest123
November 7, 2013 at 7:36 PM

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

Reply
avatar
Adi
November 9, 2013 at 5:03 PM

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
akuntest123
November 10, 2013 at 11:19 AM

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
bolavitafun
February 10, 2019 at 1:47 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• 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]
=======================================================

Subscribe to: Post Comments (Atom)