قائمة مندلسة بشكل إحترافي جدا لمدونات بلوجر [ الشكل الأول ]

قائمة مندلسة بشكل إحترافي جدا لمدونات بلوجر

بسم الله الرحمن الرحيم

السلام عليكم و رحمة الله و بركاته

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

معاينة القائمة

يمكنكم معاينتها أحبابى فى الله من خلال الصورة العليا

طريقة اضافة القائمة الى مدونة بلوجر

أولا قم بالذهاب الى قالب  و من ثم تحرير html 

ثانيا قم بالبحث عن الكود التالى

 ]]></b:skin>

و أضف قبله الكود التالى

nav {
display: block;
margin-top: 100px;
background: #3F87CD;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;z-index: 100;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
font-weight: 600;
text-decoration: none;
padding: 20px 15px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: #fff;
background: #3580C8;
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #5CA1E5;
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 12px;
font-weight: normal;
display: block;
color: #FFFFFF;
background: #5CA1E5;
}
.menu ul li a:hover,.menu ul li:hover>a {
background: #3580C8;
color: #fff;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
a.homer {
background: #3580C8;
}
@media (min-width: 768px) and (max-width: 979px) {.mainWrap {width: 768px;}
.menu ul {top: 37px;}
.menu li a {font-size: 12px;}
a.homer {background: #374147;}
}
@media (max-width: 767px) {.mainWrap {width: auto;padding: 50px 20px;}
  .menu {display: none;}
.responsive-menu {display: block;margin-top: 100px;}
    nav {margin: 0;background: none;}
    .menu li {display: block;margin: 0;}
    .menu li a {background: #fff;color: #797979;}
    .menu li a:hover,.menu li:hover>a {background: #9ca3da;color: #fff;}
    .menu ul {visibility: hidden;opacity: 0;top: 0;left: 0;width: 100%;transform: initial;}
    .menu li:hover>ul {visibility: visible;opacity: 1;position: relative;transform: initial;}
    .menu ul ul {left: 0;transform: initial;}
    .menu li>ul ul:hover {transform: initial;}}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}

الخطوة الأخيرة قم بالبحث عن المكان الذى تريد أن تظهر به القئمة و قم بلصق الكود التالى مع تغيير ما يناسبك

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>  
   <ul class="menu">
   <li><a class="homer" href="http://blog-ency.blogspot.com/"><i class="fa fa-home"></i> الرئيسية</a>
   </li>
  <li><a  href="http://blog-ency.blogspot.com/"><i class="fa fa-user"></i> فريق العمل</a></li>
  <li><a  href="http://blog-ency.blogspot.com/"><i class="fa fa-bullhorn"></i> اعلن معنا</a></li>
    <li><a  href="http://blog-ency.blogspot.com/"><i class="fa fa-tags"></i> أقسام المدونة</a>
  <ul class="sub-menu">
   <li><a href="http://blog-ency.blogspot.com/">قائمة منسدلة1</a></li>
   <li><a href="http://blog-ency.blogspot.com/">قائمة منسدلة 2</a></li>
     <li><a href="http://blog-ency.blogspot.com/">قائمة منسدلة 3</a></li>
   </ul>
  </li>
  <li><a  href="http://blog-ency.blogspot.com/"><i class="fa fa-envelope"></i> اتصل بنا</a></li>
  <li><a  href="http://blog-ency.blogspot.com/"><i class="fa fa-sitemap"></i> فهرس التدوينات</a></li>
  <li><a  href="http://blog-ency.blogspot.com/"><i class="fa fa-exclamation-triangle"></i> سياسة الخصوصية</a></li>
  </ul>
  </nav>

.

.

.

.

.

.

و فى الختام سلام و قبل السلام اترك تعليقا قبل الرحيل أسعدنا مرورك العطر بالمدونة