السلام عليكم
اليوم مع دروس البلوجر
طريقة إضافة NavBar أنيق لمدونة بلوجر Css & Html
(قائمة منسدلة على بلوجر)
صور لإضافة:
1.
2.
شرح تركيب الإضافة:
اذهب إلى لوحة التحكم ثم قالب ثم تحرير HTML :
- ابحث عن : ]]></b:skin>
وألصق الكود التالي قبلها مباشرة:
*{
margin:0 ;
padding:0 ;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
body {
background: Url(BG.PNG);
}
.KrissMenu {
margin-top: 200px;
}
.KrissMenu ul {
list-style: none;
background: -webkit-linear-gradient(#292e32,#1F2326);
height:40px;
width: 320px;
margin: auto;
border-radius: 3px;
box-shadow: 0 0 0 1px #080c0f, inset 0 1px 0 #414548 ;
}
.KrissMenu ul li {
float: left;
position: relative;
}
.KrissMenu ul li.li {
height: 40px;
border-left: 1px solid #080c0f;
border-right: 1px solid #414548;
}
.KrissMenu ul li a {
display: block;
color: #bbb;
padding:13px 20px;
text-shadow: 0 1px 0 #0a0a0a ;
font-weight: bold;
}
.KrissMenu ul li a:hover {
background: -webkit-linear-gradient(bottom,#1D2124,#16171B);
box-shadow: 0 0 10px #000 inset;
}
.KrissMenu ul li ul {
list-style: none;
position: absolute;
width: auto;
height: auto;
background: #767d83;
box-shadow: 0 0 5px #111;
margin-top: 5px;
top: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 1s ease;
}
.KrissMenu ul li ul li {
float: none;
}
.KrissMenu ul li ul li a {
color: #0a0b0d;
text-shadow: 0 1px 0 #979fa1 ;
}
.KrissMenu ul li ul li a:hover {
background: -webkit-linear-gradient(#565d63,#3e4347);
box-shadow:0 0 0 1px #303538, inset 0 1px 0 #676e74 ;
color: #d9dee2;
text-shadow: 0 1px 0 #191d20 ;
}
.KrissMenu ul li ul li a:first-child {
border-radius: 3px ;
}
.KrissMenu ul li:hover ul {
visibility: visible;
opacity: 1;
top: 40px;
}
- وبعد ذلك ابحث عن: <body>
وأضف الكود التالي بعده مباشرة (إن أردت أن يظهر في أعلى الصفحة):
<div class="KrissMenu">
<ul>
<li><a href="#Index">Home</a></li>
<li class="li"></li>
<li><a href="#Contact">Contact</a></li>
<li class="li"></li>
<li>
<a href="#Blog">Blog</a>
<ul>
<li><a href="#Registre">Registre</a></li>
<li><a href="#Tuto">Tuto</a></li>
<li><a href="#News">News</a></li>
<li><a href="#Games">Games</a></li>
</ul>
</li>
<li class="li"></li>
<li><a href="#About">About</a></li>
</ul>
</div>
إذا أردت أن يظهر في مكان اخر في بلوجر.
- اذهب الى التخطيط وأضف أداة HTML/JavaScript الصق فيها الكود السابق مع تغيير أسماء التسميات وروابطها
* قم بتغيير اللون الأحمر إلى الروابط التي توافق اللأسماء باللون الأزرق.
تعليقات
إرسال تعليق