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

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

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

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

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

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

.inner{ height: 40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtpbKrFH1hNtWBw_QFK4RCx2YDndonwR8r4MJyIDNWiB9HPzUPz-TXT2iIKh7g5g08CU-Iqn_eOIsAWu5HEULzzHxX_E7sCFcMIyC9Cn8Jb82M5hUB8iSRxsstKxk8TNrj_VRka_mHA5k/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/AVvXsEiXXNqQRtDk9eQV883bpt_uIlfu2Zk3VXKGqHG-tzUWacyVwZ618c1F8T02-booG0mYwWltfKMeiv8lUikQ9zpEtD71s1nt3weQYEK-WqBRsJFcJwEhT8mNPACvpH8ej2lt1ynJ4vQ4YHU/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/AVvXsEjxo-c48GfODrFjptH4scNtCQTft2VSBZYfp6tbYObV1Vr5LuDqYu2ciTA3dST0fAk1icOsrZOGwwTfIOwHyAZ_VLg_CbNUptME-Zz-254uyCGcDr9KEdBprN1bAAjXOx5LUu11qXO2SA8/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/AVvXsEjxo-c48GfODrFjptH4scNtCQTft2VSBZYfp6tbYObV1Vr5LuDqYu2ciTA3dST0fAk1icOsrZOGwwTfIOwHyAZ_VLg_CbNUptME-Zz-254uyCGcDr9KEdBprN1bAAjXOx5LUu11qXO2SA8/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 class='m'>

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

<div class='inner'>

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

</div>

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

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

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

By glok

Similiar tagsحصرياتbloggerinternet