إضافة قائمة أفقية احترافية بتأتيرات

إضافة قائمة أفقية احترافية بتأتيرات

mohamed-alaa

الثلاثاء، 27 مايو 2014

 

  طريقة التركيب

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

<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;

اقرأ ايضا

• كود رمضان أسفل المدونة
• كيف تحمي محتويات مدونتك من السرقة
• صناديق تحذيريه وتنبيه بتقنية css3 حصريا

height: 130px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KgykbVShbStMdI1UUKqOM-ZeFATBAADRovkNeeoYfjqnJRc6l-6b6FQc8loT_Feew30Vbh1GMdwk3KLReDp4zTaG0i1eN-kSr6A59qBKEX7q9D2bjtF9aBx8gJN_D3mgTXycUztbgGY/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>