KHALED ALMILBE




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

اترك رسالتك

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

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

محتوى الرسالة (مطلوب)

تابعنا على :

f tw +G yt vk

لدعمنا قم بمتابعة المدونة ليصلك كل جديدنا

اضغط هنا

6/18/2016

هناك 8 تعليقات
2016-06-18T00:56:00+03:00

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

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

صندوق رائع للبحث عن التدوينات بالمدونة
طريقة التركيب
قبل كل شيئ خذ نسخة احتياطية لقالبك
توجة للقالب - تحرير 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 بالتعليقات مع حذف كود اللذي وضعته بالتعليقات

      حذف

المتابعون

حلولي *fb:https://www.facebook.com/hlo1y *tw:https://twitter.com/hlo1y *yt:https://www.youtube.com/user/v518v *gp:https://plus.google.com/+v518v *signature_img: https://2.bp.blogspot.com/-BB5G-R4BmMs/WYk0ptd5qGI/AAAAAAAAIuA/JYOxvfMzE9YdC1xMH9dytmkcAaWZt49XgCLcBGAs/s1600/sinature.png *txt: لـدي القليل مـن الخبره ، فـي مجال الـتدويـن اضع بالمدونة ما يـفـيـد الزائر والـمـدون ، تــابـعـنـا قـد نـفـيـدك يـومـاً peter hany *fb:https://www.facebook.com/peter.hany3 *tw: *yt: *gp: *signature_img:https://3.bp.blogspot.com/-_hF3OQo4bRA/WJ0VlzGC0qI/AAAAAAAAEUU/cddR54285KUQ1VigxKy-x8TUVwhsVEWUQCLcB/s1600/sinature.png *txt:اسمى بيتر هانى ميلاد , مصمم ومطور ويب , 20 سنة , مصرى الجنسية , أعيش فى محافظة المنوفية , طالب فى كلية الهندسة المدنية , أهتم بكل جديد فى مجال بلوجر وفى تطوير الويب , لدى خبرة فى إستعمال برامج الجرافيك , أحب تصميم القوالب البسيطة والتى تعطى إنطباع أنها ليست تحت فئة قوالب بلوجر ذات الإمكانيات المحدودة.