طريقة تركيب الإضافة

]]></b:skin>

#navigationMenu span{

    /* Container properties */

    width:0;

    left:38px;

    padding:0;

    position:absolute;

    overflow:hidden;

    /* Text properties */

    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;

    font-size:18px;

    font-weight:bold;

    letter-spacing:0.6px;

    white-space:nowrap;

    line-height:39px;

    /* CSS3 Transition: */

    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */

    -moz-transition: 0.25s;

    transition: 0.25s;

}

#navigationMenu a{

    /* The background sprite: */

    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPP2HoHv3W9KJd0KMOZXoxKSXeu8ow31YFbB9io9q2gCZUX5D3XOM_4C4nRFJ8bSyX3BYpVQzhYbqUjgi6OHEMDyz10m5lC6afvg-VkMPxR-cdrPUCVW6xhVC7K0j8UjpQvsUAoTObOEc/s1600/navigation.jpg') no-repeat;

    height:39px;

    width:38px;

    display:block;

    position:relative;

}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }

#navigationMenu a:hover{

    text-decoration:none;

    /* CSS outer glow with the box-shadow property */

    -moz-box-shadow:0 0 5px #9ddff5;

    -webkit-box-shadow:0 0 5px #9ddff5;

    box-shadow:0 0 5px #9ddff5;

}

/* Green Button */

#navigationMenu .home {    background-position:0 0;}

#navigationMenu .home:hover {    background-position:0 -39px;}

#navigationMenu .home span{

    background-color:#7da315;

    color:#3d4f0c;

    text-shadow:1px 1px 0 #99bf31;

}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}

#navigationMenu .about:hover { background-position:-38px -39px;}

#navigationMenu .about span{

    background-color:#1e8bb4;

    color:#223a44;

    text-shadow:1px 1px 0 #44a8d0;

}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}

#navigationMenu .services:hover { background-position:-76px -39px;}

#navigationMenu .services span{

    background-color:#c86c1f;

    color:#5a3517;

    text-shadow:1px 1px 0 #d28344;

}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}

#navigationMenu .portfolio:hover{ background-position:-114px -39px;}

#navigationMenu .portfolio span{

    background-color:#d0a525;

    color:#604e18;

    text-shadow:1px 1px 0 #d8b54b;

}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}

#navigationMenu .contact:hover { background-position:-152px -39px;}

#navigationMenu .contact span{

    background-color:#af1e83;

    color:#460f35;

    text-shadow:1px 1px 0 #d244a6;

}

<div style='position: fixed; top: 40%; left: 0%;'/> 

<ul id="navigationMenu"> 

<li> 

<a class="Home" href="http://7loll.blogspot.com/"> 

<span>الرئيسية</span> 

</a> 

</li> <li> 

<a class="about" href="http://7loll.blogspot.com/"> 

<span>عن المدون</span> 

</a> 

</li> 

<li> 

<a class="services" href="http://7loll.blogspot.com/"> 

<span>خدمات</span> 

</a> 

</li> 

<li> 

<a class="portfolio" href="http://7loll.blogspot.com/"> 

<span>فهرس المدونة</span> 

</a> 

</li> 

<li> 

<a class="contact" href="http://7loll.blogspot.com/"> 

<span>إتصل بنا</span> 

</a> 

</li> 

</ul> 

</div><a href="http://7loll.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>