Blogger Yeni AJAX Menü

Demo

Selam Arkadaşlar Bugün Sizlerle AJAX Menü Eklentisini Paylaşmaktayım. Yabancı Bir Sitede Gördüm Sizlerle Paylaşma İsteği Duydum. Umarım Beğenirsiniz. Sizler İçin Düzenlemiş Olduğum Bir Menüdür. Hiç Bir Sorunu Yoktur Denedim ve Sizlerle Paylaştım.

Öncelikle Yerleşim > HTML'yi Düzenle ye Tıklıyoruz. CTRL+F Yaparak ]]></b:skin> Aratıyoruz. Aşağıda Bulunan Kodu Bu Kodun Üstüne Yapıştırıyoruz.

.phtmljaxmenu *{margin: 0;padding: 0;} ul.phtmljaxmenu {list-style: none;line-height: 1;overflow: visible !important;} ul.phtmljaxmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;} ul.phtmljaxmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;} ul.phtmljaxmenu 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.phtmljaxmenu li a:hover,ul.phtmljaxmenu li a.hoverover{background: #f5f5f5 !important;} ul.phtmljaxmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;} ul.phtmljaxmenu li:hover > ul{display: block;} ul.phtmljaxmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;} ul.phtmljaxmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;} ul.phtmljaxmenu ul li a:hover,ul.phtmljaxmenu ul li a.hoverover{background: #fff !important;} ul.phtmljaxmenu ul ul{display: none;left: 100%;top: 0;} /* AJAX Menu Stylings */ ul.phtmljaxmenu 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.phtmljaxmenu li:hover div.submenu {display: block;} ul.phtmljaxmenu ul ,ul.phtmljaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;} ul.phtmljaxmenu ul li{background: none !important;float: none !important;} ul.phtmljaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;} ul.phtmljaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;} ul.phtmljaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;} ul.phtmljaxmenu ul.postslist li:last-child{border-bottom: none 0;} ul.phtmljaxmenu 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.phtmljaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;} ul.phtmljaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;} ul.phtmljaxmenu .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.phtmljaxmenu .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;} #phtmljaxmenu {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;}

Tekrar CTRL+F Yaparak Bu Sefer </head> Aratıyoruz. Aşağıda Bulunan Kodu Tekrar Bu Kodun Üstüne Yapıştırıyoruz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/94712331663/ajaxbloggermenu-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('#phtmljaxmenu').ajaxBloggerMenu({ numPosts : 2, // Number of Posts to show defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1LhQ3kY503i7Zk5Vni9AH47MUwLWU21mWEgvm9Mbg6xSDnZwJ5Qriv0gixEfqkUV5CwfPMU6RGKQmz-K0zdIFGwYvJpjqHftlxyLgI1mcBz5zdvlIK81ZbUiDtNryksfZYDdhyqYo7A/s120/no_image.jpg' // Default thumbnail Image }); }); </script>
Yerleşim > Gadged Ekle > HTML/JavaScript Ekle Dizinini Takip Edin. Aşağıda Bulunan Kodu Buraya Ekleyin.
<ul id="phtmljaxmenu" class="phtmljaxmenu"> <li> <a href="/">Anasayfa</a> </li> <li> <a href="#">Blogger</a> <ul> <li><a href="http://phtmldrive.blogspot.com/search/label/BloggerEklentileri">Eklentiler</a></li> <li><a href="http://phtmldrive.blogspot.com/search/label/BloggerTema">Temalar</a></li> </ul> </li> <li> <a href="#">Dersler</a> <ul> <li><a href="http://phtmldrive.blogspot.com/search/label/BloggerDersleri">Blogger Dersleri</a></li> <li><a href="http://phtmldrive.blogspot.com/search/label/HtmlDersleri">HtmlDersleri</a></li> </ul> </li> <li><a href="http://phtmldrive.blogspot.com/search/label/Script">Script</a></li> </ul>

Önemli Noktalar :

• </head> Kodunun Üstüne Yapıştırmış Olduğumuz Koddaki numPosts : 2, // Number of Posts to show Yazan Yer Kaçtane Gönderi Göstermek İstiyorsanız Okadar Yazın Mesela numPosts : 3

  İşlem Bu Kadar Basittir. Umarım İşinize Yarar Güle Güle Kullanın :)