قوائم رأسية أنيقة بها نجوم متحركة ~ ادوات

قوائم رأسية أنيقة بها نجوم متحركة
animated star vertical menu

أنيقة, بها نجوم, رأسية, قوائم, متحركة,

إضافة القوائم بالعمود الجانبى للمدونة .

هذه القوائم تتميز بشكل أنيق ومنسق بتقنية Css سهلة التركيب والتعديل عليها.
بها أيقونات نجمة ذهبية بجانب الروابط تتحرك عند مرور الماوس على الرابط.

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

طريقة تركيب الإضافة على مدونات بلوجر:

إذهب إلى لوحة تحكم بلوجر>
تخطيط>
إضافة أداة Html & javascript>
إنسخ الكود التالى وألصقه
إختر الستايل المناسب لألوان مدونتك

النموذج الأول:
Blue 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:#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/AVvXsEjJT7b9R4pYL3v_bTktOYm3fzD3eV7Pni6DmB_5nrg5fhTK7bLyZ1-QAjZsyPMkmCbklmTu1OB_g1XWTLxBAfoyfrIlpeEA3Tk5a2tq_6AFWTn1VwrKy3x5lwWbIU_Q9sRztEvZhclPuhZZ/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;">برامج أون لاين
<a target="_blank" href="http://www.condaianllkhir.com/2011/06/blog-post_15.html">المصحف المسموع </a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/html.html">أكواد الألوان</a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/blog-post_24.html">فوتوشوب أون لاين</a><a target="_blank" href="http://www.condaianllkhir.com/2011/10/glitter-text-generator.html">الكتابة بالجليتر</a><a target="_blank" href="http://www.condaianllkhir.com/2012/04/blog-post_20.html">فرونت بيج أون لاين</a><a target="_blank" href="http://www.condaianllkhir.com/2012/01/blog-post.html">رفع الملفات</a><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><a target="_blank" href="http://www.condaianllkhir.com/2012/10/facebook-shapes.html">زخرف كلماتك على الفيس بوك</a><a target="_blank" href="http://www.condaianllkhir.com/2012/09/keyboard-online.html"> لوحة المفاتيح عربى /انجليزى </a></div>
 <a href="http://www.condaianllkhir.com/2013/02/animated-star-vertical-menu.html"target="_blank"> Blogger widgets </a>
 

النموذج الثانى:
Grey animated bright star menu

css-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/AVvXsEjFNuHsUiTB_ytBeznlma7adJBNkQtYb7gCbzvjk25QwEYMacCjTj0wYAzEvH2_xEUNXLW55AuYU907esBizQZyQyuYdGeY7o9-0WuWvjqTOwKMGjOdQoFXtXhS-cf_sz7wqcmiue_9qkHS/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;">برامج أون لاين
<a target="_blank" href="http://www.condaianllkhir.com/2011/06/blog-post_15.html">المصحف المسموع </a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/html.html">أكواد الألوان</a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/blog-post_24.html">فوتوشوب أون لاين</a><a target="_blank" href="http://www.condaianllkhir.com/2011/10/glitter-text-generator.html">الكتابة بالجليتر</a><a target="_blank" href="http://www.condaianllkhir.com/2012/04/blog-post_20.html">فرونت بيج أون لاين</a><a target="_blank" href="http://www.condaianllkhir.com/2012/01/blog-post.html">رفع الملفات</a><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><a target="_blank" href="http://www.condaianllkhir.com/2012/10/facebook-shapes.html">زخرف كلماتك على الفيس بوك</a><a target="_blank" href="http://www.condaianllkhir.com/2012/09/keyboard-online.html"> لوحة المفاتيح عربى /انجليزى </a></div>
 
<a href="http://www.condaianllkhir.com/2013/02/animated-star-vertical-menu.html"target="_blank"> Blogger widgets </a>
 

النموذج الثالث

Black animated gold star menu
animated-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:#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/AVvXsEifaYrEWw-8Ql0lKGyLgIo4nqYBPMfitjPx6uiTiHlTMIohSN0NeMFFa5N5quo8S8FdIXQGFzjNKSn5SvCHk54Puq2iX9_vwng6OUYJ3L1XifvPC0jHlfaxPnOpoHoVXM-2CgLB33J-Ag_s/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;">برامج أون لاين
<a target="_blank" href="http://www.condaianllkhir.com/2011/06/blog-post_15.html">المصحف المسموع </a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/html.html">أكواد الألوان</a><a target="_blank" href="http://www.condaianllkhir.com/2011/09/blog-post_24.html">فوتوشوب أون لاين</a><a target="_blank" href="http://www.condaianllkhir.com/2011/10/glitter-text-generator.html">الكتابة بالجليتر</a><a target="_blank" href="http://www.condaianllkhir.com/2012/04/blog-post_20.html">فرونت بيج أون لاين</a><a target="_blank" href="http://www.condaianllkhir.com/2012/01/blog-post.html">رفع الملفات</a><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><a target="_blank" href="http://www.condaianllkhir.com/2012/10/facebook-shapes.html">زخرف كلماتك على الفيس بوك</a><a target="_blank" href="http://www.condaianllkhir.com/2012/09/keyboard-online.html"> لوحة المفاتيح عربى /انجليزى </a></div>
 
<a href="http://www.condaianllkhir.com/2013/02/animated-star-vertical-menu.html"
target="_blank"
> Blogger widgets </a>
 

طريقة التعديل على القوائم:

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

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

تقبلو تحياتى

مختارات

السيو

صيغ قانونية هامة
كود "اقرأ المزيد"

كود إدراج جدول لمدونتك

إضافة مدونتك لويكيبيد يا

زر دعوة أصدقاء الفيس بوك
كود تصغير الصور لمدونك
اضافةصفحة الفهرس لمدونتك

أنيقة, بها نجوم, رأسية, قوائم, متحركة,

ادوات

الأربعاء، 8 يناير 2014

قوائم رأسية أنيقة بها نجوم متحركة

0 التعليقات :

إرسال تعليق

أخر التعليقات

اتصل بى

Popular Posts

عنى