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

http://upload.traidnt.net/upfiles/Ssv39267.gif

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

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

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

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

اذهب الى تصميم ثم الي تحرير 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

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

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

انتهى...!!!

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

الصور المرفقة http://www.traidnt.net/vb/attachment...1775-hover.jpg

أكثر...