Blogger için çok farklı ve başka stillerde başka renklerde arama kutuları olduğunuz biliyoruz ve bazen bu arama kutularını özelleştirmek için JQery eklentili veya CSS eklentili arama kutuları oluşutuluyor bu eklentimizdeki arama kutusunun en önemli özelliği ise blogunuzda herhangi bir kelimeyi arama yaptığınızda sizi başka sayfaya yönlendirmek yerine bulunduğunuz sayfa ayrı bir kutu açılarak gösteriyor aradığınız kelimeyi.Aşağıdaki video anlatımımda demosunu görebilir ve özelliğine bakabilirsiniz.
Blogger Paneline Girin.
1-Yerleşim Tıklıyoruz > 2-Gatget Ekle > 3-HTML/JavaScript dedikten sonra aşağıdaki kodları içersine yerleştiriyoruz.
<div id="search-form-feed">
<form action="Gelişmiş Arama Kutusu" onsubmit="return updateScript();">
<input name="q" type="text" value="Arama..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/>
</form>
<div id="search-result-container"></div>
<div id="search-result-loader">Bekleyiniz...</div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
url: "http://www.bloggerturkey.com",
numPost: 9999,
summaryPost: true,
summaryLength: 400,
resultTitle: "Anahtar kelime için arama sonuçları",
noResult: "sonuç",
resultThumbnail: true,
thumbSize: 110,
fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguVzIeUEHubfhoOmOqsXLWMvtr27rIzXB_srLg-AxiAPM0uqY-e0tHG7PjU40CcCz6K9Oyez7XYA78ib1a39jKHw-EJeajNYIUry1KVFfi1fizXqEjLFpwR_THuX_vo39gj46RfulNd0g/s1600/no-img.jpg"
};
//]]>
</script>
<script type="text/javascript" src="http://softglad.at.ua/widgets/blogger-search.js"></script>
<style>
#search-form-feed {
width:100%;
position:relative;
margin:0 0 10px;
padding:0 0;
font:normal normal 11px Arial,Sans-Serif;
color:#333;
}
#feed-q-input {
display:block;
width:70%;
border:1px solid #bbb;
background-color:white;
padding:5px 5px;
font:normal bold 13px Tahoma,Arial,Sans-Serif;
color:#ccc;
margin:0 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#search-form-feed input[type="submit"] {
background: #fff;
border: 1px solid #ccc;
padding: 5px 5px;
cursor: pointer;
margin: 0;
}
#feed-q-input:focus {
color:#333;
outline:none;
}
#search-result-container {
width:50%;
height:390px;
overflow:auto;
position:fixed;
top:10%;
z-index:99999;
background-color:rgb(229,229,229);
border:1px solid white;
padding:10px 10px 0;
margin:1px 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:1 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;
left:20%;
}
#search-result-container mark {
background-color:transparent;
color:black;
font-weight:bold;
}
#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 13px 'Trebuchet MS',Arial,Sans-Serif;
color:#B50001;
text-align: left;
}
#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding:0 0;
}
#search-result-container li {
margin:10px 0 1px;
padding:0px 8px 0px 0px;
list-style:none;
background-color:white;
overflow:hidden;
word-wrap:break-word;
border-radius:3px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
box-shadow:0px 1px 2px rgba(0,0,0,0.15);
border:1px solid #ccc;
}
#search-result-container li img {
display:block;
float:left;
margin:0 5px 0px 0;
}
#search-result-container li p {
text-align: left;
}
#search-result-loader {
position:absolute;
top:100%;
left:5px;
z-index:999;
background-color:#0D6786;
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;
}
#search-result-container li p {
margin:0;
padding:5px 0px;
}
#search-result-container li:hover {
background:#D7F2FA;
}
#search-result-container .closebtn {
display:block;
position:absolute;
top:0px;
right:12px;
line-height:normal;
text-decoration:none;
color:inherit;
font-size: 30px
}
</style>
0 yorum:
Yorum Gönder