اندرويد

آخر الأخبار

اندرويد
اندرويد
جاري التحميل ...
اندرويد

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

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






صورة الإضافة


كيفية إضافة مربع البحث المنبثق لمدونات بلوجر
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
وأخيراً أضف الكود التالي في الأداة ثم انقر على حفظ.
إذا واجهتك اية مشاكل لا تتردد في ترك تعليق :)




 : مولاي خالد

بقلم : مولاي خالد

مدون مغربي ناشئ يهتم بكل ما هو جديد في عالم التكنولوجيا و التقنية.

التعليقات



ندعوك للاشتراك في المدونة ليصلك الجديد دائما

إتصل بنا

زوار المدونة

جميع الحقوق محفوظة

الجليد

2016