اضافة قائمة مندسلة متجاوبة لمدونات بلوجر

اضافة قائمة مندسلة متجاوبة لمدونات بلوجر - قائمة رئيسية منسدلة متجاوبة لمدونات بلوجر بشكل إحترافى، أضف كود القائمة الرئيسية وإستمتع بشكل جمالى لمدونتك.

لعلك بحثت كثيراً عن كيفية اضافة قائمة متجاوبة منسدلة لمدونتك بشكل إحترافى، وفى نفس الوقت تكون متوافقه مع سيو بدون أى أخطاء تقنية، نقدم إليكم قائمة رئيسية منسدلة بشكلين، تتوافق مع تصميم وقالب مدونتك فى بلوجر، الأن سأشرح لكم كيفية إضافة القائمة الرئيسية لمدونتك.

شرح تركيب الاضافة

1. من القالب ابحث عن ]]></b:skin> ثم ضع الكود التالى فوقه

/* Main Navigation by www.rotkx.com */
#inv-navigation{background:#fff;font-size:0;white-space:nowrap;margin:0 auto}
#inv-navigation ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#inv-navigation a{display:block;padding:15px 12px;text-decoration:none;color:#fff}
#inv-navigation ul,#inv-navigation li{background:#4AA3DF;margin:0 auto;padding:0;list-style:none}
#inv-navigation li{display:inline-block;position:relative;font-size:14px;font-weight:700;text-align:right;float:right}
#inv-navigation li.indie a{background:rgba(0,0,0,0.06);padding:15px}
#inv-navigation li:hover.indie,#inv-navigation li:hover.indie a{background:rgba(0,0,0,.06)}
#inv-navigation input{display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#inv-navigation label{display:none;width:55px;height:48px;line-height:48px;text-align:center}
#inv-navigation label span{font-size:16px;position:absolute;right:55px}
#inv-navigation ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none}
#inv-navigation ul.menus a{color:#ec3838;line-height:55px}
#inv-navigation li a:hover{background:rgba(0,0,0,.06);color:#fff}
#inv-navigation ul.menus a:hover{background:rgba(0,0,0,.06);color:#fff}
#inv-navigation li ul{visibility:hidden;opacity:0;background:#fff;margin:0;width:150px;height:auto;position:absolute;top:100%;right:0;z-index:10;box-shadow:0 4px 15px -2px rgba(0,0,0,0.1)}
#inv-navigation li:hover ul.menus,#inv-navigation li:hover >
ul{visibility:visible;opacity:1}
#inv-navigation li li{display:block;float:none;font-size:13px;border-bottom:1px solid #f5f5f5}
#inv-navigation li li:last-child{border:0}
#inv-navigation li ul ul{right:100%;top:0}
#inv-navigation li li >
a{background:#fff;color:#999;display:block;padding:7px 15px;margin:0;text-decoration:none;text-transform:none;font-weight:400;border-right:2px solid transparent;transition:background .3s}
#inv-navigation li li:hover,#inv-navigation li li a:hover{background:#fafafa;color:#444;border-right:2px solid #ccc}
@media screen and (max-width:800px){
#menu{display:block}
#inv-navigation{font-size:initial;color:#888;position:relative;display:block;padding:20px;font-weight:700}
#inv-navigation ul{background:#fff;position:absolute;top:100%;right:0;z-index:3;height:auto;display:none}
#inv-navigation ul.menus{width:100%;position:static;padding-right:20px}
#inv-navigation li{background:#fff;display:block;float:none;width:auto}
#inv-navigation a,#inv-navigation li a:hover{color:#444}
#inv-navigation li.indie a{background:#fff;padding:7px 12px}
#inv-navigation input,#inv-navigation label{position:absolute;top:0;right:0;display:block}
#inv-navigation input{z-index:4}
#inv-navigation input:checked + label{color:#888}
#inv-navigation input:checked ~ ul{display:block;width:100%}
#inv-navigation li:hover >  ul{width:100%}
#inv-navigation li li{border:0}
#inv-navigation li li >  a{background:#f9f9f9;color:#888;transition:initial;font-weight:700}
#inv-navigation li li:hover,#inv-navigation li li a:hover{background:#bbb;color:#fff;box-shadow:inset 3px 0 0 transparent}
#inv-navigation li ul{background:rgba(0,0,0,.15);display:block;visibility:visible;opacity:1;padding:0;position:relative;width:100%;right:initial;box-shadow:none}
#inv-navigation li:hover ul.menus,#inv-navigation li:hover >  ul{right:initial}
}

2. ابحث عن </header> ثم ضع الكود التالى تحته

<nav id='inv-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type='checkbox'>القائمة &#9776;</input>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><span itemprop='name'>الرئيسة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>المدونة</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>عن المدونة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتصل بنا</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>إخلاء المسؤولية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>سياسة الخصوصية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>الفهرس</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتفاقية الاستخدام</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>اربح اونلاين</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>معلومات هامة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>انترنت</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>صحة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>التسميات</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>عن المدونة</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتصل بنا</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>إخلاء المسؤولية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>سياسة الخصوصية</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>الفهرس</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>اتفاقية الاستخدام</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>صفحة خطأ</span></a></li>
</ul>
</div>
</nav>

3. اضغط حفظ.

والان انتهينا من اضافة قائمة مندسلة متجاوبة لمدونات بلوجر، وفى النهاية اتمنى ان تصل الفكرة، يمكنك تغيير اللون الازرق باللون الذى يتناسب مع قالب مدونتك.

يمكنك مشاهدة الاضافة عبر زر المعاينة التالى.

• معاينة