صندوق بحث منزلق لقوالب البلوجر

صندوق بحث منزلق مطور

 

أقدم لكم صندوق بحث مطور لقوالب البلوجر

الصندوق يمتاز بانه منزلق عند الضغط على ايقونة البحث بحيث انه ينزلق من اليسار الى اليمين

الشكل احترافي و جميل 

و هو شبيه لزر البحث الموجود بقالب ليفون

تركيب الصندوق

ادخل الى المظهر و قم بالبحث عن ]]></b:skin>  و ضع الكود التالي اعلاه

#search {}
 #search input[type="text"] {
    background: url(https://3.top4top.net/p_14241h6171.png) no-repeat 13px 9px #2368a1;
    border: 0 none;
    font:  14px 'Cairo', sans-serif!important;
    width: 0px;
    padding: 11px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {width: 250px;}
#search input { border: 0!important;color: #eeeeee!important;float: left!important;margin: 0px 0px 0px -88px;}

يوضع هذا الكود بالمكان المناسب 

<form action='/search' id='search' method='get'>
  <input name='q' placeholder='' size='40' type='text'/>
</form>

و ثم قم بالحفظ و مبروك عليك الأضافة

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع شرح تركيب صندوق بحث منزلق مطور لقوالب البلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.