قائمة منسدلة - 3

اليكم شكل جديد من القائمة المنسدلة لاقسام وتبويبات المدونة.

تركيب الاضافة :
1- من لوحة التحكم   >>>   تخطيط   >>>   اضافة اداة html/javascript
2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)

<div id="navigbar">

<ul id="navig">

<li>

<a href="http://rydnet.blogspot.com/search/label/%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=20">إضافات بلوجر</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/search/label/%D9%82%D8%A7%D8%A6%D9%85%D8%A9%20%D9%85%D9%86%D8%B3%D8%AF%D9%84%D8%A9?&max-results=20">قائمة منسدلة</a>

<ul>

<li><a href="http://rydnet.blogspot.com/2013/10/Drop-down-list3.html">قائمة منسدلة -1</a></li>

<li><a href="http://rydnet.blogspot.com/2013/08/Drop-down-list2.html">قائمة منسدلة -2</a></li>

<li><a href="http://rydnet.blogspot.com/2013/08/Drop-down-list1.html">قائمة منسدلة -3</a></li>

</ul>

</li>

<li>

<a href="http://rydnet.blogspot.com/2013/05/Determine-the-price-of-a-blog.html">ثمن مدونتك</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/2013/03/html.html">مولد كود الألوان</a>

</li>

<li>

<a href="http://adsense-converter-code.blogspot.com/">htmlمحول اكواد</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/2010/08/Map-Blog-of-rydnet.html">فهرس المدونة</a>

</li>

<li>

<a href="http://rydnet.blogspot.com/search/label/%D9%86%D8%B4%D8%B1%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9?&max-results=20">نشر المواقع</a>

<ul>

<li><a href="http://rydnet.blogspot.com/2013/04/Site-reveals-you-missed-the-robots.txt-file-to-your-site.html">موقع يكشف لك أخطاء ملف robots.txt لموقعك</a></li>

<li><a href="http://rydnet.blogspot.com/2013/04/Add-sites-to-search-engines.html">اضافة موقعك في محركات البحث (جوجل و غيره) </a></li>

<li><a href="http://rydnet.blogspot.com/2013/06/alexa-google_14.html">مواقع لتبادل الزيارات لتحسين ترتيب موقعك في alexa و google</a></li>

</ul>

</li>

</ul>

</div>

3- احفظ الاداة .
4- من لوحة التحكم   >>>   قالب   >>>   تحرير html

5- ابحث بواسطة   ctrl+f  عن  :       

 <b:skin><![CDATA[/*

6- انسخ الكود التالي بعده مباشرة  :

 ==========================

navigation bar - Simple View

========================== */
#navigbar {
float: right;


: 100%px;

color: #FF

background: #990000;
widt
hF;
margin: 0px;
padding: 0;


px;

border:5px doub

position: relative;
height:3
0le #990000 ;
border-top-left-radius:0px;


m-right-radius:0px;

border-bo

border-top-right-radius:10px;
border-bott
ottom-left-radius:10px;
}
#navig {
margin: 0;
padding: 0;
}
#navig ul {

t-style: none
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#navig li {
li
s;
margin: 0;
padding: 0;
height:30px;
}


a:visited {

color: #FFF;

display: block;

font:normal

#navig li a, #navig li a:link, #navig li
  10px   Droid Arabic Kufi, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;


9999;

display: block;

text-decoration: none;
}
#navig li a:hover, #navig li a:active {
background: #C
Ctext-decoration: none;
text-align:center;
margin: 0;
padding: 9px 12px 10px 12px;


nsition-duration:all .6s ease-in-out;

t

-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-tr
aransition:all .3s ease-in-out;
border:5px double #990000 ;
border-top-left-radius:0px;
border-top-right-radius:10px;


 {

position: absolute;

left: 10

border-bottom-right-radius:0px;
border-bottom-left-radius:10px;
}
#navig li {
float: right;
padding: 0;
}
#navig li u
l00px;
height: auto;
width: 160px;
margin: 0;
padding: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;


: -25px 0 0 161px;
}

avig li:hover ul ul,
#
n
-o-transition-duration:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
#navig li ul a {
width: 140px;
}
#navig li ul ul {
margi
n #navig li:hover ul ul ul, #navig li.sfhover ul ul, #navig li.sfhover ul ul ul {
left: -999em;
}


li li.sfhover ul, #navig li li li.sfhover ul {
left: auto;
}

r, #navig li.sfhover {
position: sta
#navig li:hov
etic;
}

i li a, #navig li 
#navig 
l
#navig li:hover ul, #navig li li:hover ul, #navig li li li:hover ul, #navig li.sfhover ul, #navig
 li a:link, #navig li li a:visited {
background: #ffffff;
width: 120px;
color: #000000;
display: block;
font:normal 10px Droid Arabic Kufi, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
border:5px double #990000 ;


x 12px 10px 12px;

text-deco

border-top-left-radius:0px;
border-top-right-radius:10px;
border-bottom-right-radius:0px;
border-bottom-left-radius:10px;;
}
#navig li li a:hover, #navig li li a:active {
background: #787878;
color: #FFF;
display: block;
margin: 0;
padding: 9
pration: none;
-webkit-transition:all .6s ease-in-out;
-moz-transition:all .6s ease-in-out;
-o-transition-duration:all .6s ease-in-out;
transition:all .6s ease-in-out;
}


/*

7- احفظ القالب  .
ملاحظة :  قم بتعديل اقسام وعناوين القائمة و الروابط بما يتناسب مع مدونتك.
انتهت الاضافة.

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

قائمة منسدلة  -1-

قائمة منسدلة  -2-

قائمة منسدلة  -3-

منشورة في: اضافات بلوجر, قائمة منسدلة