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

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

تابع طريقة اضافة الكود...

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

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

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

.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)}

طريقة اضافة الكود الثاني
ابحث عن هذا الكود </body>
انسخ الكود الموجود بالاسفل وقم بلصقه اعلاه

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

  <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://aflam-zeee.blogspot.com/p/blog-page_3.html/'>عن المدونة</a></li>
           <li><a href='https://aflam-zeee.blogspot.com/p/blog-page_42.html/'>من نحن</a></li>
            <li><a href='https://cnetjo.blogspot.com/'>اعلن على المدونة</a></li>
<li><a href='https://aflam-zeee.blogspot.com/p/blog-page_2.html/'>اتصل بنا</a></li>
<li><a href='https://aflam-zeee.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>

في أمان الله.