إضافة قائمة منسدلة CSS3 إلى بلوجر 'Bloger'

القوائم CSS3 هي أفضل وسيلة لترتيب وصلات المدونة الخاص بك مهمة بشكل أنيق ومناسب. و أيضا تساعد القراء على التنقل من خلال المدونة بسهولة وبسرعة. إضافة وصلات منسدلة جميل أسفل القائمة المدونة يزيد أيضا من الجمال المدونة الخاص بك أن ما مزايا القوائم الملاحة تلعب دورا مهما في تحسين SEO للمدونة الخاص بك أو زيادة  حركة المرور زوار مدونتك  . هناك  العديد من  وصلات منسدلة اسفل القوائم ولكن هذه  القائمة  مختلفة قليلا منهم أيضا أكبر ميزة لهذه القائمة هي انها مصنوعة من تقنية  CSS3 وتستخدم سوى اثنين من الصور الصغيرة في هذه القائمة، حتى أن هذه القائمة لن تؤثر على وقت  التحميل مدونتك  . الآن دعونا معرفة كيفية إضافته إلى مدونة Blogger ؟ شاهد العرض التوضيحي من القائمة الأولى.

                                                                   العرض التوضيحي ▼

-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-

كيفية إضافة  القائمة المنسدلة CSS3 إلى Blogger


    1.انتقل إلى لوحةبلوجر > تخطيط.
    2.انقر على إضافة  الأداة الحالية إلى تحت مستوى في رأس الصفحة أو إضافة  HTML/JavaScript .
    3.لصق الكود أدناه  بعد استبدال الروابط مع الروابط الخاصة بك .
    4.أخيرا حفظ القائمة الخاصة بك.

<style> /*Start Css Menu*/
.menu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;
}

.menu ul {
    background: url(http://2.bp.blogspot.com/-W64HRGKssSo/T7zWbXCBBQI/AAAAAAAABzM/J3Ou605AS_U/s1600/helperblogger.com-menu-bg.gif) top left repeat-x;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    float: left;
    padding: 0px 8px 0px 8px;
}

.menu li a {
    color: #666666;
    display: block;
    font-weight: bold;
    line-height: 43px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
}

.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

.menu li ul {
    background: #e0e0e0;
    border-left: 2px solid #a80329;
    border-right: 2px solid #a80329;
    border-bottom: 2px solid #a80329;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul {
    display: block;
}

.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

.menu p {
    clear: left;
}

.menu #current {
    background: url(http://1.bp.blogspot.com/-Z9bi1D4dtH8/T7zWalpDEWI/AAAAAAAABzI/iXhXlizOKO8/s1600/helperblogger.com-current-bg.gif) top left repeat-x;
    color: #ffffff;
}

/*End Css Menu from http://www.stupcomp.blogspot..com/*/ 
</style>  


<div class="menu">
 <ul>
  <li><a href="#" id="current">Home</a></li>
  <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">FAQ</a>
  <ul>
   <li><a href="#">Drop Down CSS Menus</a></li>
   <li><a href="#">Horizontal CSS Menus</a></li>
   <li><a href="#">Vertical CSS Menus</a></li>
   <li><a href="#">Dreamweaver Menus</a></li>
  </ul>
  </li>
  <li><a href="#">Contact</a></li>
  <li><a href="http://www.stupcomp.blogspot.com/">Create This</a></li>
 </ul>
</div>