عمل قائمة منسدلة على بلوغر

بسم الله الرحمان الرحيم

السلام عليكم ورحمة الله وبركاته 

اهلن بزوارنا الكرام في درس جديد وحصري اليوم ساخدكم الى درس مطلوب جدا من طرف المدونين وهو كيفية عمل قائمة منسدلة على بلوغر طبعا الدرس سهل جدا ولن ياخذ وقتا لاضافته الى بلوغر 

صورة للاضافة :

لنبدأ على بركة الله :

الخطوة الاولى :

نتجه كما العادة الى هنا "Layout" -> "Edit HTML"

ثم نبحث عن : 

</head>

 ثم نضيف قبلها مباشرة الكود التالي :

<!--jquery-DD-Menu-Starts--><style type="text/css">/* menu styles */#jsddm{ margin: 0;padding: 0}#jsddm li{ float: left;list-style: none;font: 12px Tahoma, Arial}#jsddm li a{ display: block;background: #324143; /*DARK-GREEN*/padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap}#jsddm li a:hover{ background: #24313C}#jsddm li ul{ margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white}#jsddm li ul li{ float: none;display: inline}#jsddm li ul li a{ width: auto;background: #A9C251; /*LIGHT-GREEN*/color: #24313C}#jsddm li ul li a:hover{ background: #8EA344}</style><!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var timeout = 500;var closetimer = 0;var ddmenuitem = 0;function jsddm_open(){ jsddm_canceltimer();jsddm_close();ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}function jsddm_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}function jsddm_timer(){ closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer);closetimer = null;}}$(document).ready(function(){ $('#jsddm > li').bind('mouseover', jsddm_open);$('#jsddm > li').bind('mouseout', jsddm_timer);});document.onclick = jsddm_close;</script><!--jquery-DD-Menu-Stops-http://bdlab.blogspot.com-->

 تنويه : اذا اردت تغيير الوان التي بالاضافة ما عليك سوى البحث عن الالون التالية في الكود اعلاه وتغييره كما تشاء

ثم نحفظ القالب

 الخطوة الثانية :

نذهب الى "Layout" -> "Page Elements" ثم Add a Gadget ثم "HTML/JavaScript"

 وننلصق الكود التالي :

<!--BODY-CODE--><ul id="jsddm"><li><a href="#">JavaScript</a><ul><li><a href="#">Drop Down Menu</a></li><li><a href="#">jQuery Plugin</a></li><li><a href="#">Ajax Navigation</a></li></ul></li><li><a href="#">Effect</a><ul><li><a href="#">Slide Effect</a></li><li><a href="#">Fade Effect</a></li><li><a href="#">Opacity Mode</a></li><li><a href="#">Drop Shadow</a></li><li><a href="#">Semitransparent</a></li></ul></li><li><a href="#">Navigation</a></li><li><a href="#">HTML/CSS</a></li><li><a href="http://3alymni.blogspot.com">Blogger Help</a></li></ul>

 هذه علامة غيرها بالوصلة " الرابط "

"#"