اضافة مربع البحث لمدونات بلوجر

اضافة مربع البحث لمدونات بلوجر

مرحباً بكم في درس جديد علي موقع ميمي نت

في هذا الدرس نعرض لكم اضافة رائعة لمدونات بلوجر وهيا اضافة مربع البحث لمدونات بلوجر اضافة رائعة ومنسقة ولا تحتاج لأكواد كثيرة فقط تسطيع اضافتها في مدونتك عبر اداة HTML/JavaScript بطريقة سهلة وبسيطة تتميز اضافة مربع البحث بأنها تقوم بمساعدة الزائر في البحث داخل موقعك كما توفر لهو نتائج بحث رائعة وذلك ما يجعل موقعك اكثر سهولة في الأستخدام ايضاً تتميز الأضافة بشكل الأنيق الجزاب وذلك يعطي لموقعك مظهر رائع.

اضافة مربع البحث لمدونات بلوجر

تابع الشرح لمعرفة كيفية اضافة مربع البحث لمدونتك

الخطوات

1. اذهب الي لوحة تحكم بلوجر
2. انتقل الي قسم التخطيط
3. اضغط على إضافة أداة JavaScript/HTML
4. قم بلصق الكود التالي في الأداة
5. ثم قم بالحفظ

<!-- www.memy-net.com -START -->
<style type="text/css">
.button_hassoubi {
border:2px solid #000;
-webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  background: #000000;
  background-image: -webkit-linear-gradient(top, #000000, #000000);
  background-image: -moz-linear-gradient(top, #000000, #000000);
  background-image: -ms-linear-gradient(top, #000000, #000000);
  background-image: -o-linear-gradient(top, #000000, #000000);
  background-image: linear-gradient(to bottom, #000000, #000000);
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button_hassoubi:hover {
  background: #3d3c3d;
  background-image: -webkit-linear-gradient(top, #3d3c3d, #444445);
  background-image: -moz-linear-gradient(top, #3d3c3d, #444445);
  background-image: -ms-linear-gradient(top, #3d3c3d, #444445);
  background-image: -o-linear-gradient(top, #3d3c3d, #444445);
  background-image: linear-gradient(to bottom, #3d3c3d, #444445);
  text-decoration: none;
}


    .form-wrapper {
    width: 270px;
    padding: 8px;
    margin: 10px auto;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede #bababa #aaa #bababa;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #f6f6f6;
    }
    .form-wrapper #search {
    width: 180px;
    height: 20px;
    padding: 10px 5px;
    float: right;
    font: bold 14px tahoma;
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    .form-wrapper #search:focus {
    outline: 0;
    border-color: #aaa;
    }
    .form-wrapper #search::-webkit-input-placeholder {
    color: #999;
    font-weight: normal;
    }
    .form-wrapper #search:-moz-placeholder {
    color: #999;
    font-weight: normal;
    }
    .form-wrapper #search:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    }
    .thumb{position:relative;left:4px;top:1px;}
 
    .form-wrapper #submit:active {
    outline: 0;
    }
    .form-wrapper #submit::-moz-focus-inner {
    border: 0;
    }
    </style>
    <div class="rss">
<form class="form-wrapper" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="اكتب ما تريد ان تبحث عنه" />
        <input id="submit" type="submit" class="button_hassoubi" value="بحث" />
    </form>
</div>
<div class='clear'>
</div>
<a href="https://www.memy-net.com" style="display:none" alt="ميمي نت">ميمي نت</a>
<!-- END-www.memy-net.com-->

شاهد الفيديو لمعرفة كيفية تركيب اضافة مربع البحث

تعديلات الكود

• الكود لا يتحاج الي اي تعديلات يمكنك اضافتة في اي مكان في القالب.

نمتني ان تعجبكم الأضافة بالتوفيق