الدرس 77: طريقة اضافة صندوق مربع البحث منبثق على مدونة بلوجر

شرح طريقة اضافة صندوق مربع بحث search box منبثق جميل مع الزر الخاص به على مدونات بلوجر Blogger مع طرق التخصيص

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

طبعا فى هذا الدرس سنتعلم كيفية اضافة اكواد CSS و JAVA و HTML الخاص بصندوق البحث المنبثق الخاص ببلوجر و طريقة تخصيصه على حسب ذوقك

كيفية انشاء صندوق مربع البحث منبثق مع زر خاص به على بلوجر

فى هذا الفيديو ستجدون طريقة اضافة الاكواد وطريقة تخصيص زر البحث

1- اضافة كود CSS فوق الوسم : ]]></b:skin>

.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;
}

2- اضافة هذا الكود تحت الوسم : <body>

تجد الكود فى هذا الرابط من هنا : dialog-box

3- اضافة هذا الكود فوق الوسم : </body>

//]]>
    </script>

4- اضافة هذا الكود فى تخطيط المدونة على اداة جديدة : HTML/JavaScript

<div id="trigger-overlay" ><a><i class="fa fa-search"></i> بحث</a></div>

كان هذا هو درسنا فى هذه الحلقة ارجوا ان تنال اعجابكم و الى حلقة اخرى ان شاء الله

تعديل المقال

أقسام الوصول السريع ( مربع البحث )

الدرس 77: طريقة اضافة صندوق مربع البحث منبثق على مدونة بلوجر

مقالات قد تهمك