إضافات بلوجر: قائمة أفقية بتأثير رائع

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

• الشرح

ابحث عن </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>

المعاينة:

الرئيسية عنا اتصل بنا أعمالنا