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

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

مـشـاهدة مـثـال

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

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>

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