اضافة قائمة افقية لمدونات بلوجر بتقنية css

السلام عليكم ورحمة الله تعالي وبركاته أهلا بكم في مدونة مساعد قوالب بلوجر اليوم انشاء الله اقدم لكم اضافة رائعة جدا وجميلة وهي قائمة افقية لمدجونات بلوجر بتقنية css تتميز هذه القائمة با سهولة التركيب والاناقة عن باقي القائمات أولا دعونا نلقي نظرة علي هذه القائمة عبر زر المعاينة التالي .

معاينة

طريقة تركيب القائمة

من لوحة تحكم بلوجر
اضغط علي تخطيط
ثم إضافة أداة
ونضع بها الكود التالي

<ul id="mofednetcss1" class="topmenu">

<li class="toplast"><a href="#" target="_top" title="كتب هنا وصف الرئيسية" style="height:32px;line-height:32px;"><img src="https://googledrive.com/host/0BykiYSHUoXzyR2tUbDBpd2JjQ1U/" alt=""/>الرئيسية</a></li>

<li class="topmenu"><a href="#" target="_top" title="اكتب هنا وصف البرامج" style="height:32px;line-height:32px;"><span><img src="https://googledrive.com/host/0BykiYSHUoXzybDZlY0JjRlAyLUU/" alt=""/>برامج</span></a>

<ul>

<li><a href="#" target="_top" title="هنا وصف برامج مجانية"><img src="https://googledrive.com/host/0BykiYSHUoXzyQV9uUkhmWVZxa1E/" alt=""/>برامج مجانية</a></li>

<li><a href="#" target="_top" title="هنا وصف شرح البرامج "><img src="https://googledrive.com/host/0BykiYSHUoXzyQV9uUkhmWVZxa1E/" alt=""/>شرح البرامج </a></li>

<li><a href="#" target="_top" title="هنا وصف احدث البرامج"><img src="https://googledrive.com/host/0BykiYSHUoXzyQV9uUkhmWVZxa1E/" alt=""/>احدث البرامج</a></li>

</ul></li>

<li class="topmenu"><a href="#" target="_top" title="اكتب هنا وصف للالعاب" style="height:32px;line-height:32px;"><span><img src="https://googledrive.com/host/0BykiYSHUoXzyV1F6WndTeEtYRm8/" alt=""/>العاب</span></a>

<ul>

<li><a href="#" target="_top" title="هنا وصف الالعاب الجديدة"><span><img src="https://googledrive.com/host/0BykiYSHUoXzyNC10ZkJXZU9LV00/" alt=""/>العاب جديدة</span></a>

<ul>

<li><a href="#" target="_top" title="هنا وصف العاب مدفوعة"><img src="https://googledrive.com/host/0BykiYSHUoXzyVFNEM2RjMzRDNjQ/" alt=""/>العاب مجانية</a></li>

<li><a href="#" target="_top" title="هنا وصف العاب مدفوعه"><img src="https://googledrive.com/host/0BykiYSHUoXzyWEZIcjdYRklKNFk/" alt=""/>العاب مدفوعه</a></li>

</ul></li>

</ul></li>

<li class="topfirst"><a href="#" target="_top" title="هنا وصف بلوجر" style="height:32px;line-height:32px;"><img src="https://googledrive.com/host/0BykiYSHUoXzyN3praFlwdHhGWGc/" alt=""/>بلوجر</a></li>

</ul>



<style media="screen" type="text/css">

ul#mofednetcss1,ul#mofednetcss1 ul{

margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;}

ul#mofednetcss1 ul{

display:none;position:absolute;right:0;top:100%;background-color:#FFFFFF;border-color:#d4d4d4;padding:0 10px 10px;}

ul#mofednetcss1 li:hover>*{

display:block;}

ul#mofednetcss1 li{

position:relative;display:block;white-space:nowrap;font-size:0;float:left;}

ul#mofednetcss1 li:hover{

z-index:1;}

ul#mofednetcss1 ul ul{

position:absolute;right:100%;top:0;}

ul#mofednetcss1{

font-size:0;width:100%;z-index:999;position:relative;display:inline-block;zoom:1;padding:0 0%;margin:0 0%;

*display:inline;*padding-right:1.37%;}

* html ul#mofednetcss1 li a{

display:inline-block;}

ul#mofednetcss1>li{

margin:0;width:25%;}

body:first-of-type ul#mofednetcss1{

display:inline-table;border-spacing:0px 0;}

body:first-of-type ul#mofednetcss1>li{

display:table-cell;float:none;}

ul#mofednetcss1 a:active, ul#mofednetcss1 a:focus{

outline-style:none;}

ul#mofednetcss1 a{

display:block;vertical-align:middle;text-align:right;text-decoration:none;font:bold 14px droid arabic naskh;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#c1c1c1;background-image:url("https://googledrive.com/host/0BykiYSHUoXzybWlSZVAtMDFBMW8/");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}

ul#mofednetcss1 ul li{

float:none;margin:10px 0 0;}

ul#mofednetcss1 ul a{

text-align:right;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px droid arabic naskh;color:#000;text-decoration:none;}

ul#mofednetcss1 li:hover>a,ul#mofednetcss1 li a.pressed{

background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("https://googledrive.com/host/0BykiYSHUoXzybWlSZVAtMDFBMW8/");background-position:0 100px;}

ul#mofednetcss1 img{

border:none;vertical-align:middle;margin-left:10px;}

ul#mofednetcss1 span{

display:block;overflow:visible;background-position:left center;background-repeat:no-repeat;padding-left:0px;}

ul#mofednetcss1 ul span{

background-image:url("https://googledrive.com/host/0BykiYSHUoXzyTl9yd1hXN1RLdnc/");padding-left:12px;}

ul#mofednetcss1 li:hover>a,ul#mofednetcss1 li > a.pressed{

background-color:#f8ac00;background-image:url("https://googledrive.com/host/0BykiYSHUoXzybWlSZVAtMDFBMW8/");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;}

ul#mofednetcss1 ul li:hover>a,ul#mofednetcss1 ul li > a.pressed{

background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}

ul#mofednetcss1 li.topfirst>a{

border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}

ul#mofednetcss1 li.toplast>a{

border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}

ul#mofednetcss1>li:nth-of-type(1){width:23%}ul#mofednetcss1>li:nth-of-type(2){width:23%}ul#mofednetcss1>li:nth-of-type(3){width:23%}ul#mofednetcss1>li:nth-of-type(4){width:31%}

@-moz-document url-prefix(){body:first-of-type ul#mofednetcss1{display:inline-block} body:first-of-type ul#mofednetcss1>li{display:block;float:left !important;}}

</style>