قائمة جانبيه منزلقه

1. لوحة تحكم بلوجر.
2. القالب.
3. html.
4. أبحث عن b:skin أضف قبله الكود أدناه.
5. يمكنك المعاينه من هنا.

#tuhfawebserv { width: 240px; height: 100%; position: fixed; margin: 0 -61px; } .tuhfawebserv-left{ right: -180px; top: 0px; transition:right 1s; } .tuhfawebserv-left:hover{ right:0px; } /*################## RIGHT MENU ##############*/ .tuhfawebserv-right{ right: -180px; top: 0px; direction: rtl; transition:right 1s; } .tuhfawebserv-right ul>li i,#toggle{ right: 200px; } .tuhfawebserv-right:hover{ right:0px; } #menuHeader { width: 128%; height: 60px; cursor: pointer; } #toggle{ position: absolute; right: 195px; top: 10px; } #menuLogo { position: absolute; top: 15px; left: -13px; width: 170px; } .fa-2x { font-size: 3em; margin: -2px 60px; animation: heartbeat-loader 1300ms ease 0s infinite normal; transform-origin: 50% 50%; transform: rotate(19deg) scale(1); position: absolute; } #tuhfawebserv ul>li{ position: relative; height: 45px; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.03); list-style: none; } #tuhfawebserv ul>li a { color: #fff; line-height: 48px; margin: 82px; font-family: lamar; transition: color 0.5s; text-decoration: none; } #tuhfawebserv ul>li i{ position: absolute; right: 200px; top:15px; color: rgba(255, 255, 255, 0.3); transition: color 0.5s; } .define h3:hover{ color:#169aff; border-top:3px solid #169aff; border-bottom:3px solid #169aff; } .define h3{ text-transform: uppercase; text-align:center; } #tuhfawebserv { background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKapPKPedbM4Of47wS5DXYYjqTFl13DhJguevK8ljms-3hLS3lKMv1DzZE6V-333KBlYkK85ty_JKoWHrjvq0vysro1To_aOKgs4byVpucLACxOq8ImNRIfmns76sRVjvOnBGSoR0hUdl_/w938-h350-no/header-6.png); z-index: 999; color: #fff; border-left: 2px solid #f9990a; } .fa-heart:before { content: "\f004"; color: #f9990a; } #menuHeader { background: #3a93c300; border-radius: 0 0px 0px 25px; } #tuhfawebserv ul>li:hover a { color: #faaf3f; } #tuhfawebserv ul>li:hover i{ color: #24AAE9; }

1. لوحة تحكم بلوجر.
2. إضافة أداة.
3. HTML/javasrcipt.

<div class='tuhfawebserv-left' id='tuhfawebserv'> <div id='menuHeader'> <div id='toggle'> <i class='fa fa-heart fa-2x'></i></div> <div id='menuLogo'> <img alt='tuhfawebserv' src='https://upload-files.cc/uploads/file_2018-01-18_110401.png'/></div> </div> <nav> <ul> <li> <a href='https://sudania12.blogspot.com/'> سودانيه 12 </a> </li> <li> <a href='https://n3mes.blogspot.com/'> أسماء </a> </li> <li> <a href='https://zo3l-1.blogspot.com/'> زول فانتاستيك </a> </li> <li> <a href='https://t3t7ssn.blogspot.com/'> تحفه فيديو </a> </li> <li> <a href='https://addb-tuhfawebserv.blogspot.com/'> إضافات بلوجر </a> </li> <li> </li> </ul> </nav> </div>