السلام عليكم
اليوم مع دروس البلوجر
طريقة إضافة NavBar أنيق لمدونة بلوجر Css & Html
(قائمة منسدلة على بلوجر)
صور لإضافة:
1.
2.
شرح تركيب الإضافة:
اذهب إلى لوحة التحكم ثم قالب ثم تحرير HTML :
- ابحث عن : ]]></b:skin>
وألصق الكود التالي قبلها مباشرة:
[QUOTE]*{ 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>
|
لمشاهدة الموضوع :
http://news-for-wou.blogspot.com/201...-css-html.html