بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
دائما يحتاج أصحاب المواقع والمدونات إلى عرض أقسام الموقع أو المواضيع الهامة بطريقة منسقة تيسر على الزائر تصفح الموقع والإطلاع على أكبر قدر من الموضوعات ليكتسب ثقة فى الموقع.
ويوفر مصمم نماذج بلوجر طرق تقليدية وبسيطة لتصميم القوائم ولكن أود أن أقدم القوائم بشكل جديد ومختلف فممكن إضافة القوائم الرأسية بشكل أيقونات ثابتة لأقسام المدونة أو إضافة أزرار بشكل قائمة رأسية
أو إضافة القوائم بالعمود الجانبى للمدونة كهذه القوائم التى سنتحدث عنها .
هذه القوائم تتميز بشكل أنيق ومنسق بتقنية Css سهلة التركيب والتعديل عليها.
بها أيقونات نجمة ذهبية بجانب الروابط تتحرك عند مرور الماوس على الرابط.
من مميزات هذه القوائم أيضا أنها تفتح الروابط فى صفحة أخرى.
طريقة تركيب الإضافة على مدونات بلوجر:
1. إذهب إلى لوحة تحكم بلوجر
2. تخطيط ثم إضافة أداة Html & javascript
3. ثم إنسخ الكود التالى وألصقه
إختر الستايل المناسب لألوان مدونتك
\
<style type="text/css">/*---- http://www.condaianllkhir.com/---*/#css-menu-esempio-6{width:290px;margin-top:-20px;margin-bottom:-10px;margin-right:-10px;margin-left:-10px;font-family:Arial;background-color:#b4d6f9;border-bottom:6px solid #135495;border-top:6px solid #135495;-moz-border-radius: 10px;border-radius: 10px;}#css-menu-esempio-6 p{height:30px;line-height:50px;padding-left:10px;font-weight:bold;color:#053769;font-size:13px;}#css-menu-esempio-6 span{color:#053769;}#css-menu-esempio-6 a{display:block;height:25px;text-align:right;line-height:25px;text-decoration:none;font-size:11px;font-weight:bold;color:#135495;padding-right:50px;border-top:1px solid #B6A289;border-left:1px solid #B6A289;-moz-border-radius: 10px;-moz-border-radius-topright: 1px;-moz-border-radius-bottomright: 1px;border-radius: 10px;border-top-right-radius: 1px;border-bottom-right-radius: 1px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYZ-dFIt7xedM3Bo9xG89BchP2YRMSe9sAJn2wlfSPlkbKF190FbI9Id5hgLFSLIYXbyrNYPGNtLaj6ja4aYyrWM3NC290WaqhpgNdE79zyz7ETUqAwXRvbjT5fmrhQCO3WIO2iv2i1zf/s75/star2.gif) no-repeat top right;}#css-menu-esempio-6 a:hover{background-color:#6caff3;background-position:center right;padding-right:40px;}#css-menu-esempio-6 a.selezionato{background-color:#D4CCB3;background-position:bottom right;padding-right:40px;}.background {background-color: #FC9;}</style><div class="background" id="css-menu-esempio-6" style="text-align: center; margin-left: 300px;"><font color="#FF6600" size="4"><span>برامج أون لاين</span></font><font size="4"><a target="_blank" href="http://www.condaianllkhir.com/2011/06/blog-post_15.html"><span><font size="2">المصحف المسموع</font> </span></a></font><a target="_blank" href="http://www.condaianllkhir.com/2011/09/html.html"><font size="2">أكواد الألوان</font></a><font color="#0000FF"><a target="_blank" href="http://www.condaianllkhir.com/2011/09/blog-post_24.html">فوتوشوب أون لاين</a></font><a target="_blank" href="http://www.condaianllkhir.com/2011/10/glitter-text-generator.html"><font size="2">الكتابة بالجليتر</font></a><font color="#0000FF" size="2"><a target="_blank" href="http://www.condaianllkhir.com/2012/04/blog-post_20.html">فرونت بيج أون لاين</a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/01/blog-post.html"><font size="2">رفع الملفات</font></a><font color="#0000FF" size="2"><a target="_blank" href="http://www.condaianllkhir.com/search/label/%D8%A3%D9%84%D8%B9%D8%A7%D8%A8%20%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D9%8A%D8%A9#.T9HTGFKT-qI">ألعاب تعليمية للأطفال</a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/10/facebook-shapes.html"><font size="2">زخرف كلماتك على الفيس بوك</font></a><a target="_blank" href="http://www.condaianllkhir.com/2012/09/keyboard-online.html"><font size="2"> <font color="#07509b">لوحة المفاتيح عربى /انجليزى</font><br /></font></a></div><br /><a href="http://www.condaianllkhir.com/2013/02/animated-star-vertical-menu.html"target="_blank"> <span style="font-size: xx-small;">Blogger widgets </span></a><br/>
Style No.2
Grey animated bright star menu
<style type="text/css">
/*---- http://www.condaianllkhir.com/---*/
#css-menu-esempio-6{
width:290px;
margin-top:-20px;
margin-bottom:-10px;
margin-right:-10px;
margin-left:-10px;
font-family:Arial;
background-color:#eaeaea;
border-bottom:6px solid #212121;
border-top:6px solid #212121;
-moz-border-radius: 10px;
border-radius: 10px;
}
#css-menu-esempio-6 p{
height:30px;
line-height:50px;
padding-left:10px;
font-weight:bold;
color:#4E321C;
font-size:13px;
}
#css-menu-esempio-6 span{
color:#AF2E33;
}
#css-menu-esempio-6 a{
display:block;
height:25px;
text-align:right;
line-height:25px;
text-decoration:none;
font-size:11px;
font-weight:bold;
color:#4E321C;
padding-right:50px;
border-top:1px solid #B6A289;
border-left:1px solid #B6A289;
-moz-border-radius: 10px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomright: 1px;
border-radius: 10px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFG0HboMgxuM3HPsLg3iumX_J63IUGZoJm8zdC0VQA7GQ1jka1HUCkmN4rgbCA7VyZFsevvb5Hj8WnvT4yhbywnADCkLWamX-ewvg1VqKp6UCveHNaWLYc6CItkxOrBtIfpYUqKiQT9b7/s75/star1.gif) no-repeat top right;
}
#css-menu-esempio-6 a:hover{
background-color:#c3c2c2;
background-position:center right;
padding-right:40px;
}
#css-menu-esempio-6 a.selezionato{
background-color:#D4CCB3;
background-position:bottom right;
padding-right:40px;
}
.background {
background-color: #FC9;
}
</style>
<div class="background" id="css-menu-esempio-6" style="text-align: center; margin-left: 300px;"><font color="#FF6600" size="4"><span>برامج أون لاين</span></font>
<font size="4"><a target="_blank" href="http://www.condaianllkhir.com/2011/06/blog-post_15.html"><span><font size="2">المصحف المسموع</font> </span></a></font><a target="_blank" href="http://www.condaianllkhir.com/2011/09/html.html"><font size="2">أكواد الألوان</font></a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/blog-post_24.html"><font style="color: rgb(128, 0, 0);" size="2">فوتوشوب أون لاين</font></a><a target="_blank" href="http://www.condaianllkhir.com/2011/10/glitter-text-generator.html"><font size="2">الكتابة بالجليتر</font></a><font size="2"><a target="_blank" href="http://www.condaianllkhir.com/2012/04/blog-post_20.html"><font style="color: rgb(128, 0, 0);">فرونت بيج أون لاين</font></a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/01/blog-post.html"><font size="2">رفع الملفات</font></a><font size="2"><a target="_blank" href="http://www.condaianllkhir.com/search/label/%D8%A3%D9%84%D8%B9%D8%A7%D8%A8%20%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D9%8A%D8%A9#.T9HTGFKT-qI"><font style="color: rgb(128, 0, 0);">ألعاب تعليمية للأطفال</font></a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/10/facebook-shapes.html"><font size="2">زخرف كلماتك على الفيس بوك</font></a><a target="_blank" href="http://www.condaianllkhir.com/2012/09/keyboard-online.html"><font size="2"> <font color="#800000">لوحة المفاتيح عربى /انجليزى</font><br /></font></a></div>
<br />
<a href="http://www.condaianllkhir.com/2013/02/animated-star-vertical-menu.html"target="_blank"> <span style="font-size: xx-small;">Blogger widgets </span></a>
<br/>
Style No.3
<style type="text/css">/*---- http://www.condaianllkhir.com/---*/ #css-menu-esempio-6{ width:290px; margin-top:-20px;margin-bottom:-10px;margin-right:-10px;margin-left:-10px; font-family:Arial; background-color:#eaeaea; border-bottom:6px solid #212121;border-top:6px solid #212121;-moz-border-radius: 10px;border-radius: 10px; } #css-menu-esempio-6 p{ height:30px; line-height:50px; padding-left:10px; font-weight:bold; color:#4E321C; font-size:13px; } #css-menu-esempio-6 span{ color:#AF2E33; } #css-menu-esempio-6 a{ display:block; height:25px; text-align:right; line-height:25px; text-decoration:none; font-size:11px; font-weight:bold; color:#4E321C; padding-right:50px; border-top:1px solid #B6A289;border-left:1px solid #B6A289;-moz-border-radius: 10px;-moz-border-radius-topright: 1px;-moz-border-radius-bottomright: 1px;border-radius: 10px;border-top-right-radius: 1px;border-bottom-right-radius: 1px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFG0HboMgxuM3HPsLg3iumX_J63IUGZoJm8zdC0VQA7GQ1jka1HUCkmN4rgbCA7VyZFsevvb5Hj8WnvT4yhbywnADCkLWamX-ewvg1VqKp6UCveHNaWLYc6CItkxOrBtIfpYUqKiQT9b7/s75/star1.gif) no-repeat top right; } #css-menu-esempio-6 a:hover{ background-color:#c3c2c2; background-position:center right; padding-right:40px; } #css-menu-esempio-6 a.selezionato{ background-color:#D4CCB3; background-position:bottom right; padding-right:40px; } .background { background-color: #FC9;}</style><div class="background" id="css-menu-esempio-6" style="text-align: center; margin-left: 300px;"><font color="#FF6600" size="4"><span>برامج أون لاين</span></font> <font size="4"><a target="_blank" href="http://www.condaianllkhir.com/2011/06/blog-post_15.html"><span><font size="2">المصحف المسموع</font> </span></a></font><a target="_blank" href="http://www.condaianllkhir.com/2011/09/html.html"><font size="2">أكواد الألوان</font></a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/blog-post_24.html"><font style="color: rgb(128, 0, 0);" size="2">فوتوشوب أون لاين</font></a><a target="_blank" href="http://www.condaianllkhir.com/2011/10/glitter-text-generator.html"><font size="2">الكتابة بالجليتر</font></a><font size="2"><a target="_blank" href="http://www.condaianllkhir.com/2012/04/blog-post_20.html"><font style="color: rgb(128, 0, 0);">فرونت بيج أون لاين</font></a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/01/blog-post.html"><font size="2">رفع الملفات</font></a><font size="2"><a target="_blank" href="http://www.condaianllkhir.com/search/label/%D8%A3%D9%84%D8%B9%D8%A7%D8%A8%20%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D9%8A%D8%A9#.T9HTGFKT-qI"><font style="color: rgb(128, 0, 0);">ألعاب تعليمية للأطفال</font></a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/10/facebook-shapes.html"><font size="2">زخرف كلماتك على الفيس بوك</font></a><a target="_blank" href="http://www.condaianllkhir.com/2012/09/keyboard-online.html"><font size="2"> <font color="#800000">لوحة المفاتيح عربى /انجليزى</font><br /></font></a></div><br /><a href="http://www.condaianllkhir.com/2013/02/animated-star-vertical-menu.html"target="_blank"> <span style="font-size: xx-small;">Blogger widgets </span></a><br/>
<br/>
<style type="text/css">
/*---- http://www.condaianllkhir.com/---*/
#css-menu-esempio-6{
width:290px;
margin-top:-20px;
margin-bottom:-10px;
margin-right:-10px;
margin-left:-10px;
font-family:Arial;
background-color:#000000;
border-bottom:6px solid #efb007;
border-top:6px solid #efb007;
-moz-border-radius: 10px;
border-radius: 10px;
}
#css-menu-esempio-6 p{
height:30px;
line-height:50px;
padding-left:10px;
font-weight:bold;
color:#efb007;
font-size:13px;
}
#css-menu-esempio-6 span{
color:#efb007;
}
#css-menu-esempio-6 a{
display:block;
height:25px;
text-align:right;
line-height:25px;
text-decoration:none;
font-size:11px;
font-weight:bold;
color:#efb007;
padding-right:50px;
border-top:1px solid #B6A289;
border-left:1px solid #B6A289;
-moz-border-radius: 10px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomright: 1px;
border-radius: 10px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtkN9qzcSJ-I_pcafR8oWo8ML5fxqkA6y0MN1ywsmyn7cD-AE76sG9QoK6oHDjtYoMqzWs9EUJQhA-xlKNo_S35Q8zJ6NlV9XjBDnOYMdsGiohKV45oEvgA4OOA4JLNRDP9OVWNU0mLTN7/s75/star-black.gif) no-repeat top right;
}
#css-menu-esempio-6 a:hover{
background-color:#3c3a3a;
background-position:center right;
padding-right:40px;
}
#css-menu-esempio-6 a.selezionato{
background-color:#D4CCB3;
background-position:bottom right;
padding-right:40px;
}
.background {
background-color: #FC9;
}
</style>
<div class="background" id="css-menu-esempio-6" style="text-align: center; margin-left: 300px;"><font color="#FF6600" size="4"><span>برامج أون لاين</span></font>
<font size="4"><a target="_blank" href="http://www.condaianllkhir.com/2011/06/blog-post_15.html"><span><font size="2">المصحف المسموع</font> </span></a></font><a target="_blank" href="http://www.condaianllkhir.com/2011/09/html.html"><font size="2">أكواد الألوان</font></a><font color="#0000FF"><a target="_blank" href="http://www.condaianllkhir.com/2011/09/blog-post_24.html">فوتوشوب أون لاين</a></font><a target="_blank" href="http://www.condaianllkhir.com/2011/10/glitter-text-generator.html"><font size="2">الكتابة بالجليتر</font></a><font color="#0000FF" size="2"><a target="_blank" href="http://www.condaianllkhir.com/2012/04/blog-post_20.html">فرونت بيج أون لاين</a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/01/blog-post.html"><font size="2">رفع الملفات</font></a><font color="#0000FF" size="2"><a target="_blank" href="http://www.condaianllkhir.com/search/label/%D8%A3%D9%84%D8%B9%D8%A7%D8%A8%20%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D9%8A%D8%A9#.T9HTGFKT-qI">ألعاب تعليمية للأطفال</a></font><a target="_blank" href="http://www.condaianllkhir.com/2012/10/facebook-shapes.html"><font size="2">زخرف كلماتك على الفيس بوك</font></a><a target="_blank" href="http://www.condaianllkhir.com/2012/09/keyboard-online.html"><font size="2"> <font color="#efb007">لوحة المفاتيح عربى /انجليزى</font><br /></font></a></div>
<br />
<a href="http://www.condaianllkhir.com/2013/02/animated-star-vertical-menu.html"target="_blank"
<br/>
طريقة التعديل على القوائم:
إذا كانت أبعاد القوائم غير مناسبة للعمود الجانبى لمدونتك فيمكن تغيير القيم الموجودة بالكود الملونة باللون الأحمر حتى تكون مناسبة لعرض العمود الجانبى لمدونتك.
التعديل على العنواين وروابط الموضوعات الملونة باللون الأصفر بالكود بما يناسب مدونتك.
يمكن الإستعانة ببرنامج فرنت بيج للتعديل على العناوين وإضافة الروابط بكل بساطة .
يمكن أيضا زيادة عدد الأزرار عن طريق نسخ الرابط ولصقه أسفل الرابط الأخير بإستخدام الفرونت بيج ثم التعديل عليه.
تعليقات