اضافة قائمة علوية شريط القوائم الناف بار navbar فى مدونة بلوجر

اضافة قائمة علوية او شريط الناف بار من اهم اضافات بلوجر ولاغنى عنها لاى مدونة لأحتوائها على اهم العناوين الذى تخص صاحب المدونة مثل الاتصال بنا والارشيف ومن نحن وخصوصية الاستخدام وسياسة الموقع وغيرها من العناوين الذى يضعها صاحب المدونة .

هذه الاضافة يوجد بها ايقونات مواقع التواصل الاجتماعى اهمهم الفيس بوك facebook وتويتر twitter وجوجل بلس plus google وبعض الايقونات الاخرى الهامة .

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

كيفية تركيب شريط القوائم الناف بار اعلى مدونة بلوجر 

فى البداية قم بالتواجهة الى لوحة تحكم مدونتك ومنها اضغط على المظهر ومن بعدها اضغط على تحرير HTML انت الأن داخل اكواد قالب المدونة ماذا تفعل الأن ؟

قم بالبحث عن هذا الكود :

</head>

ضع بأسفلة مباشرة هذا الكود :

 <style>

    #mbtnavbar { 

      background: #F1F1F1; 

      width: 100%; 

      color: #333333; 

      margin:auto; 

      padding: 0; 

      position: relative; 

      border-top:0px solid #960100; 

      height:30px;

    }

    #mbtnav {

      margin: 0; 

      padding: 0; 

    } 

    #mbtnav ul { 

      float: left; 

      list-style: none; 

      margin: 0; 

      padding: 0; 

    } 

    #mbtnav li { 

      list-style: none; 

      margin: 0; 

      padding: 0; 

    } 

    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 

      color: #333333; 

      display: block; 

      font-family:Droid Arabic kufi,Arial,Helvetica,Sans-serif;font-size:10px; 

      margin: 0; 

      padding: 9px 12px 11px 12px; 

      text-decoration: none; 

      border-right:0px solid #627AAD;

    } 

    #mbtnav li a:hover, #mbtnav li a:active { 

      background: #A3A3A3; 

      color: #333333; 

      display: block; 

      text-decoration: none; 

      margin: 0; 

      padding: 9px 12px 11px 12px; 

    }

    #mbtnav li { 

      float: left; 

      padding: 0; 

    } 

    #mbtnav li ul { 

      z-index: 9999; 

      position: absolute; 

      left: -999em; 

      height: auto; 

      width: 160px; 

      margin: 0; 

      padding: 0; 

    } 

    #mbtnav li ul a { 

      width: 140px; 

    } 

    #mbtnav li ul ul { 

      margin: -25px 0 0 161px; 

    }

    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 

      left: -999em; 

    } 

    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 

      left: auto; 

    } 

    #mbtnav li:hover, #mbtnav li.sfhover { 

      position: static; 

    } 

    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 

      background: #EDEFF4; 

      width: 120px; 

      color: #3B5998; 

      display: block; 

      font:normal 12px Helvetica, sans-serif; 

      margin: 1px 0 0 0; 

      padding: 9px 12px 10px 12px; 

      text-decoration: none; 

      z-index:9999; 

      border:1px solid #ddd;

      -moz-border-radius:4px; 

      -webkit-border-radius:4px;

    } 

    #mbtnav li li a:hover, #mbtnav li li a:active { 

      background: #627AAD; 

      color: #FFF; 

      display: block; 

    }

    #mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {

      background: #EDEFF4; 

      width: 120px; 

      color: #3B5998; 

      display: block; 

      font:normal 12px Helvetica, sans-serif; 

      padding: 9px 12px 10px 12px; 

      text-decoration: none; 

      z-index:9999; 

      border:1px solid #ddd; 

      margin: 1px 0 0  -14px; 

    } 

    #mbtnav li li li a:hover, #mbtnav li li li a:active { 

      background: #627AAD; 

      color: #FFF; 

      display: block; 

    }

    #wctopdropsoc {

      float:right;

      width:220px;

      padding:0px 0px ;

      margin:-43px 0px 0px 0px;

      position: relative;

    }

    #wctopdropsoc img

    {

      margin-right:5px;

      margin-top:15px;

      height:19px;

      border:none;

    }

  </style>

  <div id='mbtnavbar'>

    <ul id='mbtnav'>

      <li>

        <a href='http://www.kingnt.com/p/blog-page_28.html' target='_blank' title='الارشيف'>

          الارشيف

        </a>

      </li>

      <li>

        <a href='http://www.kingnt.com/sitemap.xml' target='_blank' title='الخريطة'>

          الخريطة

        </a>

      </li>

      <li>

        <a href='http://www.kingnt.com/p/blog-page_27.html' title='اتصل بنا'>

          اتصل بنا

        </a>

      </li>

      <li>

        <a href='http://www.kingnt.com/p/aboutus.html' target='_blank' title='من نحن'>

          من نحن

        </a>

      </li>

    </ul>

  </div>

  <div id='wctopdropsoc'>

    <a href='https://plus.google.com/101218667290115588531/posts' target='_blank' title='google+'>

      <img alt='Subcribe to our RSS feeds' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZwUUmfd79CaViJmLBoGj31SmxWolF9c1gmJ4XubiNToKNX6-G0iSlPa3fLt0QyCfmK64xAPbQ3TQBlfZtL1jt_hbhHe2AwQ268GZP5ByQA-8fTVgzdFCCefzFu0XOyQ8JhwdVPSFAP8/h120/Free+google+Plus+Purple+Rimmed+Social+Media+Icons.png' style='height: 25px' width='25'/>

    </a>

    <a href='https://www.facebook.com/blog.kingnt' target='_blank' title='facebook'>

      <img alt='Join Us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJsplZELNinhd6eepLQ-5Y6VnrmbZ0S6KQUfcD5H2Jm3LcMifSDS8zUVFmi2wWUnJH_kupDfJM0nrOO9-TQZV7QspoP92Sh7qDsXb7ZrLb4lRViKOdsOFZRdc3queXIRO3aoUU-dSTfw/h120/Free+Facebook+Purple+Rimmed+Social+Media+Icons.png' style='height: 25px' width='25'/>

    </a>

    <a href='https://twitter.com/kingntblog' target='_blank' title='twitter'>

      <img alt='Join Us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_vUXkS9758z8SrKQyNQc-VdmcsgwJnfwsFZLCfKhrbYoeokEZglyPRRn87EmUnfYvTZdDzrQ0y3P01oMwAbmfRUDlY0VVC0BCtR8wwtqK4jR-OD-1pLIR68yDCsC0YpC1LnzjvKuD-g/h120/Free+Tumblr+Purple+Rimmed+Social+Media+Icons.png' style='height: 25px' width='25'/>

    </a>

    <a href='https://www.pinterest.com/ekramya7zan/pins/' target='_blank' title='pinterest'>

      <img alt='Join Us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIN0Jrz9_o9qCrsBsVTsVdYbSJPWIH0_oErb1LwtV9eMell5aW1kZaMYJSt3rT2xXxTn2r_LvCgQyld7mCYFOzMkfC5zcQfb713CbbwxrUvZD3Q6OWCoudvBciiIkU8i4TcuglzOotTd0/h120/Free+pinterest+Purple+Rimmed+Social+Media+Icons.png' style='height: 25px' width='25'/>

    </a>

    <a href='http://www.kingnt.com/feeds/posts/default?max-results=500' target='_blank' title='feeds'>

      <img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcirXkYehug7H1x-H9KGq80gH1COtahu1BRfVU1jxqJZTk7AjkgEe-ng0VD7sULiYOBqt1PjsJl4lLTfWlFK9FKsUv6U0KqBCX0BmdlxGsQHn7Ssf6wkCji-FdDeNcvfTZPYkAZfNEEgw/h120/Free+RSS+Purple+Rimmed+Social+Media+Icons.png' style='height: 25px' width='25'/>

    </a>

    <a href='http://www.kingnt.com' target='_blank'>

      <img alt='Add to Circles' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vOM29TbnsZZ2umA12y0uknC-UeCzaMIHF8yA97yCD3FEogBbDXUKEHc_GZhs08HtYY3r1mdPrC5qkMNDb6dlsx5txzWw2VjuXtUTVTqtKtB5g_576rEibiwugOLmivsXkGM2Aq-Jkmc/h120/Free+YouTube+Purple+Rimmed+Social+Media+Icons.png' style='height: 25px' width='25'/>

    </a>

  </div> 

قبل الحفظ عليك بعمل التغييرات الذى تريدها حيث ان :

اللون الازرق خاص بوضع روابطك الهامة مثل الاتصال بنا ومن نحن وغيرها 

اللون الاحمر خاص بوضع روابط صفحات مواقع التواصل 

بأمكانك ان تعدل علية كما تريد 

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