الأحد، 2 ديسمبر 2012

قائمة افقية جميلة بتأثيرات الــ(css3)

اضافة قائمة علوية جميلة بتأثيرات الــ(css3)


قائمة افقية جميلة بتأثيرات الــ(css3) | ابداع ديزاين abda3 design  السلام عليكم ورحمة الله وبركاته

نعود اليكم من جديد مع اضافة ادوات لمدونة بلوجر هذه المرة سوف نقوم بإضافة " قائمة أفقية " لمدونات بلوجر بشكل مختلف و جديد بل بأشكال جديدة وبعدة ألوان مصممة حسب اختياركم والتي تزيد جمالية أكثر لمدونات بلوجرتتناسب مع المدونات العربية،لكم الإختيار في اللون المناسب حسب مدونتكم،رائعة أليس كذلك،والآن اليكم كيفية اضافة اداة قائمة افقية لمدونة بلوجر قائمة علوية بتأثيرات الــ(css3) يمكنك من اختصار مواضيع مدونتك وعرضها بشكل بسيط وواضح أمام زوار مدونتك خاصة عندما تكون القائمة علوية تظهر لكل الزوار بدون عناء كما يمكنك تقسيم مدونتك الى عدة أقسام وتخصيص كل قسم لمواضيع معينة .
قبل اي شيء يمكنكم معاينة الاضافة من هنا
لمن اعجبته تابع معي الشرح 

اولا: لتلافي اي خطاء قم بحفظ نسخة احتياطية من قالبك .
ثم قم بالبحث عن هذا الكود
 ]]></b:skin>
ثم نضع هذا الكود قبله مباشرتا


#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XpBAkVzXbKWQsnkk2CXg5ey7x7Xf1axa1o9sc0HaTWf0h0c6c5lE2SLMxKFRWcbt4L2U5A9dMst_O_sEDFPpFS_dJIZpyeCj0-2RN6MlLb01QSEhGfKfMLnfHv0Q7v9cZhNUzC83W5v6/s1600/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhryrL3fHmErDK-8XkX8Lk7mL38I5ka9FogApCRImzDm-2Q237jUM8tGuDTz2vaf7dqsJTJudKv4DBsetwjVEjxeUFqmOMmN3lTgMRl6j5lrT9S9rxUcjAhq0AWzhH9GV0wUOVkU45Nb3L/s1600/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP45v5shsSpCLThS6hP4P5UYLE9eRjOUx-ioztsPON5iDM-oDfoNvpB3VcASnOJQgrivwKLofUSD9ebQuPY_PEZYuFWn2KtFXk753MIblWLkAv2ZDIHCQ1XAsCEmBejJmwUfkfmOKTGCO8/s1600/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkpzYXMB0yrF17haN78O_rgTC3P5BfJlp6Cl7HpVO8TN7WFEuDt8mEO9pZ61ng_xyfkfl5nFflDvGw5RF84kj_ra90vZtKRg6yppdRdIobHj_7jcJQoTTluSzxuUTROFRAqDYE3-_4BbZ6/s1600/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijgfdlZHUZbpi1k7OZ29PBUZ6uCOa8W-HcvIqbqbfzN0ensLi0-4X7n-J3X1TL8i0z3GBCc4ZriuUId5fsuXIXx2AINdNJwiHtNVb4rh230WZS0zXNb8fE9xCOhlt0_YyDKkqPN4AZ-KEq/s1600/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6K_rMZWQ8a0jTM-B_pU3JaQEN__5G6Ln21TyCG2I0D0ghdleoBa87gG-l69lHWeOso5jc8lWkX_2VqE_v9FCwpoj1DmiEOMdBUiSOEC_wBuoTkKA_rp4qNOFAYtBR-WU9OPz5K9Sc2TLq/s1600/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
بعد ذالك قم بحفظ القالب ثم توجه الى تخطيط > اضافة اداة > HTML/JavaScript
ثم الصق بها الكود التالي :

<ul id=”menu”>
<li><a href=”#”>Home <span></span>
</a></li> <li><a href=”#”>About <span></span>
</a></li> <li><a href=”#”>RSS <span></span></a>
</li></ul>
وفي الاخير ارجوا ان تعجبكم الاضافة.

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلقائمة افقية جميلة بتأثيرات الــ(css3) | ابداع ديزاين abda3 design

لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل





ضع تعليقك

0 التعليقات:

البحــث

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

المتابعون

استثمارا للخبرات العالية والإمكانات التقنية المتميزة والطاقات البشرية الكبيرة التي تتميز بها "ابداع" أنشأت المؤسسة إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية تتمكن الشركات والمتاجر من ترويج منتجاتها في كافة أنحاء العالم وتزويد مواقعها بإمكانية البيع عبر الإنترنت وتشمل خدمة بناء مواقع الإنترنت عدة مراحل بدأ من عملية التصميم المبدئي للموقع، وحتى الانتهاء منه، والقيام بتحديث الموقع كلما تطلب الأمر كما تتميز مؤسسة "ابداع" بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة في العمل لذلك نحمد الله العلي العظيم على منحنا تلك القدرة