menu
attachment
  • الصفحة الرئيسية
  • الأرشيف
  • لديك مشكلة ؟
notifications
حلولي | مدونة تقنية
bannner1
  • عام
  • _مواضيع عامة
  • _مواقع مفيدة
  • _شروحات
  • _رمزيات
  • _الفديوهات
  • قوقل
  • _قوقل كروم
  • _قوقل بلس
  • _قوقل ادسنس
  • ملحقات
  • _صور
  • _ايقونات
  • _خط عربي
  • _خط اجنبي
  • بلوجر
  • _شروحات بلوجر
  • _إضافات بلوجر
  • التقنية والبرمجة
  • _برامج الأندرويد
  • _برامج الأيفون
  • _برامج كمبيوتر
  • إسلاميات
  • _الكل
  • _القرآن كريم
  • _تواقيع اسلامية
  • _اهات صوتية
    10|recentpost
  • حلولي | مدونة تقنية
  • إضافات بلوجر
  • صندوق البحث بشكل منبثق
حلولي
8

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

6/18/2016
share
  • ‏المشاركة في Facebook
  • ‏المشاركة في Twitter
  • ‏المشاركة على Pinterest
  • إرسال بالبريد الإلكتروني
  • كتابة مدونة حول هذه المشاركة
settings_overscan print announcement
صندوق البحث بشكل منبثق

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


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

 تابعونا للمزيد..
Share This
clear
  • الكاتب حلولي
    حلولي
    مدونة تقنية أنشر كل مايفيد الزائر والمدون .
  • في 6/18/2016
إضافات بلوجر

add_comment إرسال تعليق

  1. Mohamed Fathy6/21/2016 10:05:00 م

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

    ردحذف
    الردود
    1. حلولي6/22/2016 02:55:00 ص

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

      حذف
      الردود
        رد
    2. رد
  2. Mohamed Fathy6/22/2016 03:13:00 م

    بكل تأكيد :p

    ردحذف
    الردود
      رد
  3. حلولي6/23/2016 03:43:00 ص

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

    <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. حلولي6/23/2016 03:48:00 ص

      /* 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

      حذف
      الردود
        رد
    2. رد
  4. حلولي6/23/2016 03:48:00 ص

    {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. Mohamed Fathy6/23/2016 05:35:00 م

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

      حذف
      الردود
        رد
    2. حلولي6/23/2016 10:58:00 م

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

      حذف
      الردود
        رد
    3. رد
إضافة تعليق
تحميل المزيد...

المتابعون

الأقسام

  • إسلاميات (70)
  • إضافات بلوجر (108)
  • الانستقرام (13)
  • القرآن كريم (7)
  • اهات صوتية (9)
  • ايقونات (18)
  • برامج الأندرويد (45)
  • برامج الأيفون (23)
  • برامج كمبيوتر (18)
  • برودكاست (2)
  • تواقيع اسلامية (18)
  • تويتر (22)
  • حصرى (14)
  • خط اجنبي (36)
  • خط عربي (24)
  • رمزيات (20)
  • شروحات (151)
  • شروحات بلوجر (44)
  • صور (47)
  • فديو (8)
  • فيس بوك (19)
  • قوالب بلوجر (50)
  • قوقل (1)
  • قوقل ادسنس (1)
  • قوقل بلس (11)
  • قوقل كروم (21)
  • كتب (3)
  • مسابقات (2)
  • مميز (3)
  • مواضيع عامة (11)
  • مواقع مفيدة (86)
  • نصائح (2)
  • يوتيوب (45)

من أنا

صورتي
حلولي
عرض الملف الشخصي الكامل الخاص بي

الأكثر زيارة

  • احصل على رابط قروب الواتس اب بطريقة مختصرة
    الأن تستطيع الحصول على رابط
  • طرق عديدة لتحميل مقاطع اليوتيوب فديو او صوت
    اكثر من طريقة لتحميل مقاطع اليوتيوب بدون برامج
  • تواقيع اسلامية بشكل جذاب ورائع
    تواقيع اسلامية بشكل جذاب ورائع
  • مسابقة لربح دومين com لمدة سنة كاملة - انتهت المسابقة
    مسابقة لربح دومين com لمدة سنة كاملة
  • اسهل طريقة لحل مشكلة الاسماء المكرره للأندرويد
    من اسهل الطرق لحل مشكلة الاسماء المكررة بالاندرويد
bannner1

مواقع ندعمها

  • _بلوجر كود
  • ضع موقعك هنا
  • ضع موقعك هنا
  • ضع موقعك هنا
  • #ضع موقعك هنا
  • #ضع موقعك هنا
  • #ضع موقعك هنا
  • facebook
  • youtube
  • twitter
  • pinterest
attachment
  • الصفحة الرئيسية
  • إتفاقية الإستخدام
  • facebook
  • youtube
  • twitter
  • pinterest
عن الموقع حلولي | مدونة تقنية

مدونة تقنية أنشر كل مايفيد الزائر والمدون .

  1. facebook
  2. youtube
  3. twitter
  4. pinterest

روابط مفيدة

  • ضع نص قابل للنقر هنا
  • ضع نص قابل للنقر هنا
  • ضع نص قابل للنقر هنا
  • ضع نص قابل للنقر هنا

أقسام الموقع

إسلاميات (70) إضافات بلوجر (108) الانستقرام (13) القرآن كريم (7) اهات صوتية (9) ايقونات (18) برامج الأندرويد (45) برامج الأيفون (23) برامج كمبيوتر (18) برودكاست (2) تواقيع اسلامية (18) تويتر (22) حصرى (14) خط اجنبي (36) خط عربي (24) رمزيات (20) شروحات (151) شروحات بلوجر (44) صور (47) فديو (8) فيس بوك (19) قوالب بلوجر (50) قوقل (1) قوقل ادسنس (1) قوقل بلس (11) قوقل كروم (21) كتب (3) مسابقات (2) مميز (3) مواضيع عامة (11) مواقع مفيدة (86) نصائح (2) يوتيوب (45)
clear
clear

  • facebook
  • youtube
  • twitter
  • pinterest
حلولي | مدونة تقنية