حلولي https://www.facebook.com/hlo1y https://twitter.com/hlo1y https://www.youtube.com/user/v518v https://plus.google.com/+v518v

تابعنا على :

f tw +G yt vk

KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us

صندوق البحث بشكل منبثق

حلولي

مشرف

المزيد

هناك 8 تعليقات

تم النشر فى قسم

تم النشر منذ

تحميل ...
صندوق البحث بشكل منبثق

صندوق رائع للبحث عن التدوينات بالمدونة
طريقة التركيب
قبل كل شيئ خذ نسخة احتياطية لقالبك
توجة للقالب - تحرير HTML
وابحث عن <body> بالضغط على CTRL+F
واضف الكود التالي تحته مباشرة

<div class="live-search"><form class="searchmein" id="search"><div class="input"><input class="search" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="search" value="اكتب ما تبحث عنه..." /><button class="submit fa fa-search" type="submit" value=""></button></div><button class="fa fa-times" id="close" type="reset" value=""></button></form><div class="search-content"><div class="search-result"></div><div class="more-result">Load more</div></div></div>

ثم ابحث عن ]]></b:skin> واضف الكود التالي فوقة

/* CSS Custom Ajax Search */input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}.live-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;background:rgba(255,255,255,.99);box-shadow:0 2px 5px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:scale(1.1);margin:auto;max-width:720px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}.live-search.active{opacity:1;visibility:visible;transform:scale(1.0);}.live-search .searchmein{width:90%;margin:15px auto;padding:10px 0;outline:none;display:block}#search .input{background:rgba(0,0,0,.01);width:95%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s ease-out}#search .input:active,#search .input:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.45);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40px;padding:0;margin:0;border:0;outline:0;background:#30a8e6;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40px;border-radius:0 3px 3px 0;transition:all .3s ease-out}#search .input .search:focus,#search .input .search:active, #search .input .search:hover{color:rgba(0,0,0,.85);}#search .input .submit:focus,#search .input .submit:hover {background:#2c9bd5;}#search #close{cursor:pointer;position:absolute;top:0;right:0;width:45px;height:45px;padding:0;margin:0;border:0;outline:0;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.25);text-align:center;line-height:45px}#search #close:hover {color:rgba(0,0,0,.6);}.search-content{z-index:6;display:none;position:relative}.live-search .search:focus {outline:none;}.search-result{padding:15px;width:90%;margin:0 auto 15px}.search-result .search-item{overflow:auto;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.07)}.search-item img{width:60px;height:60px;float:left;border-radius:4px}.search-item a{width:calc(100% - 80px);float:right;display:block;text-decoration:none}.search-item a:hover{color:#069;}.more-result{display:none;cursor:pointer;background:#fff;color:#178dc8;padding:8px;margin:20px auto 40px;max-width:100px;font-size:75%;text-align:center;text-transform:uppercase;border-radius:3px;line-height:normal;letter-spacing:1px;border:1px solid #73bfe5;transition:all .3s ease-out}li.searchbutton{margin:0;padding:0 20px;display:inline-block;cursor:pointer;float:right;}li.searchbutton.active {background:transparent;}li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative;font-size:16px;color:#222;}.more-result:hover{background:#178dc8;color:#fff;border-color:transparent}.more-result a{text-decoration:none;color:#fff;}.more-result:hover a,.more-result a:hover{color:#fff;}.queryword{font-weight:700}

ثم ابحث عن </body> واضف الكود التالي تحته مباشرة

<script type="text/javascript">//<![CDATA[var _0x4d59=["\x73\x63\x72\x65\x65\x6E\x20\x61\x6E\x64\x20\x28\x6D\x69\x6E\x2D\x77\x69\x64\x74\x68\x3A\x20\x36\x30\x65\x6D\x29","\x6D\x61\x74\x63\x68\x4D\x65\x64\x69\x61","\x6D\x61\x74\x63\x68\x65\x73","\x63\x6C\x69\x63\x6B","\x66\x6F\x63\x75\x73","\x2E\x73\x65\x61\x72\x63\x68","\x66\x69\x6E\x64","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x2E\x6C\x69\x76\x65\x2D\x73\x65\x61\x72\x63\x68","\x6F\x6E","\x2E\x73\x65\x61\x72\x63\x68\x62\x75\x74\x74\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x63\x6C\x6F\x73\x65"];var mql=window[_0x4d59[1]](_0x4d59[0]);if(mql[_0x4d59[2]]){$(function(){$(_0x4d59[11])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[8]](_0x4d59[7])[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[9])[_0x4d59[10]](_0x4d59[3],function(){$(this)[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[13])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[12]](_0x4d59[7])});});window[_0x4d59[14]]=function(){var _0xce82x2=document[_0x4d59[16]](_0x4d59[15]);if(_0xce82x2==null){window[_0x4d59[18]][_0x4d59[17]]=_0x4d59[19]};_0xce82x2[_0x4d59[20]](_0x4d59[17],_0x4d59[19]);_0xce82x2[_0x4d59[20]](_0x4d59[21],_0x4d59[22]);_0xce82x2[_0x4d59[23]]=_0x4d59[24];};};function findit(){var e=$(".search").val(),t=$(".search-item").length+1;if(e.length>=1){$(".search-content").show(),$(".search-filter").attr("data-query",e),$(".search-result span").show().html("Searching ...");var r="/feeds/posts/default?max-results=12&start-index="+t+"&alt=json&q="+e;$.ajax({type:"GET",url:r,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){$(".more-result").hide(),doSearch(t,e)}})}else $(".search-content").hide()}function doSearch(e,t){if(e.feed.entry){for(var r=0;r<e.feed.entry.length;r++){for(var n=0;n<e.feed.entry[r].link.length;n++)if("alternate"==e.feed.entry[r].link[n].rel){var a=e.feed.entry[r].link[n].href;break}try{var s=e.feed.entry[r].media$thumbnail.url}catch(i){var s="http://4.bp.blogspot.com/-XQARxtj3cwk/VhKQr6dmTBI/AAAAAAAADJc/Tww7zM8jllc/s1600/default.png"}var c=e.feed.entry[r].title.$t,h='<div class="search-item"><img src="'+s+'"/><a href="'+a+'" target="_blank">'+c+"</a></div>";$(".search-result").append(h)}$(".search-result span").hide(function(){$(".queryword").html("Show results for:<b>"+t+"</b>"),$(".more-result").show()})}else $(".search-result span").show().html("No result"),$(".more-result").hide()}$(".searchmein").submit(function(){return $(".search-item").remove(),findit(),!1}),$(".close-search").click(function(){$(".search-content").hide()}),$(".more-result").click(function(){$(".more-result").hide(),findit()});//]]></script>

بالنهاية اضف الكود التالي بأي مكان تريد

<li class="searchbutton" title="Quick Search"></li>


اي استفسار لاتتردد بالكتابة اسفل 

 تابعونا للمزيد..

مشاركة الموضوع

انسخ كود الشكل الذى تريده وضعه فى تعليق
اذا كنت لا تملك حساب على بلوجر قم بإختيار التعليق باسم " مجهول "
تعليقات بلوجر
تعليقات الفيس بوك

هناك 8 تعليقات:

  1. لاكن اولا اخى أريد إزالة محرك البحث فى مدونتى. أريد أن أعرف كل الأكواد الخاصة به

    ردحذف
    الردود
    1. قبل الحذف جرب محرك البحث بمدونتي هل تريد مثلها ؟

      حذف
  2. اولاً احذف هذا الكود من القالب

    <div class="search-form" style="display: block;">
    <form action="/search" class="searchform" method="get">
    <input class="searchbar" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="ابحث في المدونة">
    <input class="searchsubmit" type="submit" value="البحث">
    </form>
    </div>

    اضف الاكواد الاعلى غير كود CSS
    ابحث عن كود CSS الموجود بمدونتك الحالي
    CSS Fixed Search Button

    احذفة وضع بدله الكود التالي

    ردحذف
    الردود
    1. /* CSS Custom Ajax Search */
      input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
      .live-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;background:rgba(255,255,255,.99);box-shadow:0 2px 5px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:scale(1.1);margin:auto;max-width:720px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
      .live-search.active{opacity:1;visibility:visible;transform:scale(1.0);}
      .live-search .searchmein{width:90%;margin:15px auto;padding:10px 0;outline:none;display:block}
      #search .input{background:rgba(0,0,0,.01);width:95%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s ease-out}
      #search .input:active,#search .input:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
      #search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.45);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
      #search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40px;padding:0;margin:0;border:0;outline:0;background:#30a8e6;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40px;border-radius:0 3px 3px 0;transition:all .3s ease-out}
      #search .input .search:focus,#search .input .search:active, #search .input .search:hover{color:rgba(0,0,0,.85);}
      #search .input .submit:focus,#search .input .submit:hover

      حذف
  3. {background:#2c9bd5;}
    #search #close{cursor:pointer;position:absolute;top:0;right:0;width:45px;height:45px;padding:0;margin:0;border:0;outline:0;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.25);text-align:center;line-height:45px}
    #search #close:hover {color:rgba(0,0,0,.6);}
    .search-content{z-index:6;display:none;position:relative}
    .live-search .search:focus {outline:none;}
    .search-result{padding:15px;width:90%;margin:0 auto 15px}
    .search-result .search-item{overflow:auto;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.07)}
    .search-item img{width:60px;height:60px;float:left;border-radius:4px}
    .search-item a{width:calc(100% - 80px);float:right;display:block;text-decoration:none}
    .search-item a:hover{color:#069;}
    .more-result{display:none;cursor:pointer;background:#fff;color:#178dc8;padding:8px;margin:20px auto 40px;max-width:100px;font-size:75%;text-align:center;text-transform:uppercase;border-radius:3px;line-height:normal;letter-spacing:1px;border:1px solid #73bfe5;transition:all .3s ease-out}
    li.searchbutton{margin:0;padding:0 20px;display:inline-block;cursor:pointer;float:right;}
    li.searchbutton.active {background:transparent;}
    li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative;font-size:16px;color:#222;}
    .more-result:hover{background:#178dc8;color:#fff;border-color:transparent}
    .more-result a{text-decoration:none;color:#fff;}
    .more-result:hover a,.more-result a:hover{color:#fff;}
    .queryword{font-weight:700}
    .lyco-search {position:relative;padding:0;height:0;margin:0 auto;}
    #menu ul li.searchbutton {background:#434e52;margin:0;padding:2px 17px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;float:left;}
    #menu ul li.searchbutton.active {background:#D03F42;color:#fff;}
    #menu ul li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#fff;position:relative;}
    #menu ul li.searchbutton.active:after {color:#fff;}
    .search-form {display:none;position:fixed;bottom:0;background:#fff;
    padding:5px 0;width:100%;z-index:91;margin:0 auto;}
    .searchform {margin:0 auto;text-align:center;line-height:45px;}
    .searchbar {background:transparent;border:none;width:70%;padding:0 10px;font-weight:400;font-size:20px;font-family:Electrolize,ge_ss_threeregular;color:#999;margin:0 auto;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;}
    .searchbar:focus {color:#666;}
    .searchsubmit {background:#848889;border:none;outline:none;cursor:pointer;
    color:#fff;padding:0 25px;font-weight:400;font-size:16px;
    font-family:droid arabic kufi;line-height:45px;border-radius:2px;
    transition:background-color 1s ease-out 0s;}
    .searchsubmit:hover {background:#fff;color:#666;box-shadow: inset 0 0 0 1px #848889;}
    .searchsubmit:active {background:#D03F42;color:#fff;box-shadow:none;border:none;outline:none;}

    ردحذف
    الردود
    1. لم يعمل =( وايضا زر البحث ظهر فى منتصف القائمة @@,

      حذف
    2. يالغالي الأكواد في التدوينة فقط اضف الأولى والثالث فقط وضيف كود CSS بالتعليقات مع حذف كود اللذي وضعته بالتعليقات

      حذف

مساحة إعلانية متجاوبة

مواضيع مميزة

التعليقات

إحصائيات المدونة

  • عدد المواضيع :

  • عدد التعليقات :

  • عدد المشاهدات :

المتابعون

اشترك ليصلك كل جديد

  • الإشعارات
  • من نحن

  • اتصل بنا

  • ×

ادخل الاسم (إختيارى)

ادخل البريد الإلكترونى (مطلوب)

ادخل الرسالة (مطلوب)