تُعد إضافة قائمة أفقية لمدونات بلوجر من الطرق الفعالة لتحسين تنسيق المدونة وجعلها أكثر تنظيمًا وجاذبية للزوار. سواء كنت تدير مدونة شخصية أو مدونة تجارية، فإن القائمة الأفقية تساعد في تسهيل التنقل بين الصفحات والمحتوى المختلف بشكل مرتب وواضح.
تتميز هذه الطريقة بكونها عملية للغاية، حيث توفر للمستخدمين إمكانية الوصول السريع إلى الأقسام المختلفة في المدونة دون الحاجة للبحث المطول. بالإضافة إلى ذلك، تضفي القائمة الأفقية لمسة جمالية على التصميم العام للمدونة، مما يجعلها أكثر احترافية.
في هذا المقال، سوف نعرض لك طريقة إضافة قائمة أفقية إلى مدونتك على بلوجر خطوة بخطوة، مع شرح كيفية تخصيصها بما يتناسب مع احتياجاتك. سنوفر لك أيضًا بعض النصائح حول كيفية تحسين الأداء البصري لهذه القائمة، بحيث تساهم في تحسين تجربة الزوار وزيادة تفاعلهم مع المحتوى. إذا كنت ترغب في إعطاء مدونتك لمسة من التنظيم والاحترافية، تابع معنا لتتعرف على كيفية إضافة هذه القائمة بسهولة.
والآن نذهب مباشرة للطريقة وكيفية التطبيق.
قم بالبحث عن الكود التالي :لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.
رابط تحميل الاكواد المذكورة بالاسفل
رابط التحميل
font : bold 13px Arial, Helvetica, Sans-serif;
border : #121314 solid 1px;
border-top : 1px solid #2b2e30;
overflow : hidden;
width : 100%;
background : #3c4042;
}
#nav ul {
margin : 0;
padding : 0;
list-style : none;
}
#nav ul li {
float : right;
}
#nav ul li a {
float : right;
color : #d4d4d4;
padding : 10px 20px;
text-decoration : none;
background : #3c4042;
border-right : 1px solid rgba(255, 255, 255, 0.05);
border-left : 1px solid rgba(0, 0, 0, 0.2);
}
#nav ul li a:hover, #nav ul li:hover > a {
color : #252525;
background : #3c4042;
}
#nav li ul a:hover, #nav ul li li:hover > a {
color : #2c2c2c;
background : #5c9acd;
border-bottom : 1px solid rgba(0, 0, 0, 0.6);
border-top : 1px solid #7baed9;
}
#nav li ul {
background : #3c4042;
right : -999em;
margin : 35px 0 0;
position : absolute;
width : 160px;
z-index : 9999;
box-shadow : 0 0 15px rgba(0, 0, 0, 0.4) inset;
border : rgba(0, 0, 0, 0.5) solid 1px;
}
#nav li:hover ul {
right : auto;
}
#nav li ul a {
background : none;
border : none 0;
margin-left : 0;
width : 120px;
box-shadow : none;
border-bottom : 1px solid transparent;
border-top : 1px solid transparent;
}
.nav ul li ul {
position : absolute;
right : 0;
display : none;
visibility : hidden;
}
.nav ul li ul li {
display : list-item;
float : none;
}
.nav ul li ul li ul {
top : 0;
}
.nav ul li ul li a {
font : normal 14px Verdana;
width : 160px;
padding : 5px;
margin : 0;
border-top-width : 0;
border-bottom : 1px solid gray;
}
#nav li li ul {
margin : -1px 160px 0 0;
visibility : hidden;
}
#nav li li:hover ul {
visibility : visible;
}
<li><a href="#">الرئيسية</a></li>
<li><a href="#">تعديل</a></li>
<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>
<li><a href="#">تعديل قسم فرعي</a></li>
<li><a href="#">تعديل قسم فرعي</a></li>
</ul>
</li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul></div>
أتمنى أن تنال إعجابكم ، فلا تبخلوا علينا بتعليقاتكم ،في إنتظار تشجيعاتكم
في الختام، إضافة قائمة أفقية إلى مدونة بلوجر تعد خطوة مهمة لتحسين تجربة المستخدم وجعل التنقل في المدونة أكثر سهولة وسلاسة. من خلال اتباع الخطوات التي عرضناها في هذا المقال، يمكنك إضافة هذه القائمة بطريقة احترافية تناسب تصميم مدونتك وتزيد من جاذبيتها. كما أن تخصيص القائمة لتتناسب مع محتوى المدونة يساعد على تنظيمها بشكل أفضل ويمنح الزوار تجربة تصفح مريحة.
لا تتردد في الاستفادة من هذه الميزة لتطوير مدونتك وزيادة تفاعل الزوار مع محتواك. تذكر أن تحديث مدونتك بشكل مستمر وإضافة لمسات جديدة يعزز من احترافية الموقع ويجعله أكثر جذبًا لقراءك. إذا كانت لديك أي أسئلة أو تحتاج إلى مساعدة إضافية، يمكنك دائمًا العودة إلى هذا الدليل أو البحث عن المزيد من الموارد لتحسين مهاراتك في إدارة المدونات.
مع اطيب تمنياتى لكم بمدونة رائعة المظهر
تعليقات
إرسال تعليق