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

بسم الله الرحمن الرحيم 
والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم 
السلآم عليكم ورحمة الله وبركاته 
جديد إضافة قائمه أفقيه تعمل بال أجاكس لمدونات بلوجر - New AJAX Navigation Menu Widget for Blogger

كيف تعمل ؟ 

 حسننا , هذه القطعه تعمل على اساس مكتبة جي كويري . القائمه تعمل تمام مثل القائمه المسندله العادية عندما يتم تعطيل الجافا سكربت  وسوف تعمل القائمة المنسدلة بال AJAX عندما يتم تمكين جافا سكريبت.

صورة : 

كيف تضيف او تنصب هذه الاضافة في مدونتك ! 

1. اذهب الى لوحة التحكم في مدونتك > قالب
2. تحرير HTML > توسيع القوالب 

اولآ نبدآء في الـ CSS : 

• انسخ الكود القادم وضعه قبل ]]></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 &gt; 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js" type="text/javascript"></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 :

• اذهب الى التخطيط واضيف اداة HTML/JavaScript والصق هذا الكود فيها : 

<ul class="w2bmenu" id="w2bajaxmenu">
<li>
  <a href="http://www.blogger.com/blogger.g?blogID=5857768292035286791#">Home</a>
 </li>
<li>
  <a href="http://www.blogger.com/blogger.g?blogID=5857768292035286791#">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>
  </li>
</ul>
</li>
<li>
  <a href="http://www.blogger.com/blogger.g?blogID=5857768292035286791#">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>

مع تعديل الروابط بروابطك 

الان انتهينا اتمنى ان تكونوا استمتعتو / والى لقاء قادم باذن الله 

:)

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

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

ملخص التدوينة:

بسم الله الرحمن الرحيم  والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم  السلآم عليكم ورحم...

goust

الساعه : 2013-04-06T13:38:00+03:00

تاريخ : 06‏/04‏/2013

من : المملكة العربيه السعوديه

التعليقات : 0

انشرها :

تاق :