Get A GooGle AdSense Account Free

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Tuesday, 26 February 2013

Creating Navigation Transition Effect In Blog

Posted on 23:09 by Unknown
Today I will explain how to make the "Menu Navigation" very cool with transition effects. Transition effect is an effect where we set the time changes in the css tersebut.Berikut demo of "Menu Navigation" is.

Navigation Menubar for blogger



Navigation Menu Transition Effects Demo



  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Search (Ctrl+F) for   ]]></b:skin>
You simply add the following code above the code]]> </ b: skin>



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

HTML Code: 
You can add this code to widget  HTML / Javascript.


<script type="text/javascript" src="https://bloggerknown.googlecode.com/files/jquery.min.js"></script>
<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 class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>
  <ul class="drpcontent">
   <li><a href="#">Latest Posts</a></li>
   <li><a href="#">Popular Posts</a></li>
   <li><a href="#">Private Posts</a></li>
  </ul>
 </li>
 <li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li>
 <li class="drpdown"><a href="http://www.bloggerknown.blogspot.com/"><i class="icon20 theme"></i><span>Themeselector</span></a>
  <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>


Replace # with the URL and replace the blue text with the name you want the navigation menu.
Extras!!!. If there is an error on your blog in the navbar. Please replace the text that reads navbar on CSS3 code above.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Posted in Blog layout, Blogger, Gadgets, Widget | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • How to Get Adsense Account Approved for Any Domain
    How to get adsense account approved for blogspot, wordpress, webs, weebly and other paid hosting sites. I know many of you want to earn good...
  • Earn Money Online With Chitika and Blogger
    Chitika is a PPC program with high rate of payment  is a free service that displays revenue-earning ads to your web site or blog visitors th...
  • How to Make Money Online With Fiverr
    Are you looking for a quick and easy way to make money online. Why not try Fiverr.com. About Fiverr The website was founded by Micha Kaufman...
  • How to Verify Payza Account for All Countries
    In the previous post i tell you how to create payza account for online cash transations . Today you will learn how to verify payza account t...
  • How to Make Money Online With Infolinks
    How do i get money from infolinks Infolinks is an in text advertising network that serves pay per click ads on a publisher blog/website.  I...
  • Sevida - Responsive Magazine Blogger Template Download
    Sevida - Responsive Magazine Blogger Template Free Download Sevida is the premium responsive blog and magazine template for Blogger fans. Th...
  • New Posting to Your Blog on Blogger.com
    Once you have logged into Blogger you'll see your Dashboard, showing your list of blogs. Click the orange pencil icon to create a new po...
  • How To Create And Verify Paypal Account
    PayPal (http://www.paypal.com) is an e-commerce company, giving service to users in many countries. they have over twenty five million regis...
  • How to Boost/Increase Your Twitter Followers for Free ?
    How to get lots of twitter followers in www.afollowers.com? AFollowers is a powerful system to gain new followers for free. www.afollowers.c...
  • Teach Forum (News) Blogger Template Free Download
    Teach Forum (News) Premium Blogger Template Free Download Features: Instructions: Template Settings / How to install a Blogger template Co...

Categories

  • Account (7)
  • Adsense (3)
  • Advertising Networks (5)
  • Affiliate Program (3)
  • Alexa (1)
  • Blog layout (2)
  • Blogger (12)
  • Blogger Tips (5)
  • Blogging (5)
  • Blogging Tracks (5)
  • Comments (2)
  • CSS (1)
  • Debit Card (1)
  • Facebook (3)
  • Favicon (1)
  • Gadgets (2)
  • google (4)
  • Google Plus (2)
  • Host (1)
  • Hosting (1)
  • How To (5)
  • HTML Code (3)
  • Info (2)
  • Make Money Online (7)
  • Online Banking (1)
  • Page Rank (1)
  • Payoneer (1)
  • paypal (1)
  • Payza (2)
  • Script (3)
  • Search Engines (6)
  • SEO (9)
  • Services (1)
  • Templates (4)
  • Tips (8)
  • Tips and Tricks (1)
  • Tools (6)
  • Traffic (3)
  • Tricks (4)
  • Tutorial (10)
  • Twitter (1)
  • web guides (6)
  • Widget (7)

Blog Archive

  • ▼  2013 (47)
    • ►  September (1)
    • ►  August (1)
    • ►  July (3)
    • ►  June (4)
    • ►  May (3)
    • ►  April (5)
    • ►  March (9)
    • ▼  February (20)
      • Make Your Own Favicon In Favico.Com
      • Changing Blog Page By the Page Number Navigation
      • How to Make Money Online With Fiverr
      • Blogspot TLD Country Redirect Affecting SEO
      • Disabling the Preview Function In Blog
      • Creating Navigation Transition Effect In Blog
      • Make Money With Your Blog and Google AdSense
      • Teach Forum (News) Blogger Template Free Download
      • How To Add a Gadget (Widgets) To Your Blog
      • How To Install a Blogger Template to Blogger
      • New Posting to Your Blog on Blogger.com
      • How to Create a Free Blog on Blogger.com
      • Online Google Page Rank (PR) Checker Tool
      • How to Create a Blogger Account
      • Facebook Profile/Page ID Finder - Find Full Detail...
      • How to Create a new Google Account
      • How to Make Money Online With Infolinks
      • HTML Color Codes
      • HTML Encoder
      • Character Count
    • ►  January (1)
Powered by Blogger.

About Me

Unknown
View my complete profile