Tampilkan postingan dengan label Search Box. Tampilkan semua postingan
Tampilkan postingan dengan label Search Box. Tampilkan semua postingan

Sabtu, 27 Juli 2013

Fixed Header Blog dengan Box Search Engine

By Unknown   Posted at  21.04   Search Box No comments

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/AVvXsEgDMVLmpCTXBULANj6SjF2bvKyc2XdOJKL932V_tHTbo7wh9aPMYlw9u1uko8jOxHozQQt5S5hBlnh2XNpm7xgjEvzsAVcGkEfJoqzs8fHz5jFPb3gSz8z8_btvRlYLm4Hh8H57Ax7V87M/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;
    }
    #search-result-container {
    width:550px;
    height:320px;
    overflow:auto;
    position:absolute;
    top:100%;
    right:0;
    z-index:999;
    background-color:#f2f2f2;
    border:1px solid #ddd;
    padding:10px 10px 0;
    margin:10px 0 0;
    -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
    box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
    display:none;
    }
    #search-result-container mark {
    background-color:yellow;
    color:black;
    }
    #search-result-container a {
    text-decoration:none;
    color:#0D3E71;
    font-weight:bold;
    font-size:12px;
    display:block;
    }
    #search-result-container a:hover {
    color:#052748;
    }
    #search-result-container h4 {
    margin:0 0 10px;
    font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
    color:#B50001;
    }
    #search-result-container ol {
    background:transparent;
    border:none;
    margin:0 0 10px;
    padding:0 0;
    }
    #search-result-container li {
    margin:0 0 1px;
    padding:7px 8px;
    list-style:none;
    border:1px solid #B7C1CE;
    background-color:white;
    overflow:hidden;
    word-wrap:break-word;
    text-align:left;
    }
    #search-result-container li img {
    display:block;
    float:left;
    margin:0 10px 4px 0;
    border:1px solid #B7C1CE;
    background-color:#F5F5F5;
    padding:2px 2px;
    }
    #search-result-loader {
    position:absolute;
    top:100%;
    left:0px;
    z-index:999;
    background-color:#ED702B;
    color:white;
    padding:3px 5px;
    margin:-2px 0 0;
    font:normal bold 10px Arial,Sans-Serif;
    -webkit-border-radius:0 0 3px 3px;
    -moz-border-radius:0 0 3px 3px;
    border-radius:0 0 3px 3px;
    display:none;
    }
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=''/>
    </form>
    <div id='search-result-container'/>
    <div id='search-result-loader'>Loading...</div>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    var searchFormConfig = {
        url: "Url-Blog-Anda", // URL Blog
        numPost: 9999, // Jumlah maksimal temuan
        summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
        summaryLength: 400, // Jumlah karakter ringkasan posting
        resultTitle: "Hasil penelusuran yang di temukan", // Judul hasil pencarian
        noResult: "Tidak Di Temukan!!!", // Deskripsi 'tak ditemukan'
        resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
        thumbSize: 40, // Ukuran & resolusi thumbnail
        fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar
    };
    //]]>
    </script>
    <script src='http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js' type='text/javascript'/>
    </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/AVvXsEjYRyY01qaw7SshlOhXONM2T2VNKjx_GpaRINi-rj0EOYhA4cVzqYjubASA60jsXIEJ2kmyzD0mPm3P8P6aMU3lq-TFBNpGa3zmw-XarpCMb4mDbMWg4D-2qIG8hMlGHwE8Io_8NPBwn5M/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/AVvXsEjYRyY01qaw7SshlOhXONM2T2VNKjx_GpaRINi-rj0EOYhA4cVzqYjubASA60jsXIEJ2kmyzD0mPm3P8P6aMU3lq-TFBNpGa3zmw-XarpCMb4mDbMWg4D-2qIG8hMlGHwE8Io_8NPBwn5M/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 !

Kamis, 30 Mei 2013

Search engine box cool

By Unknown   Posted at  06.25   Widget No comments
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/AVvXsEgxES8-xuFrDKRtGQ371BIfpKMIYSsmaDyWFLsPC2OSykHhnuNqEJEhjvp0ZyQcAD-484N2Z7OlolAFwScjsfrhSeQIbzewvboxrC8dgESPD_oFpdWns4VFdp2rNby5FXVsZJcuXwB94Hw/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/AVvXsEi9AAuj3c7foSHvVTLN4ze_GxR6jNgShjoLm6dr9cPpLZwu4XWNjXkHBE3E3VGxHtU1Qb49GgRgLwwPXxQOYfA9F_8FYEB6_rWjuP6fXdEExwV_Nz2sucYLzCkP7o0CoiSS7MZXJJwOPVg/s1600/searchico.png' title='Search' type='image'/> 
</form></div></div>


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

Jumat, 24 Mei 2013

Search engine box Css3 3D Style

By Unknown   Posted at  05.51   Widget No comments
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...
 

Back to top ↑
Connect with Us

What they says

© 2013 Andre B'Genk. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.