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

تهيئة HTML/JavaScript

وأضف الكود التالي داخل الصندوق

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDACZL94VmsO6oWHVm5goeWHEzOQrrvYoWYJDVPUFqa5DKDb2fWGgTjZhYExEePNROBDL3psPJgst_0dR4csBTX1YrBOEHoi4hVTPnA6tq_wjzTlkzzovU1mMcnrRHCtnmI7AuniG9qD8A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gFdNpC50n6QI4Vb99AhvMJykW9_Kxs9QnwyVi1dAcpjPnccWJSU6AgSGXlm4c10aV8LkXdNCwO3LaNxTq8NUOHicBShLfzFqRnyb9yyizmF4HU2GBJj990w1iIiySBfPTMS0v1KJwHKc/s1600/01.jpg" width="70" height="70" class="img_right imgshadow" alt="" />
<p> 1ضع هنا نبذة عن موضوع معين .<a href="رابط الموضوع">قراء المزيد...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFcSNt5gsDVywosU2v7rMfOnSKbx6uwXSlo_1r_1xOASIUMtEW2vcj8Z8bDOlgWIwRllVzEhN4MImXu2F0v6B6cuAv3K101s0y2GJrWC-eYiwiVVPhS9BeY5MMS5zDGlCNJdDFdSVIfaR/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFcSNt5gsDVywosU2v7rMfOnSKbx6uwXSlo_1r_1xOASIUMtEW2vcj8Z8bDOlgWIwRllVzEhN4MImXu2F0v6B6cuAv3K101s0y2GJrWC-eYiwiVVPhS9BeY5MMS5zDGlCNJdDFdSVIfaR/s1600/02.jpg" width="70" height="70" class="img_right imgshadow" alt="" />
<p>أكتب نبذة مختصرة مثلا عن البرامج الجوالات أو أي موضوع في أي أختصاص<a href="رابط الموضوع">قراءة المزيد</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gFdNpC50n6QI4Vb99AhvMJykW9_Kxs9QnwyVi1dAcpjPnccWJSU6AgSGXlm4c10aV8LkXdNCwO3LaNxTq8NUOHicBShLfzFqRnyb9yyizmF4HU2GBJj990w1iIiySBfPTMS0v1KJwHKc/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTuN6ONqCwEAULw_Vv7lPS9cCKVADmUpQo_0JTkKmu3iLrSXolKmJEzRRuehvxeD3DY7YGUGQJiv2pSzwFNaCZ6H7vc0IZMtQSX4-Q69MqpWhnnGSfttDgode9vyDbsSHj018HFOCjvN2/s1600/drop.png") no-repeat left 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTuN6ONqCwEAULw_Vv7lPS9cCKVADmUpQo_0JTkKmu3iLrSXolKmJEzRRuehvxeD3DY7YGUGQJiv2pSzwFNaCZ6H7vc0IZMtQSX4-Q69MqpWhnnGSfttDgode9vyDbsSHj018HFOCjvN2/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

وأما رابط الموضوع فهي روابط المواضيع المصغرة التي تقوم بوضعها في القائمة

 الأكواد المشار لها بلون الأخضر

هي روابط الصورة المصغرة للمواضيع المعروضة

 أتمنى أن يكون شرح واضح ولو بشئ القليل

ثم أتجه للتصميم

أضافة أداة

 وأضف الكود الذي قمت بتعديله 

وضع الأضافة في أعلى المدونة الهيدر
فوق الرسائل الألكترونية

كما يناسب مدونتك

وسلام عليكم ورحمة الله وبركاته