قائمة علوية احترافية لمدونات بلوجر (حصرياً)

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

السلام عليكم اولا,
ادا في هدا الدرس : " تركيب قائمة علوية لمدونات بلوجر " سئقدم لكم و حصريا اضافة بلوجر مميزة و هي عبارة عن قائمة علوية لمدونات بلوجر ليست اي قائمة عادية, نعم اخي ليست مثل القائمات الاخرى, جيد الااضافة مميزة بتئتيرات رائعة و تصميمها جد بسيط كما ان تركيبها وتعديلها ولا اسهل

↓ شرح تركيب الاضافة + المعاينة ↓

1. اولا اخي الكريم ادعوك للانضمام لاعضاء المدونة من هنا
2. توجه الى لوحت تحكم منصت بلوجر
3. افتح لوحت تحكم مدونتك
4. تم ضع الكود التالي داخل اداة جديدة " Html/Javascript " او اي مكان تريد

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <!--ara1tech.blogspot.com widget starts-->
    <div class="nav">
        <ul>
           <li><a href="#">الرئيسية</a></li>
           <li><a href="#">بلوجر</a></li>
           <li><a href="#">اضافات</a></li>
           <li><a href="#">حول المدونة</a></li>
           <li><a href="#">اتصل بنا</a></li>
       </ul>
   </div>
   <!--ara1tech.blogspot.com widget ends-->
</div>
<a class="menu-close" onclick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>


<style>
/*ara1tech.blogspot.com CSS starts*/
@import url(//www.fontstatic.com/f=sheba);
.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > .nav ul { top:15%; }

.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'sheba', serif;
  z-index: 998;
  width: 100%;
  left: 100%;
  margin-left: -100px;
  height: 200%;
  background:rgba(100,200,240,.9);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-outer:hover {
  background: rgba(100,200,240,.98);
  left: 0;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-icon .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
  opacity: 0;
}
.nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .nav ul {
  left: 0;
}
.nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;
}
.nav li a {
  font-size: 2em;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  text-align:center
}
.nav li a:hover {
  color: rgba(255,255,255,1);
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  .nav ul {font-size:.75em;}
  .nav ul a {padding: 10px;}
}
.menu-close {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 100%;
  width: 200px;
  height: 200px;
  background: rgba(250,130,70,1);
  cursor: pointer;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .menu-icon {
  right: 15px; left: auto;top: 68px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-close .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  position:absolute;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
.menu-close .bar:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .bar:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.tabs .widget li, .tabs .widget li {float:none}
/*ara1tech.blogspot.com CSS ends*/
</style>

في الاخير لا تنسى تغيير الكلمات الملونة بالبرتقالي كما تناسبك و ايضا يمكنك وضع الرابط مكان " # "

ملاحضة : تعليقك يفرحنا, سنجيبك ان شاء الله في الفور <3 احبكن احبابي :O

معاينة الاضافة
اضغط هنا...

شرح تركيب قائمة علوية لمدونتك,قائمة منسدلة احترافية,طريقة تثبيت القائمة العلوية بعد التمرير لأسفل,قائمة علوية css,كود قائمة علوية مع ازرار بتقنيه css رائعه جدا,قائمة علوية,كود قائمة علوية,تطوير المنتديات,محركات البحث,قوالب,تصاميم,برمجه,نطاقات,css3,web2,دروس,traidnt,ترايدنت,قائمة علوية احترافية لمدونات بلوجر (حصريا)