You must have seen blogs using keyboard keys effect on Text. Today I will show you How can you use keyboard keys effect on Text using CSS. This is compatible with both Blogger and WordPress.

How to Add Keyboard Keys Effect to Blogger

• Log in to Blogger account.
• Go to Template > Edit HTML
• Now search for ]]></b:skin> 
• Add the below CSS just before ]]></b:skin>

TB{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid gray;padding:1px 5px;margin:0 5px;font-family:courier new;font-size:1.2em;-webkit-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;-moz-box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;box-shadow:1px 0 1px 0 #fff, 0 2px 0 2px lightGray, 0 2px 0 3px #333;background:-moz-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(25%, #e2e2e2));background:-webkit-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-o-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:-ms-linear-gradient(left, #fff 0%, #e2e2e2 25%);background:linear-gradient(left, #fff 0%, #e2e2e2 25%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1 )}TB.space{padding:0 90px}TB:hover{cursor:default}

• Save Template

Now that you've added CSS to your Blogger Template. You've finished 90% of the Job.

How to Use it in Blog Posts

Now whenever you want the Keyboard keys effect just use the following code.

<TB> YOUR TEXT HERE </TB>

Just Replace YOUR TEXT HERE with your Text and Done.

DEMO

I hope this article was helpful. Please leave your comments below if you are having any problems.

Credit: HackingUniversity.com  

Blog loading speed plays a very important role in a Blog's success. Blogs which takes time to load often lose traffic. Images are one of the factor which affects a blogs loading speed. So today I'll show you How to Install Lazy Image loading script to blogger. This script forces images to load after the blog has loaded, It means that the images will load slowly after your blog has loaded.

Advantages

• Makes your blog load faster.
• Images load when users scroll

How to Install this plugin to Blogger

• Log in to your Blogger Account
• Go to Template > Edit HTML
• Search for </head>
• Add the following script just before </head>

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

• Now Save Template 

Done!!! After adding this script, you'll notice image load after blog has loaded.

Need Help

If you are having any problems with this script then feel free to leave a comment below.

Bloggers work really hard for designing their blog. They use Best Templates, Widgets, Colors, CSS etc for designing their blog then why keep the default Text selection color? Why not use a custom color for Text selection which blends in your template, I mean which matches your blog colors.

You can change the default Text selection color just by adding a small CSS code in your Blogger template.

How to Change Text Selection Color in Blogger

• Log In to your Blogger Account
• Go to Template > Edit HTML
• Search for ]]></b:skin> code
• Now Add the following code just before ]]></b:skin>

::-moz-selection {
    background-color: #000000;
    color: #fff;
}
::selection {
    background-color: #000000;
    color: #fff;
}

• Now just change #000000 with the hex code of color you want the Text selection to be.
• Save Template

 

Done!!! You've successfully changed the default color of Text selection for your blog. 

Before you can play with your blog template It is always recommended that you backup your template first, So that you can restore it in case of any problems. So Today I'm going to show you How to Backup and Restore a Blogger Template. Just follow the simple steps given below.

How to Backup Blogger Template

Just follow the steps given below to back up your blogger template.

• Log in to your Blogger account
• Go to Template
• Click on 'Backup/Restore'

 

• Now click on 'Download Full Template' button.

• And save the xml file.

Now move the xml file to some safe space. Now that you've successfully backed up your template, You can restore it in case of any problems. To restore the template, follow the steps given below.

How to Restore Blogger Template

• Log in to Blogger
• Go to Template
• Click on 'Backup/Restore'

• Browse the xml template (which you've backed up earlier)

• Click Upload

Now you're done restoring blogger template.

To give your Blogger blog a professional and attractive look you'll have to install a custom blogger theme. A custom theme has many features like Dropdown menu, More columns, Better design etc. which default template lacks.You can download Custom Blogger templates here.

Many people find Installing custom blogger template difficult and that is because of the new updated interface.Today I'm going to post a Tutorial on Installing a custom template to blogger blog. Just follow the steps given below:

How to Install Custom Template on Blogger

Download a custom blogger template first. Once you've got the template, Follow the below steps.

• Log in to your Blogger account
• Go to Template Tab
• Click on 'Backup/Restore' 

• Now Browse to the XML template you've downloaded.

• Click Upload

Done!!! You can now change the position of widgets as per your requirement by going to Layout tab. 

Also See: How to Backup Blogger Template