درس تغيير القائمة الأفقية لمدونات بلوجر إلى قائمة إحترافية
السلام عليكم ورحمة الله تعالى وبركاته بعض الطلبات الكثيرة التي تلقيتها من الأصدقاء حول كيفية تغيير شكل القائمة الأفقية إلى قائمة إحترافية كما في مدونتنا قررت عمل درس أشرح فيه الطريقة وهي كالتالي:
أولا نذهب إلى لوحة التحكم - ثم إلى القالب ( قم بعمل نسخة احتياطية قبل البدأ في العمل ) - ثم تحرير HTML
بعض ذلك ابحث عن .m باستعمال Ctrl+f
بعض إيجاد الكود قم بتحديده كاملا وضع مكانه هذا الكود :
.inner{
height: 40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaU9GV7T2oAlGkuLkzyKLWn8Uhnw0cGyupbeFpFEGa27r4fSkomiO3YKmEmksKQMLkyKs5AauPwRVXI3fbMXxaY-CC1HBDn0aJIesq-OB5HkOpMf8QzHucRSMWKgLjkChn3ct3KXfhdg/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/AVvXsEitSbW3ykyXcZ7WY3437LC_cuZxQA-q5M1SSOKUIcGpeAXdrgu7h7xmFeREPYYK17Fpe0H3j5o9PxIrCLGwBn2pbr1m8DI5Z6HhkD0fwv8u2WADCfK7BsnRQ_oU_G6yKUWC-EcNTnUDwwg/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/AVvXsEgyDBP9mk17RQ4wDc7uefWGOhbKNO-2j00GoQDtPjQkLcCFrkoWivdvdbpaMErrPH98UZCdeClqPu4WBdVn4H27qBJPeN5HA8zPHWtqpwF1t0EqMQx9JfOdS75TgHPL4ff4S7SC-GrM10Y/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/AVvXsEgyDBP9mk17RQ4wDc7uefWGOhbKNO-2j00GoQDtPjQkLcCFrkoWivdvdbpaMErrPH98UZCdeClqPu4WBdVn4H27qBJPeN5HA8zPHWtqpwF1t0EqMQx9JfOdS75TgHPL4ff4S7SC-GrM10Y/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'>
ثم إذهب إلى نهاية الكود وأغلقه بالوسم
من فضلك شارك هذا الموضوع اذا اعجبك
الموضوع من طرف: عبد الحكيم الحماني
عبد الحكيم الحماني 19 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بتطوير المواقع والتجارة الالكترونية يمكنك متابعته من خلال الفيسبوك . تويتر . جوجل بلس
ليست هناك تعليقات:
إرسال تعليق