قائمة رأسية ثابتة بالأقسام الهامة لمدونتك

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

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

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

النموذج الأول: يحتوى على الصفحة الرئيسية,من نحن؟ ,خدمات الموقع, الفهرس,اتصل بنا ويمكن تغيير هذه الأقسام بما يناسب موقعك.
vertical menu
خطوات تركيب




اسكريبت النموذج الأول بمدونات بلوجر:

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


<style type="text/css">
#hor {
list-style:none;
padding:0;
margin:0;
}

#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/AVvXsEivG0SDUaH507QsGfcKeCxeBpVt0i1sPZvScCfJsR9SoUZXgTnB-yaAQORLy3N5duEfTeKf-We_TOrkD5JY1kgtvurX5f61dbcTcJ1_5jAmQO54Lcgx8Bq2200-y40QDfpIE8yW_F1p9xRW/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.condaianllkhir.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>




النموذج الثانى:ويحتوى على
الصفحة الرئيسية,
لمحة عنى,أرشيف المدونة,
آخر الأخبار,المواضيع الهامة



blogger gadget

<style type="text/css">
#hor {
list-style:none;
padding:0;
margin:0;
}

#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/AVvXsEj6iqg9Zh_8av3ohBIWlLTNShR_MfLbQpSgMFqymPPzTSD3EndgLV81H2fG18fmK-owoqt7ARSCkv7ESVSQZ5rQWE_CJjbgL8GUzsnSgkJrnbt1aDg_DJy2EuWNo6PhPB_BMb07hlsZXPUw/s190/navigation2.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;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
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;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
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;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
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;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
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;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
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.condaianllkhir.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>




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

انتظر تعليقاكم

تقبلو تحياتى

مختارات

السيو

صيغ قانونية هامة

حذف مدونتك

تقنية CSS لفواصل اقرأ المزيد
حلول لاشهر اخطاء المدونين 
الروابط تفتح فى صفحه مستقله


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