19 Aralık 2014 Cuma

Blogger Mashable Still Ajax Navigasyon Menü



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