قائمة متعددة الالوان بتقنية CSS مع التأثير لمدونات بلوجر

زوار ومتابعي المدونة 

السلام عليكم ورحمة الله وبركاته

أقدم لكم اليوم قائمة في غاية الروعة والجمال وبتقنية CSS مع التأثير 

لن أطيل عليكم سوف أتطرق مباشرة لكيفية تركيب هذه القائمة .

صورة القائمة

ــــــــــــــــــ

للمشاهدة 

- طريقة التركيب :

1- أدخل إلى مدونتك | وأختر تخطيط | ثم إضافة أداة " HTML/JavaScript "

2- اللصق الكود التالي في صندوق الأداة :

<style>/* Menu with peel effect by www.homeblog7.blogspot.com-----*/#BSmenu{width:100%;color:#666;font:12px/18px Tahoma, Arial, Helvetica, sans-serif;}#BSmenu ul{list-style:none;padding:5px;}#BSmenu li{list-style:none;display:block;float:right;height:37px;line-height:37px;text-align:center;margin:0 5px;}#BSmenu li a{display:block;float:right;font-weight:bold;color:#fff;text-decoration:none;padding:5px 35px;text-transform:uppercase;}#BSmenu li a:hover{text-decoration:none;}#BSmenu li a.red{background:#c40d0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8pkNbtnFPqcFwxVLpIog9-Tmlm2ihANEZ4a56XLbcR9R08Y-I6ZgmmjZ9XvWsIjg1kWgzLttO_9VgYMCfTPZehzoAoBFDJAoeL3cbS2LB6PwATroTmNFwfgt7MVUwvZrYThML5CKuTAN-/s1600/r_f.gif) no-repeat right top;}#BSmenu li a:hover.red{background:#c40d0b none;}#BSmenu li a.orange{background:#f26522 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbTb3Tq7hx4T1yLlt5zao0HVdUcAcacR_1jwoR9WO8lZ8kBlmZ-puuRwZH0YenoCr04yRCxEEjHPqltT_vV_dcwmvDZKxI4A6g8m2rlcSCoRhZvOdZ75Q-sbdGPqI7ihj8kZvd0TQZQ7J0/s1600/o_f.gif) no-repeat right top;}#BSmenu li a:hover.orange{background:#f26522 none;}#BSmenu li a.yellow{background:#e4c016 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRHFfZXuTd664bG57O0qwnD6UQqFo4L-tM8x5Iibqd-2ymt8qBxzHvb-RfehcowNfAz7BGQtvhrASj4FlJnyOZFjD_6q0TWi_zR0_Bs5nN5r_D5TAjTGRAxIo4lhH0P3w9dA0SjnqBchjZ/s1600/y_f.gif) no-repeat right top;}#BSmenu li a:hover.yellow{background:#e4c016 none;}#BSmenu li a.green{background:#219e0b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWY5xJkk7N4qOy56iAeElOYOc8SYtSg30pKRUNU56XcMlEVL2-FYLHqs8O39VN3fTeC9HnQ7C_UlaA2mDvG_aux-bLJ1pV0qlkKZjzfrmuZhCkoRXYtUwYs8SKML1OSaz9RZo0zdYoTAV/s1600/g_f.gif) no-repeat right top;}#BSmenu li a:hover.green{background:#219e0b none;}#BSmenu li a.blue{background:#2c88ce url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsy8R116Wu7Dzu73ikFAqISZGGTdVMcfCqeD_DHM6TeSPZebK-HaKof048AGuEbpwptJg9s7taIEMvxZSPfIroYxCmA1ueuZBHKVPGdWaCwU76Q5WMGFce-7LJeo8y-qZABUhMnpu99UbS/s1600/b_f.gif) no-repeat right top;}#BSmenu li a:hover.blue{background:#2c88ce none;}#BSmenu li a.grey{background:#939393 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3n09JXOTPx9WPBn5gMuAbm-mWEouzFF91ODwuJ-YnrS2xPT9GPZw2b1yGNv0OzAozhkIn02Kqt65c_Huv0q1A_VGxNAU4vVTvazfisJp7Ni9wcl9BpFQtZgsgey4e7BI7ajsrdb-tWkTm/s1600/gr_f.gif) no-repeat right top;}#BSmenu li a:hover.grey{background:#939393 none;}/*menu end-------------------------*/</style>
<div id="BSmenu"><ul><li><a class="red" href="رابط الصفحة هنا">الرئيسية</a></li><li><a class="orange" href="رابط الصفحة هنا">عن المدونة</a></li><li><a class="yellow" href="رابط الصفحة هنا">سياستنا</a></li><li><a class="green" href="رابط الصفحة هنا">الدعم الفني</a></li>
<li><a class="blue" href="رابط الصفحة هنا">اتصل بنا</a></li>
<li><a class="grey" href="رابط الصفحة هنا">خريطة الموقع</a> <a href='http://homeblog7.blogspot.com' title='ترجمة من قبل هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a></li>
</ul>
</div>

- وأخيراً قم بحفظ الأداة

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