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

عدد مشاهدات الموضوع:

العديد من التساؤلات حول كيفية عمل قائمة منسدلة أفقية لمدونات بلوجر تتضمن روابط تشعبية لاختصار الروابط الكثيرة داخل المدونة وسهولة وصول الزائر لمراده بسهولة. هنا سنشرح لكم الطريقة فى ثلاث خطوات بثلاثة أكواد. ولكن عاين الإضافة من هنا (مدونة تجريبية) واذا أعجبتك يمكنك اتباع الشرح داخل الفيديو التالى بالصوت والصورة باللغة العربية :)

الخطوة الأولى:

التوجه الى قالب ثم تحرير HTML ونقوم بالبحث (Ctrl+F) عن

]]></b:skin>

ونضع فوقه أو قبله الكود الأول التالى
لاحظ: القائمة تظهر على اليسار ولتحويلها الى اليمين قم باستبدال كلمتين Left باللون الأحمر الى right

 /* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU22G8dUKUf2GxbeAKg6T3K258IyswghBTwc9v6YJQIQ_0O-j0qW0KO70aV53RUQc-c76vieZWk8stdjxPaJ-E9-bjWdZE08y8Zk6TktJqAdeiptoEd5lId8Pg9yV-9PbM6W8-7D5NUQI/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
} 

تحويل القائمة من اليسار الى اليمين

الخطوة الثانية:

نبحث عن الكود االتالى

  /* Tabs

ونقوم بتحديد الكود أسفله حتى نصل الى الكود

 /* Columns

ونقوم باستبدال الكود المحدد بالكود التالى

 #crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;} 

بعد الانتهاء من الاضافة والاستبدال للأكواد السابقة نقوم بحفظ القالب وننتقل الى الخطوة الأخيرة 

الخطوة الثالثة:

اذهب الى تخطيط وإضافة أداة ثم اختار أداة HTML وضع داخلها الكود التالي بعد التعديل علي أماكن الروابط وعناويينها بما يناسب مدونتك

  <div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://abu-iyad.com'>عنوان رابط 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط 2</a></li>
<li><a class='submenucol' href='#'>عنوان رابط 3</a>
<ul>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 2</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 3</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 4</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 5</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>عنوان رابط 4</a>
<ul>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 2</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 3</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 4</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 5</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>عنوان رابط 5</a>
<ul>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 1</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 2</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 3</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 4</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 5</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 6</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 7</a></li>
<li><a href='http://abu-iyad.com'>عنوان رابط متشعب 8</a></li>
</ul>
</li>
<li><a href='http://abu-iyad.com'>عنوان رابط 6</a></li>
</ul>
<br class='clearit'/>
</div>
</div>

طريقة التعديل:

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