infoinaja.net: Search Box

Showing posts with label Search Box. Show all posts

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>

5. Sekarang Cari Kode </head> dan letakan kode ini di bawah kode </head>

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 !

Pada 12:04 PM 19 Komentar

Thursday, May 30, 2013

Search engine box cool

Search engine box cool - Selamat malam sob,kali ini saya akan berposting tentang mesin pencari atau yang sering di sebut dengan search engine, search engine kali ini lebih terlihat sederhana namun terlihat keren penampilanya

oke sob, ini adalah di bawah ini adalah search engine-nya:

aduh billing warnetnya mau habis hehehe, oke langsung aja deh caranya
1. login ke akun blog sobat

2. Klik Tambahkan Gadget dan klik 'HTML/Javascript

3.Masukan kode di bawah tepat di dalam kolom HTML/Javascript

<style type="text/css">
#search{width:268px; border:1px solid #E0DFD9;margin: 0 0 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_sUfJWtFVHW3oRMJWNxwoETkPcjaegL5G7A7kh5d0gQwyBVbXo-rmcPKlaMskWtQKS_Douo48gE8dAi9tTDqh3QmlG-E6qyMv5Y_uQaZIFu8r4xo05iA-xLYWS2gUTnzt0YjGGal4Jb8/s1600/search-bgg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden} 
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left} 
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px} 
#search-wrap{padding:15px 0} 
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px} 
</style>   
<div class='topsearch'> 
<div class='clerfix' id='search'> 
<form action='/search' id='searchform' method='get'> 
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/> 
<input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaokA69GFkc5SFHkitFkM0Ct-HejFVZMPx5ZEv2tVya5z1NrU3skeEbLZIqvHIlpz9Gn6Nx1YfBQNWVeN56F65e49JYTKemqvB53DaNwg5-NddVVn0lBe-jcTPJZLklf3VEUH1VG4bvo/s1600/searchico.png' title='Search' type='image'/> 
</form></div></div>

4.Klik Save dan lihat hasilnya, Semoga Bermanfaat...

Pada 9:25 PM 4 Komentar

Friday, May 24, 2013

Search engine box Css3 3D Style

Search Box Widget

Search engine box Css3 3D Style - Pernah tidak sobat melihat kotak pencari atau yang sering di sebut search engine di blog ,pasti pernahkan sob! nah sekarang saya akan ngasih tau caranya nih
apakah penting? pastinya sangat penting dong sob!karena sangat membantu sekali bagi pengunjung yang ingin mencari artikel di blog kita, ini adalah sreenshotnya:

oke langsung aja nih caranya:
1. login ke akun blog sobat

2. Klik Tambahkan Gadget dan klik 'HTML/Javascript

3.Masukan kode di bawah tepat di dalam kolom HTML/Javascript

<style type="text/css">
.form-wrapper {
width: 270px;
padding: 8px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 180px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 70px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<form class="form-wrapper" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="Search" />
    <input id="submit" type="submit" value="Search" />
</form>

4.Klik Save dan lihat hasilnya, Semoga Bermanfaat...

Pada 8:51 PM 6 Komentar

Sunday, July 28, 2013

Fixed Header Blog dengan Box Search Engine

Thursday, May 30, 2013

Search engine box cool

Friday, May 24, 2013

Search engine box Css3 3D Style

Follow us

Partner

Comments

Recent Posts

Cloud Label

Random Posts