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

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

الخطوة الأولى:
التوجه الى قالب ثم تحرير 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/AVvXsEjRitz20FjfqFZu7auxI6Vmp95SniZLLM1BIwDBk0O3U-UD6UQasbEeihRSO0j8czuQ7omUB9ium4ggM4vlvL_NoWtGuMNZHRxD_9FAYI37fYVEwcI5PJvwk3oZ9in9s0vK5GQgm2_i130/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://iq7tech.blogspot.com/'>عنوان رابط 1</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط 2</a></li>
<li><a class='submenucol' href='#'>عنوان رابط 3</a>
<ul>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 1</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 2</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 3</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 4</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 5</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>عنوان رابط 4</a>
<ul>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 1</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 2</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 3</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 4</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 5</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>عنوان رابط 5</a>
<ul>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 1</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 2</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 3</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 4</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 5</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 6</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 7</a></li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط متشعب 8</a></li>
</ul>
</li>
<li><a href='http://iq7tech.blogspot.com/'>عنوان رابط 6</a></li>
</ul>
<br class='clearit'/>
</div>
</div>

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