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

السلام عليكم ورحمة الله وبركاتة مع درس جديد واضافة مميزه من اضافات بلوجر الاحترافيه الان يمكنك وضع قائمه افقيه تحت الهيدر بتقنية الجي كويري الرائعه حتى نختصر الوقت يمكنك رؤية هذا المثال الحى لترى الاضافة على الطبيعه من هنا

او في الصوره التي بالاسفل!

لتطبيق تلك الاضافة على مدونتك قم باتباع الخطوات التي بالاسفل :

1. قم بالذهاب الى لوحة تحكم مدونة بلوجر > ثم الي تصميم
2. قم باختيار اداه جديده HTML/JavaScript  (تحت منطقة الهيدر على ان تكون من نوع جافا سكربت)
3. انسخ الكود الموجود بالاسفل كاملا داخل الاداه مع تغيير المتغييرات المعلمه فيه بما يناسبك انت.

<script type="text/javascript">
/* jQuery Gooey Menu
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
jQuery.noConflict()
jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
})

var gooeymenu={
    effectmarkup: '<li class="active"></li>',
    setup:function(usersetting){
        jQuery(function($){ //on document.ready
            function snapback(dur){
                if ($selectedlink.length>0)
                    $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
            }
            var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
            var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
            var $menulinks=$menu.find('li a')
            var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
            $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
            if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
                var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
            }
            else{
                var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
            }
            setting.defaultselectedBool=$selectedlink.length
            $menulinks.mouseover(function(){
                clearTimeout(setting.snapbacktimer)
                var $target=$(this)
//alert($target.position().left+" "+$target.get(0).offsetLeft)
                $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
                if (setting.defaultselectedBool==0) //if there is no default selected menu item
                    $selectedlink=$target //set current mouseover element to selected element
            })
            if ($selectedlink.length>0){
                snapback(0)
                $menu.mouseleave(function(){
                    setting.snapbacktimer=setTimeout(function(){
                        snapback(setting.fxtime)
                    }, setting.snapdelay)
                })
            }
                $(window).bind('resize', function(){
                    snapback(setting.fxtime)
                })
        })
    }
}
</script>
<style>

ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility: hidden; /*IE6 rule*/
}

/* -------MBT Gooey Menu--------*/
ul.framemenu{
margin-top:6px;
margin-bottom:15px;
padding: 0;
list-style: none;
position:relative;
text-align: left; //set value to "left", "center", or "right"*/
}
ul.framemenu li{
display: inline;
}
ul.framemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 12px 10px 5px 18px;
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none;
}

ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid #FFA500; border-radius:15px; -moz-border-radius:15px; -moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}
</style>

<ul id="gooeymenu4" class="framemenu">

<li><a href="رابط رقم 1">قسم رقم 1</a></li>
<li><a href="رابط رقم 2">قسم رقم 2</a></li>
<li><a href="رابط رقم 3">قسم رقم 3</a></li>
<li><a href="رابط رقم 4">قسم رقم 4</a></li>
<li><a href="رابط رقم 5">قسم رقم 5</a></li>
<li><a href="رابط رقم 6">قسم رقم 6</a></li> </ul>

<script>
gooeymenu.setup({id:'gooeymenu4', selectitem:0, snapdelay:500})
</script>

حتى تقوم بتغيير الاطار حول الاقسام قم بتغيير هذا الكود باي كود لون يناسبك #FFA500

قم بحفظ الاداه ومبروك عليك الاضافه