كود علامات التبويب الملونة لمدونات Blogger

0 695 3 دقائق

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

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

أضفه إلى المدون

انتقل إلى Blogger> Template
قم بعمل نسخة احتياطية من القالب الخاص بك
انقر فوق تحرير HTML > متابعة

4. ابحث عن <head> وقم بلصق النصوص التالية أسفله مباشرةً:

<script src=’http://downloads.mybloggertricks.com/jquery-pack-colourful.js’ type=’text/javascript’></script>

    <script src=’http://downloads.mybloggertricks.com/jcarousel-colourful.js’ type=’text/javascript’> </script>

    <script src=’http://downloads.mybloggertricks.com/files/mt-colourful.js’ type=’text/javascript’></script>

5. الآن ابحث عن فئة الجسم. على سبيل المثال: يشبه هذا مع وجود بعض التعليمات البرمجية بداخله

body {

—-

—

)

Inside this class paste the following values:

body {

margin:0px

padding:0px;

—

—

}

       6.   Next search for this:

<body>

or this:

<body expr:class=’"loading" + data:blog.mobileClass’>



7.   Just below it paste the following compressed code:

<!–START OF COLOURFUL TABS BY MBT–>

<style>

/*——- Colourful Tabs Menu by www.MyBloggerTricks.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 MBT–>