نيو ويب بلوجر { NEW WEB }: اسرع طريقة لأضافة قائمة منسدلة لبلوجر

السلام عليكم سوف اشرح لكم طريقة اضافة قائمة منسدلة بطريقة سريعة وسهلة جدا لمن يريد اضافتها فى مدونته ...

تركيب الاضافة :

1- من لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة html/javascript

2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)

<style type="text/css">/* this code is by www.avdhootblogger.com Main */#menu{width: 100%;margin: 0;padding: 10px 0 0 0;list-style: none; background: #111;background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0 2px 1px #9c9c9c;-webkit-box-shadow: 0 2px 1px #9c9c9c;box-shadow: 0 2px 1px #9c9c9c;}#menu li{float: right;padding: 0 0 10px 0;position: relative;}#menu a{float: left;height: 25px;padding: 0 25px;color: #999;text-transform: uppercase;font: bold 12px/25px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#menu li:hover > a{color: #fafafa;}*html #menu li a:hover{ /* IE6 */color: #fafafa;}#menu li:hover > ul{display: block;}/* Sub-menu */#menu ul{list-style: none;margin: 0;padding: 0; display: none;position: absolute;top: 35px;left: 0;z-index: 99999; background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px;border-radius: 5px;}#menu ul li{float: none;margin: 0;padding: 0;display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;}#menu ul li:last-child{ -moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none; }#menu ul a{ padding: 10px;height: auto;line-height: 1;display: block;white-space: nowrap;float: none;text-transform: none;}*html #menu ul a{ /* IE6 */ height: 10px;width: 150px;}*:first-child+html #menu ul a{ /* IE7 */ height: 10px;width: 150px;}#menu ul a:hover{background: #0186ba;background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));background: -webkit-linear-gradient(#04acec, #0186ba);background: -o-linear-gradient(#04acec, #0186ba);background: -ms-linear-gradient(#04acec, #0186ba);background: linear-gradient(#04acec, #0186ba);}#menu ul li:first-child a{-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}#menu ul li:first-child a:after{content: '';position: absolute;left: 30px;top: -8px;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 8px solid #444;}#menu ul li:first-child a:hover:after{border-bottom-color: #04acec; }#menu ul li:last-child a{-moz-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}/* Clear floated elements */#menu:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html #menu { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */</style><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript">$(function() {if ($.browser.msie && $.browser.version.substr(0,1)<7){$('li').has('ul').mouseover(function(){$(this).children('ul').show();}).mouseout(function(){$(this).children('ul').hide();})}}); </script><ul id="menu"><li><a href="http://new2015.blogspot.com/">Home</a></li><li><a href="http://new2015.blogspot.com/">Categories</a><ul><li><a href="http://new2015.blogspot.com/">CSS</a></li><li><a href="http://new2015.blogspot.com/">Graphic design</a></li><li><a href="http://new2015.blogspot.com/">Development tools</a></li><li><a href="http://new2015.blogspot.com/">Web design</a></li></ul></li><li><a href="http://new2015.blogspot.com/">Work</a></li><li><a href="http://new2015.blogspot.com/">About</a></li><li><a href="http://new2015.blogspot.com/">Contact</a></li>

</ul> 

*** طريقة تعديل القائمة ***

-----------------------

1- اللون الاخضر : عناوين الاقسام الافقية .

2- اللون الاحمر :  عناوين الاقسام العمودية .

3- اللون الازرق :  روابط الاقسام كل قسم له رابطه الخاص 

عنوان التدوينة: اسرع طريقة لأضافة قائمة منسدلة لبلوجر
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Unknown
التسميات : أضافات بلوجر
توقيت النشر : 7:11 م

عدد التعليقات : 0

عدد المشاهدات :

الرجاء مشاركة الموضوع لتعم الفائده على الجميع

فيس بوك

غرد

تويتر

جوجل +

لينكدان

get