تطوير ويب » اضافات css » طريقة اضافة قائمة افقية للتسميات والاقسام باللون الذهبي المضئ
السلام عليكم ورحمة الله وبركاته .. موعدنا الان مع اضافه اعتدنا مشاهدتها في جميع القوالب الجاهزه فهي اصبحت لا غنى عنها اطلاقا
انها اضافة قائمة بالتسميات والاقسام تحت الهيدر مباشرة تمكن صاحب المدونه من وضع الروابط التي يراها مفيده لزورا مدونته
الجديد والمختلف في اضافة اليوم انها ذو شكل مميز وجذاب وحين ضغطك علي احد الاقسام فيها ستلاحظ كما في الصوره حدوث تأثير ضوئي كما لو انك ضغضت زر الكهرباء هههههه !! هي حقا كذلك يمكنك تجربتها ومشاهدتها على الطبيعه في مدونتك...
ان اعجبتك الاضافه كما تراها في الصوره
قم باتباع ---->>>>الخطوات التي بالاسفل*سجل دخول الي لوحة تحكم مدونتك على بلوجر.
* اذهب الى تصميم ثم الي تحرير HTML.
*قم بالبحث عن الكود التالي
* ضع قبل منه الكود الموجود بالاسفل
* الان قم بحفظ قالب مدونتك.
*قم باذهاب مجددا --->>>الى عناصر تصميم الصفحه.
* قم بفتح اداه جديده تحت منطقة الهيدر.
* لا تنسى ان تكون الاداه من نوع جافا سكربت HTML/javascript .
* ضع داخل الاداه الكود الموجود بالاسفل.
ملحوظه:- قم بتغيير العبارات ذات اللون الاحمر بروابط الاقسام والتسميات والعبارات ذات اللون الاخضر بمسميات تلك الروابط.
* قم بحفظ الاداه بعد تطبيق التغييرات المطلوبه .
انتهى...!!!
انها اضافة قائمة بالتسميات والاقسام تحت الهيدر مباشرة تمكن صاحب المدونه من وضع الروابط التي يراها مفيده لزورا مدونته
الجديد والمختلف في اضافة اليوم انها ذو شكل مميز وجذاب وحين ضغطك علي احد الاقسام فيها ستلاحظ كما في الصوره حدوث تأثير ضوئي كما لو انك ضغضت زر الكهرباء هههههه !! هي حقا كذلك يمكنك تجربتها ومشاهدتها على الطبيعه في مدونتك...
قم باتباع ---->>>>الخطوات التي بالاسفل*سجل دخول الي لوحة تحكم مدونتك على بلوجر.
]]</b:skin>
#nav {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjalrOSaS3QyYDJLlFZGvxzPwLBiHP_K9MKmwlIW4aAu7GniuT5sHP9EKsKX-Jcbki4fgwAOTUU_EdnYrFO8ZeRvs6GMojX0JbAejeMDNNM7PC-9GP1-u8zyp1aQnhf8rXerGnqjLZsT1C/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/AVvXsEhPeO-ysOtvQqqXNJmg8_3vFEG1OJuaIxg_t9hl9xsIX7I4btosJigPNWm3_XEcQcZguXvXSxz9DOPR1CZCu-XEKq1gXztXQhntr44G95ocEwA1T27DJNmYnCzSWfJBE8o0_f_VPbX4dRjE/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;
}
<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>
ملحوظه:- قم بتغيير العبارات ذات اللون الاحمر بروابط الاقسام والتسميات والعبارات ذات اللون الاخضر بمسميات تلك الروابط.
* قم بحفظ الاداه بعد تطبيق التغييرات المطلوبه .
انتهى...!!!
أصدقاء(تطوير ويب)
3تعليقات Blogger
3 عدد التعليقات على موضوع طريقة اضافة قائمة افقية للتسميات والاقسام باللون الذهبي المضئ
السلام عليكم
ارجو منك توضيح كيفية وضع التسمية فوق التدوينة (المقال) لكي يعرف القارئ للمقالة في أي تسمية ( تصنيف ) هو.
لأن التسمية لا تظهر الا في الصندوق الخاص بها فقط ولا تظهر فوق التدوينة لكي يعرف القارئ أين هو.
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .