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

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

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

خطوات نشرحهم فى ثلاث دقائق خلال الفيديو التالى وبعد الفيديو تجد الخطوات والأكواد مفصلة :)

الخطوة الأولى: الدخول الى قالب المدونة ثم تحرير HTML ومن ثم البحث عن الكود التالى 

]]></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: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;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: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;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%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;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 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 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;}
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;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

الخطوة الثانية: البحث عن الكود التالى

</head>

ثم نضع فوقه أو قبله الكود التالى (لاحظ اذا كانت مدونتك مضاف اليها من قبل كود jquery احذف الكود الملون بالأحمر من الكود التالى وأضف الباقى)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#w2bajaxmenu').ajaxBloggerMenu({
        numPosts : 4, // Number of Posts to show
        defaultImg : 'http://url-to-image.com/default-image.jpeg' // 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="http://www.abu-iyad.com/search/label/google?&max-results=9">جوجل</a></li>
            <li><a href="http://www.abu-iyad.com/search/label/SEO?&max-results=9">سيو</a></li>
            <li><a href="http://www.abu-iyad.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=9">إضافات بلوجر</a></li>
            <li><a href="http://www.abu-iyad.com/search/label/%D8%AC%D9%88%D8%AC%D9%84%20%D8%A3%D8%AF%D8%B3%D9%86%D8%B3?&max-results=9">جوجل أدسنس</a>
        </li></ul>
    </li>
    <li>
        <a href="#">قائمة 2</a>
        <ul>
            <li><a href="http://www.abu-iyad.com/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=9">دروس بلوجر</a></li>
            <li><a href="http://www.abu-iyad.com/search/label/%D8%AD%D8%B5%D8%B1%D9%8A%D8%A7%D8%AA?&max-results=9">حصريات بلوجر</a></li>
            <li><a href="http://www.abu-iyad.com/search/label/%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83?&max-results=9">فيسبوك</a></li>
            <li><a href="http://www.abu-iyad.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=9">قوالب بلوجر</a></li>
        </ul>
    </li>
    <li><a href="http://adf.ly/gjlmD">اتصل بنا</a></li>
</ul>

قم بحفظ الأداة وعاين بنفسك . شكر خاص الى مبرمج الأداة الرائع الذى تعلمنا منه الكثير harish dasari.