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

اقرا ايضا :زر الصعود للأعلى

اقرا ايضا :منع نسخ المحتوى للمواضيع

اقرا ايضا :فتح الروابط الخارجيه في نافذه (صفحه) جديده

اقرا ايضا :المتابعه عبر مواقع التواصل الإجتماعي C

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/AVvXsEhYz6bhy_ATiQSekwFV8WluL7ZPCVlXewH_8iBBnQc3xeYsAnOSpI1sTv2Go5GO8O-pICYn99tLPQWY3ZFjDInapMC0ZZ6N9hXmx3HuLoGLu8Fg6_n6aI65Hqb7wXIeMKLmsWq1_IEpdfhF/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>