0 Tell your Blog to Load Fast with Lazy Load Script

The most annoying thing in most of the blogs I feel is the loading time. I hate sitting and waiting for all images to load and I can start view properly. It looks like we have only few images to load and icons on our page. But the fact is there are so many images in our template , specially in hacked templates. Sometimes it happens growing our blog also increases the loading time.

You must have read so many articles to reduce loading time of blog . Anyone of them worthy? May be Or you have seen some blogs or sites which use to load their images only when they are required. Sounds intelligent. Isn’t it? Here I am sharing with you the secret for this. A small piece of code can help you here.


The name is Lazy Load Plugin .

This script will load images only which is displayed onto the present screen. Scrolling further will load the other images as well.
Get it now !
Just copy the code below and paste in your header section or find </head> tag in your template and paste above it.

<script charset=’utf-8′ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/> <script src=’http://bnote.googlecode.com/files/jquery.lazyload.js’ type=’text/javascript’/>
<script charset=’utf-8′ type=’text/javascript’>
$(function() {   $(&quot;img&quot;).lazyload({placeholder : &quot;http://bnote.googlecode.com/files/grey.gif&quot;,threshold : 200});});
</script>

It might take a little to work as programmer are working with it for better performance with all the latest browsers.

0 How To Increase Blog Loading Speed

Today I will give you one trick by which you can Increase your blog speed.This trick is very easy you don't need any SEO trick or tips to increase blog page loading speed just paste simple JavaScript in your blog html and enjoy fast loading blog.

Increasing Blog Speed

• Go To Blogger Dashboard
• Click on Template Tab.
• Now click on Edit HTML button
• Find (Ctrl + f) </head>
• Paste below code above </head> tag

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});
});
</script>

Now save your template and you are done. Refresh your site to see the result.

0 MULTICOLOR SOCIAL SHARING WIDGET

Social media subscription widgets are most important part of any blog or website. In this tutorial I will show in simple steps how to add the social subscription widget to your WordPress or Blogger blog.
This is very attractive because of multicolor. Four different colors for every social network. It include nice hover style. you can link with RSS, Facebook, Twitter and StumbleUpon. Lets look at the tutorial.

Multicolor Social Subscription Widget

Add Multicolor Social Subscription Widget To Blogger Blog

• Go to Dashboard > Design > Page Elements.
• Click Add A Gadget. In New Window, Select HTML/Javascript .
• Copy The Code Given Below and Paste It Inside The Box.
• Save The Gadget

Add Multicolor Social Subscription Widget To WordPress Blog

• Go to Dashboard > Appearance > Widgets > Available Widgets
• Drag Text Widget Into a Sidebar.
• Paste In The Code.
• Save Widget & Its Done

Code For Multicolor Social Subscription Widget

<style type="text/css">
.blogsdaddy-social-widget {
width: 340px;
margin-top: -10px;
border:0px solid #000000;
}
.blogsdaddy-social-widget ul {
margin: 0;
padding: 0;
 
}
.blogsdaddy-social-widget ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.blogsdaddy-social-widget ul li a {
color: #fff;
display:block;
}
.blogsdaddy-social-widget ul li a:hover {
color: #c9c9c9;
}
.blogsdaddy-social-widget ul li .rss:hover {
background-color:#d86601;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .twitter:hover {
background-color:#0d8be1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}
.blogsdaddy-social-widget ul li .facebook:hover {
background-color:#224ba1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }
.blogsdaddy-social-widget ul li .stumbleupon:hover {
background-color:#198b09;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;  }
 
.blogsdaddy-social-widget ul li .rss {
background:
url("http://4.bp.blogspot.com/-5BrA-1aX4ps/UNwns0iTmNI/AAAAAAAAlYo/KeQIQ-YZ5VQ/s1600/blogsdaddy-Rss.png")
 no-repeat scroll 2px center #F87E12;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .twitter {
background:
url("http://1.bp.blogspot.com/-06e7KEMC9Rs/UNwnvbnhToI/AAAAAAAAlY8/fuhLsmzUnow/s1600/blogsdaddy-twitter.png")
 no-repeat scroll 2px center #59a5d9;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .facebook {
background:
url("http://1.bp.blogspot.com/-nyp7eNLXJ58/UNwntjSOz8I/AAAAAAAAlYs/s6_6a8LQz8A/s1600/blogsdaddy-facebook.png")
 no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.blogsdaddy-social-widget ul li .stumbleupon {
background:
url("http://3.bp.blogspot.com/-bX-6axJzrWc/UNwnucxI9YI/AAAAAAAAlY0/qq6r6usd6wQ/s1600/blogsdaddy-stumbleupon.png")
 no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}
</style>
<div class="blogsdaddy-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/topbloggertrickstk" target='_blank' rel='nofollow'>Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/blogsdaddy"
target='_blank' rel='nofollow'>>Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogsdaddy"
target='_blank' rel='nofollow'>>Find me on Facebook</a></li>
<li><a rel="author" class="stumbleupon" href="http://www.stumbleupon.com/stumbler/gaganmasoun"
target='_blank' rel='nofollow'>>Stumble on Stumbleupon</a></li>
</ul>
</div>

Remember Notes : The social and feed links are highlighted in yellow, you need to change these to your own.

For the Email RSS you only need to replace your feedburner ID with your own. Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/YourId with YourId being the ID.

0 ANGRY BIRD SOCIAL SHARING WIDGET FOR BLOGGER & WORDPRESS

Social sharing widgets are very useful for blogs, with these widgets bloggers can get huge quality traffic for their blogs. You all are know about "Angry Birds" very well. Today, I'm going to share social sharing widget related to Angry Birds.
You can add this widget to your blog easily. This widget contains 5 different color Angry Birds: G+, Facebook, YouTube, Twitter and RSS feed.

How To Add Angry Birds Social Sharing Widget To Blogger Blog

1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In New Window, Select HTML/Javascript .
3. Copy The Code Given Below and Paste It Inside The Box.
4. Save The Gadget

How To Add Angry Birds Social Sharing Widget To WordPress Blog

1. Go to Dashboard -> Layout -> Widgets -> Available Widgets
2. Drag Text Widget Into a Sidebar.
3. Paste In The Code.
4. Save Widget & Its Done

Code For Angry Birds Social Sharing Widget

<style>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href="https://profiles.google.com/118121786688701820900" rel='nofollow' target='_blank'>
<img src="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>
<li><a href="https://www.facebook.com/pages/topbloggertrickstk/116130148554956" rel='nofollow' target='_blank'>
<img src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.youtube.com/YOUR YOUTUBE USERNAME" rel='nofollow' target='_blank'>
<img src="http://4.bp.blogspot.com/-RlxdrBe4ecs/ULTduDJX5gI/AAAAAAAAF24/Pc03FWKq8js/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>
<li><a href="http://www.twitter/Abhidinvader" rel='nofollow' target='_blank'>
<img src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/topbloggertrickstk" rel='nofollow' target='_blank'><img src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>

Remember Note: Replace yellow highlighted URLs with your own social profile links.

0 ADD SUBSCRIPTION BOX BELOW EVERY POST

Here I'm presenting RSS subscription box with no images or complex scripts. Alerting your visitors to subscribe at the bottom of your posts often help in increasing the number of your blog subscribers. The more readers you get the faster your blog grow. Providing visitors with easy and clean options to subscribe and bookmark should always be your first priority. I managed to design a simple box using CSS3 gradient and text shadow effect to create a container with RSS form inside it. The widget will stick to the bottom of your post and will let your visitors to submit their email addresses and subscribe to your FEED updates. Surely the best way to draw attention!

Add it to Blogger

• Go to Blogger > Design > Edit HTML
• Backup your template
• Check the "Expand Widget Template" box
• Search for this,

<data:post.body/>

• Just below it paste this code,

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-sub-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='topbloggertrickstk'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

Now make these changes,

• Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
• Now replace http://feedburner.google.com/fb/a/mailverify?uri=topbloggertrickstk with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace topbloggertrickstk with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=topbloggertrickstk

• Save your template and you are all set!