16 يونيو، 2014

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

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

إضافة قائمة منسدلة احترافية مع ايقونات التواصل الاجتماعي ,مدونة مدون محترف ,إضافات بلوجر ,دروس بلوجر ,قوالب بلوجر

اليوم في مدون محترف سوف نناقش إضافة قائمة منسدلة مع ايقونات التواصل الاجتماعي لمدونات بلوجر ,و يتم انشاء هذه القائمة المنسدلة عن طريق اكواد 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

في امان الله 

مدونة مدون محترف

مواضيع ذات صلة
اضافة قائمة منسدلة مع ايقونات التواصل الاجتماعية
4 / 5
بواسطة

هناك تعليقان (2) :

  1. عزيزي عندما ابحث عن الوسم لا يظهر لي

    ردحذف
    الردود
    1. بالنسبة للوسم فهو قد يكون مُختلف من قالب لأخر
      يمكنك وضع الكود في المكان الذي تريده و سوف تظهر القائمة
      و يمكنك وضعها في اداة HTML/JavaScript

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r