حصريا شرح مصور لاضافه 5 قوائم ناف بار | أقسام | احترافية لمدونتك

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

صورة من مدونه تجريبيه لإحدى الاضافات بعد تركيبها :


مميزات الإضافة :


- تعطي احترافية لمدونتك .
- تسهل لك عرض أهم الأقسام .
- تسهل أمر التنقل لزوار مدونتك .
- يمكن التعديل عليها بسهولة " اضافة أقسام \ إزالة أقسام "
- تركيبها أمر في غاية السهولة فقط اضافة أكواد HTML
- يمكنك أن تركبها في أي موضع " اعلى المدونة أو اسفلها أو فوق المواضيع أو السايد بار " أينما شئت
- خفيفة التحميل .


طريقة التركيب :

كما قلت سابقاً فقط اختار الكود الخاص بأي قائمة وقم باضافتة من هنا :


الأولى .

صورة الاضافة :
كود الإضافة :





<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="Link 1"><span>Name 1</span></a></li> <li><a href="Link 2"><span>Name 2</span></a></li> <li><a href="Link 3"><span>Name 3</span></a></li> <li><a href="Link 4"><span>Name4</span></a></li> <li><a href="Link 5"><span>Name 5</span></a></li> <li><a href="Link 6"><span>Name 6</span></a></li> <li><a href="Link 7"><span>Name 7</span></a></li> </ul> </div>


الثانية :

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


كود الإضافة :




<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="Link 1"><span>Name 1</span></a></li> <li><a href="Link 2"><span>Name 2</span></a></li> <li><a href="Link 3"><span>Name 3</span></a></li> <li><a href="Link 4"><span>Name4</span></a></li> <li><a href="Link 5"><span>Name 5</span></a></li> <li><a href="Link 6"><span>Name 6</span></a></li> <li><a href="Link 7"><span>Name 7</span></a></li> </ul> </div>


الثالثة :

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

كود الإضافة :




<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="Link 1"><span>Name 1</span></a></li> <li><a href="Link 2"><span>Name 2</span></a></li> <li><a href="Link 3"><span>Name 3</span></a></li> <li><a href="Link 4"><span>Name4</span></a></li> <li><a href="Link 5"><span>Name 5</span></a></li> <li><a href="Link 6"><span>Name 6</span></a></li> <li><a href="Link 7"><span>Name 7</span></a></li> </ul> </div>


الرابعة :

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


كود الإضافة :



<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="Link 1"><span>Name 1</span></a></li> <li><a href="Link 2"><span>Name 2</span></a></li> <li><a href="Link 3"><span>Name 3</span></a></li> <li><a href="Link 4"><span>Name4</span></a></li> <li><a href="Link 5"><span>Name 5</span></a></li> <li><a href="Link 6"><span>Name 6</span></a></li> <li><a href="Link 7"><span>Name 7</span></a></li> </ul> </div>
الخامسة :

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


كود الإضافة 



<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="Link 1"><span>Name 1</span></a></li> <li><a href="Link 2"><span>Name 2</span></a></li> <li><a href="Link 3"><span>Name 3</span></a></li> <li><a href="Link 4"><span>Name4</span></a></li> <li><a href="Link 5"><span>Name 5</span></a></li> <li><a href="Link 6"><span>Name 6</span></a></li> <li><a href="Link 7"><span>Name 7</span></a></li> </ul> </div>

طريقة تخصيص الإضافة :

استبدل الكلمة Name بعنوان أي قسم تريده والكلمة Link برابط القسم المراد التوجيه الية ..
ان اعجبك موضوعنا فنرجوا ان تنشره :

+ التعليقات + 3 التعليقات

غير معرف
15 مايو، 2013 11:14 م

Hi there everуone, іt's my first pay a visit at this site, and post is truly fruitful designed for me, keep up posting these types of posts.

my page ... meuble de salle de bain

غير معرف
17 يونيو، 2013 5:03 م

Hi there just wanted to give you a quick heads up. The words in your post seem to be running off the screen
in Opera. I'm not sure if this is a formatting issue or something to do with internet browser compatibility but I figured I'd post to let you know.
The layout look great though! Hope you get the problem fixed soon.

Kudos

My web-site :: voyance gratuite

غير معرف
18 يونيو، 2013 3:40 م

Having read this I believed it was rather enlightening.
I appreciate you finding the time and energy to put this content together.
I once again find myself personally spending way too much time
both reading and posting comments. But so what, it was still worthwhile!


Take a look at my web site; tarot de Marseille

إرسال تعليق

دروس واضافات منصة بلوجر

 
الحقوق: copyright © 2011. مدونة فضفضة -تعريب مدونه فضفضه