بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
ويوفر مصمم نماذج بلوجر طرق تقليدية وبسيطة لتصميم القائمة ولكن أود أن أقدم القوائم بشكل جديد ومختلف
هذه القائمة تتميز بشكل أنيق ومنسق بتقنية Css سهلة التركيب والتعديل عليها.
بها أيقونات نجمة ذهبية بجانب الروابط تتحرك عند مرور الماوس على الرابط.
من مميزات هذه القوائم أيضا أنها تفتح الروابط فى صفحة أخرى
طريقة تركيب الإضافة على مدونات بلوجر:
1. إذهب إلى لوحة تحكم بلوجر
2. تخطيط ثم إضافة أداة Html & javascript
3. ثم إنسخ الكود التالى وألصقه
.<style type="text/css">
/*---- http://04pro.blogspot.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/AVvXsEh5IWqDmYBffPBecEmZ-AirwlDUlwzji1EAANgzKiozFw3FOsmqtBdqF4qhlmjdJbcctdkb7Uw-g6a-hjHNJjeE65XCyJ1uNXKcnIntLSC_rKAbIV9PbVZVgyQRFhKZwKbh-cVFzLnQHGbH/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://04pro.blogspot.com/2012/06/Quran.html"><span><font size="2">المصحف المسموع</font> </span></a></font><a target="_blank" href="http://04pro.blogspot.com/2013/02/color-code-html.html"><font size="2">أكواد الألوان</font></a><a target="_blank" href="http://04pro.blogspot.com/2013/02/online-photoshop.html"><font style="color: rgb(128, 0, 0);" size="2">فوتوشوب أون لاين</font></a><a target="_blank" href="http://04pro.blogspot.com/2011/10/glitter-text-generator.html"><font size="2">الكتابة بالجليتر</font></a><font size="2"><a target="_blank" href="http://04pro.blogspot.com/2013/02/Office-FrontPage-online.html"><font style="color: rgb(128, 0, 0);">فرونت بيج أون لاين</font></a></font><a target="_blank" href="http://04pro.blogspot.com/2013/02/upload-center.html"><font size="2">رفع الملفات</font></a><font size="2"><a target="_blank" href="http://04pro.blogspot.com/"><font style="color: rgb(128, 0, 0);">ألعاب تعليمية للأطفال</font></a></font><a target="_blank" href="http://04pro.blogspot.com/2013/02/facebook-sympols.html"><font size="2">زخرف كلماتك على الفيس بوك</font></a><a target="_blank" href="http://04pro.blogspot.com/2013/02/arabic-english-keyboard-online.html"><font size="2"> <font color="#800000">لوحة المفاتيح عربى /انجليزى</font><br /></font></a></div>
<br />
<a href="http://04pro.blogspot.com/2013/02/animated-star-vertical-menu.html"> <span style="font-size: xx-small;">أحصل عليها الأن </span></a>
<br/>
بقلم أحد المدونين في فور نت
مدونة فور نت مدونة عربية محتواها تقني بالدرجة الأولى وأنشأة بهدف اثراء المحتوى العربي وتخصصاتها كتيرة أبرزها : الربح من النت ودروس مجانية في انشاء المواقع والتسويق الالكتروني
0 التعليقات:
إرسال تعليق