أضافة قائمة أفقية بخصائص مميزة وعديدة لمدونات البلوجر

<div id="menu">

<li><a href="#" class="drop">الرئيسية</a><!-- Begin Home Item -->

<div class="dropdown_2columns"><!-- Begin 2 columns container -->

<div class="col_2">

<h2>Welcome !</h2>

</div>

<div class="col_2">

<p>مرحبا بك عزيزي الزائر سعدت بزيارتك للمدونةة </p>            

<p>أكتب نبذة صغير عنك </p>            

</div>

<div class="col_2">

<h2>ندعم المتصفحات التالية</h2>

</div>

<div class="col_1">

<img
src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png"
 width="125" height="48" alt="" />

</div>

<div class="col_1">

<p>تعديل الكتابة مدونتي نت  عالم مدونات البلوجر</p>

</div>

</div><!-- End 2 columns container -->

</li><!-- End Home Item -->

<li><a href="#" class="drop">العمود 5</a><!-- Begin 5 columns Item -->

<div class="dropdown_5columns"><!-- Begin 5 columns container -->

<div class="col_5">

<h2>قم بتعديل هذه الكتابة</h2>

</div>

<div class="col_1">

<p class="black_box">قم بتعديل الكتابة</p>

</div>

<div class="col_1">

<p>ضع هنا كتابة موضوع مختصرة.يمكنك الكاتبة تكون أكثر من سطر</p>

</div>

<div class="col_1">

<p class="italic">قم بتعديل الكتابة مدونتي نت للبلوجر</p>

</div>

<div class="col_1">

<p>ضع هنا كتابة موضوع مختصرة.يمكنك الكاتبة تكون أكثر من سطر.</p>

</div>

<div class="col_1">

<p class="strong">ضع هنا كتابة موضوع مختصرة.يمكنك الكاتبة تكون أكثر من سطر.</p>

</div>

<div class="col_5">

<h2>Here is some content with side images</h2>

</div>

<div class="col_3">

<img src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg" width="70" height="70" class="img_right imgshadow" alt="" />

<p> 1ضع هنا نبذة عن موضوع معين .<a href="رابط الموضوع">قراء المزيد...</a></p>

<img src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg" width="70" height="70" class="img_right imgshadow" alt="" />

<p>ضع هنا نبذة عن موضوع معين.<a href="رابط الموضوع">قراءة المزيد...</a></p>

</div>

<div class="col_2">

<p class="black_box">ضع هنا كتابة .</p>

</div>

</div><!-- End 5 columns container -->

</li><!-- End 5 columns Item -->

<li><a href="رابط" class="drop">تعديل</a><!-- Begin 4 columns Item -->

<div class="dropdown_4columns"><!-- Begin 4 columns container -->

<div class="col_4">

<h2>هنا ضع عنوان للعناوين</h2>

</div>

<div class="col_1">

<h3>أقسام المدونة</h3>

<ul>

<li><a href="#">قسم 1</a></li>

<li><a href="#">قسم 2</a></li>

<li><a href="#">قسم 3</a></li>

<li><a href="#">قسم 4</a></li>

<li><a href="#">قسم 5</a></li>

</ul>  

</div>

<div class="col_1">

<h3>مواضيع مهمة</h3>

<ul>

<li><a href="#">الموضوع الاول</a></li>

<li><a href="#">الموضوع الثاني</a></li>

<li></li>

<li><a href="#">الموضوع الرابع</a></li>

<li><a href="#">الموضوع الخامس</a></li>

</ul>  

</div>

<div class="col_1">

<h3>خدمات أخرى</h3>

<ul>

<li><a href="#">خدمة 1</a></li>

<li><a href="#">خدمة 2</a></li>

<li><a href="#">خدمة 3</a></li>

<li><a href="#">خدمة 4</a></li>

<li><a href="#">خدمة 5</a></li>

</ul>  

</div>

<div class="col_1">

<h3>برامج</h3>

<ul>

<li><a href="#">برنامج 1</a></li>

<li><a href="#">برنامج 2</a></li>

<li><a href="#">برنامج 3</a></li>

<li><a href="#">برنامج 4</a></li>

<li><a href="#">وللمزيد من البرامج</a></li>

</ul>  

</div>

</div><!-- End 4 columns container -->

</li><!-- End 4 columns Item -->

<li class="menu_left"><a href="#" class="drop"> العمودالاول</a>

<div class="dropdown_1column align_left">

<div class="col_1">

<ul class="simple">

<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="#">شروحات البلوجر</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="#">تعديل1</a></li>

<li><a href="#">تعديل2</a></li>

<li><a href="#">تعديل 3</a></li>

<li><a href="#">تعديل 4</a></li>

<li><a href="#">تعديل 5</a></li>

</ul>  

</div>

</div>

</li>

<li class="menu_left"><a href="#" class="drop">العمود3</a><!-- Begin 3 columns Item -->

<div class="dropdown_3columns align_left"><!-- Begin 3 columns container -->

<div class="col_3">

<h2>Lists in Boxes</h2>

</div>

<div class="col_1">

<ul class="greybox">

<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>

</ul>  

</div>

<div class="col_1">

<ul class="greybox">

<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>

</ul>  

</div>

<div class="col_1">

<ul class="greybox">

<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>

</ul>  

</div>

<div class="col_3">

<h2>Here are some image examples</h2>

</div>

<div class="col_3">

<img
src="http://3.bp.blogspot.com/-1dqOjQaLfS0/T_sb5xttWVI/AAAAAAAAGGA/r7OnID4c4BM/s1600/02.jpg"
 width="70" height="70" class="img_right imgshadow" alt="" />

<p>أكتب نبذة مختصرة مثلا عن البرامج الجوالات أو أي موضوع في أي
أختصاص<a href="رابط الموضوع">قراءة المزيد</a></p>

<img
src="http://2.bp.blogspot.com/-uii0RgXpijI/T_sb5DJGWaI/AAAAAAAAGF4/5hrytF6f_AE/s1600/01.jpg"
 width="70" height="70" class="img_right imgshadow" alt="" />

<p>كذلك هنا أكتب نفس الشي تحدث عن أي موضوع معين  <a href="#">قراءة المزيد

</a></p></div><!-- End 3 columns container -->

</div></li><!-- End 3 columns Item -->

</div>



<style type="text/css">

body, ul, li {

 font-size:15px;

 font-family:Arial, Helvetica, sans-serif;

 line-height:21px;

 text-align:right;

}



/* Navigation Bar */



#menu {

 list-style:none;

 width:940px;

 margin:30px auto 0px auto;

 height:43px;

 padding:0px 20px 0px 20px;



 /* Rounded Corners */



 -moz-border-radius: 10px;

 -webkit-border-radius: 10px;

 border-radius: 10px;



 /* Background color and gradients */



 background: #014464;

 background: -moz-linear-gradient(top, #0272a7, #013953);

 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));



 /* Borders */



 border: 1px solid #002232;



 -moz-box-shadow:inset 0px 0px 1px #edf9ff;

 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;

 box-shadow:inset 0px 0px 1px #edf9ff;

}



#menu li {

 float:right;

 text-align:center;

 position:relative;

 padding:4px 10px 4px 10px;

 margin-left:30px;

 margin-top:7px;

 border:none;

}



#menu li:hover {

 border: 1px solid #777777;

 padding:4px 9px 4px 9px;



 /* Background color and gradients */



 background: #F4F4F4;

 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);

 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));



 /* Rounded corners */



 -moz-border-radius: 5px 5px 0px 0px;

 -webkit-border-radius: 5px 5px 0px 0px;

 border-radius: 5px 5px 0px 0px;

}



#menu li a {

 font-family:Arial, Helvetica, sans-serif;

 font-size:15px;

 color: #EEEEEE;

 display:block;

 outline:0;

 text-decoration:none;

 text-shadow: 1px 1px 1px #000;

}



#menu li:hover a {

 color:#161616;

 text-shadow: 1px 1px 1px #FFFFFF;

}

#menu li .drop {

 padding-left:21px;

 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat left 8px;

}

#menu li:hover .drop {

 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat left 7px;

}



/* Drop Down */



.dropdown_1column,

.dropdown_2columns,

.dropdown_3columns,

.dropdown_4columns,

.dropdown_5columns {

 margin:4px auto;

 float:right;

 position:absolute !important;

 right:-999em; /* Hides the drop down */

 text-align:right;

 padding:10px 5px 10px 5px;

 border:1px solid #777777;

 border-top:none;



 /* Gradient background */

 background:#F4F4F4;

 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);

 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));



 /* Rounded Corners */

 -moz-border-radius: 0px 5px 5px 5px;

 -webkit-border-radius: 0px 5px 5px 5px;

 border-radius: 0px 5px 5px 5px;

}



.dropdown_1column {width: 140px;}

.dropdown_2columns {width: 280px;}

.dropdown_3columns {width: 420px;}

.dropdown_4columns {width: 560px;}

.dropdown_5columns {width: 700px;}



#menu li:hover .dropdown_1column,

#menu li:hover .dropdown_2columns,

#menu li:hover .dropdown_3columns,

#menu li:hover .dropdown_4columns,

#menu li:hover .dropdown_5columns {

 right:-1px ;

z-index:444 !important;

    top:auto;

}



/* Columns */



.col_1,

.col_2,

.col_3,

.col_4,

.col_5 {

 display:inline;

 float: right;

 position: relative;

 margin-right: 5px;

 margin-left: 5px;

}

.col_1 {width:130px;}

.col_2 {width:270px;}

.col_3 {width:410px;}

.col_4 {width:550px;}

.col_5 {width:690px;}



/* left alignment */



#menu .menu_left {

 float:left !important;

 margin-left:0px;

}

#menu li .align_left {

 /* Rounded Corners */

 -moz-border-radius: 5px 0px 5px 5px;

    -webkit-border-radius: 5px 0px 5px 5px;

    border-radius: 5px 0px 5px 5px;

}

#menu li:hover .align_left {

 right:auto;

 left:-1px;

 top:auto;

}



/* Drop Down Content Stylings */



#menu p, #menu h2, #menu h3, #menu div li {

 font-family:Arial, Helvetica, sans-serif;

 line-height:21px;

 font-size:13px;

 text-align:right;

 text-shadow: 1px 1px 1px #FFFFFF;

}

#menu h2 {

 font-size:22px;

 font-weight:400;



 margin:7px 0 14px 0;

 padding-bottom:14px;

 border-bottom:1px solid #666666;

}

#menu h3 {

 font-size:15px;

 margin:7px 0 14px 0;

 padding-bottom:7px;

 border-bottom:1px solid #888888;

}

#menu p {

 line-height:18px;

 margin:0 0 10px 0;

}



#menu li:hover div a {

 font-size:13px;

 color:#015b86;

}

#menu li:hover div a:hover {

 color:#029feb;

}

.strong {

 font-weight:bold;

}

.italic {

 font-style:italic;

}

.imgshadow {

 background:#FFFFFF;

 padding:4px;

 border:1px solid #777777;

 margin-top:5px;

 -moz-box-shadow:0px 0px 5px #666666;

 -webkit-box-shadow:0px 0px 5px #666666;

 box-shadow:0px 0px 5px #666666;

}

.img_right { /* Image sticks to the right */

 width:auto;

 float:right;

 margin:5px 5px 5px 15px;

}

#menu li .black_box {

 background-color:#333333;

 color: #eeeeee;

 text-shadow: 1px 1px 1px #000;

 padding:4px 6px 4px 6px;



 /* Rounded Corners */

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 border-radius: 5px;



 /* Shadow */

 -webkit-box-shadow:inset 0 0 3px #000000;

 -moz-box-shadow:inset 0 0 3px #000000;

 box-shadow:inset 0 0 3px #000000;

}

#menu li ul {

 list-style:none;

 padding:0;

 margin:0 0 12px 0;

}

#menu li ul li {

 font-size:13px;

 line-height:24px;

 position:relative;

 text-shadow: 1px 1px 1px #ffffff;

 padding:0;

 margin:0;

 float:none;

 text-align:right;

 width:130px;

}

#menu li ul li:hover {

 background:none;

 border:none;

 padding:0;

 margin:0;

}

#menu li .greybox li {

 background:#F4F4F4;

 border:1px solid #bbbbbb;

 margin:0px 0px 4px 0px;

 padding:4px 6px 4px 6px;

 width:116px;



 /* Rounded Corners */

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 border-radius: 5px;

}

#menu li .greybox li:hover {

 background:#ffffff;

 border:1px solid #aaaaaa;

 padding:4px 6px 4px 6px;

 margin:0px 0px 4px 0px;

}



.tabs-inner .widget li a {

padding: 1px ;

display:block !important;

border: 1px solid  transparent !important ;

}





</style>

<a href="http://www.stylifyyourblog.com" title="Stylify Your Blog"
><img src="http://img1.blogblog.com/img/blank.gif" /></a>
 

<li><a href="#" class="drop">العمود 5</a><!-- Begin 5 columns