قائمة منسدلة لمدونة بلوجر سريعة ومتجاوبة


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

ما يميز هذه القائمة أنها سريعة الإضافة وسهلة التخصيص يمكنك إضافتها مباشرة من خلال المظهر أو عبر أداة HTML/JavaScript

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

ولإضافة هذه الأداة أنتقل إلى التنسيق انقر على إضافة أداة قم أختر HTML/JavaScript


قم بلصق الكود التالي داخل الأداة

<div class="clase-navegador" id="menuresponsive">
  <a href="/" class="active">الرئيسية</a>
  <a href="#">بلوجر</a>
  <a href="#">قوالب</a>
  <a href="#">إضافات بلوجر</a>
  <a href="#">شوحات</a>
  <a href="#">تطبيقات</a>
  <a href="#">فيديو</a>
  <a href="#">صور</a>
  <a href="javascript:void(0);" class="icon" onclick="miproyecto()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<style>
.clase-navegador {
  overflow: hidden;
  background-color: #333;
}

.clase-navegador a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.clase-navegador a:hover {
  background-color: #ddd;
  color: black;
}

.clase-navegador a.active {
    float: right;
  background-color: #1d76aa;
  color: white;
}

.clase-navegador .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .clase-navegador a:not(:first-child) {display: none;}
  .clase-navegador a.icon {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .clase-navegador.responsive {position: relative;}
  .clase-navegador.responsive .icon {
    position: absolute;
    left: 0;
    top: 0;
  }
  .clase-navegador.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
}
  
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
function miproyecto() {
  var x = document.getElementById("menuresponsive");
  if (x.className === "clase-navegador") {
    x.className += " responsive";
  } else {
    x.className = "clase-navegador";
  }
}
</script> 

قم بالتعديل على الاسطر التالية مثال:
<a href="الرابط بدل رمز #">نص الرابط</a>

يمكنك إضافة المزيد من اسطر الروابط أو حذف منها ومن ثم الحفظ.
هذا كل ما لدينا اليوم ويسعدنا تلقي إستفساراتكم أو المشاكل التي تواجهكم في منصة بلوجر لمساعدتكم بإذن الله
مشاركات أقدم المقال التالي
لا يوجد تعليقات
أضف تعليق
عنوان التعليق