إضافة قائمة أفقية بمدونة بلوجر
قبل أن نضيف أي كود بمدونة بلوجر ، يجب أن نأخذ نسخة إحتياطية من قالب المدونة ، ولكي نضيف كود قائمة أفقية بمدونة بلوجر بمدونة بلوجر نتبع الخطوات التالية :
طريقة التركيب
1- توجه للوحة التحكم الرئيسية لمدونتك
طريقة التركيب
بالنسبة لمستخدمي لوحة التحكم القديمة
1- توجه للوحة التحكم الرئيسية لمدونتك
2- تصميم
3-تحريرhtml
4- توسيع للقالب
أما بالنسبة لمستخدمي لوحة التحكم الجديدة
1 -لوحة التحكم الرئيسية بمدونتك
2-أختار من القائمة (قالب)
3- تحريرhtml
4- متابعة
5-
3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):
<div id='header-wrapper'>
أو البحث عن الكود التالي :
<div id='header'>
4- ثم نضع الكود التالي قبله مباشرة :
<div class='topNav'>
<div class='topMenu'>
<ul id='dropmenu'>
<li><a href='#'>الصفحة الرئيسية</a></li>
<li><a href='#'>المنتدى</a></li>
<li><a href='#'>البلوجر</a>
<ul>
<li><a href='#'>دروس البلوجر</a></li>
<li><a href='#'>إضافات البلوجر</a></li>
<li><a href='#'>حلول بلوجر</a></li>
</ul>
</li>
<li><a href='#'>دورات تعليمية</a>
<ul>
<li><a href='#'>سبحان الله</a></li>
<li><a href='#'>الحمد لله</a></li>
<li><a href='#'>الله اكبر</a></li>
<li><a href='#'>لا إله إلا الله</a></li>
<li><a href='#'>محمد رسول الله</a></li>
<li><a href='#'>طيبة مصرية</a></li>
</ul></li>
<li><a href='#'>برامج كاملة</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
مع ملاحظة : أنه يجب تغير الأقسام الرئيسية بالقائمة ذات اللون الأحمر إلى الأسماء التي تريدها لأقسامك الرئيسية ، وتغير الأقسام الفرعية بالقائمة ذات اللون الأسود إلى الأسماء التي تريدها لأقسامك ، وتغير هذا الرمز # إلى الروابط الخاصة بالأقسام الرئيسية والروابط الخاصة بالأقسام الفرعية .
]]></b:skin>
6- ثم نضع الكود التالي قبله مباشرة :
.topNav {
width:100%;
height:40px;
overflow:visible;
margin:0 auto;
background: -webkit-linear-gradient(top, #41434f, #272931);
background: -moz-linear-gradient(top, #41434f, #272931);
background: -ms-linear-gradient(top, #41434f, #272931);
background: -o-linear-gradient(top, #41434f, #272931);
border-bottom:1px solid #444;
}
.topMenu {
height:40px;
width:100%;
float:right;
overflow:visible;
margin:0px 0 0 0;
}
.topMenu ul {
margin: 0px 10px 0 0;
text-align:right;
}
.topMenu ul li {
}
.topMenu ul li a {
}
.topMenu ul li a:hover {
color:#fff;
}
#dropmenu, #dropmenu ul {
margin: 0px 10px 0 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 1.5em;
z-index: 999;
width: 100%;
font-weight: bold;
}
#dropmenu a {
-moz-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ;
-webkit-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
display:block;
font: normal 11px/42px Tahoma, Geneva, sans-serif;
color:#1599ae;
height:40px;
display:block;
text-shadow:0 1px #1a1b20;
padding: 0 20px;
}
#dropmenu a:hover {
}
#dropmenu .current a, #dropmenu li:hover > a {
color:#fff;
text-shadow:0 1px #000;
background:#14161c;
}
#dropmenu li {
float:right;
height:40px;
border-left:1px solid #262831;
position: relative;
}
#dropmenu li:last-child {
background: none;
}
#dropmenu ul {
padding: 10px 5px 2px 0;
position: absolute;
display: none;
width: 293px;
top: 40px;
right: -15px;
background:#14161c;
}
#dropmenu ul a {
}
#dropmenu li ul li {
float: right;
background: none !important;
height: 29px;
width: 130px;
padding:0 !important;
margin: 0px 9px 10px 4px !important;
}
#dropmenu li ul li:hover {
background: none !important;
height: 29px !important;
width: 130px !important;
}
#dropmenu li ul a {
font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
padding:0 !important;
float: right;
height: 29px;
width: 130px;
color: #000;
text-shadow:0 1px #ffffff;
background:#ffffff;
text-align:right;
text-indent:8px;
}
#dropmenu li ul a:hover {
background: #18acbd;
color: #000 !important;
height: 29px;
text-shadow:0 1px #1dbecb;
width: 130px;
font: normal 11px/27px Tahoma, Geneva, sans-serif !important;
border-top:none !important;
}
#dropmenu ul ul {
top: auto;
}
#dropmenu li ul ul {
left: 12em;
margin: 0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
display: none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
display: block;
}
7- نضغط على زر حفظ التغيرات لكي يتم حفظ القالب .
جزى الله خيرا كل من ساهم فيه