إضافة قائمة أفقية احترافية بتأتيرات Css - تصميم مدونة نجوم بلوجر

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه أفضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

  إضافة لتصفح أفضل ننصكم بأحد المتصفحين التالين Chrome/Firefox.
إضافة جميــلة صممتها بنفسي متناسبة مع جميع القوالب اضفت عليها بعض التأتيرات كي تصبح أفضل ان شاء الله تعجبكم.

  صورة لإضافة

  مثال مباشر:إضغط هنـــا

  طريقة التركيب
هذا هو الكود قم بتركيبه فى أداة جديدة أو عوضه بالقائمة القديــمة التي كنت تملكها ... وإن لم تستطع تركيبها ارسل رابط مدونتك والمكان الذي تريد وضعها به بتعليق و سأدلك بالطريقة الصحيحة :]

TH3_Professional_Blogger|+->>copy/past this code and Enjoy+->>

<div id='nav-tp'>
<div class='menu-tp'>
<div class='menu-x'>
<ul>
<li class='home'><a href="#"><img src="http://im32.gulfup.com/odWSc.png" border="0"/></a></li>
<li class='transmit'><a href="#"><img src="http://im32.gulfup.com/HPg04.png" border="0"/></a></li>
<li class='prefs'><a href="#"><img src="http://im32.gulfup.com/u4Ib6.png" border="0"/></a></li>
<li class='spotlight'><a href="#"><img src="http://im32.gulfup.com/KfoOw.png" border="0"/></a></li>
<li class='code-edit'><a class='code-edit' href="#"><img src="http://im32.gulfup.com/77tMy.png" border="0"/></a></li>
<li class='edit-design'><a href="#"><img src="http://im32.gulfup.com/KiDl8.png" border="0"/></a></li>
<li class='xcode'><a class='xcode' href="#"><img src="http://im32.gulfup.com/C3YHS.png" border="0"/></a></li>
<li class='text-edit'><a href="#"><img src="http://im32.gulfup.com/mOk3u.png" border="0"/></a></li>
</ul>
</div>
</div>
</nav>
<a href='http://theprofessional-blogger.blogspot.com/' style='display: none;' rel='dofollow' >محترفي البلوجر</a>
<style>
/*--start-menu-by-osbook2013--*/
#nav-tp {
width: 995px;
margin: auto;
overflow: hidden;
}
.menu-x {
width: 992px;
height: 130px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHi1Tln3n21bR3t8LvspwoYsayizXMaDIAyGDjgCZqrnZ2XEbrlTv-dakKYiX2kUCJrT_RXAMnTT7W0pZZXbcX5y-393kt6nMFa75nZxo2bcVR8uGG8hqahdK6F2fXYjEg85r8kDhpJpo/s1600/bk_header.png);
border-right: 1px solid #1f1f1f;
border-left: 1px solid #1f1f1f;
}
.menu-x ul {
height: 122px;
padding: 0;
}
.menu-x ul li {
float: right;
padding: 10px 8px;
border-bottom: 2px solid #1f1f1f;
border-top: 2px solid #1f1f1f;
border-left: 1px solid #1F1F1F;
border-right: 1px solid #1F1F1F;
-webkit-box-shadow: 1px 0px #333 inset;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
display: block;
}
.menu-x ul li a img {
width: 100px;
height: auto;
padding: 3px;
}
.home {
display: block;
}
.transmit {
display: block;
}
.prefs {
display: block;
}
.spotlight {
display: block;
}
.code-edit {
display: block;
}
.edit-design {
display: block;
}
.xcode {
display: block;
}
.text-edit {
display: block;
}
.home:hover {
background: #0CF598;
}
.transmit:hover {
background: #9F0EF1;
}
.prefs:hover {
background: #EE117B;
}
.spotlight:hover {
background: #FFEB00;
}
.code-edit:hover {
background: #F00E0E;
}
.edit-design:hover {
background: #98D31B;
}
.xcode:hover {
background: #0CB4F5;
}
.text-edit:hover {
background: #09F7ED;
}
</style>

بالتوفيق لكم

المصدر ; مدونة نجوم بلوجر

1 التعليقات