الان شحن مجانا اتصالات وموبينيل وفودافون 2016 حقيقى

حسنا، هذه القطعة يعمل استناداً إلى مكتبة jQuery وتغذية مدونة JSON API. بلوقر الخاص بك يجب أن يكون للزوار العامة. غيرها من الحكمة API آر JSON مدونة لن يعمل....؟

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

هذا الاضافة يستخدمون بعض اصحاب المدونين

شرح التركيب

انتقل إلى لوحة التحكم الرئيسية مدونة >  الذهاب إلى صفحة القالب للمدونة

انقر فوق الزر تحرير HTML

اضغط 

ثم ابحث عن الكودالتالى

</b:skin>

توسع الكود ستجد الكود مثل ]]></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{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;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: #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%;Right: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;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;}

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-Right: 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, Right top, Right 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>

وأضف فوقه مباشر الكود التالى

<script type="text/javascript" src="https://bilokr.googlecode.com/files/1.8.2jquery.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

شرح الاضافة فى مدونتك

اذهب الى لوحه التحكم فى مدونتك

ثم التخطيط

ثم أضافه أداة

اختار

HTML/JavaScript

ضع الكود التالى مع تعديلات 

<ul id="w2bajaxmenu" class="w2bmenu">

<li>

<a href="رابط">الرئيسية</a>

</li>

<li>

<a href="رابط">تعديل</a>

<ul>

<li><a href="رابط">تعديل</a></li>

<li><a href="رابط">تعديل</a></li>

<li><a href="رابط">تعديل</a></li>

<li><a href="رابط">تعديل</a>

</ul>

</li>

<li>

<a href="#">Example 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="رابط">تعديل</a></li>

</ul>

تغير رابط الى رابط الموضوع او القسم

تغيير تعديل الى اسم الموضوع او اسم القسم

انتها الدرس انتظرونا فى الدرس القادم ان شاء الله واى استفسار اضف تعليقات وسوف يتم الرد عليك تقبال تحياتى