مميزات الهيدر
- زر البحث احترافي
- يحتوي على عنوان h1 بشكل احترافية
- يحتوي على مكان لإضافة 3 أقسام رئيسية
معاينة الهيدر على قالب ميديان
خطوات إضافة الهيدر في قالب بلوجر ميديان
إذا كنت تستخدم قالب بلوجر ميدان النسخة الخامسة Median Ui V1.5 وترغب بإضافة هذا الهيدر في القالب كل ما عليك فعله هو اتباع الخطوات التالية:
- انتقل إلى منصة بلوجر
- من القائمة الجانبية اختر التنسيق
- سوف تظهر لك صفحة التخطيط الخاصة بالقالب، قم بالبحث عن هذه الأداة كما موضحة في الصورة
<div id='hero-wrapper'>
<div class='row'>
<div class='container'>
<!--[ Homepage title ]-->
<div class='hero-content'>
<h1 class='hero-title'>افضل القوالب الاحترافية نقدمها مجانا </h1>
<p class='hero-text'>اعثر على القالب المثالي لك من بين مجموعة كبيرة من أفضل القوالب المحسنة لمحركات البحث والتي تستطيع من خلالها تحسين مدونتك</p>
</div>
<div class='hero-search'>
<form action='/search' class='search-form' method='get'>
<input aria-label='Search' autocomplete='off' autocorrect='off' class='search-input' name='q' placeholder='ابحث هنا.. ' spellcheck='false' type='text'/>
<button class='search-button' title='Search' type='submit' value=''><svg class='line' viewbox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><circle class='fill' cx='9.76659044' cy='9.76659044' r='8.9885584'></circle><line x1='16.0183067' x2='19.5423342' y1='16.4851259' y2='20.0000001'></line></g></svg></button>
</form>
</div>
<div class='hero-tags'>
<span class='tags-label'><b>الأقسام :</b></span><a class='popular-tag' href='https://luna-templates.blogspot.com/'>قوالب</a>,
<a class='popular-tag' href='https://luna-templates.blogspot.com/'>سكربتات</a>,
<a class='popular-tag' href='https://luna-templates.blogspot.com/'>إضافات</a>
</div>
</div>
</div>
</div>
<style>
#hero-wrapper{background-blend-mode:overlay;padding:50px 0;margin:0;background: url(https://res.cloudinary.com/themewiki/image/upload/v1625063858/background-circle_xmyhnx.png)}
.hero-content{color:var(--hero-color);text-align:center;margin:0 0 30px}
.hero-content h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px}
.hero-content p{display:block;font-size:16px;color:var(--hero-text-color);margin:0}
.hero-search{text-align:center;margin:0 0 13px}
.hero-search .search-form{display:inline-block;position:relative;width:480px;max-width:100%;height:50px;border:0}
.hero-search .search-input{float:right;width:100%;height:50px;background-color: var(--transparent-bg);overflow:hidden;font-size:14px;color:#95a5a6;font-family:inherit;font-weight:400;line-height:51px;padding:0 20px;border:0;border-radius:6px}
.hero-search .search-input::placeholder{color:var(--title-color);opacity:.55}
.hero-search .search-input:focus{box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.hero-search .search-button{position:absolute;top:0;left:0;height:50px;background-color:transparent;overflow:hidden;font-size:14px;color:#95a5a6;text-align:center;line-height:51px;cursor:pointer;opacity:.85;padding:0 20px;border:0;border-radius:6px 0 0 6px}
.hero-search .search-button:hover{background-color:rgba(155,155,155,0.1)}
.hero-tags{float:right;width:100%;font-size:14px;color:var(--hero-color);text-align:center;margin:0 0 10px}
.hero-tags span,.hero-tags a{display:inline-block}
.hero-tags a{color:var(--hero-text-color);margin:0 10px 0 0}
.hero-tags a:hover{color:var(--hero-color)}
.hero-promo{float:right;width:100%;font-size:21px;color:var(--hero-text-color);text-align:center;padding:40px 0 0;margin:20px 0 0;border-top:1px solid rgba(255,255,255,0.15)}
.hero-promo a{color:var(--hero-color);font-weight:700;margin:0}
.hero-promo a:hover{color:var(--hero-text-color)}
@media screen and (max-width: 1030px) {
.row{width:100%;max-width:100%;margin:0}
.container{padding:0 15px}}
@media screen and (max-width: 640px){
.hero-content h1 {
font-size: 31px;}}
</style>
إضافة الهيدر في القوالب الأخرى
إذا كنت تستخدم قالب مختلف عن قالب ميديان اتبع الخطوات التالية لإضافة الهيدر في قالبك:
- انتقل إلى منصة بلوجر
- من القائمة الجانبية اختر المظهر واضغط على تحرير html
- قم بالبحث عن الكود التالي </header> والصق الكود الموجود في الأسفل، تحته مباشرةً
<b:if cond='data:view.isMultipleItems'>
<div id='hero-wrapper'>
<div class='row'>
<div class='container'>
<!--[ Homepage title ]-->
<div class='hero-content'>
<h1 class='hero-title'>افضل القوالب الاحترافية نقدمها مجانا </h1>
<p class='hero-text'>اعثر على القالب المثالي لك من بين مجموعة كبيرة من أفضل القوالب المحسنة لمحركات البحث والتي تستطيع من خلالها تحسين مدونتك</p>
</div>
<div class='hero-search'>
<form action='/search' class='search-form' method='get'>
<input aria-label='Search' autocomplete='off' autocorrect='off' class='search-input' name='q' placeholder='ابحث هنا.. ' spellcheck='false' type='text'/>
<button class='search-button' title='Search' type='submit' value=''><svg class='line' viewbox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><circle class='fill' cx='9.76659044' cy='9.76659044' r='8.9885584'></circle><line x1='16.0183067' x2='19.5423342' y1='16.4851259' y2='20.0000001'></line></g></svg></button>
</form>
</div>
<div class='hero-tags'>
<span class='tags-label'><b>الأقسام :</b></span><a class='popular-tag' href='https://luna-templates.blogspot.com/'>قوالب</a>,
<a class='popular-tag' href='https://luna-templates.blogspot.com/'>سكربتات</a>,
<a class='popular-tag' href='https://luna-templates.blogspot.com/'>إضافات</a>
</div>
</div>
</div>
</div>
<style>
#hero-wrapper{background-blend-mode:overlay;padding:50px 0;margin:0;background: url(https://res.cloudinary.com/themewiki/image/upload/v1625063858/background-circle_xmyhnx.png)}
.hero-content{color:var(--hero-color);text-align:center;margin:0 0 30px}
.hero-content h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px}
.hero-content p{display:block;font-size:16px;color:var(--hero-text-color);margin:0}
.hero-search{text-align:center;margin:0 0 13px}
.hero-search .search-form{display:inline-block;position:relative;width:480px;max-width:100%;height:50px;border:0}
.hero-search .search-input{float:right;width:100%;height:50px;background-color: var(--transparent-bg);overflow:hidden;font-size:14px;color:#95a5a6;font-family:inherit;font-weight:400;line-height:51px;padding:0 20px;border:0;border-radius:6px}
.hero-search .search-input::placeholder{color:var(--title-color);opacity:.55}
.hero-search .search-input:focus{box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.hero-search .search-button{position:absolute;top:0;left:0;height:50px;background-color:transparent;overflow:hidden;font-size:14px;color:#95a5a6;text-align:center;line-height:51px;cursor:pointer;opacity:.85;padding:0 20px;border:0;border-radius:6px 0 0 6px}
.hero-search .search-button:hover{background-color:rgba(155,155,155,0.1)}
.hero-tags{float:right;width:100%;font-size:14px;color:var(--hero-color);text-align:center;margin:0 0 10px}
.hero-tags span,.hero-tags a{display:inline-block}
.hero-tags a{color:var(--hero-text-color);margin:0 10px 0 0}
.hero-tags a:hover{color:var(--hero-color)}
.hero-promo{float:right;width:100%;font-size:21px;color:var(--hero-text-color);text-align:center;padding:40px 0 0;margin:20px 0 0;border-top:1px solid rgba(255,255,255,0.15)}
.hero-promo a{color:var(--hero-color);font-weight:700;margin:0}
.hero-promo a:hover{color:var(--hero-text-color)}
@media screen and (max-width: 1030px) {
.row{width:100%;max-width:100%;margin:0}
.container{padding:0 15px}}
@media screen and (max-width: 640px){
.hero-content h1 {
font-size: 31px;}}
</style></b:if>
وبذلك نكون قد انتهينا من إضافة اليوم، إذا واجهتك اي مشكلة في تركيب الإضافة لا تتردد في ترك تعليق لنا وسوف نقوم بحلها في أقرب وقت ممكن.