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

إضافة ليست بجديدة ولكن بطريقة جديدة لمدونات بلوجر مربع البحث منبثق يأتي على شكل زر وبعد النقر عليه يظهر على شكل نافذة لإدخال كلمة بحث ثم البحث في المدونة بطريقة مباشرة






صورة الإضافة

كيفية إضافة مربع البحث المنبثق لمدونات بلوجر
1. أدخل لوحة تحكم المدونة --> القالب --> أنقر على تحرير HTML
2. بإستخدام مفتاح الإختصار ctrl+f أبحث عن الرمز ]]> ثم ألصق الكود التالي فوقه مباشرةً

.dialog-box button[type="submit"] {
    margin-top: 20px;
    padding: 0.8em 2em;
    background-color: #10b765;
    color: #fff;
    border: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.dialog-box input[type="text"] {
    padding: 0 20px;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: #888;
    height: 50px;
    line-height: 1;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-sizing: border-box;
    width: 100%;
}
.dialog-box h2 {
    margin: 0;
    font-weight: 400;
    font-size: 24px;
    padding: 32px 0 25px;
    text-transform: uppercase;
}
.dialog-box {
    max-width: 520px;
    min-width: 290px;
    background: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 5;
    margin: auto;
}
.overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: rgba(55, 58, 71, 0.9);
 }
.overlay .overlay-close {
    width: 30px;
    height: 29px;
    position: absolute;
    right: 0px;
    top: 0px;
    border: none;
    background: #10B765;
    float: left;
    color: #fff;
    outline: none;
    z-index: 100;
}
.overlay .dialog-inner{
 text-align: center;
 position: relative;
 top: 50%;
 height: 60%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-30%);
}

.overlay-mbl {
 opacity: 0;
 visibility: hidden;
 -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
 transition: opacity 0.5s, visibility 0s 0.5s;
 z-index:100;
}
.overlay-mbl.open {
 opacity: 1;
 visibility: visible;
 -webkit-transition: opacity 0.5s;
 transition: opacity 0.5s;
}
.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover {
    background: #212121;
}

#trigger-overlay {
    cursor: pointer;
    float: left;
}
#trigger-overlay {
    background: #10b765;
    color: #fff;
    padding: 10px;
}
#trigger-overlay a {
    color: #fff;
 text-decoration:none;
}
#trigger-overlay:hover {
    background: #111;
}

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

أدخل كلمة للبحث

4. الخطوة قبل الأخيرة ابحث عن الرمز  ثم اضف الكود التالي فوقه مباشرةً

5. أنقر على حفظ القالب ثم أنتقل إلى التخطيط والآن يجب أختيار مكان زر البحث أختر المكان المناسب ثم أنقر على إضافة أداة أختر من بين الأدوات اداة HTML/JavaScript

وأخيراً أضف الكود التالي في الأداة ثم انقر على حفظ.

 بحث

إذا واجهتك اية مشاكل لا تتردد في ترك تعليق :)