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

الأحد، 15 ديسمبر 2013

100 100 100

الرئيسية › حصريات › blogger › internet › درس تغيير القائمة الأفقية لمدونات بلوجر إلى قائمة إحترافية

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

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

بعض ذلك ابحث عن .m باستعمال Ctrl+f

بعض إيجاد الكود قم بتحديده كاملا وضع مكانه هذا الكود :

.inner{
height: 40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31Z0PB0Q6oAR6U7jdVqgHwkd7cOldNMH9cwAUp9VEzPYriOFurj8xHDwlIq1VIZD3uEau_6Ch30cJfq18L73eojU4ZyVvzVxsHQsMo4DTG6v7NsfCTPagwRdhMrkSv_QTT9QcrD6aSNc/s1600/mainNavigation.png);
}
.m{
height:40px;
width:980px;
border-bottom: 4px solid #d65f08;
margin-left: auto;
margin-right: auto;
}
.m ul{
margin:0;
list-style:none;
float:right;
padding:0;
}
.m ul li{
float:right;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoOxvl1E2AP693xm3RE0cu5BwCzlZgG2-GBdfl1OeogU_wRvaaD9hy2L5j1AkkVEvYxCoUMIyWD9C0Y2UMyO_W-MB9vYTHXyVoOWzS06TjoeJXa7942nFnPJJbgDTRvc_SQlVsylNa_I/s1600/navigationSeperator.png) repeat-y right;
}
.m ul li a{
text-decoration: none;
font-size: 12px;
font-family: droidkufi-bold, tahoma;
color: #e6e6e6;
padding: 14px 13px 15px;
line-height: 40px;
text-shadow: 1px 1px 1px #4f4f4f;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.m ul li a:hover{color: #272727;
text-shadow: 1px 1px 0px #777777;
}
.m ul li .home{ background:#d65f08 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_Ildem3b-rn3IRcD48WiZiNWG42eokfuEOo_x2MQ4EHGNxHXezyHPmQaZXEIgatOtoQbVJpacz98FvE5Kq_aYr9klyNM2xxcTEBj2i_eRLs5FzIatgrlsC3sPKC1jc6jM37r63YdIc0/s1600/home.png) center no-repeat; padding: 9px 28px 9px;}
.m ul li .home:hover{  background:#d65f08 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_Ildem3b-rn3IRcD48WiZiNWG42eokfuEOo_x2MQ4EHGNxHXezyHPmQaZXEIgatOtoQbVJpacz98FvE5Kq_aYr9klyNM2xxcTEBj2i_eRLs5FzIatgrlsC3sPKC1jc6jM37r63YdIc0/s1600/home.png) center no-repeat; padding: 9px 28px 9px;}
.m ul li a {padding: 14px 9px 15px ;}
}
.m ul li a {padding: 14px 9px 15px ;}
.recherche {
float: left;
height: 27px;
width: 165px;
}

</div>

وغير الألوان لتناسب مدونتك

بعد ذلك إبحث عن الكود التالي :

وضع فوقه هذا الكود :

ثم إذهب إلى نهاية الكود وأغلقه بالوسم

</div>

كما في الفيديو

للتوضيح شاهد الفيديو وفرجة ممتعة

إذا واجهتم أي مشكلة ضعوها في التعليق ولا تنسو مشاركة التدوينة مع أصدقائكم

تم النشر في : حصريات blogger internet

مواضيع آخرى :

كود تهنئة العيد لمدونات بلوجر بسم الله الرحمن الرحيم كل عام وأنتم بخير بمناسبة عيد الفطر المبارك مدونة المحترف نت لكم أكواد التهنئة ...
تحسين seo والأرشفة عن طريق الإستهداف الناجح السلام عليكم ورحمة الله تعالى وبركاته درس اليوم سيكون عن السيو seo والأرشفة ولمعلوماتكم هذا الدرس من اجتهادي الشخصي وليس منقول ع ...
[درس] اعرف ما يكتبه الأخرون عن أي موضوع بواسطة موقع hshtags [درس] اعرف ما يكتبه الأخرون عن أي موضوع بواسطة موقع hshtags السلام عليكم ورحمة الله وبركاته في هذا الدرس سأقدم لكم موقع مهم ...
سوني تكشف عن هاتف Xperia Z1 f في اليابان كشفت شركة سوني اليابانية النقاب عن هاتفها الجديد Xperia Z1 f، والذي يُعتبر النسخة المصغرة من هاتف Xperia Z1 الذي أعلنت عنه في سبتم ...
[درس] كيف تجعل روابط مواضيع مدونتك مباشرة [درس] كيف تجعل روابط مواضيع مدونتك مباشرة السلام عليكم ورحمة الله تعالى وبركاته سوف أشرح لكم في هذا الدرس طريقة تحويل روابط الع ...