الموقع معروض للبيع، اذا كنت ترغب بشرائه تواصل معنا. متابعة

إضافة هيدر احترافي في قالب بلوجر ميديان أو أي قالب بلوجر آخر

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

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

مميزات الهيدر

  1. زر البحث احترافي
  2. يحتوي على عنوان h1 بشكل احترافية
  3. يحتوي على مكان لإضافة 3 أقسام رئيسية

معاينة الهيدر على قالب ميديان

معاينة الإضافة

خطوات إضافة الهيدر في قالب بلوجر ميديان

إذا كنت تستخدم قالب بلوجر ميدان النسخة الخامسة Median Ui V1.5 وترغب بإضافة هذا الهيدر في القالب كل ما عليك فعله هو اتباع الخطوات التالية:
  1. انتقل إلى منصة بلوجر 
  2. من القائمة الجانبية اختر التنسيق 
  3. سوف تظهر لك صفحة التخطيط الخاصة بالقالب، قم بالبحث عن هذه الأداة كما موضحة في الصورة 

قم بإضافة الكود الموجود في الأسفل في هذا الأداة واضغط حفظ ومبروك عليك الإضافة. 

<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>

إضافة الهيدر في القوالب الأخرى

إذا كنت تستخدم قالب مختلف عن قالب ميديان اتبع الخطوات التالية لإضافة الهيدر في قالبك:
  1. انتقل إلى منصة بلوجر 
  2. من القائمة الجانبية اختر المظهر واضغط على تحرير html
  3. قم بالبحث عن الكود التالي </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>
وبذلك نكون قد انتهينا من إضافة اليوم، إذا واجهتك اي مشكلة في تركيب الإضافة لا تتردد في ترك تعليق لنا وسوف نقوم بحلها في أقرب وقت ممكن. 

إرسال تعليق

إمتداد ويب © 2021 - 2022