قائمة بالوان احترافيه CSS3 لمدونات بلوجر

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

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

1- التخطيط
2- اختر المكان الذي تريد اضافة الاداة فيه
3- اختر اداة عباره عن HTML/JAVASCRIPT
4- الصق الكود التالي بها

<ul class="big_nav">
<li><a class="hdr_navi" href="#" id="home">الرئيسية</a></li>
<li><a class="hdr_navi" href="#" id="twitr">تويتر</a></li>
<li><a class="hdr_navi" href="#" id="ggl">جوجل بلس</a></li>
<li><a class="hdr_navi" href="#" id="face" rel="nofollow">فيس بوك</a></li>
</ul>
<style>
.big_nav {
float: left;
width: 408px;
}
ol, ul {
list-style: none;
}
.big_nav li {
float: right;
margin-left: 7px;
margin-bottom: 7px;
}
a#home {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -322px #df517f;
}
a#home:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -64px -322px #ffffff;
}
a#twitr {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #973b86;
}
a#twitr:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
}
a#ggl {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ed8629;
}
a#ggl:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
}
a#face {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -151px #df517f;
}
a#face:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
}
.big_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover  {
color: #df517f;
text-decoration: none;
}
a {
text-decoration: none;
}
.big_nav li .hdr_navi {
display: block;
height: 35px;
width: 95px;
background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
color: #fff;
font-family: goth;
font-size: 14px;
text-align: center;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-ms-transition: all 600ms ease;
transition: all 600ms ease;
padding-top: 60px;
}
@font-face {
 font-family: 'goth';
 src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
</style>

يمكنك اضافت القائمه فى اى مكان ويمكنك التعديل على الروابط بتغيير # الى الرابط الذى تريده