قائمة جانبية ذات شكل انيق لبلوجر بتقنية css

العودة للصفحة الرئيسية » بلوجر » قائمة جانبية ذات شكل انيق لبلوجر بتقنية css

قائمة جانبية ذات شكل انيق لبلوجر بتقنية css

شاهد:

بسم الله الرحمن الرحيم

قائمة انيقة ذات الوان جميلة جدا لبلوجر بتقنية الcss لتسهيل للزائر الدخول الى صفحاتك المختصرة

معاينة القائمة

للمعاينة اضغط هنا

شرح التركيب

قم باخد نسخة احتياطية من قالب ودائما قم بستخدامها قبل اى شئ تقوم بتعديلة حتى تحافظ على مدونتك من الاخطاء

لوحة التحكم - القالب - تحرير HTML

ثم قم بالبحث عن ]]></b:skin>

وضع قبلها هذا الكود

#navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ /* The background sprite: */ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjg4lFnvr4KACPTlluOB3aNejsHNXvY0RWAPpy4mL-f3llL1F883GJElD4-nOZhn2aaFRKWWAT1nr9bYvBabyYy_xKeQw-p5IdsQ2W5XHiST5iuFeL-EYM_HB0UHAuMglfFGkoq39UGmE/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; }

ثم اذهب الى لوحة تحكم مدونتك مرة اخى وقم باضافة اداة جديدة HTML/Javascript

وضع بها الكود التالى مع تغير ما يلزم

ومبروك عليك القائمة ^__^

مدونة تجريبية

ما رأيك في القالب

اقسام

مدونة المخزن

مدونة المخزن

مدونة المخزن

مدونة المخزن

مدونة المخزن

مدونة المخزن

المتابعون

اخر المواضيع

تبادل اعلاني

للتصفح الافضل

اخر التعليقات

تابعنا على الفيسبوك

التسميات

من أنا

قائمة جانبية ذات شكل انيق لبلوجر بتقنية css

0 التعليقات:

إرسال تعليق

صفحات

قسم بلوجر

مدونات صديقة

المتواجدين الان

اعلانات