{إحترافية} اضافة قائمة مسندلة لقالب بلوجر 2014

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

كما قلت في السابق القائمة متناسقة 100% مع الاجهزة الاخرى حيث تصير بالشكل التالي :

وللمزيد يمكنك معاينة الإضافة او القائمة من هنا :

من اجل هذه الإضافة يجب عليك الذهاب إلى لوحة تحكم بلوجر من هنا .

بعدها إذهب الى التخطيط ثم اختار اضافة اداة واضف هذا الكود :

<style>
/* Menu By Abter.blogspot.ccom */
/* Droid Arabic Kufi (Arabic) http://www.google.com/webfonts/earlyaccess */
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
}

/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: right;
margin-left: 1px;
}

/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Droid Arabic Kufi', serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
background: #19c589;
}

/*Style for dropdown links*/
li:hover ul a {
background: #404040;
color: #ffffff;
height: 40px;
line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
display: none;
}

/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}

/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: 'Droid Arabic Kufi', serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
</style><center>
<label for="show-menu" class="show-menu">عرض القائمة</label></center>
<center><input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li class='green'><a class='home' href='abter.blogspot.com'>الرئيسية</a></li>
<li>
<a href="abter.blogspot.com">↓ مدونة ابطر</a>
<ul class="hidden">
<li><a href="abter.blogspot.com">مدونة ابطر</a></li>
<li><a href="abter.blogspot.com">مدونة ابطر</a></li>
</ul>
</li>
<li>
<a href="abter.blogspot.com">↓ مدونة ابطر</a>
<ul class="hidden">
<li><a href="abter.blogspot.com">مدونة ابطر</a></li>
<li><a href="abter.blogspot.com">مدونة ابطر</a></li>
<li><a href="abter.blogspot.com">مدونة ابطر</a></li>
</ul>
</li>
<li><a href="#">مدونة ابطر</a></li> <li><a href="#">مدونة ابطر</a></li> </ul></input></center>

ملحوضة : قد ثاثر هذه الإضافة على بعض القوالب لذلك جمعتها في إضافة واحدة لتقوم بحذفها إن تسببت لك في اي ثاثير على     القالب.