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

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

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

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

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

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

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

رمز PHP:

]]

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

رمز PHP:

#nav {
background:url(http://2.bp.blogspot.com/_b8IA1ajBJG8/TFtdnabn3JI/AAAAAAAABjM/BKOQY7V0WNE/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(http://2.bp.blogspot.com/_b8IA1ajBJG8/TFtdoeN7SbI/AAAAAAAABjc/UG-a94p7Tug/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 .

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

رمز PHP:

Home
TAB1 TITLE HERE
TAB2 TITLE HERE
TAB3 TITLE HERE
TAB4 TITLE HERE

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

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

انتهى...!!!

منقول للامانة

الصور المرفقة








أكثر...