تاريخ نشر : 03‏/09‏/2012

علامات التبويب الملونة: قائمة JQuery لـBlogger




في هذه القائمة الأفقية يتغير لون لكل تبويبه عند التمرير الماوس عليه. و تم استخدام في تصميمها وظائف بسيطة منها تأثيرات الانتقال JavaScript مرتبة ونظيفة. بدلا من عرض عناصر القائمة الفرعية في عمودي أسفل القائمة التقليدية، وتم موأمتها مع بعضها البعض لتناسب في سطر واحد. على عكس القوائم الأخرى، فإن هذه القطعة تناسب بسهولة  و تعمل في أي قالب مدونة بلوغسبوت بشكل جميل . يتم وضعها في القسم العلوي من المدونة الخاص بك لجذب القراء أكثر من غيرها. خطوات التثبيت هي ممتعة وسهلة للغاية. هذه القائمة تعمل بشكل جيد على جميع المتصفحات الرئيسية أي: +IE7 ، سفاري، والكروم، وموزيلا وأوبرا. و الآن يمكن لك إضافته إلى مدونتك والتخلص من أي القائمة إذا كانت الموجودة في سابق على مدونتك التي تبدو ضخمة و بشيعة التي لا تأتي إلى بالمتاعب.



إضافته إلى بلوجر 


          1- الذهاب إلى لوحة التحكم في: Blogger > قالب
          2- النسخ الاحتياطي القالب
          3- انقر فوق تحرير HTML> متابعة  
          4- ابحث عن <HEAD> وأسفله تماما لصق هذا سكريبت 

<script src='https://sites.google.com/site/blogstupcomp/jquery-pack-colourful.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/blogstupcomp/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='https://sites.google.com/site/blogstupcomp/mt-colourful.js' type='text/javascript'></script> 

           5- الآن البحث عن الفئة body. أي: يشبه هذا مع بعض الأكواد في داخله

body {
----
---
)
     داخل هذه الفئة لصق القيم التالية:

body { 
margin:0px
padding:0px;
---
---
} 
         6- تم البحث عن هذا :

<body>
    أو هذا:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
       7-  أسفله مباشرة لصق الكود أدناه:

<!--START OF COLOURFUL TABS BY STUPCOMP-->
<style>
/*------- Colourful Tabs Menu by www.stupcomp.blogspot.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
    background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
      margin: 0;  padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
    border-left: 1px solid #cfcfcf;
        border-right: 0px solid #cfcfcf;
    background: url(http://1.bp.blogspot.com/-hQ4r1kqybdw/UEIRnGogqyI/AAAAAAAAHeI/tPZ2FXRUO98/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
    font-size: 12px; font-family: helvetica, arial, sans-serif;
    list-style: none;  margin: 0 auto;  padding: 0;
    width: 960px;
}
#nav ul {
     margin: 0;
   
}
:focus {
    outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
    display: block;
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 33px;
    padding: 0 13px 0 10px;
    color: #333;
    text-decoration: none;
    background: url(http://3.bp.blogspot.com/-GhdMtMAzybA/UEIRnwbrOqI/AAAAAAAAHeU/fShdjYuWetk/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a {
    padding: 0 33px 0 10px;
    text-indent: -9999px;
    background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(http://2.bp.blogspot.com/-IuFcujZl650/UEIRm1ja0uI/AAAAAAAAHd8/g3llMl2_RA8/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
    position: absolute;
    top: 33px;
    left: -1px;
    overflow: hidden;
    width: 960px;
    display: none;
    z-index: 999;
list-style: none;
  padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(http://4.bp.blogspot.com/-gRDfUUsFFvo/UEIRmB-rQHI/AAAAAAAAHdk/PnpJ42Y5ylk/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(http://4.bp.blogspot.com/-x-W--ENCpB4/UEIRmWbi1WI/AAAAAAAAHdw/VWjPx1M9Fow/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(http://1.bp.blogspot.com/-mow7_vOvv4Y/UEIRwMycevI/AAAAAAAAHeg/Cc6h-0Hv-7Y/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(http://2.bp.blogspot.com/-UmuzlpeD1EM/UEISysxvDbI/AAAAAAAAHe4/N78T1ifkhug/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(http://2.bp.blogspot.com/-ZrSwFUKdaJE/UEIRwVZsdKI/AAAAAAAAHes/M8UCU-GrSoI/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left;   }
ul#nav li ul.sub-nav li a {
    float: none;
    background: none;
    font-size: 11px;
    text-transform: none;
    color: #fff;
    line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-Nav-container'>
<ul id='nav'>
               
               <li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>

                <li class='top-link' id='mbt'><a href='#'>TAB 1</a>
                    <ul class='sub-nav'> 
                    <li><a href='#'>SUB TAB 1.1</a></li>
                    <li><a href='#'>SUB TAB 1.2</a></li>
                    <li><a href='#'>SUB TAB 1.3</a></li>
                    <li><a href='#'>SUB TAB 1.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 2.1</a></li>
                    <li><a href='#'>SUB TAB 2.2</a></li>
                    <li><a href='#'>SUB TAB 2.3</a></li>
                    <li><a href='#'>SUB TAB 2.4</a></li>
                    <li><a href='#'>SUB TAB 2.5</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-news'><a href='#'>TAB 3</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 3.1</a></li>
                    <li><a href='#'>SUB TAB 3.2</a></li>
                    <li><a href='#'>SUB TAB 3.3</a></li>
                    <li><a href='#'>SUB TAB 3.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-life'><a href='#'>TAB 4</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 4.1</a></li>
                    <li><a href='#'>SUB TAB 4.2</a></li>
                    <li><a href='#'>SUB TAB 4.3</a></li>
                    <li><a href='#'>SUB TAB 4.4</a></li>
                    <li><a href='#'>SUB TAB 4.5</a></li>
                    <li><a href='#'>SUB TAB 4.6</a></li>
                    <li><a href='#'>SUB TAB 4.7</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-technology'><a href='#'>TAB 5</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 5.1</a></li>
                    <li><a href='#'>SUB TAB 5.2</a></li>
                    <li><a href='#'>SUB TAB 5.3</a></li>
                    <li><a href='#'>SUB TAB 5.4</a></li>
                    <li><a href='#'>SUB TAB 5.5</a></li>
                    </ul>
                </li>

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>

<!--
<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>
-->
               

                  <li style='clear: both;'/>
            </ul>
</div>
<!--END OF COLOURFUL TABS BY STUPCOMP-->

     8- إنقرعلى معاينة إذا رأيت كل شيء على ما يرام تم حفظ وقد انتهيت!

دليل التخصيصات

تم كتابة الكود بطريقة متقنة بحيث أن أي جزء من الكود قد يتغير بسهولة، إضافة أو حذف علامات التبويب.

           - استبدال # مع رابط للصفحة واستبدال أسماء TAB مع عنوان الصفحة
           - لتغيير عرض القائمة تعديل width: 960px
           - لإنشاء علامة تبويب جديدة في أي القائمة الفرعية اللصق هذا الرمز أعلاه  </ul>

<li><a href='#'>SUB TAB</a></li>
           - لمزيد من النصائح لتعديل على القائمة ، شارك في تعليق!

و ببساطة يمكنك تعديل على الكود ؛ إذا أعجبك الموضوع شارك مع أصدقائك و أتمنى أن تعجبكم هذه القائمة رائعة شكرا :)

هل يعجبك هذا؟

إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

إشترك في النشرة البريدية للحصول على آخر المواضيع


تابعنا في اليوتيوب

تابعنا على الفيس بوك