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 »

Make Money With Your Blog and Google AdSense

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://ichibikarin.blogspot.com/search/label/Blogger" target="_blank"><b>Blogger</b></a> provides a simple way for you to make money with your blog. AdSense is <a href="http://ichibikarin.blogspot.com/search/label/Google" target="_blank">Google's</a> content- targeted <a href="http://ichibikarin.blogspot.com/search/label/Advertising%20Networks" target="_blank">advertising program</a>. If you use <a href="http://ichibikarin.blogspot.com/search/label/Adsense" target="_blank">AdSense</a>, you don't have to select keywords or categories for your ads. Instead, Google's servers determine what your posts are about and display the most relevant ads to your readers. For example, if you blog about , you might see ads for “Baseball” next to your post. If you blog about painting, you might see ads for “Art Supplies.”<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQez3F7p3OHXljOXE_MkoHGUaQMEtqY1pCjrm3hfZvSsITg4Cje5d3CkXcW81Hn1OVyHJvweJZ-w_yRB2E08ddsPZm-iTixLIsIjJQLYACDIzU5rFJP8-11sCvse-7bjIlkvxe6-jgjEc/s1600/blogger+plus+google+adsense.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="SIGN UP FOR ADSENSE" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQez3F7p3OHXljOXE_MkoHGUaQMEtqY1pCjrm3hfZvSsITg4Cje5d3CkXcW81Hn1OVyHJvweJZ-w_yRB2E08ddsPZm-iTixLIsIjJQLYACDIzU5rFJP8-11sCvse-7bjIlkvxe6-jgjEc/s1600/blogger+plus+google+adsense.PNG" title="SIGN UP FOR ADSENSE" /></a></div><br />Starting a new account with <a href="http://ichibikarin.blogspot.com/search/label/Google%20AdSense" target="_blank">Google AdSense</a> is one of the easiest ways to start monetizing your blog. While Google AdSense might not make you rich, it's a simple and useful tool. In fact, it's usually the first step bloggers typically take to earn an income from their blogs because it is so easy to get started.<br /><br /><b>Please Follow instructions below:</b><br /><br /><b>1. Read the <a href="https://www.google.com/adsense/support/bin/answer.py?answer=48182&sourceid=aso&subid=ww-ww-et-asui&medium=link" rel="nofollow" target="_blank">Google AdSense program policies.</a></b><br /><br /><b>2. Visit the <a href="https://www.google.com/adsense/login/en_US/" rel="nofollow" target="_blank">Google AdSense home page.</a></b><br />Click on the 'Sign Up Now' button in the upper righthand corner of your screen.<br /><br /><b>3. Complete the online application.</b><br />You will need to provide your blog's URL and primary language as well as answer some questions related to the rules of the <a href="https://support.google.com/adsense/bin/answer.py?hl=en&answer=48182&sourceid=aso&medium=link&subid=ww-ww-et-asui" rel="nofollow" target="_blank">Google AdSense program.</a> You'll also need to provide your payment information to receive the money you generate on your blog from Google.<br /><br /><b>4. Access your new account and review the ads available to you.</b><br />Google AdSense provides a Broad range of advertising options to bloggers from text ads to image ads and more. Take some time to research everything that's available to Assessment what will work best for your blog.<br /><br /><b>5. Select your ad design choices.</b><br />Once you've decided which ad opportunities are best for your blog, select them. Google will provide a snippet of HTML code to you after you make your selection.<br /><br /><b>6. Insert your Google AdSense HTML code into your blog.</b><br />Copy and paste the HTML code provided by Google into your blog's template. One of the easiest ways for a beginner blogger to do this is by inserting a text widget into his or her blog's template and pasting the code in the widget.<br /><br /><b>7. Let Google do the rest.</b><br />It may take a few hours or a few days for Google to start serving ads on your blog. Google will search your blog to determine the predominant subjects of each page. When readers visit your blog, the HTML code you pasted into your blog from Google will activate and relevant ads will be displayed based on each page's content.<br /><br /><b>8. Collect your money.</b><br /><a href="http://support.google.com/adsense/bin/answer.py?hl=en&answer=65090" rel="nofollow" target="_blank"><b>Intro to Adsense Payment</b></a><br />Remember, Google AdSense typically pays based on click-throughs (the number of times people click on an ad). Therefore, Google AdSense is unlikely to generate a large income for you, but every bit helps!<br /><br />This Topic available on Google Support <b><a href="https://support.google.com/adsense/bin/answer.py?hl=en&answer=23921&topic=1261918&ctx=topic" rel="nofollow" target="_blank">Beginner's guide</a></b><br /><br /><b>Tips:</b><br /><ul><li>Read and adhere to the <a href="https://www.google.com/adsense/support/bin/answer.py?answer=48182&sourceid=aso&subid=ww-ww-et-asui&medium=link" rel="nofollow" target="_blank">Google AdSense policies</a> in full before you sign up for a Google AdSense account. If you violate any of the policies, your account will be cancelled.</li><li>Take some time to perfect your Google AdSense program once you get started by learning the steps you need to take to increase your Google AdSense earning potential.</li></ul></div>

Make Money With Your Blog and Google AdSense

Blogger provides a simple way for you to make money with your blog. AdSense is Google's content- targeted advertising program . If you...

+ Read more »

Ubuntu Touch Daily Builds Available For Download

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-N5ZrnwYWrGIYh0gazUPW9MT5G-a5EtGCweZ8Gtre27et_Qz-uQKkSWmp9TO4B9HUdNQ1nNcmV9FlbzMOSvi9bZXIyUhtExnBBWN7DTgZQmx7QOdkqmOoSa_Kx6eFhP9udcsxpQjaeJR/s1600/ubuntu-phablet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ubuntu phablet" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-N5ZrnwYWrGIYh0gazUPW9MT5G-a5EtGCweZ8Gtre27et_Qz-uQKkSWmp9TO4B9HUdNQ1nNcmV9FlbzMOSvi9bZXIyUhtExnBBWN7DTgZQmx7QOdkqmOoSa_Kx6eFhP9udcsxpQjaeJR/s500/ubuntu-phablet.png" title="ubuntu phablet" /></a></div><br /><div style="text-align: justify;"><b>Ubuntu Touch Developer Preview daily builds (images) are now available for developers and enthusiasts.</b></div><br /><a name='more'></a><div style="text-align: justify;">The Ubuntu Touch (also known as "phablet") daily builds aren't tested so they may contain new features and bug fixes but also new bugs and regressions:</div><br /><blockquote class="tr_bq">Hey guys, just wanted to mentioned that daily builds are in place. ogra made it so our build servers are checked every hour and if updates are found, it will copy them over to cdimage.<br /><br />What this means? Well you can go and break or check out new things as they come.<br /><br /><div style="text-align: right;"><i>- Canonical Quality Engineer Sergio Schvezov @ Ubuntu Phone <a href="https://lists.launchpad.net/ubuntu-phone/msg00492.html">mailing list</a></i></div></blockquote><div style="text-align: justify;"><br /></div><div style="text-align: justify;">If you've installed the latest phablet-tools package (0.6) from the <a href="https://launchpad.net/~phablet-team/+archive/tools">Phablet Tools PPA</a>, you can run the following command to get the latest Ubuntu Touch for your device (presuming you've already installed Ubuntu Touch):</div><pre class="linux-code"><code>phablet-flash -l</code></pre><br /><div style="text-align: justify;">The packages used to built the images are also available in a PPA - <a href="https://launchpad.net/~phablet-team/+archive/ppa">check it out</a>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Download the Ubuntu Touch Developer Preview daily images from <a href="http://cdimages.ubuntu.com/ubuntu-touch-preview/daily-preinstalled/current/">HERE</a>.</b></div><br /><div style="text-align: justify;">For more information, see Sergio Schvezov's <a href="http://sergiusens.github.com/posts/daily-builds-and-updates-to-phablet-tools.html">post</a> about this.</div><br /><br /><i>Also see: <a href="http://www.webupd8.org/2013/02/ubuntu-touch-developer-preview-and.html">Ubuntu Touch Developer Preview And Ubuntu SDK Released</a>.</i>

Ubuntu Touch Daily Builds Available For Download

Ubuntu Touch Developer Preview daily builds (images) are now available for developers and enthusiasts. The Ubuntu Touch (also known as "...

+ Read more »

Unity Stacks Application `Drawers` Updated With New Active Drawers Feature, Other Changes

<div style="text-align: justify;">Drawers is an application that creates "stacks" (drawers) on the Unity Launcher, which can be used to organize various files, folders, applications or links for quick access, create drawers that automatically display the applications in a category and more.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-M6MGNm1IRKgfMAjreepbhSUWvRCv38knVmRJjtV-Tk1Qi0-C1xFTKVFvssv5Elwj0Z99EuXCEmoJQ3m5X3FYSLlyqi9AcPyA9eZhewjeLxW3WLX6GT6ULQhSvs2I6EowJfMFuvjR_qH/s1600/drawers-active-folder.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-M6MGNm1IRKgfMAjreepbhSUWvRCv38knVmRJjtV-Tk1Qi0-C1xFTKVFvssv5Elwj0Z99EuXCEmoJQ3m5X3FYSLlyqi9AcPyA9eZhewjeLxW3WLX6GT6ULQhSvs2I6EowJfMFuvjR_qH/s320/drawers-active-folder.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">A new "Active Folder" drawer</td></tr></tbody></table><br /><div style="text-align: justify;">The application has been updated today, getting quite a few new features, including a <b>new type of drawers called "Active Drawers"</b>. This type of drawer lets you <b>view and launch the contents of a folder</b> that's <b>constantly monitored for changes, so when you add new files to that folder, they show up in the drawer</b>. You can also access the files in that folder via quicklists (right click) available for the Active Drawer Unity Launcher icon:</div><div style="text-align: justify;"><br /></div><a name='more'></a><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlkGAnOdbTgJYDrZmUKgIRg7sU0idCVdxvx15YFB9E3CjKDrqpCVImvNftBeQzcYz4ntAYoLjucZi73hBUPFkHrm-bFNJBoPah6iYmTdlBAHprZltcQuU9DSw_j_TWHN96hrT_YBd-zha/s1600/drawers-active-folder-quicklist.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlkGAnOdbTgJYDrZmUKgIRg7sU0idCVdxvx15YFB9E3CjKDrqpCVImvNftBeQzcYz4ntAYoLjucZi73hBUPFkHrm-bFNJBoPah6iYmTdlBAHprZltcQuU9DSw_j_TWHN96hrT_YBd-zha/s1600/drawers-active-folder-quicklist.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Active Folder quicklists</td></tr></tbody></table><div style="text-align: justify;"><br /></div><br /><div style="text-align: justify;">The Active Drawer can display 10 most recent items as quicklists but you can <b>pin items to the quicklists</b> so they are always displayed.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Note: adding new files to the Active Drawer copies the files to the disk (so they aren't just simple shortcuts) and also, removing the files from the Active Drawer moves them to Trash.</div><br /><b>Other changes in the latest Drawers 13.2.1:</b><br /><ul><li>Drawers can now save their state (location, sort and pin state);</li><li>added a checkbox to Autostart on Login in Preferences (this will open the drawer on startup);</li><li>added Pin Window BELOW others;</li><li>buttons in drawer are hidden when mouse is not over drawer;</li><li>added "More Help" button on Help window presented in right-click popup menu;</li><li>fixed theme issues when Gtk themes other than Ambiance were used;</li><li>fixed Drawer Preferences bugs related to icons not found;</li></ul><br /><div style="text-align: justify;">With this release, there's also initial support for using the drawers as desktop widgets. However, for now the Unity Launcher icon continues to be displayed when trying to achieve this, but this should be fixed in a future version.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9xu7Lxj2JJkRkvqFxNnRZ3v6SrsyAXlyPKsBfNmENZ892vWCQqApX5lDk62k-176QAsshk4NwzPfu_6njwvf2syE7zys2A6aAqhzRzN4uD0yRXL234pmXxOyeUMaNnVDjzK-jHQRYo5rQ/s1600/drawers-regular-drawer.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9xu7Lxj2JJkRkvqFxNnRZ3v6SrsyAXlyPKsBfNmENZ892vWCQqApX5lDk62k-176QAsshk4NwzPfu_6njwvf2syE7zys2A6aAqhzRzN4uD0yRXL234pmXxOyeUMaNnVDjzK-jHQRYo5rQ/s320/drawers-regular-drawer.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">A regular drawer I've created for quickly launching Steam games</td></tr></tbody></table><div style="text-align: justify;"><br /></div><div style="text-align: justify;">It's also worth mentioning that since our last <a href="http://www.webupd8.org/2012/12/unity-stacks-application-drawers-gets.html">Drawers article</a>, the application has improved a lot and now the drawers are automatically added to the Unity Launcher, there are new default icons and more.</div><div style="text-align: justify;"><br /></div><br /><br /><h2>Install Drawers in Ubuntu</h2><br /><b>To install Drawers in Ubuntu 13.04, 12.10 or 12.04, use the following commands in a terminl:</b><br /><pre class="linux-code"><code>sudo add-apt-repository ppa:ian-berke/ppa-drawers<br />sudo apt-get update<br />sudo apt-get install drawers</code></pre><br />If you encounter bugs, report them @ <a href="https://bugs.launchpad.net/drawers">Launchpad</a>.

Unity Stacks Application `Drawers` Updated With New Active Drawers Feature, Other Changes

Drawers is an application that creates "stacks" (drawers) on the Unity Launcher, which can be used to organize various files, fold...

+ Read more »

Everpad 2.5 Released With Note Sharing, Filter By Tags, More

<div style="text-align: justify;"><b>Everpad is a Linux client for <a href="http://evernote.com/">Evernote</a>, a popular note taking service. The application comes with a Unity lens that supports previews, Ubuntu AppIndicator for quickly accessing your notes, supports Evernote tags, notebooks, resources, places and more.</b></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTNRsbzLnqC0yVNlJqpmFg8mdREIciVcZSVtpgH36Q0HbF2iZaNlRVWNZGY8mbTBO6sKSVNXhMsxUVFSI4KNOoKoBqyUYKbZr7XFi9BmycgFrTlE-nCB_oiJwx74ajYmmVaw9WQCcV2bDY/s1600/everpad-share-n-tags.png" imageanchor="1" rel="image_group" style="margin-left: 1em; margin-right: 1em;" title="Everpad: sharing note and all notes window"><img alt="Everpad: sharing note and all notes window" border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTNRsbzLnqC0yVNlJqpmFg8mdREIciVcZSVtpgH36Q0HbF2iZaNlRVWNZGY8mbTBO6sKSVNXhMsxUVFSI4KNOoKoBqyUYKbZr7XFi9BmycgFrTlE-nCB_oiJwx74ajYmmVaw9WQCcV2bDY/s320/everpad-share-n-tags.png" title="Everpad: sharing note and all notes window" width="320" /></a></div><br /><div style="text-align: justify;">Even though it has many Unity-specific features, Everpad isn't just for Unity and it works with <a href="http://www.webupd8.org/2012/12/evernote-linux-client-everpad-available.html">GNOME Shell or KDE</a> too (it even has Krunner integration).</div><br /><a name='more'></a><br /><div style="text-align: justify;"><b>Everpad 2.5 has been released recently with some interesting new features, such as:</b></div><ul><li>note sharing;</li><li>filter by tags in all notes window;</li><li>search on the home lens in Unity Dash is now optional (to disable it: in the Everpad settings, on the Appearance tab, uncheck "Search on the home lens");</li><li>basic notebook stacks support;</li><li>interface improvements;</li><li>basic LXDE support;</li><li>many bug fixes.</li></ul><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Even though the latest Everpad 2.5 changelog mentions basic LXDE support, Everpad didn't work with Lubuntu 12.10 (LXDE) in my test: the Evernote authorization didn't work, but hopefully this will be fixed soon (I've reported the bug <a href="https://github.com/nvbn/everpad/issues/264">here</a>). This didn't occur in my tests under Ubuntu 12.10 or 12.04 with Unity.</div><ul></ul><br />Here are a few more screenshots for those who are not familiar with Everpad:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUw27BJZJYiC0njVTArk6SEH33qUxVH4u-MWY7CnXBQVrUZgxEK1G5qRKoeiSGq3ybydEE7_YkhCk1gbTOcLh-nGrhR-XXVYkgAbNriLCzO4voL_piN5fmYkV_IFO5ibXoMMJGSERCe4QL/s1600/everpad-indicator.png" imageanchor="1" rel="image_group" style="margin-left: 1em; margin-right: 1em;" title="Everpad AppIndicator"><img alt="" border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUw27BJZJYiC0njVTArk6SEH33qUxVH4u-MWY7CnXBQVrUZgxEK1G5qRKoeiSGq3ybydEE7_YkhCk1gbTOcLh-nGrhR-XXVYkgAbNriLCzO4voL_piN5fmYkV_IFO5ibXoMMJGSERCe4QL/s320/everpad-indicator.png" title="Everpad AppIndicator" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdH0iSi6vfbXqgsHD_eWQKtZm1R6N2U8DzW_YlpkqYc6RABMfktFayTfcOBMOV65sw88pk6PjvQuTMvmehvigW0yDoua-McQU2poo08-Fu59BYBIhsOpo9YFE0UJWcEriSWem7wlFEurx/s1600/everpad-previews.png" imageanchor="1" rel="image_group" style="margin-left: 1em; margin-right: 1em;" title="Everpad: Unity lens preview"><img alt="everpad lens preview" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdH0iSi6vfbXqgsHD_eWQKtZm1R6N2U8DzW_YlpkqYc6RABMfktFayTfcOBMOV65sw88pk6PjvQuTMvmehvigW0yDoua-McQU2poo08-Fu59BYBIhsOpo9YFE0UJWcEriSWem7wlFEurx/s320/everpad-previews.png" title="everpad lens preview" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZBzR_3xmlczTuLFlNV45vH2HpLkf7jwL2eWQppEby-EDpBY0DMm2-zGFhAE07LZC02whgdmK-E7vQB5Q2vhHCx73vCvO8yxurzSW83dzEcQ4KkfeDSdyBLu8yLHdujBxqkBAE_8mwfwCo/s1600/everpad-lens.png" imageanchor="1" rel="image_group" style="margin-left: 1em; margin-right: 1em;" title="Everpad Unity lens"><img alt="Everpad lens" border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZBzR_3xmlczTuLFlNV45vH2HpLkf7jwL2eWQppEby-EDpBY0DMm2-zGFhAE07LZC02whgdmK-E7vQB5Q2vhHCx73vCvO8yxurzSW83dzEcQ4KkfeDSdyBLu8yLHdujBxqkBAE_8mwfwCo/s320/everpad-lens.png" title="Everpad lens" width="320" /></a></div><br /><br /><br /><h2>Install Everpad in Ubuntu</h2><br /><div style="text-align: justify;">Everpad is available in a<b> PPA for Ubuntu 12.10 and 12.04</b> (the 13.04 package failed to build). To add the PPA and install Everpad, use the following commands:</div><pre class="linux-code"><code>sudo add-apt-repository ppa:nvbn-rm/ppa<br />sudo apt-get update<br />sudo apt-get install everpad</code></pre><br /><b>If Everpad doesn't work, try to log out and log back in!</b><br /><br />For other Linux distributions, see the Everpad <a href="https://github.com/nvbn/everpad/wiki/how-to-install">wiki</a> for installation instructions.<br /><br />If you encounter bugs, report them @ <a href="https://github.com/nvbn/everpad">GitHub</a>.

Everpad 2.5 Released With Note Sharing, Filter By Tags, More

Everpad is a Linux client for Evernote , a popular note taking service. The application comes with a Unity lens that supports previews, Ubun...

+ Read more »

CopyQ: Interesting Clipboard Manager With Advanced Features

<div style="text-align: justify;"><b>CopyQ is a clipboard manager written in Qt that comes with some advanced features, image support, editable history, command line support, keyboard shortcuts and more. </b>The application is available for Linux and Windows.<b><br /></b></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpyIdgT5PLYlVmif-6dMQFQLiVGryYiQG7UD8NQbNjbA3zVLhC47wGAppNAlKnpQu3qRDi7d0qRlKSGyzCE2HAf7TTit_wBTg5LfTMFbIPpuM1-5VtuUSKNoUSaUxSBzaWrOYhyphenhyphenr3sZIQK/s1600/copyq.png" imageanchor="1" rel="image_group" style="margin-left: 1em; margin-right: 1em;" title="CopyQ tray menu"><img alt="CopyQ clipboard manager" border="0" height="249" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpyIdgT5PLYlVmif-6dMQFQLiVGryYiQG7UD8NQbNjbA3zVLhC47wGAppNAlKnpQu3qRDi7d0qRlKSGyzCE2HAf7TTit_wBTg5LfTMFbIPpuM1-5VtuUSKNoUSaUxSBzaWrOYhyphenhyphenr3sZIQK/s320/copyq.png" title="CopyQ clipboard manager" width="320" /></a></div><br /><a name='more'></a><br /><b>CopyQ features:</b><br /><ul><li style="text-align: justify;">configurable history size, number of tray menu items, etc.;</li><li style="text-align: justify;">editable and searchable clipboard history;</li><li style="text-align: justify;">keyboard shortcuts for opening the clipboard history, show the tray menu and more;</li><li style="text-align: justify;">commands: you can define actions or commands when a text copied to the clipboard matches some criteria you set. This can be used for instance to open video player if text copied to the clipboard is an URL with multimedia content and so on;</li><li style="text-align: justify;">image support: when you copy a selection in GIMP, an image in Shutter (take a screenshot), etc., the image preview is displayed in the tray menu as well as in the clipboard history. This obviously doesn't work if you copy some image file (e.g.: in Nautilus) since that's treated like any other file;</li><li style="text-align: justify;">command line support: tabs, items, clipboard and configuration can be changed through command line interface;</li><li style="text-align: justify;">more. </li></ul><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbUaRcGvuOWRB64kbRJZcWEbPE3XnomX9N8nZGm7Urj0LUP3H5xElpyqV6piS_EskZNjg9lxvbj-A8GyAqNYYr4FtoA3SjtKXejVI8URHmjIhkWtTJ_9XfYEOzyiVa8BBAewwtIRiSV6y6/s1600/copyq-clipboard-history.png" imageanchor="1" rel="image_group" style="margin-left: auto; margin-right: auto;" title="CopyQ clipboard history"><img alt="CopyQ clipboard manager" border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbUaRcGvuOWRB64kbRJZcWEbPE3XnomX9N8nZGm7Urj0LUP3H5xElpyqV6piS_EskZNjg9lxvbj-A8GyAqNYYr4FtoA3SjtKXejVI8URHmjIhkWtTJ_9XfYEOzyiVa8BBAewwtIRiSV6y6/s320/copyq-clipboard-history.png" title="CopyQ clipboard manager" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">CopyQ clipboard history</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRfX4b6zh3gOvLCnY1a_1k8NEZpRIvWSc_u7iAwpHg8eWucil5O6peFNmoxIrNhX_5a2cPMDoR9ooN5_n-buaI6Cg2P4GgHSrpX0XeRybNVA6TC-U712erNxeRmwNubEw-TX2Ja31CcX_/s1600/copyq-preferences-commands.png" imageanchor="1" rel="image_group" style="margin-left: auto; margin-right: auto;" title="CopyQ Commands / actions"><img alt="CopyQ clipboard manager" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRfX4b6zh3gOvLCnY1a_1k8NEZpRIvWSc_u7iAwpHg8eWucil5O6peFNmoxIrNhX_5a2cPMDoR9ooN5_n-buaI6Cg2P4GgHSrpX0XeRybNVA6TC-U712erNxeRmwNubEw-TX2Ja31CcX_/s320/copyq-preferences-commands.png" title="CopyQ clipboard manager" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">CopyQ Commands / actions</td></tr></tbody></table><br /><br /><div style="text-align: justify;">Also, since the application is written in Qt, the tray icon/menu is automatically converted to an AppIndicator so you can use CopyQ in Unity without having to whitelist it to be able to use the notification area. If you don't get an AppIndicator for CopyQ, install the "sni-qt" package.</div><br /><br /><br /><h2>Install CopyQ in Ubuntu</h2><br /><b>Ubuntu 13.04, 12.10 and 12.04 users can install CopyQ by using the following commands:</b><br /><pre class="linux-code"><code>sudo add-apt-repository ppa:samrog131/ppa<br />sudo apt-get update<br />sudo apt-get install copyq</code></pre><br /><b>Arch Linux</b> users can install CopyQ via <a href="https://aur.archlinux.org/packages/copyq/">AUR</a> (also available: <a href="https://aur.archlinux.org/packages/copyq-git/">copyq-git</a>)<br /><br /><b>For other Linux distributions, get the CopyQ source code from <a href="https://github.com/hluk/CopyQ">GitHub</a> or <a href="http://code.google.com/p/copyq/downloads/list">Google Code</a> (here you'll also find Windows binaries).</b><br /><br /><div style="text-align: right;"><i>seen on <a href="http://www.lffl.org/2013/02/copyq-unincredibile-clipboard-manager.html">Lffl.org</a></i></div>

CopyQ: Interesting Clipboard Manager With Advanced Features

CopyQ is a clipboard manager written in Qt that comes with some advanced features, image support, editable history, command line support, ke...

+ Read more »

Bumblebee 3.1 Released With Primus Support [Nvidia Optimus GPU Switching]

<div style="text-align: justify;"><b>Bumblebee 3.1 has been released today with support for <a href="http://www.webupd8.org/2012/11/primus-better-performance-and-less.html">Primus</a> as an alternative to the VirtualGL optirun backend, along with other enhancements and fixes.</b></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><a href="http://bumblebee-project.org/">Bumblebee</a> is a (unofficial) tool that brings Nvidia Optimus GPU switching to Linux. Nvidia Optimus is a technology used to increase battery life by switching the dedicated GPU (Nvidia) off when it's not needed; when the dedicated GPU is off, the integrated graphics chip (Intel) is used. Bumblebee also supports legacy Nvidia hybrid graphics. </div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrBiuFU1s-YQ9ku-JT0H2eHiXSSaT9WgkPJjHVeNnlt8BLUTgcRQ9HigQCwf8HIufRj8EZBoeAcROqoLjqo3aHyEL_lSbnYCSnuF6fmLm9nGB28qbHYYZcPbbGu53or3cDyUaWin7TeKP/s1600/bumblebee-optirun.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bumblebee optirun glxspheres" border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrBiuFU1s-YQ9ku-JT0H2eHiXSSaT9WgkPJjHVeNnlt8BLUTgcRQ9HigQCwf8HIufRj8EZBoeAcROqoLjqo3aHyEL_lSbnYCSnuF6fmLm9nGB28qbHYYZcPbbGu53or3cDyUaWin7TeKP/s320/bumblebee-optirun.png" title="Bumblebee optirun glxspheres" width="320" /></a></div><br /><a name='more'></a><br /><b>Changes in Bumblebee 3.1:</b><br /><ul><li>support for Primus as an alternative to VirtualGL as optirun backend. This is configurable through a new "Bridge" option in <i>bumblebee.conf</i> that by default is set to "auto" - it selects VirtualGL if installed and if not, it uses Primus. In Bumblebee 4.0, Primus may be used as the default option;</li><li>optirun has gained an option for on-the-fly back-end choice: --bridge;</li><li>use of non-blocking sockets, replacing former 3.0.1 hotfix for socket polling;</li><li>added an udev rule to fix nvidia card randomly turning on;</li><li>fix for Kepler generation cards was added in xorg.conf.nvidia;</li><li>fix for dual nvidia hybrid systems;</li><li>fixed nouveau not working under X.org 1.13+;</li><li>fixed available drivers detection by supporting module aliases;</li><li>other fixes.</li></ul><br />For the complete Bumblebee 3.1 release notes, see <a href="https://github.com/Bumblebee-Project/Bumblebee/blob/master/doc/RELEASE_NOTES_3_1">THIS</a> page.<br /><br /><div style="text-align: justify;">Bumblebee isn't useful just for those who want to use the Nvidia graphics card for gaming, but also to improve battery life because by default, Bumblebee disables the Nvidia card which is always turned on unless you disable it some other way. To use the Nvidia card for an application or game, you can launch it with "optirun" (e.g.: "optirun firefox").</div><br /><br /><br /><br /><h2>Install Bumblebee in Ubuntu</h2><br /><div style="text-align: justify;"><b>To add the <a href="https://launchpad.net/~bumblebee/+archive/stable">stable Bumblebee PPA</a> and install Bumblebee in Ubuntu Raring, Quantal, Precise, Oneiric or Lucid, use the following commands:</b></div><pre class="linux-code"><code>sudo add-apt-repository ppa:bumblebee/stable<br />sudo apt-get update<br />sudo apt-get install bumblebee bumblebee-nvidia</code></pre><br /><div style="text-align: justify;"><i>Update: initially, Bumblebee 3.1 was only available in the testing PPA, but it's now available in the stable Bumblebee PPA.</i></div><br /><b>Once installed, log out and log back in</b>, then try it out by running "<i>optirun glxspheres</i>". You may need to edit the Bumblebee configuration file if you're not using nvidia-current (<i>/etc/bumblebee/bumblebee.conf</i>).<br /><br /><div style="text-align: justify;">Then, if you want an application or game to use the Nvidia graphics card, launch it with "optirun", e.g.: "optirun steam".</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br />Primus is now available in the Bumblebee Stable PPA. However, please note that if you were using the <a href="http://www.webupd8.org/2012/11/primus-better-performance-and-less.html">Primus PPA</a> and want to only use the packages in the Bumblebee PPA, you'll have to purge primus ("sudo apt-get purge primus*") before installing Primus from the Bumblebee PPA.<br /><br /><b>To use the new Primus backend</b>, you'll also have to install Primus:<br /><pre class="linux-code"><code>sudo apt-get install primus</code></pre><b>64bit:</b> you also need to install "primus-libs-ia32:i386" (note that if you're using the <a href="http://www.webupd8.org/2012/11/primus-better-performance-and-less.html">Primus PPA</a>, the package you need to install is "primus-lib:i386"):<br /><pre class="linux-code"><code>sudo apt-get install primus-libs-ia32:i386</code></pre><br />Then, change the "Bridge" option in <i>/etc/bumblebee/bumblebee.conf</i> to "primus". You can also directly call Primus from optirun via command line, like this:</div><pre class="linux-code"><code>optirun -b primus APP</code></pre>Where "APP" is the application you want to launch.<br /><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>For other Linux distributions, see the Bumblebee <a href="http://bumblebee-project.org/install.html">installation page</a> or get the code via <a href="https://github.com/Bumblebee-Project">GitHub</a>.</b></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">If you encounter issues with Bumblebee, report them @ <a href="https://github.com/Bumblebee-Project/Bumblebee/issues">GitHub</a>.</div>

Bumblebee 3.1 Released With Primus Support [Nvidia Optimus GPU Switching]

Bumblebee 3.1 has been released today with support for Primus as an alternative to the VirtualGL optirun backend, along with other enhancem...

+ Read more »