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

 السلام عليكم ورحمة الله وبركاته

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

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

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

وفي الاخير ارجوا ان تعجبكم الاضافة.