Creating Navigation Transition Effect In Blog

<div dir="ltr" style="text-align: left;" trbidi="on">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.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-9OvNqi93ux9k7DgMzyeKC869E9YpVKkAhuKuELz4XqwUEUtIgh8wXqNTJQ0t_tnzHlyhNfms8IKBabCzB-mD78QJ-zVFEXRu2fbMBbc2uV0BkzKbYXVvH-thb7TpD-dkVqVgkIyMbk/s1600/Creating+Navigation+Transition+Effect+In+Blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Navigation Menubar for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-9OvNqi93ux9k7DgMzyeKC869E9YpVKkAhuKuELz4XqwUEUtIgh8wXqNTJQ0t_tnzHlyhNfms8IKBabCzB-mD78QJ-zVFEXRu2fbMBbc2uV0BkzKbYXVvH-thb7TpD-dkVqVgkIyMbk/s1600/Creating+Navigation+Transition+Effect+In+Blog.jpg" title="Navigation Menubar for blogger" /></a></div><br /><br /><br /><div style="text-align: center;"><b><span style="font-size: large;"><a href="http://demo-ichibikarin.blogspot.com/2013/02/creating-navigation-transition-effect.html" rel="nofollow" target="_blank">Navigation Menu Transition Effects Demo</a></span></b></div><div style="text-align: center;"><br /></div><div style="text-align: left;"><br /><br /><ol style="text-align: left;"><li>Go To Blogger > Design > Edit HTML</li><li>Back up your template</li><li>Search (Ctrl+F) for   ]]></b:skin></li></ol><div>You simply add the following code above the code]]> </ b: skin></div><div><br /></div><br /></div><div style="text-align: left;"><br /><b> CSS Code:</b><br /><blockquote class="tr_bq"> /*URL: http://www.ichibikarin.blogspot.com/ */<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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OERFQkEzRUJDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OERFQkEzRUNDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4REVCQTNFOUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4REVCQTNFQUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSp0pIAAAAySURBVHjaYmBgYOAHYmYGCADR/CDiDxDzQAW5gPgLlM3ACsQKUBqhBYjZkY3CMBMgwACvHQKnyUp+6gAAAABJRU5ErkJggg==");<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;}</blockquote>Save templates<br /><br /><b>HTML Code: </b><br /><b>You can add this code to widget  HTML / Javascript.</b><br /><b><br /></b><br /><blockquote class="tr_bq"><script type="text/javascript" src="https://bloggerknown.googlecode.com/files/jquery.min.js"></script><br /><ul class="navbar color1"><br /> <li><a href="#"><i class="icon20 home"></i><span>Home</span></a></li><br /> <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a></li><br /> <li><a href="#"><i class="icon20 download"></i><span>Download</span></a></li><br /> <li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a><br />  <ul class="drpcontent"><br />   <li><a href="#">Latest Posts</a></li><br />   <li><a href="#">Popular Posts</a></li><br />   <li><a href="#">Private Posts</a></li><br />  </ul><br /> </li><br /> <li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li><br /> <li class="drpdown"><a href="http://www.ichibikarin.blogspot.com/"><i class="icon20 theme"></i><span>Themeselector</span></a><br />  <ul class="drpcontent" id="themeselect"><br />   <li><a href="#" data-color="color1">Orange</a></li><br />   <li><a href="#" data-color="color2">Marine</a></li><br />   <li><a href="#" data-color="color3">Green</a></li><br />   <li><a href="#" data-color="color4">Purple</a></li><br />   <li><a href="#" data-color="color5">Red</a></li><br />  </ul><br /> </li><br /></ul></blockquote><br /><br />Replace # with the URL and replace the blue text with the name you want the navigation menu.<br />Extras!!!. If there is an error on your blog in the navbar. Please replace the text that reads navbar on CSS3 code above.<br /><br /></div></div>

Creating Navigation Transition Effect In Blog

Today I will explain how to make the "Menu Navigation" very cool with transition effects. Transition effect is an effect where we ...

+ Read more »

How To Add a Gadget (Widgets) To Your Blog

<div dir="ltr" style="text-align: left;" trbidi="on">This post shows how to use Blogger add-a-gadget tool and remove blogger gadgets from our bloggers, It is very easy.<br />Blogger allow you easily add all type of widgets and gadgets to your blog. You do not have to know any programming to add really nice features, like popular-post, Recent post, Facebook like box, Labels and more.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qljlUD38_ooU0z7rvxcr6xeGLF07YgcT82IHLK5cjffz24W5xx2r1ixyS2mkoUSpW90iYnHbN1WjzOyiPm-Y8maxYe75AeVEjnMKydUfR5GP4FmhYunqTMmhnZZMR92thvqtce6U-wI/s1600/add-a-gadget-to-my-blog.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add gadgets to blogger" border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qljlUD38_ooU0z7rvxcr6xeGLF07YgcT82IHLK5cjffz24W5xx2r1ixyS2mkoUSpW90iYnHbN1WjzOyiPm-Y8maxYe75AeVEjnMKydUfR5GP4FmhYunqTMmhnZZMR92thvqtce6U-wI/s320/add-a-gadget-to-my-blog.PNG" title="Add gadgets to blogger" width="320" /></a></div><br /><b>Login to your blogger and  go to the Layout tab</b><br /><br />The add a Gadget links on the screen shows you all the places that you can currently add a gadget.  Choose which place to add one to to.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsScJh2Lg1rTLAIG7fwUgg5pmbiSr6Lu6d8Z_SUFbqc8dF2up64dSot_j_FiTuztUFesMjjV9fLIMZE4gMauvY5hdOFXMRPET2_cla6-MeSy_yx8_i_01HxSCylHzDMRKiiVwBZYjWYYs/s1600/add-a-gadget-screen-.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add gadgets to blogger" border="0" height="327" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsScJh2Lg1rTLAIG7fwUgg5pmbiSr6Lu6d8Z_SUFbqc8dF2up64dSot_j_FiTuztUFesMjjV9fLIMZE4gMauvY5hdOFXMRPET2_cla6-MeSy_yx8_i_01HxSCylHzDMRKiiVwBZYjWYYs/s640/add-a-gadget-screen-.PNG" title="Add gadgets to blogger" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Click to the Add a gadget link at the top of the area you choose.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">When you click on Add a Gadget a blogger pop-up window will appear listing all gadget that's available to you through Google Blogger. You can find the name of a particular device, or you can browse through various categories, including basic appliances, gadgets, gadgets Featured more popular or younger, provided by third-party developers to Blogger.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">If you need costomize widgets for blogger like Facebook fans, socal media plugins and other, you can also select HTML/JavaScript and paste in your own code.</div><div class="separator" style="clear: both; text-align: left;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiURtzMCEE33IUUEPc818luUq8-Mu6DckvlnI6EaKo6002aQPWPjm7CPAsHATNXHuP7alaAYSROhooruvnb2KL9dC5vioih3KEqJjPpzRPVz3dKhqIcXe2RqSFjnriAo58xSP9779iikBM/s1600/Add+a+Gadget+for+blogger.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Add gadgets to blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiURtzMCEE33IUUEPc818luUq8-Mu6DckvlnI6EaKo6002aQPWPjm7CPAsHATNXHuP7alaAYSROhooruvnb2KL9dC5vioih3KEqJjPpzRPVz3dKhqIcXe2RqSFjnriAo58xSP9779iikBM/s320/Add+a+Gadget+for+blogger.JPG" title="Add gadgets to blogger" width="281" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">When you have entered , <b>click Save.</b></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both;"><b>How to change the position of a gadget:</b></div><div class="separator" style="clear: both;"><b><br /></b></div><div class="separator" style="clear: both;">You can move a gadget into any place in your blog-layout that you can add a gadget to. In the Layout (Design > Page elements) screen:</div><ul style="text-align: left;"><li>Single-click on the gadget and hold the mouse button down. Keep holding it down.</li><li>Dragging the mouse moves the gadget to other places, including further down the list of gadgets currently in that space, or into a totally different part of the blog.</li><li>Once the gadget is in the place where you want it to be, let go of the mouse-button.</li></ul><div>Once you are agree with the position of all the gadget, click Save arrangement to apply the new places to your blog.</div><br /></div>

How To Add a Gadget (Widgets) To Your Blog

This post shows how to use Blogger add-a-gadget tool and remove blogger gadgets from our bloggers, It is very easy. Blogger allow you easily...

+ Read more »