مساحة إعلانية

أفضل قائمة منسدلة لمدونات بلوجر متجاوبة

,

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

معاينة القائمة أنقر هنا او معاينة على مدونة بلوجر انقر هنا

معاينة على اجهزة الجوال كيف سوف تبدو


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

الدخول إلى لوحة تحكم بلوجر https://www.blogger.com القالب ->> ثم انقر على تحرير Html
الآن يجب التأكد من وجود إصدار من إصدارات ajax اجاكس يمكنك البحث داخل القالب لديك عن كلمة ajax إذا كان لديك كود شبيه للكود التالي لا حاجة لإضافة الكود التالي مرة أخرى إذا لم يكن لديك هذا الكود قم بإضافته فوق الرمز 

ثم إضافة css فوق الرمز ]]>
.orion-menu{
 width: 100%;
 padding: 0;
 position: relative;
 float: right;
 background: #252525;
 list-style: none;
 font-family: 'Roboto Condensed', sans-serif;
}
.orion-menu li {
 display: inline-block;
 font-size: 15px;
 margin: 0;
 padding: 0;
 float: right;
 line-height: 20px;
 position: relative;
}
.orion-menu li a {
 padding: 24px 22px 24px;
 color: #bababa;
 text-decoration: none;
 display: inline-block;
 -o-transition: color .3s linear, background .3s linear;
 -webkit-transition: color .3s linear, background .3s linear;
 -moz-transition: color .3s linear, background .3s linear;
 transition: color .3s linear, background .3s linear; 
}
.orion-menu li:hover > a{
 color: #fff;
}
.orion-menu li.active > a{
 background: #555555;
}
.orion-menu > li > a {
 text-transform: uppercase;
}

/* DROPDOWN */
.orion-menu ul, 
.orion-menu ul li ul {
 list-style: none;
    margin: 0;
    padding: 0;    
 display: none;
    position: absolute;
    z-index: 999;
 width: 150px;
 background: #454545;
}
.orion-menu ul{
    top: 68px;
    right: 0;
}
.orion-menu ul li ul{
    top: 0;
    right: 150px;
}
.orion-menu ul li{
 clear:both;
 width:100%;
 font-size:14px;
}
.orion-menu ul li a {
 width:100%;
 padding:12px 22px;
 display:inline-block;
 float:right;
 clear:both;
 box-sizing:border-box;
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box;
}
.orion-menu ul li:hover > a{
 background: #555555;
}

/* DROPDOWN ARROWS*/
.orion-menu .indicator{
 color: #bababa;
 position: absolute;
 right: 8px;
 top: 24px;
 font-family: 'FontAwesome';
 font-size: 12px;
}
.orion-menu .indicator:before{
 content: "\f0d7";
}
.orion-menu ul li .indicator{
 left: 20px;
 top: 13px;
}
.orion-menu ul li .indicator:before{
 content: "\f0da";
}


/* SOCIAL ICONS*/
.orion-menu li.social{
 float: left;
 margin-left: 20px;
}
.orion-menu li.social a{
 display: inline-block;
 padding: 24px 6px 24px;
 color: #bababa;
 position: relative;
 width: 15px;
 text-align: center;
}
.orion-menu li.social a:hover{
 color: #fff;
}
.orion-menu li.social a .tooltip{
 width: 70px;
 padding: 5px;
 background: #555555;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 opacity: 0;
 position: absolute;
 font-size: 9px;
 top: -20px;
 left: -27px;
 border-radius: 2px;
 text-align: center;
 -o-transition: opacity .3s linear;
 -webkit-transition: opacity .3s linear;
 -moz-transition: opacity .3s linear;
 transition: opacity .3s linear;
}
.orion-menu li.social a:hover .tooltip{
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 opacity: 1;
}
.orion-menu li.social a .tooltip:before,
.orion-menu li.social a .tooltip:after{
 content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #555555;
}


/* COLLAPSIBLE CONFIGURATION */
.orion-menu > li.showhide{
 display: none;
 width: 100%;
 height: 50px;
 cursor: pointer;
 color: #dedede;
 background: #454545;
}
.orion-menu > li.showhide span.title{
 margin: 16px 0 0 18px;
 float: right;
}
.orion-menu> li.showhide span.icon{
 margin: 17px 20px;
 float: left;
}
.orion-menu > li.showhide .icon em{
 margin-bottom: 3px;
 display: block;
 width: 20px;
 height: 2px;
 background: #ccc;
}


/* blue */
.blue, .blue li ul, .blue ul li ul, .blue > li.showhide{ background: #008C9E; }
.blue li a, .orion-menu li.social a{ color: #dedede; }
.blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; }
.blue li.search form input.search:focus{ background-color: #009fb4; }
.blue li.social a .tooltip:before, .blue li.social a .tooltip:after{ border-top-color: #009fb4; }



@media only screen and (max-width: 768px) {
 .orion-menu{
  margin: 0;
  display: block;
 }
 .orion-menu li{
  display: block;
  width: 100%;
 }
 .orion-menu > li > a{
  padding: 16px 70px 16px 18px;
  text-align: left;
  border-top: solid 1px rgba(255, 255, 255, 0.05);
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box;
 }
 .orion-menu a{
  width: 100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu ul, 
 .orion-menu ul li ul{
  width: 100%;
  left: 0;
  padding: 0 20px;
  position: static;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 .orion-menu .indicator{
  right: 20px;
  top: 18px;
 }
 .orion-menu ul li .indicator{
  display: block;
 }
 .orion-menu ul li .indicator:before{
  content: "\f0d7";
 }
 .orion-menu li.search{
  border-bottom: none;
 }
 .orion-menu li.search form{
  margin: 20px 18px 0 18px;
 }
 .orion-menu li.search form input.search,
 .orion-menu li.search form input.search:focus{
  width: 100%;
  color: #fff;
  background-color: #555555;
  background-position: 99% 8px;
  cursor: auto;
  box-sizing:border-box;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
 }
 
 .orion-menu li.social a{
  display: inline;
  padding: 8px 15px 8px 15px;
  border: none;
 }
 .orion-menu li.social a:hover{
  color: #fff;
 }
 .orion-menu li.social a:hover .tooltip{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0;
 }
 .orion-menu > li.showhide{
  display: block;
 }
}
الآن الإضافة الأخيرة يجب ان تضعها بالقالب في المكان حيث تريد ظهور القائمة على سبيل المثال فوق الرمز:
 



غير الروابط بما تناسبك ثم حفظ القالب ثم معاينة.

هذا كل شيء عن طريقة تركيب قائمة منسدلة إحترافية

طريقة سهلة

هناك طريقة سهلة أخرى لتركيب القائمة المنسدلة عن طريق الذهاب إلى لوحة التحكم -->> التخطيط -->> ثم إضافة أداة ثم إختيار أداة جافا سكربت HTML/JavaScript ثم لصق الكود التالي داخل الأداة:




ثم التعديل على الروابط بما تناسبك ثم حفظ

ملاحظة تستطيع حذف أو زيادة الروابط

جميع الحقوق محفوظة لموقع © ديزاد فان

تصميم : مصطفى صلاح