السلام عليكم ورحمة الله وبركاته في هذا التدوينة سأقوم بعرض قائمة أفقية
لمدونات بلوجر بتأثيرات هوفر رائعة يمكنكم استخدامها في مدوناتكم في أعلي
المدونة.
ابحث عن </head>
ثم قم بإضافة الكود التالي اسفله مباشرة:
<nav id="nav-1">
<a class="link-1" href="#">الرئيسية</a>
<a class="link-1" href="#">عنا</a>
<a class="link-1" href="#">اتصل بنا</a>
<a class="link-1" href="#">أعمالنا</a>
</nav>
<style type="text/css">
body {
margin: 0px;
}
nav {
margin-top: 50px;
padding: 24px;
text-align: center;
font-family: Raleway;
}
#nav-1 {
background: #f45145;
}
.link-1 {
transition: 0.3s ease;
background: #f45145;
color: #ffffff;
font-size: 20px;
text-decoration: none;
border-top: 4px solid #f45145;
border-bottom: 4px solid #f45145;
margin: 0 20px;
}
.link-1:hover {
border-top: 4px solid #ffffff;
border-bottom: 4px solid #ffffff;
padding: 6px 0;
}
</style>
إرسال تعليق