اضافة قائمة أفقية احترافية بالتقنية AJAX الى البلوجر

السلام عليكم

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

يمكنك مشاهدة القائمة فقط على مدونتنا

طريقة اضافة القائمة الى البلوجر

1. نتوجه الى المدونة .

2. قالب .

3. تحرير HTML .

4. نبحث عن الوسم الثالي

</head>

5. نضيف الكود الثالي فوقه مباشرة

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://chtartar00.googlecode.com/svn/trunk/NavTop.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('#w2bajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : 'http://im80.gulfup.com/mUXtyT.png' // Default thumbnail Image
});
});
</script>
<style type='text/css'>
#w2bajaxmenu .home {
background: #e74c3c url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsroj1icwTob0izqlQJ3sdVbqfa-fo5_HlkH_ApGupddgB3c5PODZFYURuWwFmcck0p24eyst4jGOTuOQ2iO0oCHA_3jX1V92_CLjuRiaLYea1q8llFUypilXuK9BvlrZ6cpmAifaUuLo/s1600/home.png) center no-repeat;
padding: 26px 24px 10px;
}
#w2bajaxmenu {max-height:35px;float:right;width:100%;background: #2c3e50;margin: 0px auto;-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
/* Menu Stylings */
.w2bmenu { text-decoration: none;margin: 0;padding: 0;}
ul.w2bmenu {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 );list-style: none;width: 960px;margin: auto;border: 1px solid #cccccc;line-height: 1;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;float: right;position:relative;margin: 0;padding: 0;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px;font-family: GES;color: #fff;font-weight: 700;text-transform: uppercase;font-size: 12px;display: block;text-decoration: none;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #e74c3c;}
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{color:#000;padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff;}
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 {display: block !important;border: 0 none !important;}
ul.w2bajaxmenu ul li{background: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 0%;right:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {font: 14px ges;position: relative;display: block;width:65%;float: left;margin: 8px 0;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;}
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;margin-right: 100px;}
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;}
</style>

6. أخر عملية نضيف الكود الخاص بالإضافة الى المكان المناسب في مدونتك

<ul class='w2bmenu' id='w2bajaxmenu'>
<li>
<a class='home' href='/'/>
</li>
<li>
<a href='http://hukmat.blogspot.com'>
أخبار الانترنت
</a>
<ul>
<li>
<a href='http://hukmat.blogspo'>
مقالات في الفايسبوك
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/search/la'>
مشاكل الحاسوب
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/search/label/هواتف'>
تقنيات الهواتف
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/search/label/مجانيات'>
مجانيات
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
قوالب جاهزة
</a>
<ul>
<li>
<a href='http://hukmat.blogspot.com/s'>
قوالب البلوجر
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/'>
قوالب الووردبريس
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/'>
قوالب أجنبية احترافية
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com'>
قوالب جوملا
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/'>
قوالب عربية احترافية
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
تطوير المواقع و المدونات
</a>
<ul>
<li>
<a href='http://hukmat.blogspot.com'>
مقالات و إضافات البلوجر
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/'>
أخبار الووردبريس
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/p/blog-page_15.html'>
محول اكواد أدسنس
</a>
</li>
<li>
<a data-flythat='#modal-text' href='http://hukmat.blogspot.com/p/contact-us.html'>
طلب موضوع
</a>
</li>
</ul>
</li>
<li>
<a href='http://hukmat.blogspot.com/p/privacy-policy.html'>
سياسة المدونة
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/p/contact-us.html'>
اتصل بنا
</a>
</li>
<li>
<a href='http://hukmat.blogspot.com/p/blog-page_27.html'>
الفهرس
</a>
</li>
</ul>

7. لجعل القائمة ثابثة كالتي في مدونتنا ما عليك سوى اضافة الكود التالي من فوق الوسم </body>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
var stickyNavTop = $('#w2bajaxmenu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka .nav ditambahkan class sticky dan sebaliknya if (scrollTop > stickyNavTop) {
$('#w2bajaxmenu').css({ 'position': 'fixed', 'top':0, 'z-index':9999,'width':'990px' });
} else {
$('#w2bajaxmenu').css({ 'position': 'fixed', 'top':-9999,}); }
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
});//]]>
</script>

8. و نضغط على حفظ .

اضافة قائمة أفقية احترافية بالتقنية AJAX الى البلوجر

مقالات ذات صلة

2 التعليقات