قائمه رائعه باللون الرصاصي لاقسام وتسميات مدونة بلوجر بتقنية ال CSS

  السلام عليكم ورحمة الله وبركاتة موعدنا اليوم مع درس جميل ورائع ومهم انها اضافه تتيح للمدونين اضافه قائمه تحتوى روابط اقسام وتسميات مدوناتهم تحت الهيدر مباشرة مثل الموجوده عندى بمدونتى,,, ان اعجبتك القائمه
قم باتباع الخطوات التى بالاسفل ---->>>>>

* قم بتسجيل الدخول الى لوحة تحكم مدونتك.

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

* قم بالضغط على علامة توسيع قوالب واجهة المستخدم.

* ابحث عن الكود التالي
]]</b:skin> وذلك بالضغط علىCTRL+F .

* انسخ الكود الموجود بالاسفل وضعه مباشرة قبل هذا الكود
]]</b:skin>




#menu {
width:922px;
height:51px;
padding:0 20px;
margin:2px auto 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNsWzvvq6siehniduGOpPCRBSTUyANdS9zyfI7-_xepHZhV9RpeYTMr-fkYQFxxqfXwDNiIyHM8Y2EayvVjP0OsjU83VD03Z5ykvDhPrUEf2ucX-OFNtRP7OIK7G5nf7ISdwYddE5C7E/s1600/menu-bg.png) no-repeat;
text-transform:uppercase;
overflow:hidden;
}
#menu li {float:left;list-style:none; margin:7px 5px;}
.home {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLWxeCh6tXMT4hg57QnMeRFkkLaQLyIFQvet8950INh0orGP19zpdqfxywrD8L51XHcPjm2P0i8lFmsAM8FBs1gqW9LXwxYPY62qAI8FTXJZ6em3jJ9B8d6_owKLfo6nZcJZyTp3kfmw/s1600/link-active-bg.png) no-repeat left top;
color:#555;
float:left;
display:block;
font-weight:bold;
height:15px;
padding:10px 0px 10px 15px;
text-decoration:none;
font-size:12px;
}
.menu-item:hover {
background: #fff;
color:#555;
float:left;
display:block;
font-weight:normal;
height:15px;
padding:10px 15px;
text-decoration:none;
font-size:12px;
-moz-border-radius:5px;
}
.leftback {
float:right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLWxeCh6tXMT4hg57QnMeRFkkLaQLyIFQvet8950INh0orGP19zpdqfxywrD8L51XHcPjm2P0i8lFmsAM8FBs1gqW9LXwxYPY62qAI8FTXJZ6em3jJ9B8d6_owKLfo6nZcJZyTp3kfmw/s1600/link-active-bg.png) no-repeat right bottom;
width:15px;
height:35px;
margin:0;
padding:0;
}
.menu-item {
color:#555;
float:left;
display:block;
font-weight:bold;
height:15px;
padding:10px 15px;
text-decoration:none;
font-size:12px;
}
#menu a {
color:#555;
}
a.home {
color:#fff;
text-decoration: none;
}
#menu a:hover {
color:#555;
}


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

* قم بالذهاب الى تصميم.

* تذكر انك الان في --->>> عناصر تصميم الصفحه.

* قم بانشاء اداه جديده.

* لا تنسى ان تكون الاداه من هذا النوع HTML/javascript.

*انسخ الكود الموجود بالاسفل وضعه فيها وقم بالحفظ.

<div id='menu'>
<li><a class='home' href='/' rel='nofollow' title='Home'>Home</a><div class='leftback'></div></li>
<li><a class='menu-item' href='TAB1 URL HERE' rel='nofollow' title='title1'>TAB1 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB2 URL HERE' rel='follow' title='title2'>TAB2 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB3 URL HERE' rel='nofollow' title='title3'>TAB3 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB4 URL HERE' rel='nofollow' title='title4'>TAB4 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB5 URL HERE' rel='nofollow' title='title5'>TAB5 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB6 URL HERE' rel='nofollow' title='title6'>TAB6 TITLE HERE</a></li>
<li><a class='menu-item' href='TAB7 URL HERE' rel='nofollow' title='titl7'>TAB7 TITLE HERE</a></li>

</div>
ملحوظه:- لا تنسى تغيير الروابط ذات اللون الاحمر بروابط تسميات مدونتك وذات اللون الاخضر باسماء التسميات.
* بعد الانتهاء من تغيير الروابط وبعد حفظ الاداه قم بسحبها الى فوق رسائل المدونة الاجتماعيه ثم قم بالحفظ.
* تم الانتهاء من موضوع اليوم بحمد الله وتوفيقه
الموضوع بالكامل منقول من احد المواقع الاجنبيه وتمت ترجمته للافاده
أصدقاء(تطوير ويب)
تعليقات Facebook
0تعليقات Blogger

لا توجد تعليقات على موضوع "قائمه رائعه باللون الرصاصي لاقسام وتسميات مدونة بلوجر بتقنية ال CSS"

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .