مستجدات متبثة

اضافة قائمة منسدلة جديدة بتقنية الأجاكس للبلوجر بكل سهولة

سلام عليكم .. زوارنا الكرام هذه التدوينة نخصصها اليوم لدعم البلوجر ، حيث سأريكم طريقة لاضافة قائمة اختيارات منسدلة بتقنية AJAX ، وهذه الأخيرة هي اختصار لـــ (Asynchronous JavaScript and XML) وهي طريقة لتطوير الويب لصناعة تطبيقات ويب تفاعلية. وتهدف إلى جعل صفحات الويب أكثر تجاوبا بتبادل كميات صغيرة من المعلومات مع السيرفر من وراء الكواليس، وبذلك لا تحتاج صفحة الويب إلى التحميل كل مرة يقوم فيها المستخدم بعمل تغيير.

 1 - صورة للقائمة المنسدلة بتقنية الأياكس :



2- كيف تعمل القائمة : 
 القائمة عبارة عن شريط أفقي مستطيل تضيف عليه روابط مختصرة بأي اسم من اختيارك ، فمثلا كما ترى في الصورة أعلاه كلمة EXAMPLE1 أثناء تمرير الماوس سهم الفأرة تنسدل منه قائمة تحمل مجموعة أخرى من الروابط مختصرة بأسماء مختارة وهكذا .
 3- طريقة تتبيث القائمة على مدونتك : 
  • اذهب للبلوجر ثم تابع الشرح المطبق على الصور .





في الصورة أعلاه أشرت بالسهم الى خانة البحث ستستعملونها ببلحث عن الأكواد لتسهيل البرمجة وتجنب عناء البحث الخانة أكتب فيها الكود تم اضغط ENTRE .

  • اضافة كود CSS يعني كود تصميم القائمة المنسدلة : الألوان الى غير ذلك
ابحث عن ]]></b:skin> وأضف قبله كود CSS التالي
/* 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;}
  • اضافة كود JAVASCRIPT ، ان كان لديك هذا الكود مسبقا لديك في قالبك لا حاجة لاضافته
ابحث عن </head> و أضف قبله الكود التالي : 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

اضف الكود التالي أيضا قبل </head>

<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 
الكود التالي هو المسؤول عن اختيار الروابط التي تريد وضعها + الأسماء بامكانك تغييرها 

<ul id="w2bajaxmenu" class="w2bmenu">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Example 1</a>
        <ul>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a>
        </ul>
    </li>
    <li>
        <a href="#">Example 2</a>
        <ul>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
            <li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
        </ul>
    </li>
    <li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>
4 - مبروك لك تم الاضافة بنجاح ، آخر مرحلة شارك أصدقائك التدوينة ان أعجبتك لتعم الفائدة وشكرا على المتابعة

ليست هناك تعليقات