Blogger Mashable Still Ajax Navigasyon Menü Kurulumu
1. Blogger hesabınıza giriş yapın
2. Kumanda paneli > Şablon > HTML Düzenle yolunu takip edin.
3. CTRL+F tuşları ile aşağıda ki kodu bulun.
]]></b:skin>
4. Üsteki kodu bulduktan sonra hemen ğst kısmına aşağıda ki kodları ekleyin..mefmenu *{margin:0;padding:0;}
ul.mefmenu{list-style:none;line-height:1;overflow:visible!important;}
ul.mefmenu:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0;}
#mefajaxmenu {width:960px;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;}
ul.mefmenu li{list-style:none;position:relative;float:left;margin:0!important;padding:0!important;}
ul.mefmenu li a{font-family:Arial, georgia, Helvetica, sans-serif!important;color:#6b6b6b!important;text-shadow:0 1px 0 #fff;text-decoration:none;font-weight:400!important;text-transform:capitalize!important;font-size:12px!important;display:block!important;border:0 none!important;margin:0;padding:12px 16px!important;}
ul.mefmenu li a:hover,ul.mefmenu li a.hoverover{background:#f5f5f5!important;}
ul.mefmenu ul{position:absolute;display:none;top:100%;border:1px solid #ccc;}
ul.mefmenu ul li{float:none;min-width:160px;background:#f5f5f5;text-shadow:none;}
ul.mefmenu ul li a{text-transform:none;font-weight:400;padding:12px 14px;}
ul.mefmenu ul li a:hover,ul.mefajaxmenu ul li a.hoverover{background:#fff!important;}
ul.mefmenu ul ul{display:none;left:100%;top:0;}
ul.mefajaxmenu 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 #ccc;border-top:0 none;}
ul.mefajaxmenu ul,ul.mefajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important;}
ul.mefajaxmenu ul li{background:none!important;float:none!important;}
ul.mefajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#f5f5f5;}
ul.mefajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;background:none;margin:8px 0!important;}
ul.mefajaxmenu ul.postslist li{display:block;overflow:hidden;border-bottom:1px #eee solid;position:relative;min-height:60px;padding:8px 8px 8px 110px !important;}
ul.mefajaxmenu ul.postslist li:last-child{border-bottom:none 0;}
ul.mefajaxmenu 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.mefajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0;}
ul.mefajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;}
ul.mefajaxmenu .loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatIqdawRs-q0mu8RIe-HSpxDiBJoFLChEBfRJv1vqgJ4SZD5AHAmngXJ3yY9N6UFCS9TwxaM8LfpR7bbOO4AqBtBRftDy4MyRil1le-UQBEB4L1yofEdGVaEnV-ewBlvV5bwIr1x8Pkk/s128/loading_icon_1.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px;}
ul.mefajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #999;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0;}
ul.mefmenu li:hover > ul,ul.mefajaxmenu li:hover div.submenu{display:block;}
5. Tekrar CTRL+F tuşları ile altta ki kodu bulun.</head>
6. Daha sonra üste ki kodun hemen üst kısmına aşağıda ki kodları ekleyin.<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://meftun-mede.googlecode.com/svn/trunk/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#mefajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Konu Sayısı
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK2VhzF5lXqNxR6sGAxYgQt8t-CUPkgv4awaXXTnGDRyn25KjQpkK2gDidGtwOoxakLF01iVqWSTLCJ229A7U-k5nwH9hFoscaEgz-osh9gHb6yBvRGa8kafdIFVj7GbFkS2uUvbYJsIQ/s1600/no-photo-available.jpeg' // Varsayılan küçük resim
});});
</script>
Not : Bu kısımda yapacak olduğunuz değişiklikler açılır menü içerisinde ki konu saısının ne kadar olmasını isterseniz üstte ki kod içerisinde yer alan konu sayısı kendinize göre ayarlayın.7. Son olarak Blogger kumanda paneli > Yerleşim > Gadget ekle > HTML/Javascript yolunu izleyin ve açılan Gadget içine aşağıda ki kodları ekleyin.
<ul id="mefajaxmenu" class="mefmenu">
<li>
<a href="http://etralibela-61.blogspot.com/">ANA SAYFA</a>
</li>
<li>
<a href="#">MENÜ 1</a>
<ul>
<li><a href="http://etralibela-61.blogspot.com/search/label/Facebook#">SOSYAL MEDYA</a></li>
<li><a href="http://etralibela-61.blogspot.com/search/label/Blogger%20Eklentileri#">BLOGGER EKLENTİLERİ</a></li>
<li><a href="http://etralibela-61.blogspot.com/search/label/Blogger%20Butonlar%C4%B1#">BLOGGER BUTONLARI</a></li>
<li><a href="http://etralibela-61.blogspot.com/search/label/Blogger%20Men%C3%BC%20Kodlar%C4%B1#">BLOGGER MENÜLERİ</a></li>
</ul>
</li>
<li>
<a href="#">MENÜ 2</a>
<ul>
<li><a href="http://etralibela-61.blogspot.com/search/label/Hacker%20Dersleri#">HACKER DERSLERİ</a></li>
<li><a href="http://etralibela-61.blogspot.com/search/label/Hile#">HİLELER</a></li>
<li><a href="http://etralibela-61.blogspot.com/search/label/%C4%B0nternet#">İNTERNET</a></li>
<li><a href="http://etralibela-61.blogspot.com/search/label/Programlar#">PROGRAMLAR</a></li>
</ul>
</li>
<li><a href="http://www.youtube.com/user/TheAlper061#">YOUTUBE</a></li>
</ul>
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Hiç yorum yok:
Yorum Gönder