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

تركيب الاضافة :
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- احفظ القالب  .
ملاحظة :  قم بتعديل اقسام وعناوين القائمة و الروابط بما يتناسب مع مدونتك.
انتهت الاضافة.
rydnet

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:



Paste This HTML Code On Your Page:


التعليقات : 0

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