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

+ التعليقات + 1 التعليقات

غير معرف
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

إرسال تعليق

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