كود قائمة جانبية لمدونات بلوجر خفيف وجميل 2021

اضافة اجمل كود قائمة جانبية خفيفة لـ مدونات بلوجر بشكل جميل وجذاب، ومن خلالها تسهل للزائر عملية التواصل والاطلاع عن المدونة وغيره، ويمكن التعديل عليها واضافة الصفحات التي تريدها بسهولة.

كود قائمة جانبية

1. اذهب لادارة المدونة واختار "المظهر" ثم "تعديل HTML".

2. اضغط من الكيبورد على Ctrl + F وابحث عن هذا الكود "]]></b:skin>".
3. انسخ الكود الموجود في الاسفل وقم بلصقه اعلى هذا الكود.

.menu-outer:hover ~ .menu-close{margin-right:-100px;background-color:#444}
.menu-outer:hover .bar{background:rgba(100,200,240,.9)}
.menu-outer > nav ul{top:5%}
.menu-outer{overflow:hidden;position:fixed;top:0;font-family:'Droid Arabic Kufi',Montserrat;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%;;/*prevents possible click when not oppened*/
  -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: 23px;color:#fff;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}
nav li a:hover{color:#fafafa;text-decoration:none}
@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)}

4. ابحث عن هذا الكود </body>.
5. انسخ الكود الموجود بالاسفل وقم بلصقه اعلاه.

مهم: قم بتغيير الروابط الموجودة باللون الازرق الى روابط موقعك.

  <div class='menu-outer'>
    <div class='menu-icon'>
        <div class='bar'/>
        <div class='bar'/>
        <div class='bar'/>
    </div>
    <nav>
        <ul>
           <li><a href='https://cnetjo.blogspot.com/'>الرئيسية</a></li>
<li><a href='https://cnetjo.blogspot.com/p/blog-page_3.html/'>عن المدونة</a></li>
           <li><a href='https://cnetjo.blogspot.com/p/blog-page_42.html/'>من نحن</a></li>
            <li><a href='https://cnetjo.blogspot.com/'>اعلن على المدونة</a></li>
<li><a href='https://cnetjo.blogspot.com/p/blog-page_2.html/'>اتصل بنا</a></li>
<li><a href='https://cnetjo.blogspot.com/p/blog-page_80.html/'>سياسة الخصوصية</a></li>
       </ul>
   </nav>
</div>
<a class='menu-close' onclick='return true'>
    <div class='menu-icon'>
        <div class='bar'/>
        <div class='bar'/>
    </div>
</a>

في أمان الله.