قائمة منسدلة لمدونات بلوجر تتيح ظهور موضوعات الأقسام تلقائيا | حصريا

الخطوة الأولى البحت على  ]]></b:skin> ووضع الاكواد فوقه
 /* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: right;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{
font-family: Droid Arabic Kufi;
text-decoration: none;
margin: 0;
padding: 12px 16px !important;
color: #FFFFFF !important;
text-transform: uppercase !important;
display: block !important;
border: 0 none !important;
display: block;
line-height: 28px;
padding: 0 12px;
font-size: 13px;
}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #14505a !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover &gt; ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#14505a;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #0f869b !important;}
ul.w2bmenu ul ul{display: none;right: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;right: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #0f869b;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;right:0;top:0;bottom: 0;background: #14505a;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: left;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding:8px 110px !important 8px 8px;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;right: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;
margin: 8px 114px;
width: 266px;
}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;left:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-right: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;left: 11px;top: 50%;width: 0;}
#w2bajaxmenu {

background: #0f869b;
background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,#116877), color-stop(100%,#11616F));
background: -webkit-linear-gradient(top, #198194 0%,#0C5B69 100%);
background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);
background: linear-gradient(to bottom, #2E7683 0%,#0f869b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );
border: 1px solid #164C56;
}
الخطوة التانية تبحت على هذا الكود </head> ثم نضع فوقه أو قبله الكود التالى
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#w2bajaxmenu&#39;).ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : &#39;http://url-to-image.com/default-image.jpeg&#39; // Default thumbnail Image
 });
});
</script>
الخطوة الثالثة: الذهاب الى تخطيط وإضافة أداة HTML/Javascript ونضيف الكود التالى داخلها بعد التعديل عليه بما يناسب مدونتك من أسماء الأقسام - الوسوم - وروابطها وأسماء القوائم 
 <ul id="w2bajaxmenu" class="w2bmenu">
 <li>
  <a href="#">الرئيسية</a>
 </li>
 <li>
  <a href="#">تصميم المواقع1</a>
  <ul>
   <li><a href="#">مثال</a></li>
   <li><a href='#'>عن المهووسين </a></li>
   <li><a href='#'>عن المهووسين </a></li>
   <li><a href="#">عن الممهوسين</a>
  </li></ul>
 </li>
 <li>
  <a href="#">تصميم المواقع2</a>
  <ul>
   <li><a href="#">عن المهووسين</a></li>
   <li><a href="#">من اكون</a></li>
   <li><a href="#">التعريف بالمهووسين</a></li>
   <li><a href="#">عن المهووسين</a></li>
  </ul>
 </li>
 <li><a href="http://www.di9a.com">تطوير المواقع3</a></li>
</ul>