-
اتبعني
تابعني على تويتر
-
التدوينات RSS
اشترك في خدمة RSS
-
فيس بوك
انضم للمعجبين في FACEBOOK
اين انت .... » الرئيسية »
أدوات بلوجر
» انشاء قامة jqueryداخل البلوج
انشاء قامة jqueryداخل البلوج
الثلاثاء
التسميات:
أدوات بلوجر
الموضوع النهارده هو شرح كيفية اضافة قائمة jquery في المدونات
1.اول حاجة تدخل الي لوحة تحكم البلوجر>layout>edit html
2.ابحث عن الكلمة </head>
3.انسخ الكود اللي في المربع فوق الكلمة التي بحثت عنها </head> .
<style type='text/css'>
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});
});
</script>
ملاحظة:
تقدر تغيير الالوان والعرض والطول من الكود السابق لو حبيت
4.بعد ما خلصت اعمل save tempate
5.ارجع تاني الي layout وبعدين page element ثم add a gadget , اضغط علي html\java script
6.اعمل كوبي علي الكود التالي وانسخه في المكان الفارغ في html\java script.
<ul id="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Blogger</a>
<span>
<a href="#">Widgets</a> |
<a href="#">Tip And Tricks</a> |
<a href="#">Basic</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>
</ul>
كيفية تغيير الكود باسم تاني وعنوان جديد
<li><a href="#">Home</a></li>
هو ده شكل الكود اللي مكتوب
كل اللي عليك انك تعملة انك تشيل كلمة (HOME) وتحط مكانها الكلمة اللي عاوزها
وبعد كدة تشيل العلامة (#) وتحط مكانها الرابط المطلوب الدخول عليه عند الضغط علي الكلمة
نفس الموضوع هنعمله في باقي الكلمات
هذا هو الشكل النهائي للقائمة:
0 التعليقات:
إرسال تعليق