How To Make Your Blog Smart - Fast Including All SEO Widgets By Techsoulz ~ TechSoulz

Here are the great Methods and widgets to make your Blog Smart, Fast and comfortable to your Readers.By Techsoulz

Every Blogger want to make his Blog Smart, Fast and Comfortable but Smart widgets make your Blog Load very Slow because many smart widgets contains a large Codes which includes CSS, JQUERY, JAVASCRIPT etc...,Already your Blog Template contains all these codes if you make use of those existing codes then your Blog looks Smart and also loads very fast.

How To Do It:

1) Select a smart Blog Template:

Watch my Template which is just 136 KB in size but contains all smart widgets and loads fast also comfortable

2) List Of Smart SEO Widgets To Be Added

One Time Facebook Like Box Pop Up For Blogger

Go to Blogger Layout click on Add a Gadget select HTML/JAVASCRIPT and add the below code.

Note: Add this Gadget on top that is below the Header gadget or above the Blog posts Gadget in Layout,because javascript conflict may occur with other gadgets.

Note: If your Blog Template contains a Image Slide Show then Javascript Conflict occurs and your Slide Show may not work,you better Remove image slide show code from blog Template because it slow down the blog.

Widget Code:

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xkf8zuFtmy7xER5qHvVkH5XrohbSINSYd8bL1_XlGJqh4ZUEJw3TRckA3lF-Kwvuq6g_R8_cdGNA92k4bcwySPdrtYn2Z6LACbGQjFTWqwcSvgpqxkiYf4jLb_njoyF7WwZu0Uhc4t-z/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUwzXxfdyGN1g5scK1bmoZ220PRTF-gtJOmXOvPuzOZjeoUbyHQVj0gg3egEd7jzSKMx8pPFOg7_v0LSsM5VglH8m8LXL12B5xhJkrxDuXTdsGfO-5Gi_cmdXwFB2XclMM7UlHOtSYzYU/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xkf8zuFtmy7xER5qHvVkH5XrohbSINSYd8bL1_XlGJqh4ZUEJw3TRckA3lF-Kwvuq6g_R8_cdGNA92k4bcwySPdrtYn2Z6LACbGQjFTWqwcSvgpqxkiYf4jLb_njoyF7WwZu0Uhc4t-z/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xkf8zuFtmy7xER5qHvVkH5XrohbSINSYd8bL1_XlGJqh4ZUEJw3TRckA3lF-Kwvuq6g_R8_cdGNA92k4bcwySPdrtYn2Z6LACbGQjFTWqwcSvgpqxkiYf4jLb_njoyF7WwZu0Uhc4t-z/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUwzXxfdyGN1g5scK1bmoZ220PRTF-gtJOmXOvPuzOZjeoUbyHQVj0gg3egEd7jzSKMx8pPFOg7_v0LSsM5VglH8m8LXL12B5xhJkrxDuXTdsGfO-5Gi_cmdXwFB2XclMM7UlHOtSYzYU/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xkf8zuFtmy7xER5qHvVkH5XrohbSINSYd8bL1_XlGJqh4ZUEJw3TRckA3lF-Kwvuq6g_R8_cdGNA92k4bcwySPdrtYn2Z6LACbGQjFTWqwcSvgpqxkiYf4jLb_njoyF7WwZu0Uhc4t-z/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xkf8zuFtmy7xER5qHvVkH5XrohbSINSYd8bL1_XlGJqh4ZUEJw3TRckA3lF-Kwvuq6g_R8_cdGNA92k4bcwySPdrtYn2Z6LACbGQjFTWqwcSvgpqxkiYf4jLb_njoyF7WwZu0Uhc4t-z/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xkf8zuFtmy7xER5qHvVkH5XrohbSINSYd8bL1_XlGJqh4ZUEJw3TRckA3lF-Kwvuq6g_R8_cdGNA92k4bcwySPdrtYn2Z6LACbGQjFTWqwcSvgpqxkiYf4jLb_njoyF7WwZu0Uhc4t-z/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhShONuOwEmI3pqGunBsNMHS7gnvjkdPXQpdlXdGmWdwjZcFw_TsT6dvigSCC_N4QvYsWrcg28z81SL1gbO8PoYNLcukhyphenhyphenviKDreZufRa3QA402T5BTCMgyHfZjZmjpMEnN49bXKh9p8k4a/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKXjjRUqgVHfJnQihnkZeLorqlRWg2IFrjxwoglwRVAAacJ4NLQ3qO-yJT4j-FrG_y6zpmFuNrX2YJVTlgbD7bZHGmacueK0JSNhfJJUTvEQefWas_W0M25yVkryTT977fS6dCqKWEr2M1/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xkf8zuFtmy7xER5qHvVkH5XrohbSINSYd8bL1_XlGJqh4ZUEJw3TRckA3lF-Kwvuq6g_R8_cdGNA92k4bcwySPdrtYn2Z6LACbGQjFTWqwcSvgpqxkiYf4jLb_njoyF7WwZu0Uhc4t-z/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">
Receive all updates via Facebook. Just Click the Like Button Below<center>
<p style="line-height:3px;" >
▼</p>
</center>
</h3>
<center>
>>>>>>>>>>>>>> ADD YOUR FACEBOOK LIKE BOX CODE HERE >>>>>>>>>>>>>>>>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >
widget By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.techsoulz.com/">Techsoulz</a></p>
</div>
</div>

Note: Get your Facebook like box code CLICK HERE
Add the Like Box code in place of ">>>>>>>>>>>>> ADD YOUR FACEBOOK LIKE BOX CODE HERE >>>>>>>>>>>>>>>>" in above given code

Smart Wibiya Toolbar.

The Wibiya toolbar is one of the smartest widget for blogs which contains all social media buttons, RSS, Recent posts, Translate, Share, Online members etc..the toolbar is completely optimized it loads faster after your Template is completely loaded.

Get your Wibiya toolbar CLICK HERE

Floating social media buttons for blogger (Simple Code)

Floating social media buttons is the best SEO widget that makes your blog popular,if your readers want to Like, Tweet, or Share any Posts this widget helps them better.

Widget Code:

<table><tr>
<td style='position: fixed;top:7%; left:0%;'>
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:blog.url + "&amp;layout=box_count&amp;show_faces=false&amp;action=like&amp;font=arial&amp;colorscheme=light"' style='border:none; overflow:hidden; width:56px; height:65px;'/>
</td></tr>
<td style='position: fixed;top:19%; left:0%;'>
<div class='impbutton' id='yy'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</td>
<tr><td style='position: fixed;top:31%; left:0%;'>
<div class='g-plusone' data-size='tall'/>
</td></tr>
<tr><td style='position: fixed;top:43%; left:0%;'>
<div class='addthis_toolbox addthis_default_style '><a class='addthis_counter'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f45e0bd4d2fce85' type='text/javascript'/>
</td></tr>
</table>

You have to add the above code in your blog template Go to Template -> Edit Html -> Proceed. Press CTRL + F on your Keyboard and find this code <body> Now add the above Widget code just below this code <body>.Preview your template if everything is ok then save your template.

Smart Linkwithin (You might also like) Widget:

This is the most awesome widget for blogs.Below every post other 5 more posts are added with thumbnail it says "You Might Also Like", your blog traffic will be increased with this widget.

To add this widget Log in to your blogger account and go Here at your right side below you will find the widget options like Email, Blog link, Platform, width that is how many posts should be shown, press Get widget button and save it.

Smart Social media buttons for Posts

This widget gives you more likes, shares, Tweets for every posts.You can know whether your readers like a particular post.

Widget Code:

}
                    if (myPostContent.test(item))
                    {
                        var footer = container.childNodes[b];
                    }
                }
                var n = document.createElement('div');
                var at = "<div class='addthis_toolbox addthis_default_style ' addthis:title='"+title+"' addthis:url='"+encodeURI(url)+"'   > <a class='addthis_button_facebook_like' fb:like:layout='button_count'></a> <a class='addthis_button_tweet'></a> <a class='addthis_button_pinterest_pinit'></a> <a class='addthis_counter addthis_pill_style'></a> </div>
";
                n.innerHTML = at;
                container.insertBefore(n , footer);
            }
        }
    return true;
};

document.doAT('hentry');
</script>

Go to your blog Layout -> Add Gadget -> Select HTML/JAVASCRIPT and add the above code and save it and just put this Gadget above your Blog posts Gadget so that above every post social media buttons appear.

Floating Buttons (simple html code)

This floating buttons gives more attraction to your blog,you can add your own buttons and link to that button.

for example: see this code its a simple html code with Link and Image URL

<a href='http://www.techsoulz.forums.com/register' style='position: fixed;top:16%; right:0%;' target='blank'><img border='0' height='142' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj611BaRtzzednlDty6qKjDwz_tiki-nit28lKyP8RcRyORUBNALRwK8dWLLxC52pzcz0CNarxqcdnfD12RK-wj_XDqFuciJ9ItwyNfKOVUHbh47xeFq6Op75bet1DmuzQpcV5PsGvK16g/s170/button%25281%2529.jpeg' width='35'/></a>

You can change the image height, width, position etc..according to your wish.

Output of the above code:

To create Buttons on your own use this online button maker tool CLICK HERE.
you can save them in any format JPG,PNG etc..

CSS Code Compression (Importent)

This is the most Importent step because CSS codes will slow down your blog so you have to compress your blog CSS code.kindly observe your blog loading time Before and After the CSS Compression.

Now Go to your blogger Template -> Edit Html -> Proceed.Now your CSS CODE will be Between <b:skin> And </b:skin> codes in Template,Copy the whole CSS code and Go HERE Paste the CSS code in "Insert CSS code:" Box and click on "Compress it" Button,Now copy the compressed CSS CODE and Paste it in your blogger Template Between <b:skin> And </b:skin> codes,Preview your Blog if its OK then SAVE the template and check the loading Speed.Your Blog will load faster than Before.

By Techsoulz. Posted by Mohan Pendyala

TechSoulz

Friday 12 October 2012

How To Make Your Blog Smart - Fast Including All SEO Widgets By Techsoulz

Our Favorite Websites/Guides

Connect

Stay connected

Category

Product Comparisons

SMARTPHONES

TABLETS

LAPTOPS

CAMERAS

HEADPHONES

GAMES

COMPARE ALL

Games

GAME WALKTHROUGHS

Trending Tech

Total Pageviews

Links

Privacy Policy

Anonymous Proxy

Translate