أضف قائمة رأسية ثابتة بالأقسام الهامة لمدونات بلوجر Fixed vertical menu

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

    الذهاب إلى لوحة التحكم
    تخطيــــط أو تصمـــــــيم
    عناصــــــــر الصفحـــــة
    أضــــــــــــــــــــــف أداة
    اختار Html/Javascript

ثم إنسخ الكود التالى كاملاً وألصقه

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vhome.gif
) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}

/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}

.clear {
clear:both;
}

*{
/* A universal CSS reset */
margin:0;
padding:0;
}

#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;

/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#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{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVEvlG8WbRyUhEFhx8m5_KWM24DaqbnlTN-ZEx15-oLmS1685o-dVRw6dUSfmN-h3NElzC1ZAZpewjFsaSTyVanu_cNpAz94U0D7TO8XyaFIbVSbI_t73k-xJLt5pCXEoxhAxpfqGndC6X/s190/navigation.png') 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 0px #FFFFFF;
-webkit-box-shadow:0 0 0px #FFFFFF;
box-shadow:0 0 0px #FFFFFF;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
border-radius: 15px;
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;
border-radius: 15px;
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;
border-radius: 15px;
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;
border-radius: 15px;
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;
border-radius: 15px;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

</style>

<div style='position: fixed; top: 40%; left: 2%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.karkera.blogspot.com/">
<span>الصفحة الرئيسية</span>
</a>
</li>
<li>

<a class="about" href="http://www.condaianllkhir.com/">
<span>من نحن؟</span>
</a>
</li>
<li>
<a class="services" href="http://www.condaianllkhir.com/2012/09/blogger-widget.html">
<span>خدمات المواقع</span>
</a>

</li>
<li>
<a class="portfolio" href="http://www.condaianllkhir.com/2010/06/blog-post.html">
<span>الفهرس</span>
</a>
</li>
<li>
<a class="contact" href="http://www.condaianllkhir.com/">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div>
<a href="http://www.condaianllkhir.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

ملاحظة: قم بتغيير ما فى الكود بروابط موقعك وأيضا يمكن تغيير النص الخاص بكل زر

المصدر