إضافة قائمه أفقيه لصفحات المدونه بتأثيرات 3D

بسم الله والحمد لله
القائمه الأفقيه أو الصفحات وهى طبعا التى تشتمل على الرئيسيه وباقى الأقسام وموضوعنا اليوم عن إنشاء قائمه أفقيه بتأثير ثلاثى الأبعاد
يعطى مظهرا رائع لمدونتك بشكلين متوافقين بإذن الله مع جميع ألوان القوالب وطريقة إضافته سهله جدا إتبع الأتى
- إذهب إلى مدونتك بلوجر
- التصميم >> تحرير HTML
- ضع علامه فى خانة توسيع القالب
- إبحث عن الكود التالى 

</head>

ثم قبله مباشرة ضع الكود التالى

<style type='text/css'>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 99%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCU3Z2lBVJ18105cLHxrUWpcqEQyLHEUbJC0Lwyikqu4zfK84UPEyOYVOuH5fYsVxjC9hWCz-Ie1-ueKWV0piQMp8mbBJcOwMdYvUcWm6m9dPdoRKGZr2JiXt15-F6iysA6uz3GM9XkM/s1600/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCU3Z2lBVJ18105cLHxrUWpcqEQyLHEUbJC0Lwyikqu4zfK84UPEyOYVOuH5fYsVxjC9hWCz-Ie1-ueKWV0piQMp8mbBJcOwMdYvUcWm6m9dPdoRKGZr2JiXt15-F6iysA6uz3GM9XkM/s1600/a_bg.gif) repeat-x left bottom;
}
</style>
<script src='http://yourjavascript.com/20561118251/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

ثم إحفظ القالب
* وإذهب إلى التصميم -> عناصر الصفحه -> HTML Javascribt*والأن إنسخ كود الشكل الذى تفضله وضعه به

شكل 1

<div class="container">

<ul id="topnav" class="v2">

<li><a href="http://hend-moments.blogspot.com">Home</a></li>
<li><a href="#">TOC</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

شكل 2

<div class="container">

<ul id="topnav">

<li><a href="http://hend-moments.blogspot.com">Home</a></li>
<li><a href="#">TOC</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

ملحوظه -*- غير الأسماء بما تشاء و علامة الشباك باللينكات وأحفظ وإنقل الأداه الى أسفل الهيدر
أى إستفسار أنا فى الخدمه للمعاينه 

Share

Tweet abuiyad