U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

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





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

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

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







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



ادخل الى المظهر و قم بالبحث عن ]]></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>




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







الاسمبريد إلكترونيرسالة