اضافة اداة البحث في المدونة بخاصية الاجاكس

اضافة اداة البحث في المدونة بخاصية الاجاكس

معاينــة  | تحميل الكود

لاضافة الاداة اذهب الى التخطيط-اضافة اداة واضف الكود التالي

<style>

#search-result-container h4 {

margin: 0 0 10px;

font: normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;

color: black;

}

.closebtn {

font-size: 18px;

}

#search-result-container li{margin:0 0 5px;padding:0;list-style:none;overflow:hidden;word-wrap:break-word;font:normal normal 10px Verdana,Geneva,sans-serif;color:#141414;background-color:white;text-transform:none}

#search-result-container li a{text-decoration:none;font-weight:bold;font-size:11px;display:block;line-height:14px;padding:0;font-weight:bold}

#search-result-container mark{background-color:yellow;color:black}

#search-result-container h4{margin:0 0 10px;font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;color:black}

#search-result-container ol{margin:0 0 10px;padding:0 0;overflow:hidden;height:450px}

#search-result-container:hover ol{overflow:auto}

#search-result-container li img{display:block;float:right;margin:0 5px 1px 0;padding:2px;border:1px solid #D1D1D1}

#search-result-loader{top:100%;position:absolute;z-index:999;width:100%;line-height:30px;color:#2E2E2E;padding:0 10px;background-color:white;border:1px solid #DBDBDB;margin:0;overflow:hidden;display:none;text-transform:capitalize}

#search-result-container p{margin:5px 0}

#search-result-container .close{position:absolute;right:8px;top:8px;font-size:12px;color:white;text-decoration:none;border-radius:9999px;width:13px;height:13px;text-indent:1px;background-color:#1295C9;line-height:12px}

.bwh-title .d-header abbr{border-bottom:0}

  #search-result-container{width:100%}

</style>

<div id="search-form-feed">

    <form action="/search" onsubmit="return updateScript();">

        <input id="feed-q-input" name="q" type="text" placeholder="ادخل كلمة للبحث" x-webkit-speech="undefined" />

<input onkeyup="resetField();" type="submit" value="بحث" />

    </form>

    <div id="search-result-container"></div>

    <div id="search-result-loader">جار البحث...</div>

</div>

<script type="text/javascript">

//<![CDATA[

var searchFormConfig = {

    url: "http://ahmed-iq.blogspot.com", 

    numPost: 9999, 

    summaryPost: true, 

    summaryLength: 100, 

    resultTitle: "بحث عن",

    noResult: "لاتوجد ناتج", 

    resultThumbnail: true, 

    thumbSize: 70, 

    fallbackThumb: "http://softglad.at.ua/images/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:85%;

 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;

float: right;

}

#search-form-feed input[type="submit"] {

    background: #fff;

    border: 1px solid #ccc;

    padding: 5px 5px;

    cursor: pointer;

    margin: 0;

float: left;

}

#feed-q-input:focus {

 color:#333;

 outline:none;

}

</style>

مع تغيير http://ahmed-iq.blogspot.com برابط مدونتك

المصدر