اضافة قائمة منسدلة مع ايقونات التواصل الاجتماعية

اضافة قائمة منسدلة مع ايقونات التواصل الاجتماعية

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

معاينة

شرح التركيب

ابحث عن</header>و اضف الكود التالي فوقه

<style>
#mudwnp-nav{
  width:100%;
  height:50px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#f84242;
border-bottom:4px solid rgba(197,52,52,1);
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
}

#mudwnp-menu{
  margin:0 auto;
  display:block;
  padding:0;
font-family: 'georgia', sans-serif;
}

#mudwnp-menu ul{
  float:right;
  margin:0;
  padding:0;

}

#mudwnp-menu li{
  float:right;
  list-style:none;
  line-height:50px;
  margin:0;
  padding:0
}

#mudwnp-menu li a, #mudwnp-menu li a:link{
  color:#f0f0f0;
  display:block;
  margin:0;
  padding:0 10px;
font-size:16px;
  text-decoration:none;

}

#mudwnp-menu li a:hover, #mudwnp-menu li a:active, #mudwnp-menu .current_page_item a  {
  color:#fff;
  padding:0 10px;
}

#mudwnp-menu li li a, #mudwnp-menu li li a:link, #mudwnp-menu li li a:visited{
  font-size: 16px;
background:#f84242;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;

}

#mudwnp-menu li li a:hover, #mudwnp-menu li li a:active {
  background:rgba(197,52,52,1);

  color: #fff;
}

#mudwnp-menu li ul{
  z-index:9999;
  position:absolute;
  right:-999em;
  height:auto;
  width:168px;
  margin:0px;
  padding:0px

}

#mudwnp-menu li:hover ul, #mudwnp-menu li li:hover ul, #mudwnp-menu li li li:hover ul, #mudwnp-menu li.sfhover ul, #topmudwnp-menu li li.sfhover ul, #topmudwnp-menu li li li.sfhover ul{
  right:auto
}

#mudwnp-menu li:hover, #mudwnp-menu li.sfhover{
  position:static

}

#mudwnp-ico img
{
margin-right:-6px;
height:35px;
margin-top:9px;
}
</style>


  <div id='mudwnp-nav'>
     <div id='mudwnp-menu'>
         <ul>
       <li><a href='#'>الرئيسية</a></li>
           <li><a href='#'>تعديل</a>
            
           </li>
               <li><a href='#'>تعديل</a></li>
      
           <li><a href='#'>تعديل</a></li>
           
           <li><a href='#'>قائمة منسدلة »</a>
               <ul>
                  <li><a href='#'>تعديل</a></li>
                  <li><a href='#'>تعديل</a></li>
                  <li><a href='#'>تعديل</a></li>
                  <li><a href='#'>تعديل </a></li>
                  <li><a href='#'>تعديل</a></li>
                  <li><a href='#'>تعديل tips</a></li>
               </ul>
           </li>
             <li><a href='#'>اتصل بنا</a>        
           </li>
          <li id='mudwnp-ico'>
<a href='#' target='_blank'>
<img style='margin-right:50px;' src='http://2.bp.blogspot.com/-iKLppxYoaW0/Uws6PaZJ-yI/AAAAAAAAAHk/5Vp8DWfYXCU/s1600/48x48-Circle-49-FB.png' alt='Facebook' title='تابعنا على فيس بوك'/>
</a>
</li>
<li id='mudwnp-ico'>
<a href='#' target='_blank'>
<img src='http://3.bp.blogspot.com/-48EGbQzzsdI/Uws6RmhElvI/AAAAAAAAAIM/4cB8dYeRA1c/s1600/48x48-Circle-49-TW.png' alt='Twitter' title='تابعنا على تويتر'/>
</a>
</li>
<li id='mudwnp-ico'>
<a href='#' target='_blank'>
<img src='http://4.bp.blogspot.com/-hyEUL2pEdxo/Uws6PoLa8tI/AAAAAAAAAHo/cPPQeU-XbdE/s1600/48x48-Circle-49-GP.png' alt='Google Plus' title='تابعنا على جوجل بلس'/>
</a>
</li>
<li id='mudwnp-ico'>
<a href='#' target='_blank'>
<img src='http://4.bp.blogspot.com/-6NeaTmA0fxs/Uws6RGbKbnI/AAAAAAAAAIE/X-xp-2uBQ-g/s1600/48x48-Circle-49-RSS.png' alt='RSS' title='اشترك في الخلاصة'/>
</a>
</li>

         </ul>
      </div>

   </div>

تخصيص القائمة

- قم باستبدال الــ # بالروابط الخاصة بك

- قم باستبدال الـ f84242 لتغيير لون الخلفية للقائمة

- قم باستبدالbackground:rgba(197,52,52,1 لتغيير لون الخط الذي بالاسفل

- قم باستبدال الـ اشترك في الخلاصة و هذه الكلمات بما يناسبك و هي تظهر عند الضغط على الايقونات

- و يمكن ايضا استبدال ايقونات التواصل الاجتماعي ولكن يجب ان يكون حجم الصور  48x48

في امان الله