Blogger Animasyon Geçiş Efektli Navigasyon Menü

   Blogger için oluşturulmuş Yeni Blogger Animasyon Geçiş Efekli Navigasyon Menü site tasarımınıza oldukça şık bir görünüm katacaktır.

Navigation Menüler ile site ziyaretçileriniz site kategorilerinize rahat bir şekilde ulaşabilirler,SEO açısından oldukça önemli olan site ziyeretçilerinin sitede kalma oranı bu gibi eklentilerle oldukça etkili olmaktadır.

Blogger CSS Kodları ile oluşturulan aşağıdaki Blogger Geçiş Efekli Navigasyon Menü sade ve şık bir şekilde tasarlanmıştır.

1.Aşama

Bu menüyü blogger sitenizde rahatça ekleyerek kullanabilirsiniz.Aşağıda ki anladımı sırası ile uygulayarak bu menüyü blogger sitenize ekleyin.

1. Blogger hesabınıza giriş yapın.

2. Kumanda Paneli - Yerleşim - HTML Düzenle yolunu uygulayın.

3. Böylece Blogger şablon kodlarınız olan bölüme giriş yapmış olduk.

4. Ctrl+F tuşları ile açılan arama kutusuna ]]>

kodunu aradın.Hemen üst kısmına aşağıdki kodları ekleyin /*URL:etralibela-61.blogspot.com.tr/*/<br /> @import url(http://fonts.googleapis.com/css?family=Dosis:400,700);<br /> .navbar {<br /> font-family: 'Dosis', sans-serif;<br /> position:relative;<br /> display:table;<br /> float:none;<br /> list-style-type:none;<br /> padding:0;<br /> margin:20px auto 250px auto;<br /> }<br /> .navbar:before {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> z-index:-1;<br /> width:100%;<br /> height:18px;<br /> bottom:-9px;<br /> left:2px;<br /> background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);<br /> background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));<br /> background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );<br /> opacity:.4;<br /> }<br /> .navbar:after {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> z-index:-1;<br /> width:100%;<br /> height:100%;<br /> top:0;<br /> left:0;<br /> -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);<br /> box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);<br /> }<br /> .navbar > li {<br /> position:relative;<br /> float:left;<br /> display:inline-block;<br /> list-style-type:none;<br /> text-align:center;<br /> margin:0;<br /> border-left:0;<br /> border:1px solid rgba(0,0,0,0.5);<br /> line-height:35px;<br /> -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);<br /> box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br /> }<br /> .navbar.color1 > li {<br /> background:#ea7900;<br /> }<br /> .navbar.color2 > li {<br /> background:#336277;<br /> }<br /> .navbar.color3 > li {<br /> background:#3e781b;<br /> }<br /> .navbar.color4 > li {<br /> background:#ad2259;<br /> }<br /> .navbar.color5 > li {<br /> background:#b20a22;<br /> }<br /> .navbar > li:before {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> z-index:1;<br /> width:100%;<br /> height:100%;<br /> left:0;<br /> top:0;<br /> background: -moz-linear-gradient(top, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.16) 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.16)));<br /> background: -webkit-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> background: -o-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> background: -ms-linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> background: linear-gradient(top, rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#29000000',GradientType=0 );<br /> }<br /> .navbar > li:after {<br /> position:absolute;<br /> display:block;<br /> content:"";<br /> width:100%;<br /> height:100%;<br /> top:0;<br /> left:0;<br /> background:url("");<br /> }<br /> .navbar > li.drpdown a > span{<br /> margin-right:30px;<br /> }<br /> .navbar > li.drpdown > a:after {<br /> position:absolute;<br /> content: "\0025bc";<br /> z-index:1;<br /> font-size:8px;<br /> top:0;<br /> right:10px;<br /> color:#fff;<br /> text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);<br /> filter: dropshadow(color=#000, offx=0, offy=-1);<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br /> }<br /> .navbar > li.drpdown a:hover:after,.navbar > li a:hover {<br /> color:#ccc;<br /> }<br /> .navbar > li.drpdown:hover .drpcontent {<br /> display:block;<br /> }<br /> .navbar > li:first-child {<br /> border-left:1px solid #1a1a1a;<br /> }<br /> .navbar > li:last-child {<br /> -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);<br /> box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);<br /> }<br /> .navbar > li > a {<br /> position:relative;<br /> display:block;<br /> width:100%;<br /> text-decoration:none;<br /> font-size:12px;<br /> color:#fff;<br /> text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);<br /> filter: dropshadow(color=#000, offx=0, offy=-1);<br /> z-index:4;<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br /> }<br /> .navbar > li:hover {<br /> -webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);<br /> box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);<br /> }<br /> .navbar > li > a > span {<br /> position:relative;<br /> font-weight:bold;<br /> margin:0 15px 0 0;<br /> }<br /> .navbar > li .drpcontent {<br /> position:absolute;<br /> display:none;<br /> margin:0;<br /> padding:20px 0 0 0;<br /> z-index:5;<br /> top:36px;<br /> min-width:200%;<br /> float:none;<br /> list-style-type:none;<br /> border:1px solid #737373;<br /> border-top:0;<br /> -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);<br /> box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);<br /> -webkit-border-radius: 0px 0px 4px 4px;<br /> border-radius: 0px 0px 4px 4px;<br /> background: rgb(249,249,249);<br /> background: -moz-linear-gradient(-45deg, rgba(249,249,249,1) 0%, rgba(229,229,229,1) 100%);<br /> background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(229,229,229,1)));<br /> background: -webkit-linear-gradient(-45deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> background: -o-linear-gradient(-45deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> background: -ms-linear-gradient(-45deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> background: linear-gradient(135deg, rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e5e5e5',GradientType=1 );<br /> -webkit-transition: opacity 300ms ease-in-out;<br /> -moz-transition: opacity 300ms ease-in-out;<br /> -ms-transition: opacity 300ms ease-in-out;<br /> -o-transition: opacity 300ms ease-in-out;<br /> transition: opacity 300ms ease-in-out;<br /> }<br /> .navbar > li:not(:last-of-type) .drpcontent {<br /> left:-1px;<br /> }<br /> .navbar > li:last-child .drpcontent {<br /> right: -1px;<br /> }<br /> .drpcontent li {<br /> position:relative;<br /> text-align:left;<br /> border-bottom:1px solid rgba(0, 0, 0, 0.2);<br /> font-size:12px;<br /> line-height:35px;<br /> height:35px;<br /> font-weight:bold;<br /> -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);<br /> box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);<br /> overflow:hidden;<br /> }<br /> .drpcontent li:before {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> width:100%;<br /> height:100%;<br /> top:-100%;<br /> left:0;<br /> background: #cecece;<br /> -webkit-transition: all 500ms ease-in-out;<br /> -moz-transition: all 500ms ease-in-out;<br /> -ms-transition: all 500ms ease-in-out;<br /> -o-transition: all 500ms ease-in-out;<br /> transition: all 500ms ease-in-out;<br /> opacity:0;<br /> }<br /> .drpcontent li:after {<br /> position:absolute;<br /> display:block;<br /> content: "\0025b6";<br /> height:20px;<br /> width:20px;<br /> top:0;<br /> left:6px;<br /> font-size:8px;<br /> -webkit-transition: all 500ms ease-in-out;<br /> -moz-transition: all 500ms ease-in-out;<br /> -ms-transition: all 500ms ease-in-out;<br /> -o-transition: all 500ms ease-in-out;<br /> transition: all 500ms ease-in-out;<br /> }<br /> .drpcontent li:hover:before {<br /> top:0;<br /> opacity:0.8;<br /> }<br /> .drpcontent li:hover:after {<br /> color:#fff;<br /> left:12px;<br /> }<br /> .drpcontent li:last-child:hover:before {<br /> -webkit-border-radius: 0px 0px 4px 4px;<br /> border-radius: 0px 0px 4px 4px;<br /> }<br /> .drpcontent li a {<br /> display:block;<br /> height:100%;<br /> width:100%;<br /> position:relative;<br /> color:#000;<br /> text-decoration:none;<br /> width:100%;<br /> padding-left:20px;<br /> -webkit-transition: all 500ms ease-in-out;<br /> -moz-transition: all 500ms ease-in-out;<br /> -ms-transition: all 500ms ease-in-out;<br /> -o-transition: all 500ms ease-in-out;<br /> transition: all 500ms ease-in-out;<br /> }<br /> .drpcontent li:hover a{<br /> color:#fff;<br /> padding-left:26px;<br /> }<br /> .drpcontent li:first-child {<br /> border-top:1px solid #a6a6a6;<br /> }<br /> .drpcontent li:last-child {<br /> border:0;<br /> -webkit-box-shadow:none;<br /> box-shadow:none;<br /> -webkit-border-radius: 0px 0px 4px 4px;<br /> border-radius: 0px 0px 4px 4px;<br /> }<br /> .icon20{<br /> position:relative;<br /> float:left;<br /> display:block;<br /> width:20px;<br /> height:20px;<br /> margin:6px 8px 0 8px;<br /> background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAYAAAA16j4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjJERkRDNTBDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjJERkRDNTFDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MkRGREM0RUM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MkRGREM0RkM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psj8MzMAAA91SURBVHja7FxbbBTV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") no-repeat;<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br /> }<br /> .icon20.home {background-position:0 0;}<br /> .icon20.upload {background-position:-20px 0;}<br /> .icon20.download {background-position:-40px 0;}<br /> .icon20.comments {background-position:-60px 0;}<br /> .icon20.theme {background-position:-80px 0;}<br /> .icon20.login {background-position:-100px 0;}<br /> .navbar > li:hover .icon20.home {background-position:0 -20px;}<br /> .navbar > li:hover .icon20.upload {background-position:-20px -20px;}<br /> .navbar > li:hover .icon20.download {background-position:-40px -20px;}<br /> .navbar > li:hover .icon20.comments {background-position:-60px -20px;}<br /> .navbar > li:hover .icon20.theme {background-position:-80px -20px;}<br /> .navbar > li:hover .icon20.login {background-position:-100px -20px;}
5. Üstte ki CSS kodlarını şablon kodlarınız içerisine ekledikten sonra şablonunuzu kaydedin.

2. Aşama
1. Tekrar blogger kumanda panelinize giriş yapın.
2. Yerlşeim - Gadget Ekle - HTML/Javascript yolunu izleyin.
3. Açmış olduğunuz gadget içine aşağıda ki HTML menü kodlarını ekleyin.
<script type="text/javascript" src="https://bloggerknown.googlecode.com/files/jquery.min.js"></script><br /> <ul class="navbar color1"> <li><a href="#"><i class="icon20 home"></i><span>Home</span></a></li> <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a></li> <li><a href="#"><i class="icon20 download"></i><span>Download</span></a></li> <li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li> <li class="drpdown"><a href="http://www.bloggerknown.com/"><i class="icon20 theme"></i><span>Themeselector</span></a><br /> <ul class="drpcontent" id="themeselect"> <li><a href="#" data-color="color1">Orange</a></li> <li><a href="#" data-color="color2">Marine</a></li> <li><a href="#" data-color="color3">Green</a></li> <li><a href="#" data-color="color4">Purple</a></li> <li><a href="#" data-color="color5">Red</a></li> </ul> </li> </ul>
4.  # işareti yerine menü başlığına ait linkleri ekleyin.

ÖN İZLEME EKRANI

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...