قائمة إحترافية لمدونات بلوجر مع أيقونات رائعة

صحراوي منير


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




<style type='text/css'>
#plozrdrdown{
width:100%;
height:40px;
display:block;
padding:0;
margin:0 0 22px 0;
background:#222222;
}
#plozrdmenu a::before {
float: right;
font: 18px/48px fontawesome;
position: relative;
top: -15px;
margin-left: 5px;
}
#plozrdmenu,#drop{
list-style:none;
direction:rtl;
padding:0;
margin:0;
}
#plozrdmenu li {
float:right;
}
#plozrdmenu li a {
display:block;
padding:11px 15px;
color:#fff;
text-decoration:none;
font:15px Tahoma;
font-weight:normal;
}
#plozrdmenu li a:hover {
background:#D03030;
color:#fff;
transition:all .7s ease 0s;
}
#drop {
position:absolute;
display:none;
list-style:none;
z-index:60; 
}
#drop li {
float:none;
}
#drop li a {
background:#000;
border-bottom:1px solid #bbb;
padding:5px 10px;
width:150px;
}
    
#sub:hover #drop {
display:block;
}
#drop2:hover #plozrdmenu3 {
display:block;
}
#plozrdmenu3 {
position:absolute;
display:none;
margin-right:131px;
margin-top:-28px;
    }
#plozrdmenu3 li{
list-style:none;
margin-left:100px;
}
#plozrdmenu3 li a {
width:150px;
}
/*عنا*/
.conus::before {content: "\f003";}
.plozr1::before {content: "\f007";}
.plozr2::before {content: "\f058";}
.supus::before {content: "\f06b";}
.indexer::before {content:"\f0e8";}
.adsus::before {content: "\f024";}
.home::before {content: "\f0eb";}
.askus::before {content: "\f0c0";}
</style>
<div id='plozrdrdown'>
<ul id='plozrdmenu'>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<li><a class='plozr1' href='#'>عن المدونة</a></li>
<li><a class='indexer' href='#'>الفهرس</a></li>
<li><a class='adsus' href='#'>أعلن لدينا</a></li>
<li><a class='plozr2' href='#'>سياسة الخصوصية</a></li>  
<li><a class='askus' href='#'>سجل الزوار</a></li>
<li><a class='conus' href='#'>اتصل بنا</a></li>
</ul>
</div>


 

شرح تنسيق القائمة


width:100%; : عرض القائمة وهو العرض المناسب لكل مدونة
margin:0 0 22px 0; : تمثل المساحة من الأسفل وهي القيمة 22px
background:#222222; : خلفية القائمة #222222
font: 18px/48px fontawesome; : اسم وحجم الايقونات 18 حجم الأيقونات
font:15px Tahoma; الخط والحجم المستعمل في القائمة 15 حجم الخط Tahoma اسم الخط 
background:#D03030; : خلفية الهوفر وهي حمراء زرقاء عندنا وفي الكود حمراء غيرها كما تشاء
: غيره برابط الصفحة

{ إِنَّ اللَّهَ وَمَلَائِكَتَهُ يُصلُّونَ عَلَى النَّبِيِّ يَا أَيُّهَا الَّذينَ آمَنُوا صَلُّوا عَلَيْهِ وَسَلِّمُوا تسلِيماً } ﷺ

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

{ إِنَّ اللَّهَ وَمَلَائِكَتَهُ يُصلُّونَ عَلَى النَّبِيِّ يَا أَيُّهَا الَّذينَ آمَنُوا صَلُّوا عَلَيْهِ وَسَلِّمُوا تسلِيماً } ﷺ

0تعليقات

القائمة