[awesome]

اتشرف بكتابة اول مواضيعي على معهد خبراء بلوجر المنتدى العظيم
وهو اضافة مميزة - قائمة متحركة مع الصفحة مثل توتير css وهى سهل التركيب
اولا شاهدوا مثال للاضافة وهو من مدونتي
mlwn.blogspot.com

اذا اعجبكم شكل الاضافة في المثال
فهاهى طريقة تركيبها على مدونتكم

أولاََ ادخل على حسابك فى بلوجر » التخطيط » اضف اداة جديدة HTML/JavaScript
ضع الكود التالى بعد اضافة الروابط وتعديل الروابط

كود PHP:

<style> 
    #wg-rosebar { 
    width:100%; 
    position:fixed; 
    top:0; 
    left:0; 
    } 

    #wg-rosebarbtm { 
    border-bottom:3px solid #000; 
    background-color:#7f103c; 
    overflow:none; 
    width:100%; 
    height:40px; 
    position:fixed; 
    top:0; 
    left:0; 
    } 

    #wg-rosebarbtmdata { 
    color:#fff; 
    padding:5px; 
    } 

    #wg-rosebarbtmhide { 
    position:absolute; 
    top:4px; 
    right:12px; 
    width:20px; 
    height:20px; 
    cursor:pointer; 
    } 

    #wg-rosebarbtmshow { 
    position:absolute; 
    top:0; 
    right:5px; 
    width:30px; 
    height:25px; 
    cursor:pointer; 
    background-color:#F60; 
    padding-top:5px; 
    border-bottom:3px solid #000; 
    border-left:3px solid #000; 
    border-right:3px solid #000; 
    border-bottom-right-radius:5px; 
    border-bottom-left-radius:5px; 
    } 

    .wg-rosebarbtmdownarrow { 
    width:0; 
    height:0; 
    border-left:10px solid transparent; 
    border-right:10px solid transparent; 
    border-top:10px solid #CC5200; 
    } 

    .wg-rosebarbtmblock { 
    width:8px; 
    height:10px; 
    background-color:#CC5200; 
    } 

    .wg-rosebarbtmuparrow { 
    width:0; 
    height:0; 
    border-left:10px solid transparent; 
    border-right:10px solid transparent; 
    border-bottom:10px solid #CC5200; 
    } 
    </style> 
    <div id="wg-rosebar" > 
      <div id="wg-rosebarbtm" > 
     <style> 

    .wg-ribmenu span { 
        background:#7f103c; 
        display:inline-block; 
        color:#FFFFFF; 


        line-height:40px; 
        padding:0 1em; 
        margin-top:0.0em; 
        position:relative; 
          -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */ 
        -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */ 
        -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */ 
        -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */ 
        transition: background-color 0.2s, margin-top 0.2s; 
    } 
    .wg-ribmenu a:hover span { 
        background:#FFD204;

        margin-top:0; 
       
    } 
    .wg-ribmenu span:before { 
        content: ""; 
        position:absolute; 
        top:40px; 
        right:0; 
        border-left:0.5em solid #9B8651; 
        border-bottom:0.5em solid #7f103c; 
    } 

    .wg-ribmenu span:after { 
        content: ""; 
        position:absolute; 
        top:40px; 
        left:0; 
        border-right:0.5em solid #9B8651; 
        border-bottom:0.5em solid #7f103c; 
    } 
    .wg-ribmenu a:link, .wg-ribmenu a:visited { 
        color:#000; 
        text-decoration:none; 
        float:right; 
        height:40px; 
        overflow:hidden; 
    } 
    
    </style>  

    <div class='wg-ribmenu'> 
        <a href='/index.html'><span><img src="http://i.imm.io/1759N.png"/></span></a> 
        <a href='رابط1'><span>قسم1</span></a> 
        <a href='رابط2'><span>قسم2</span></a> 
        <a href='رابط3'><span>قسم3</span></a> 
        <a href='رابط4'><span>قسم4</span></a> 
        <a href='رابط5'><span>قسم5</span></a> 
    </div> 

      </div></div>