إضافة قائمة جانبية أحترافية مع التأثير لمدونات بلوجر

مرحباً بكم زوار ومتابعي المدونة

أسعد الله أوقاتكم بكل خير ومحبة

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

للمعاينة أنقر هنا

- طريقة التركيب :

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- اخر من لوحة التحكم >>> تخطيط >>> إضافة أداة HTML/JavaScript

3- اللصق الكود التالي في صندوق الأداة .

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <!--homeblog7.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>
   <!--homeblog7.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>
/*homeblog7.blogspot.com CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

.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: 'Montserrat', 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}
/*homeblog7.blogspot.com CSS ends*/
</style>

4- بعد ذلك أختر من لوحة التحكم >>> قالب >>> تحرير قالب .

5- إبحث عن هذا الكود :/* Tabs

6- وعندما تجد الكود أحذفه بالكامل ، والكود على هذا الشكل :

 /* Tabs ----------------------------------------------- */ .tabs-inner .section:first-child { border-top: $(header.bottom.border.size) solid $(tabs.border.color); }  .tabs-inner .section:first-child ul { margin-top: -$(header.border.size); border-top: $(header.border.size) solid $(tabs.border.color); border-left: $(header.border.horizontalsize) solid $(tabs.border.color); border-right: $(header.border.horizontalsize) solid $(tabs.border.color); }  .tabs-inner .widget ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; border-bottom: $(tabs.border.width) solid $(tabs.border.color);  margin-top: $(tabs.margin.top); margin-left: -$(tabs.margin.side); margin-right: -$(tabs.margin.side); }  .tabs-inner .widget li a { display: inline-block;  padding: .6em 1em;  font: $(tabs.font); color: $(tabs.text.color);  border-$startSide: $(tabs.border.width) solid $(content.background.color); border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color); }  .tabs-inner .widget li:first-child a { border-$startSide: none; }  .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); background-color: $(tabs.selected.background.color); text-decoration: none; }

7- احفظ القالب .

وأخيراً نترككم برعاية الله وتوفيقه .