طريقة اضافة صندوق البحث الإفتراضي لبلوغر في 5:37 م مرسلة بواسطة الصداقة الدائمة

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

لنبدأ على بركة الله  

1 - إدخل على حساب المدونة .
2- إختر تصميم .
3-إضغط على تحرير Html .
4-إبحث عن </b:skin>.
5-ضع الكود التالي قبلة مباشرة :

#searchbox
{
        background: #eaf8fc;
        background-image: -moz-linear-gradient(#fff, #d4e8ec);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
        -moz-border-radius: 35px;
        border-radius: 35px;
        border-width: 1px;
        border-style: solid;
        border-color: #c4d9df #a4c3ca #83afb7;
        width: 500px;
        height: 35px;
        padding: 10px;
        margin: 100px auto 50px;
        overflow: hidden; /* Clear floats */
}
#search, #submit
{
        float: left;
}
#search
{
        padding: 5px 9px;
        height: 23px;
        width: 380px;
        border: 1px solid #a4c3ca;
        font: normal 13px 'trebuchet MS', arial, helvetica;
        background: #f1f1f1;
        -moz-border-radius: 50px 3px 3px 50px;
         border-radius: 50px 3px 3px 50px;
         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
/* ----------------------- */
#submit
{
        background: #6cbb6b;
        background-image: -moz-linear-gradient(#95d788, #6cbb6b);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
        -moz-border-radius: 3px 50px 50px 3px;
        border-radius: 3px 50px 50px 3px;
        border-width: 1px;
        border-style: solid;
        border-color: #7eba7c #578e57 #447d43;
         -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;          
        height: 35px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 90px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{
        background: #95d788;
        background-image: -moz-linear-gradient(#6cbb6b, #95d788);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}
#submit:active
{
        background: #95d788;
        outline: none;
         -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
       border: 0;  /* Small centering fix for Firefox */
}        
#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: normal;
}
#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: normal;
}
#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: normal;
}
#search.placeholder {
   color: #9c9c9c !important;
   font-style: normal;
}

6-إضغط على حفظ القالب .
8. الأن وبعد حفظ القالب إختر تصميم .
9. ثم أنقر على إضافة أداة.
10. في النافذة التي ستضهر لك سوف تختار HTML/Javascript .

11- ضف الكود التالي في المربع الكبير :

<form id="searchbox" action="/search" method="get">
        <input id="search" name="q" type="text" placeholder="إكتب شيئا للبحث عنه " />
        <input id="submit" type="submit" value="بحث" />
    </form>

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

abuiyad