قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

قائمة احترافيه CSS3

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

قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

قائمة جميلة مصممه بالـ CSS3 مناسبة انشاءالله لجميع المواقع والمدونات , ايضاَ قمت بدمج خط احترافي معها غير الخطوط العاديه كي اجع منظرها اجمل .

صورة : 

قائمة احترافيه CSS3

مثال مباشر : من هنا

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

• ادخل مدونتك .
• التخطيط .
• اختر المكان الذي تريد اضافة الاداة فيه .
• اختر اداة عباره عن HTML/JAVASCRIPT .
• الصق الكود التالي بها مع تغير ماسأذكر .:

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

الاصفر : اسم الصفحة .
الاحمر : الرابط .


موفقين :)

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

عنوان التدوينة :قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

ملخص التدوينة:

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

goust

الساعه : 2014-03-15T20:11:00+03:00

تاريخ : 15‏/03‏/2014

من : المملكة العربيه السعوديه

التعليقات : 15

انشرها :

تاق :