اضافة مربع البحث لمدونات بلوجر
مرحباً بكم في درس جديد علي موقع ميمي نت
في هذا الدرس نعرض لكم اضافة رائعة لمدونات بلوجر وهيا اضافة مربع البحث لمدونات بلوجر اضافة رائعة ومنسقة ولا تحتاج لأكواد كثيرة فقط تسطيع اضافتها في مدونتك عبر اداة HTML/JavaScript بطريقة سهلة وبسيطة تتميز اضافة مربع البحث بأنها تقوم بمساعدة الزائر في البحث داخل موقعك كما توفر لهو نتائج بحث رائعة وذلك ما يجعل موقعك اكثر سهولة في الأستخدام ايضاً تتميز الأضافة بشكل الأنيق الجزاب وذلك يعطي لموقعك مظهر رائع.
تابع الشرح لمعرفة كيفية اضافة مربع البحث لمدونتك
- اذهب الي لوحة تحكم بلوجر
- انتقل الي قسم التخطيط
- اضغط على إضافة أداة JavaScript/HTML
- قم بلصق الكود التالي في الأداة
- ثم قم بالحفظ
<!-- 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-->
تعديلات الكود
- الكود لا يتحاج الي اي تعديلات يمكنك اضافتة في اي مكان في القالب.
نمتني ان تعجبكم الأضافة بالتوفيق
---------------------------------------------------------------
روابط التحميل والمشاهدة، الروابط المباشرة للتحميل
او
شاهد هذا الفيديو القصير لطريقة التحميل البسيطة
كيف تحصل على مدونة جاهزة بآلاف المواضيع والمشاركات من هنا
شاهد قناة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على اليوتيوب لمزيد من الشرح من هنا
رابط مدونة منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات في أي وقت حــــتى لو تم حذفها من هنا
شاهد صفحة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على الفيس بوك لمزيد من الشرح من هنا
شاهد صفحة منتدى مدونات بلوجر جاهزة بألاف المواضيع والمشاركات على الفيس بوك لمزيد من الشرح من هنا
تعرف على ترتيب مواضيع منتدى مدونات بلوجر جاهزة بآلاف المواضيع والمشاركات (حتى لا تختلط عليك الامور) من هنا
ملاحظة هامة: كل عمليات تنزيل، رفع، وتعديل المواضيع الجاهزة تتم بطريقة آلية، ونعتذر عن اي موضوع مخالف او مخل بالحياء مرفوع بالمدونات الجاهزة بآلاف المواضيع والمشاركات، ولكم ان تقوموا بحذف هذه المواضيع والمشاركات والطريقة بسيطة وسهلة. ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــسلامـ.
Post a Comment