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

اضافة قائمة أفقية احترافية بالتقنية 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($) {
$(&#39;#w2bajaxmenu&#39;).ajaxBloggerMenu({
numPosts : 4, // Number of Posts to show
defaultImg : &#39;http://im80.gulfup.com/mUXtyT.png&#39; // 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=&#39;#ededed&#39;, endColorstr=&#39;#e0e0e0&#39;,GradientType=0 );list-style: none;width: 960px;margin: auto;border: 1px solid #cccccc;line-height: 1;}
ul.w2bmenu:after{margin: 0;padding: 0;content: &#39; &#39;;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 &gt; 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(&#39;http://i.imgur.com/SeivG.gif&#39;) 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. و نضغط على حفظ .

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

Previous
Next Post »

2 التعليقات

التعليقات
8/03/2015 delete

اين المكان المناسب

Reply
avatar
11/03/2019 delete أزال المؤلف هذا التعليق.
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا