إضافة قائمة منسدلة ثابتة و متجاوبة مع جميع الشاشات لمدونتك في بلوجر

مرحبًا بكم في مدونة "عبدو تكنولوجي"! في هذا المقال،سنأخذك خطوة بخطوة كيفية إضافة قائمة منسدلة ثابتة إلى مدونتك على بلوجر. يمكن أن تكون هذه القائمة إضافة ممتازة لمدونتك، حيث تمكن زوارك من الوصول بسهولة إلى أقسام مختلفة ومحتوى مهم دون الحاجة للتمرير لأسفل الصفحة. ستسهل هذه القائمة عليك تنظيم المحتوى وتقديمه بشكل أنيق.

ضع الكود التالي فوق ال </head

<style type='text/css'>
/*<![CDATA[*/
:root {
  --main-color: #0076fe; /* اللون الاساسي */
  --txtColor: #27272a; /*  لون الخطوط*/
  --separator: #e8e8e8; /* لون الحواف*/
  --maxWidth : 1200px; /* عرض الهيدر */
  --PColor: #666666; /* لون زر القائمة على الهاتف */
  --header-Bg:#ffffff; /* لون خلفية الهيدر */
}
.header,.menuBtn{position:relative}.container{width:100%;max-width:var(--maxWidth);margin:0 auto;padding:0 15px;box-sizing:border-box}.header{background:var(--header-Bg);border-top:0 solid var(--separator);border-bottom:1px solid var(--separator);box-sizing:content-box;line-height:78px;transition:.3s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}.header.scroll{top:-90px;left:0;right:0}.header.no-scroll{top:0;z-index:99;left:0;right:0}.header .inner{display:flex;align-items:center;justify-content:flex-start}.header .links{display:flex;align-items:center;width:-webkit-fill-available;justify-content:space-between}.menuBtn{width:2.5rem;height:2.5rem;display:block;overflow:hidden;margin-left:10px}.menuBtn span{top:50%;right:5px;-webkit-transition:background .2s;-moz-transition:background .2s;transition:background .2s}.menuBtn span,.menuBtn span:after,.menuBtn span:before{position:absolute;display:inline-block;height:.1rem;width:1.5rem;background:var(--txtColor)}.menuBtn span:after,.menuBtn span:before{content:'';right:0;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:0% 50%;-moz-transform-origin:0% 50%;-ms-transform-origin:0% 50%;-o-transform-origin:0% 50%;transform-origin:0% 50%;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s}.menuBtn span:before{top:-7px}.menuBtn span:after{top:7px}.brand{display:flex;align-items:center;height:60px;width:14.688rem}.brand .img-logo{display:flex;align-items:center}.brand img{width:100%;height:100%}@media (min-width:768px){.menu>ul>li,.menu>ul>li>a{position:relative;margin:0}.menu-button,.menuBtn{display:none!important}.menu>ul{display:flex}.menu>ul>li{text-align:right;padding:0 22px 0 0;list-style:none;float:right;line-height:78px}.menu>ul>li>a{color:var(--txtColor);transition:color .2s,background .2s;white-space:nowrap;display:inline-block;padding:6px 0;line-height:normal;text-transform:none;letter-spacing:normal;font-weight:700}.menu>ul>li>a:before{content:"";position:absolute;bottom:0;width:0;height:2px;background:var(--main-color);opacity:0}.menu>ul>li>a:hover:before{width:75%;opacity:1}.menu>ul>li.parent>a:after{content:"\203A";transform:rotate(270deg);display:inline-block;margin-right:9px}.menu>ul>li.parent>a:hover:after{transform:rotate(88deg)}.menu>ul>li .sub-menu{background:var(--header-Bg);position:absolute;transform:translateY(-10px);visibility:hidden;opacity:0;top:80%;right:0;min-width:15em;text-align:right;z-index:11;white-space:nowrap;-webkit-box-shadow:0 0 2px rgb(0 0 0 / 10%),0 20px 40px rgb(0 0 0 / 18%);box-shadow:0 0 2px rgb(0 0 0 / 10%),0 20px 40px rgb(0 0 0 / 18%)}.menu>ul>li .sub-menu:before{content:"";position:absolute;top:-12px;right:15px;border:6px solid transparent;border-bottom-color:var(--header-Bg);width:0;height:0}.menu>ul>li.parent:hover .sub-menu{opacity:1;transform:translateY(0);visibility:visible}.menu>ul>li .sub-menu li{position:relative;line-height:20px}.menu>ul>li .sub-menu li a{padding:8px 16px;font-size:13px;color:var(--PColor);border-bottom:1px solid var(--separator);-webkit-transition:.1s;transition:.1s;display:block;position:relative}.menu>ul>li .sub-menu li a:hover{color:var(--txtColor);background:#f5f5f5}}@media screen and (max-width :768px){.header-wrapper .inner{justify-content:space-between}.brand{width:auto}.header-wrapper .buttons{margin:0}.header .links{display:none;position:fixed;left:0;width:100%;height:100vh;background:var(--header-Bg);top:-100%;-webkit-transition:.8s cubic-bezier(.23,.01,0,1);-moz-transition:.8s cubic-bezier(.23,.01,0,1);-o-transition:.8s cubic-bezier(.23,.01,0,1);transition:.8s cubic-bezier(.23,.01,0,1);visibility:hidden;z-index:99999!important}.header .links .menu-button .bar-11,.header .links .menu-button span,.header .links .mobile-menu .menu-button span{-webkit-transition:.8s cubic-bezier(.23,.01,0,1);-moz-transition:.8s cubic-bezier(.23,.01,0,1);-o-transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu-button,.header .links .mobile-menu .menu-button{width:39px;height:39px;position:absolute;border:1px solid var(--PColor);float:left;margin-left:20px;z-index:500;top:20px;left:25px;overflow:hidden;display:none}.header .links .menu-button span,.header .links .mobile-menu .menu-button span{transition:.8s cubic-bezier(.23,.01,0,1);display:block;position:absolute;height:1px;width:13px;background:var(--PColor);z-index:3;right:50%;margin-right:-6.5px}.header .links .menu-button .bar-1{top:16px;-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s}.header .links .menu-button .bar-2{top:19px;-webkit-transition-delay:0.2s;-moz-transition-delay:0.2s;-o-transition-delay:0.2s;transition-delay:0.2s}.header .links .menu-button .bar-3{top:22px;-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s}.header .links .menu-button .bar-11{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:19px;opacity:0;transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu-button .bar-22,.header .links .menu-button.close-button{-webkit-transition:.8s cubic-bezier(.23,.01,0,1);-moz-transition:.8s cubic-bezier(.23,.01,0,1);-o-transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu-button .bar-22{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:19px;opacity:0;transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu-button.close-button .bar-11,.header .links .menu-button.close-button .bar-22{opacity:1;-webkit-transition-delay:0.6s;-moz-transition-delay:0.6s;-o-transition-delay:0.6s;transition-delay:0.6s}.header .links .menu-button.close-button .bar-1,.header .links .menu-button.close-button .bar-2,.header .links .menu-button.close-button .bar-3{width:0}.header .links .menu-button.close-button span{background:var(--PColor)}.header .links .menu-button.close-button{z-index:1001!important;transition:.8s cubic-bezier(.23,.01,0,1);border-color:var(--PColor)}.header .links .menu-button.back-button .bar-11,.header .links .menu-button.back-button .bar-22{opacity:1;width:7px;-webkit-transition:.8s cubic-bezier(.23,.01,0,1);-moz-transition:.8s cubic-bezier(.23,.01,0,1);-o-transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu-button.back-button .bar-11{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);top:20px;transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu-button.back-button .bar-22{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:16px;transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu-button.back-button span{margin-right:-2px}.header .links .menu-button:not(.back-button){display:block}.header .links.is-open{visibility:visible;top:0;display:block}.header .links .menu ul{position:absolute;top:0;width:100%;right:0;padding-top:60px}.header .links .menu li{display:block;text-align:center;height:53px;line-height:53px;border-bottom:1px solid var(--separator)}.header .links .menu .sub-menu{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:.8s cubic-bezier(.23,.01,0,1);-moz-transition:.8s cubic-bezier(.23,.01,0,1);-o-transition:.8s cubic-bezier(.23,.01,0,1);transition:.8s cubic-bezier(.23,.01,0,1)}.header .links .menu li.active .sub-menu{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}.header .links .menu ul.subOpen>li>a{opacity:0}.header .links .menu .subOpen>li{border:0}.header .links .menu li a{color:var(--txtColor);font-size:1rem;font-weight:400;display:block;overflow:hidden}.header .links .menu li svg{fill:currentColor;width:1.2rem;height:1.2rem;margin-bottom:-5px;margin-left:5px}}
/*]]>*/
</style>

ضع الكود التالي فوق ال </body



ضع الكود التالي فوق ال <body>

    <!-- Header -->
    <div class='header'>
      <div class='container'>
        <div class='inner'>
          <button aria-label='Show Menu' class='menuBtn' type='button'>
            <span/>
          </button>
          <b:section class='brand' id='brand'>
            <b:widget id='Header1' locked='true' title='قالب تعليمي (رأس الصفحة)' type='Header' visible='true'>
              <b:widget-settings>
                <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNlswTt7NFgykqNaMB3ag0laJelsmHN3O9_8XpgS6yDsFSAj1pb22-4b_dxe3NdD1khgSrzy0JgCR7OqshmzXwrHrspi0Tyj0KOuZXnJgkkvzmyKtRLb9aWu2C2eCjQaxcuUlLPCsoxlr0H__LMhtaIfYDsBVOwtNPcZGKsvlRTfQ0RybGAsPuRqk/s320/logo3.png</b:widget-setting>
                <b:widget-setting name='displayHeight'>75</b:widget-setting>
                <b:widget-setting name='sectionWidth'>150</b:widget-setting>
                <b:widget-setting name='useImage'>true</b:widget-setting>
                <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
                <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
                <b:widget-setting name='displayWidth'>200</b:widget-setting>
              </b:widget-settings>
              <b:includable id='main' var='this'>
                  <div class='header-inner'>
                    <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
                    <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
                    <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
                  </div>
                  <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='behindImageStyle'/>
                </b:includable>
              <b:includable id='behindImageStyle'>
          <b:if cond='data:sourceUrl'>
                   <b:include cond='data:this.image' data='{image: data:this.image,selector: &quot;.header-widget&quot;}' name='responsiveImageStyle'/>
                  <style type='text/css'>
                    .header-widget {
                    background-position: <data:blog.locale.languageAlignment/>;
                    background-repeat: no-repeat;
                    background-size: cover;
                    }
                   </style>
                  </b:if>
        </b:includable>
              <b:includable id='description'>
          <p>
            <data:this.description/>
          </p>
        </b:includable>
              <b:includable id='image'>
          <a class='img-logo' expr:href='data:blog.homepageUrl'>
           <b:include data='{ image: data:image, imageClass : &quot;lazy&quot; , altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height}' name='responsiveImage'/>
          </a>
          <b:if cond='!data:view.isSingleItem'><h1 class='hide'><data:blog.title/></h1></b:if>
        </b:includable>
              <b:includable id='title'>
          <h1>
            <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
              <data:title/>
            </b:tag>
          </h1>
        </b:includable>
            </b:widget>
          </b:section> 
          <b:section class='links' id='links'>
             <b:widget id='LinkList23' locked='true' title='' type='LinkList' version='3' visible='true'>
               <b:widget-settings>
                 <b:widget-setting name='text-9'>فنون</b:widget-setting>
                 <b:widget-setting name='link-9'>http://</b:widget-setting>
                 <b:widget-setting name='text-8'>سينما</b:widget-setting>
                 <b:widget-setting name='link-7'>http://</b:widget-setting>
                 <b:widget-setting name='link-8'>http://</b:widget-setting>
                 <b:widget-setting name='link-5'>http://</b:widget-setting>
                 <b:widget-setting name='link-6'>http://</b:widget-setting>
                 <b:widget-setting name='link-3'>http://</b:widget-setting>
                 <b:widget-setting name='link-4'>http://</b:widget-setting>
                 <b:widget-setting name='text-1'>صحة</b:widget-setting>
                 <b:widget-setting name='text-0'>طبخ</b:widget-setting>
                 <b:widget-setting name='text-3'>منسدلة</b:widget-setting>
                 <b:widget-setting name='text-2'>تقنية</b:widget-setting>
                 <b:widget-setting name='text-5'>_فرعية</b:widget-setting>
                 <b:widget-setting name='text-4'>_فرعية</b:widget-setting>
                 <b:widget-setting name='text-7'>_فرعية</b:widget-setting>
                 <b:widget-setting name='text-6'>_فرعية</b:widget-setting>
                 <b:widget-setting name='sorting'>NONE</b:widget-setting>
                 <b:widget-setting name='link-1'>http://</b:widget-setting>
                 <b:widget-setting name='link-2'>http://</b:widget-setting>
                 <b:widget-setting name='link-0'>http://</b:widget-setting>
               </b:widget-settings>
               <b:includable id='main'>
                 <b:include name='Menu.links'/>
               </b:includable>
               <b:includable id='Menu.links'>
                 <a aria-label='Close Button' class='menu-button close-button' href='javascript:;' role='button'>
                  <span class='bar-1'/>
                  <span class='bar-2'>
                  </span>
                  <span class='bar-3'/>
                  <span class='bar-11'>
                  </span>
                  <span class='bar-22'/>
                </a>
                 <a aria-label='Back Button' class='menu-button back-button' href='javascript:;' role='button'>
                   <span class='bar-11'/>
                   <span class='bar-22'/>
                 </a>
                 <nav class='menu'>
                   <ul>
                   <b:loop values='data:links' var='link'>
                     <li>
                       <a expr:href='data:link.target' expr:title='data:link.name' rel='nofollow'>
                         <data:link.name/>
                       </a>
                     </li>
                  </b:loop>
                  </ul>
                 </nav>
               </b:includable>
               <b:includable id='content'>
          <ul>
            <b:loop values='data:links' var='link'>
              <li>
                <a expr:href='data:link.target' expr:title='data:link.name' rel='nofollow'>
                  <data:link.name/>
                </a>
              </li>
            </b:loop>
          </ul>
        </b:includable>
             </b:widget>
           </b:section>
        </div>
      </div>
    </div>
    <!-- End Header -->

كيفية التعديل من التخطيط