دليل المدون

2012-10-29

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

بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
العديد من المدونات تستخدم قوائم رأسية تحتوى على المواضيع أو الأقسام المهمة بالموقع وقد عرضت فى موضوع سابق بعض هذه القوائم والأزرار بتقنية Css يمكن الإطلاع عليها من هــناااااااا 
ولكن اليوم سأعرض طريقة مختلفة للقوائم الرأسية بتقنية CSS وهى عبارة أيقونات رأسية ثابتة على يسار موقعك بمرور الماوس عليها يظهر إسم القسم أو الموضوع وبالضغط عليها تؤدى إلى رابط الموضوع أو القسم مثل الصفحة الرئيسية,الفهرس,اتصل بنا,.....وغير ذلك من الأقسام.
ولقد صممت نموذجين من هذه القوائم يمكن إختيار المناسب لمدونتك.
 النموذج الأول: يحتوى على الصفحة الرئيسية,من نحن؟ ,خدمات الموقع, الفهرس,اتصل بنا ويمكن تغيير هذه الأقسام بما يناسب موقعك.
vertical menu

خطوات تركيب السكريبت بمدونات بلوجر:

  1. الذهاب إلى لوحة التحكم
  2. تخطيط أو تصميم
  3. عناصر الصفحة
  4. أضف أداة
  5. اختار 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://lh6.googleusercontent.com/-BchqpSuxynA/UI2p3ldC8wI/AAAAAAAADs4/B5Y0udOSpdA/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="رابط الصفحة الرئيسية">
<span>الصفحة الرئيسية</span>
</a>
</li>

<li>

<a class="about" href="رابط من نحن">
<span>من نحن؟</span>
</a>
</li>

<li>
<a class="services" href="رابط خدمات المواقع">
<span>خدمات المواقع</span>
</a>

</li>

<li>
<a class="portfolio" href="رابط الفهرس">
<span>الفهرس</span>
</a>
</li>

<li>
<a class="contact" رابط اتصل بنا">

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://www.condaianllkhir.com/" rel="nofollow" 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/AVvXsEi9T015dBSd9zakZ757QnP65GQeEwoBMON0loldPfVsBjohpUwpxkftNDwYmGYoWffpDhqLzgOEs3piU-9GcGgHhtHIZvxhzJcD2A_g_dXmIaHuZZ74eY4aj6KJs94MoLcuN08XGfDT8qzS/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="رابط الصفحة الرئيسية">
<span>الصفحة الرئيسية</span>
</a>
</li>

<li>

<a class="about" href="رابط من نحن">
<span>من نحن؟</span>
</a>
</li>

<li>
<a class="services" href="رابط الأرشيف">
<span>الأرشيف</span>
</a>

</li>

<li>
<a class="portfolio" href="رابط الأخبار">
<span>الأخبار</span>
</a>
</li>

<li>
<a class="contact" href="رابط المواضيع الهامة">

<span>مواضيع هامة</span>
</a>
</li>
</ul>
</div><a href="http://www.condaianllkhir.com/" rel="nofollow" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

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

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا 
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 14 تعليقًا

  1. انا اريد التواصل مع ادارة الموقع ماذا افعل !!!!

    ردحذف
  2. السلام عليكم أختى
    انا أريد أن أزيد عدد الازرار وأريد أن أضع الازرار على اليمين واريد رأئيك فى مدونتى من حيث التصميم وكل شئ فى المدونة والمحتوى
    http://www.almesryoon.info/

    ردحذف

  3. un4web
    شكرا على مرورك

    احمد عزت احمد
    شكرا على مرورك
    يمكن كتابة أى إستفسار فى تعليق وبإذن الله سيتم الرد

    kadm islam
    شكرا على مرورك
    تم تحديث الموضوع ليشمل الإضافة من اليمين

    ردحذف
  4. يا أختى أنا أريد أضافة أزرار أضافية بمعنى أنت تضعى رز الصفحة الرئيسية وأخبار والفهرس انا أريد أن أضع أقسام الموقع وأريد أضافت المزيد من الازرار

    ردحذف
  5. بإذن الله سوف أقدم المزيد من القوائم فى موضوعات قادمة بإذن الله
    شكرا لمرورك

    ردحذف
  6. مشكور لي المجهود

    ردحذف
  7. شكرا اختي الكريمة على الإضافة,قمت بتركيبها , تعمل للمرة الأولى فقط , بعدها لا يحصل شيء عند إقتراب فأرة الحاسوب من الأيقونات...

    ردحذف
  8. @mohamed annak
    شكرا لمتابعتك

    @موقع العقيدة والتوحيد
    شكرا لمتابعتك

    Naoufel Hatime
    شكرا لمتابعتك
    من المحتمل أن لا تعمل أثناء المعاينة ولكن الإضافة تعمل جيدا بعد الحفظ

    ردحذف
  9. قسم بالله اعجز عن الشكر لك يا اخي والله كنت محتاجهة جدا وصارلي كثير ابحث عن التعليمات في اليوتيوب لاني بصراحة انا مبتدئ

    ردحذف
  10. الف شكر على الموضوع
    اريد عمل ازرار للمدونة بحيث تكون عبارة عن اقسام اسفل الهيدر
    لكن لم اجد الموضوع المناسب
    vidoutoub.blogspot.com

    ردحذف
  11. @ عــمــر الـــعــراقـــي
    شكرا جزيلا لمتابعتك

    @ Naoufel Hatime
    شكرا جزيلا لمتابعتك

    @imad imam
    أعتقد أن الموضوع الذى تبحث عنه على هذا الرابط
    http://www.condaianllkhir.com/2013/06/blogger-menu.html

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون