طريقة اضافة قائمة جانبية احترافية لمدونتك

السلام عليكم ورحمة الله وبركاته 

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

اولا : اذهب الى لوحة تحكم مدونتك ثم اضغط على قالب ثم اضغط على تحرير HTML

وقم بالبحث عن

]]></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/AVvXsEi_0c56FQw6-JT6GFmUupITVedwOqwh6Qmy_GQcLlItvzGbFBQZnlOgls13Fiz9HPB5mCIs8EInvkalBpTdfyXCOjg2UpO5VGW-sZuXq0HhIWGQIpzhjxUUCBW-JTF7ou31zdBZIDOVNdY/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; }</a>

ثانيا : قم بالذهاب الى التخطيط ثم اضف اداة جديد (يجب ان تكون اعلى رسائل المدونة الالكترونية)

ثم اختر اداة

 HTML/Javascript

                                                                     ثم  اضف الكود التالي

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

<ul id="navigationMenu">

<li><a class="Home" href="YOUR URL"><span>الرئيسية</span></a></li>

<li><a class="about" href="YOUR URL"><span>عن المدون</span></a></li>

<li><a class="services"YOUR URL"><span>خدمات</span></a></li>

<li><a class="portfolio" href="YOUR URL"><span>تابعنا علي الفيسبوك</span></a></li>

<li><a class="contact" href="YOUR URL"><span>إتصل بنا</span></a></li>

</div>

<a  href="http://www.floobe.blogspot.com/2013/07/css.html"  target="_blank"><small>Get The Fixed Menu  Gadget</small></a>