طريقة اضافة قائمة افقية للتسميات والاقسام باللون الذهبي المضئ

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

ان اعجبتك الاضافه كما تراها في الصوره


قم باتباع  ---->>>>الخطوات التي بالاسفل*سجل دخول الي لوحة تحكم مدونتك على بلوجر.

* اذهب الى تصميم  ثم الي تحرير HTML.

*قم بالبحث عن الكود التالي

 ]]</b:skin>

* ضع قبل منه الكود الموجود بالاسفل 

#nav {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn45ywPF1cwngKMS8dWVStt81KwR-M4lAk7520E3UAUBKd7pIHycGBBTj63tEj40l3Ec-hSQpMBJ96mz6WNTNwCfBoe0bjwQF1H_1LwWLnt0UuPAuFcQH2dgsurzGLwyGnZuIo54bzEZF4/s1600/bg-menu.png) no-repeat scroll 0 -1px transparent;
height:48px;
margin-left:24px;
width:960px;
float:left;
}
#nav ul {
float:left;
height:50px;
padding-left:10px;
}
#nav li {
border-left:1px solid #845600;
border-right:1px solid #B9851A;
display:inline-block;
margin-right:-4px;
padding:10px;
}
.home {
border-left:none !important;
}
#nav li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuh4Piv2fXKXRCWG9WlpuUA9ASiDi_1cY3aXJrKd1d7kvtcGdV3HQTOE-mE1NkKj0DC4W0ZrPqgR3p4IwZFAl_CRQoKFqv7xEgh80lVv0FeqM_hw_cUOLHrKU4TNypFgslj8DEsYbJul8i/s1600/hover.jpg) no-repeat scroll center top transparent;
}
#nav li a {
color:#FFFFFF;
display:block;
font-weight:bold;
padding:5px 10px;
text-shadow:none;
}
#nav li a:hover {
text-decoration:none;
}

* الان قم بحفظ قالب مدونتك.

*قم باذهاب مجددا --->>>الى عناصر تصميم الصفحه.

* قم بفتح اداه جديده تحت منطقة الهيدر.

* لا تنسى ان تكون الاداه من نوع جافا سكربت HTML/javascript .

* ضع داخل الاداه الكود الموجود بالاسفل.

<div id='nav'><ul>
<li class='home'><a href='Add HERE YOUR BLOG URL/'>Home</a></li>
<li><a href='TAB1 URL HERE'>TAB1 TITLE HERE</a></li>
<li><a href='TAB2 URL HERE'>TAB2 TITLE HERE</a></li>
<li><a href='TAB3 URL HERE'>TAB3 TITLE HERE</a></li>
<li><a href='TAB4 URL HERE'>TAB4 TITLE HERE</a></li>
</ul>
</div>

ملحوظه:- قم بتغيير العبارات ذات اللون الاحمر بروابط الاقسام والتسميات والعبارات ذات اللون الاخضر بمسميات تلك الروابط.

* قم بحفظ الاداه بعد تطبيق التغييرات المطلوبه .

انتهى...!!!