راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

إعلان

آخر الأخبار

إعلان

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





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

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

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







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



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




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










hala teck
الكاتب : MAHER

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

شارك الموضوع
تعليقات
إعلان