زوار ومتابعي المدونة
السلام عليكم ورحمة الله وبركاته
أقدم لكم اليوم قائمة في غاية الروعة والجمال وبتقنية 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/AVvXsEgF8UorhSbeeH6kHAuHjFcR5318a1AK1qT_YqTYO02E8WZMnOfDM7h6K7zeygQ-Ap-CmOo8GuA_ZEz_-MfXE-BdW-Hibv7upS8J0XV3VMtZ4HlzD2QW0SCiY6wRENSu7qT0SqtIF7BfS-to/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/AVvXsEj84mSPx44OGydDlmCi_0YRh4AHdJPnPCn8wSv1JYlRrBvm_U_aS6QDSE-EtR6diBcz59ppplBlEyD6OYTRcIkESO1APtO0uXkE9hyG1C19HBNCasDgTNbnwl5WS6oCN5-S1Wii4_Rynvqc/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/AVvXsEi2ViEBC-XeV02OYaZzJEMVZbwiwJUu9sGZ9orjSAfEmedzWB8Dv7O8vqf2Hei5TnFMExbzTU52xutUPxFOVshakqxLJ4g0tuFp5dv6KqaDZ5JLLyxZzCHlZlKn5oPzkJAM07iMRwK-Zh0U/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/AVvXsEj6o3h0Abb9G1tLriNVspNGtEi7h9Lbofk1O0ArPhz7Lh8hMnIDRWp7Pi8ecy-nNq6Wj9aWJdCVTeNwPGtwlQM9DbEtt6JiA8xEaqb5Z65m0IYIGjE7xP-pEzO6jJAbbOlqTtTcMrnoBEXm/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/AVvXsEgdt6aWSP7hgDLvzPirWnEXHNcxu_ngFCPD-lfhnP8_YuuFYadHVSKbI6gb2Wem9_j3wA_ZeGBRtkORw8rsgQgqdPCe6wPavDuNmkRdQaXZEZvhX-KXKKcoXrcwm0Xld9h7L_2yLtW8Zo9A/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/AVvXsEjdb3mtExK_rmKV564BRXlLShP9jzMhFCsSWLviSVkTuRE2Yrw9IURLRRQK5gp7urivwucMNMVDeVWL4sqHqsP9bLR_24sYj7sLtBd0jFXN9RlJNurG6c2Cpt6h_qd4q4hyphenhyphenbHKhyCJ_im4v/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>
- وأخيراً قم بحفظ الأداة
تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق