Sunday 28 December 2014

couch mode print story

Add Slide out Facebook like Button to your Blogger Blog {WikiHow Like}

Learn How to Add Slide out Facebook like Button to your Blogger Blog {WikiHow Like}.Hi guys how are you. It’s a nice new year coming in some days. So from last couple of days I was working on this blog and testing some widgets on this blog. Some of those are ugly and some of those are very beautiful and impressive. So one of those awesome blogger widgets here I am giving you guys one today. So that you can get more Facebook fans for your blog.
Here I am talking about a beautiful and using Facebook like button which pop-ups in the lower-right side of your blogger blog. You may have already seen something like this on The Popular WikiHow.com.
The wikihow website shows a widget of write an article for us .when you complete reading an article on wikihow. So here is the screenshot of the widget which we see on the wikihow.Andyou can see the blogger version of this widget which includes the Facebook like box inthe first image.

To Add this Widget in your blog Follow the Steps:-
Step 1> Go to Blogger Dashboard
Step 2> Then Go to Layout
Step 3> Add Widget and Choose HTML/JavaScript
Step 4> Copy the code from Below and Paste it.
[After Pasting Do change the Red Market Facebook page ID with Your Facebook Page Id]
{And Please Do Not Remove the Credit (My Website Link)}

Here is the Codeing >>>
<div class="widget-content">
<style>
#scrollwig {
position: fixed;
right: -510px;
z-index: 4;
opacity:0.99;
width: 275px;
bottom: -300px;
}
#scroll_content{
border: 5px solid #FFF;
border-radius: 150px 150px 0 150px;
box-shadow: -3px 3px 4px #BFBFBF;
margin-bottom: 0;
}
#follow {
background-color: #FFF;
border:15px groove #F8DA39;
border-right: none;
border-bottom: none;
border-radius: 150px 150px 0 150px;
font-size: 0.9em;
height: 185px;
margin-bottom: 0;
padding: 40px;
text-align: center;
}
.text{margin:0 0 0 0}
.para1 {
font-size: 1.9rem;
font-weight: normal;
font-family: oswald;
padding-bottom: 0.1em;
margin: 0 0 0 0;
letter-spacing: 1px;
color: #47401A;
}
.para2 {
width: 120%;
margin: 0 0 0 -9%;
font-size: .8rem;
}
.fbfollow {
color: #3B5998;
font-size:1.3rem;
font-weight:bold
}
.googlefollow {
color: #D34836;
font-size:1.3rem;
font-weight:bold
}
</style>
<script>
mdfbw="MostUsefulTricks"
var _0xb6f0=["\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70","\x66\x61\x64\x65\x49\x6E","\x23\x73\x63\x72\x6F\x6C\x6C\x77\x69\x67","\x66\x61\x64\x65\x4F\x75\x74","\x73\x63\x72\x6F\x6C\x6C"];$(document)[_0xb6f0[4]](function (){var _0x6b02x1=$(this)[_0xb6f0[0]]();if(_0x6b02x1>1500){$(_0xb6f0[2])[_0xb6f0[1]]();} else {$(_0xb6f0[2])[_0xb6f0[3]]();} ;} );
var _0x7f48=["\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x6C\x69\x64\x65\x72\x62\x6F\x78\x5F\x30\x36\x27\x20\x69\x64\x3D\x27\x73\x63\x72\x6F\x6C\x6C\x77\x69\x67\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x72\x69\x67\x68\x74\x3A\x20\x30\x70\x78\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x30\x70\x78\x3B\x27\x3E","\x77\x72\x69\x74\x65","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x73\x63\x72\x6F\x6C\x6C\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x27\x3E","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x66\x6F\x6C\x6C\x6F\x77\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x74\x65\x78\x74\x27\x3E","\x3C\x70\x20\x63\x6C\x61\x73\x73\x3D\x27\x70\x61\x72\x61\x31\x27\x3E\x4C\x69\x6B\x65\x20\x55\x73\x20\x4F\x6E\x3C\x2F\x70\x3E","\x3C\x70\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x66\x62\x66\x6F\x6C\x6C\x6F\x77\x27\x3E\x46\x61\x63\x65\x62\x6F\x6F\x6B\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x70\x3E","\x3C\x62\x72\x2F\x3E","\x3C\x21\x2D\x2D\x20\x46\x62\x20\x42\x75\x74\x74\x6F\x6E\x20\x2D\x2D\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x66\x62\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x66\x6C\x6F\x61\x74\x3A\x6E\x6F\x6E\x65\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x72\x65\x6C\x61\x74\x69\x76\x65\x3B\x20\x6D\x61\x72\x67\x69\x6E\x3A\x30\x70\x78\x20\x30\x70\x78\x20\x30\x70\x78\x20\x36\x33\x70\x78\x27\x3E","\x3C\x69\x66\x72\x61\x6D\x65\x20\x73\x72\x63\x3D\x22\x2F\x2F\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F\x70\x6C\x75\x67\x69\x6E\x73\x2F\x6C\x69\x6B\x65\x2E\x70\x68\x70\x3F\x68\x72\x65\x66\x3D\x68\x74\x74\x70\x73\x25\x33\x41\x25\x32\x46\x25\x32\x46\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x25\x32\x46","\x26\x61\x6D\x70\x3B\x77\x69\x64\x74\x68\x26\x61\x6D\x70\x3B\x6C\x61\x79\x6F\x75\x74\x3D\x62\x6F\x78\x5F\x63\x6F\x75\x6E\x74\x26\x61\x6D\x70\x3B\x61\x63\x74\x69\x6F\x6E\x3D\x6C\x69\x6B\x65\x26\x61\x6D\x70\x3B\x73\x68\x6F\x77\x5F\x66\x61\x63\x65\x73\x3D\x66\x61\x6C\x73\x65\x26\x61\x6D\x70\x3B\x73\x68\x61\x72\x65\x3D\x66\x61\x6C\x73\x65\x26\x61\x6D\x70\x3B\x68\x65\x69\x67\x68\x74\x3D\x36\x35\x26\x61\x6D\x70\x3B\x61\x70\x70\x49\x64\x3D\x35\x34\x39\x35\x31\x30\x37\x38\x38\x34\x30\x33\x32\x31\x35\x22\x20\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67\x3D\x22\x6E\x6F\x22\x20\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x62\x6F\x72\x64\x65\x72\x3A\x6E\x6F\x6E\x65\x3B\x20\x6F\x76\x65\x72\x66\x6C\x6F\x77\x3A\x68\x69\x64\x64\x65\x6E\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x36\x35\x70\x78\x3B\x22\x20\x61\x6C\x6C\x6F\x77\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x63\x79\x3D\x22\x74\x72\x75\x65\x22\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x66\x6C\x6F\x61\x74\x3A\x20\x72\x69\x67\x68\x74\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x2E\x36\x35\x72\x65\x6D\x3B\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x33\x32\x33\x32\x33\x32\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x72\x69\x67\x68\x74\x3A\x20\x35\x70\x78\x3B","\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x30\x70\x78\x3B\x22\x3E\x42\x6C\x6F\x67\x67\x65\x72\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x61\x6B\x69\x6E\x67\x64\x69\x66\x66\x65\x72\x65\x6E\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x4D\x61\x6B\x69\x6E\x67\x20\x44\x69\x66\x66\x65\x72\x65\x6E\x74\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E"];document[_0x7f48[1]](_0x7f48[0]);document[_0x7f48[1]](_0x7f48[2]);document[_0x7f48[1]](_0x7f48[3]);document[_0x7f48[1]](_0x7f48[4]);document[_0x7f48[1]](_0x7f48[5]);document[_0x7f48[1]](_0x7f48[6]);document[_0x7f48[1]](_0x7f48[7]);document[_0x7f48[1]](_0x7f48[8]);document[_0x7f48[1]](_0x7f48[9]);document[_0x7f48[1]](_0x7f48[10]+mdfbw+_0x7f48[11]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[13]);document[_0x7f48[1]](_0x7f48[14]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[12]);
</script><div class="sliderbox_06" id="scrollwig" style="right: 0px; bottom: 0px; display: block;"><div id="scroll_content"><div id="follow"><div class="text"><p class="para1">Like Us On</p><p><span class="fbfollow">Facebook</span></p><br /><!-- Fb Button --><div class="fb" style="float:none;position:relative; margin:0px 0px 0px 63px"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FMostUsefulTricks&amp;width&amp;layout=box_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=65&amp;appId=549510788403215" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:65px;" allowtransparency="true"></iframe></div><div style="float: right;font-size: .65rem;color: #323232;position: absolute;right: 5px;bottom: 0px;">Blogger Widget by <a href="http://www.MostUsefulTricks.com/" target="_blank">Most Useful Tricks</a></div></div></div></div></div>
</div>
Conclusion
So I thing you guys will love this widget. Comment below and share your thoughts about the template.
One suggestion for you guys – “If your Blog has AdSense Ads on it then please take care of placing the ads .do make sure that the widget don’t appear just over AdSense ads”. Because then you will violate the AdSense ad policy and you can get banned by AdSense.
Also Make Comment if you have any problem, I would love to help you guys.

Saturday 6 December 2014

couch mode print story

How to Backup Your Blogger Blog

Learn how to backup yopu blogger blog.i think every blogger who is using blogger should know how to make backups of their blogs.so read this article and findout how to do this.
how to backup blogger blog
As a blogger we all understand the importance of blogs in our planet. To be on the safe side always try to make a backup of your blogger blog in every 1 week (at least). I will suggest you to save those backup files (basically .xml files) On Your computer and on an online backup or storage service (like Drop Box or Media fire). So that if you are on somewhere else rather than close to your computer and some bad thing happens to your blogger powered blog you can do it right at that moment.

So that should be enough thinking about the needs of doing backups. Now here is the how to part.
How to Backup your blogger blog.

Here is how >>
Step 1:- Go to your blogger blogs dashboard

Step 2:- Go to Settings
learn how to backup your blogger blog screenshot 1
Step 3:- After that go to other from the left floating orange colored menu
learn how to backup your blogger blog screenshot 2
Step 4:- Click on Export Blog
learn how to backup your blogger blog screenshot 3

Step 5:- Click on the Download Button
learn how to backup your blogger blog screenshot 4

And you are done. Now your blogger blog is safe.
learn how to backup your blogger blog screenshot 5


Please Do Comment.

Friday 21 November 2014

couch mode print story

Add Simple Social Networking ICONS to your blogger blog

Here is the most simple and classic looking Social Icons widget for you blog or website. If you are blogging for some time then you might understand the importance of using social icons in your blog, and if you are not an experience blogger and want to find out why it’s important then read any article which I have written ago.
You Can Read : - Add floating social sharing buttons to your Blogger Blog
For understanding why it’s important to use one in your blog.
So after you understand the importance of social icons let’s jump into the tutorial how to all the classic social icons widget to your blogger blog.

Here is the screenshot how the social icons widget looks like :>>
classic social networking icons for your blog
classic social networking icons for your blog

And Here How to add This In your blogger blog
Step 1:- Go to your blogs dashboard
Step 2:- Go to Layout
Step 3:- Add Widget, and Select HTML/JavaScript
Step 4:- Copy the Code Form below Change Green Marked Hashtags with Your Own URLs and Copy Paste the Entire Code In The

<div id="social">
<a href="#"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2qxr7l_O3ZD2A-W573spjjkpoFvvC31TmU3KVhvpLKdzz_j5F3_2_MiJvAl-gXxhkXRzlJ6OiZXqCjDxXES9IHq8TFpCIFMTPJqSzC13vSa5ceq7ZVQPLMGLYCWwUEFlHQMQI3j1Cr6zE/s1600/twitter.png" title="Twitter" /></a>
<a href="#"><img alt="Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwH0bVohNq2Sjnd9btaueqKj5Hlt-THtlgWSvm5n92pznkeKGC90eCC7xErYSEy2K8_yXnjoNagN8sRMza9wfa_hhG06low0KkGXQZcyp2wz9ViyxUP0SRUlcWLOvkDnxYTZafCSTm6D2C/s1600/rss.png" title="RSS" /></a>
<a href="#"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqucO_swF2VyC29kYsha0QzXKJurtGOswzax3QWy6Sfxy9h0Ey70Ju32UC8A68SxF9O1Q92ncIjwvnVsHNkfN01NWoIju4bYg5YC1QuAMCFhvS9gqqMNAs3nHZEwpG7QZpdZ8GoJWxd9rY/s1600/facebook.png" title="Facebook" /></a>
<a href="#"><img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXMxlnFQ2AqDc_HZ3-L-qgSU-hlq5fX7JTCX174N6lKuOI8P62x9DdyVlQSKvoYmhv-6-UAHmUBzfXpcvI9PusU1x5kyNMhuK4svzOhotbRqYlOfL1OuidajngEAeMjB9-DGMsM6iNNg-/s1600/google%252B.png" title="Google Plus" /></a>
<a href="#"><img alt="Youtube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp0ffibwtAwg62_hkmASqETR-x45i78C0jUvGZhHUFUF8O4P4iwGsWxeK11cxvJfUqfxk6ueadiS8qS5SHyoo1FjtFQveQKxtzdsPjFybkxuma9TD6iEKFiMhr-CpU2xzM6fAxlo5E8Kz4/s1600/you_tube.png" title="Youtube" /></a>
</div>

Step 5:- Click on Save, You are done.

Friday 14 November 2014

couch mode print story

Add a ShoutMeLoud Like Social Widget to Your Blogger Blog

Learn how to add ShoutMeLoud like Social Widget in your blogger blog. This is so simple as 1-2-3...

You may heard about ShoutMeLoud the Popular blog run by Harsh Agarwal {I would like to call it a Blogger Community }.harsh is of the top Indian pro blogger he is known for his awesome tip and tutorials on various stuff related to blogging , so basically he writes about is blogging.
So if you take a look at the site (ShoutMeLoud.com) you will see a good looking social sidebar on the right side of the sidebar. So today I’m going to show how you can add that good looking and professional social widget to your own blogger site.
I’m not going to write about the importance of social widget in your blog. We all know that it’s very important to have social account and followers.
So is the screenshot of this widget to show you how it looks: --

How TO add this in your blogger site :>>
Step 1 > Go to your blogger dashboard

Step 2> Go to Layout

Step 3> Click On Add Widget and Select HTML/JavaScript

Step 4> Copy the code form below and replace the red marked URLs with your URLs after that Paste It On HTML/JavaScript Box

<style type="text/css">
#mut-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #mut-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #mut-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #mut-subscribe-box .email-box {background:#e3edf4; padding:11px;}
        #mut-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #mut-subscribe-box .email-box .txt,#mut-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
        #mut-subscribe-box .email-box .btn,#mut-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
            #mut-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#mut-text {
background:#4376b1;
border: 1px solid #CCC;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:280px;
}
#mut-text h3 {
color:white;
border-bottom: 1px dotted
white;
line-height:1.385em;
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
#AAA;
font-wieght: normal;
text-transform: uppercase;
letter-spacing: 0;
font-family: Georgia,"Times New Roman",Times,serif;
}
</style>
<div class="mut_widget">
<div id="mut-text"><h3>Stay Connected</h3>
<div id="mut-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=MostUsefulTricks" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/MostUsefulTricks" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MostUsefulTricks', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
{this.value = &#39;&#39;;}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="MostUsefulTricks" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="btn" />
<div style="clear:both;"></div>
</form>
    </div>
    <div class="fb-like-box">
      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FMostUsefulTricks&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/MostUsefulTricks" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
    </div>
    <div class="gplusone">
<div style="float:left;width:90px;">
<g:plusone href="http://www.MostUsefulTricks.com"></g:plusone>
</div>
<a href="https://plus.google.com/+MostUsefulTricksBlog/posts" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle on Google+</a><div class="clear"></div>  
    </div>
    <div class="twitter-follow">
  <a href="https://twitter.com/MostUsefulTrick" class="twitter-follow-button">Follow @MostUsefulTrick</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>

Step 5> that’s it you are Done Click on Save

<<< Please Do Comment What You Think >>>

Friday 7 November 2014

couch mode print story

Add floating social sharing buttons to your Blogger Blog

In this tutorial i'm You Will Learn How to Add floating social sharing buttons yo your blogger blog or any kind of blog.
As we all know that social sharing is very important for any blog. You have to become socially popular if you want your blog to really stand out of the crowd.

I think some of you guys already using some social icons and widgets for your blogs. As I have already written a post about an awesome and beautiful Social Sharing Widget that also has email subscription button.

You can read it here: - All in one Email Subscription Box with Social Icons for blogger blogs

Why You Should Use this: >>

But with that widget you should also use this one which I’m sharing now. Because this will ensure the maximum social sharing of your blog. Maximum Social Sharing means maximum page views which gives you maximum profit. Another reason for using this widget instead many other widget that are available online is – installing this in your blog is very simple it takes only 1 or 2 minutes or less to use this in your blog. Because this the codes are only a line in length. And there are two types of floating social sharing box which are available on is Horizontal and one is Vertical.
horizontal sharebutton
vertical sharebutton
vertical sharebutton

Today I'm sharing information about a really awesome and simple trick that will add cool and simple floating social sharing bar to your blogger or any kind of blog. But before that here is a screenshot of the floating social sharing bar which I’m talking about.

How to install this in your blog
Step 1: - go to blogger dashboard
Step 2:- Go to layout
Step 3:- add widget
Step 4: - choose HTML or JavaScript
Step 5:- Copy the code below and paste in in that box. As there are two options available (Horizontal and Vertical) you chose which one do you want to use.

Code For Vertical >>
<script src="//sharebutton.net/plugin/sharebutton.vertical.js"></script>

Code For Horizontal >>
<script src="//sharebutton.net/plugin/sharebutton.horizontal.js"></script>

Step6 :- Save It.
That’s it everything is done.

Sunday 2 November 2014

couch mode print story

Create Good looking Sitemap Page for Your Blogger Blog {Video}

Learn How to create a cool and well-designed site-map to your blogger blog. I’m currently using this for my own blog and I think you should also give a try.
good looking sitemap page for your blogger blog

We all should use sitemap page in our blogs. If you are using WordPress then there are some plug-ins and other ways to create some beautiful and well-designed site maps for your blog, but when we talk about blogger we do need to create our site maps manually as there are no plug-in or something like that.

Why you should create a sitemap for your blogger blog
Creating a sitemap for your blogger blog is very important because it gives your audience a cool and well managed view of your blogs content in the sitemap page of your blog, audiences can browse articles of your blog by labels.
So the main reason of creating a sitemap page for your blog is because it will make your blog more professional and I think it will also help you to incase your blogs traffic.

What is the difference between Sitemap for Humans and Sitemap for Sitemap for Search Engines?
I think there are two kind of sitemaps in the web. When one sitemap is for real humans then the other one is dedicated to Robots (Search Engine Bots) .Unlike other sitemap here I’m showing you guys how to create a sitemap page for humans (your real audience) and not for search engines. Because search engines doesn't need any good looking site map they just need a piece of information about your content no matter in which format it is in. also if you're using BlogSpot platform then you do not need to create any Sitemap for Robots Manually they all are automatically crates by the blogger system.

You can see a sitemap that is created for search engines.
sitemap for robots and search engines

And here is the screenshot of sitemap page which I’m talking about.
sitemap for humans

How to create this good looking Sitemap for your blogger site: -
It is very easy you just need to follow some simple steps for doing this.
Step 1 : > go to your blogs dashboard
Step 2 :> pages
Step 3 :> create new page
Step 4 :> go to HTML
Step 5 :> Copy the code from below and paste the entire code in that HTML box.
{Don’t forget to change the red colored URL with your sites URL}

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<br />
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://toalroo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
</div>

Step 6: - Publish


Friday 31 October 2014

couch mode print story

All in one Email Subscription Box with Social Icons for blogger blogs

Here is an all in one email subscription box with social icons built in for blogger blogs.
When you’re blogging the most important thing is building audience for you blogs. One of the best way to build audience is adding an email subscription box and social sharing buttons to your blog. So that people who come to your blog can find your social pages (which you have already created for your blog).
You may have seen that popular bloggers have a huge list of social subscription. And you may be surprise to know that 80% of people who have subscribed to you blogs feed is your permanent or royal reader. So increasing list of Subscribers will also increase your blogs traffic.
Here is a great custom Email Subscription Box with Social Icons for Blogger which I have created. You can check the outlook below in the image……
All in one Email Subscription Box with Social Icons for blogger blogs

Why you need to have this box in your blog
As I have already said that using this will increase your blogs traffic.
This will covert you blogs readers to royal readers
Make you blog look good.
This will increase your earning as it will increase your blogs page views

How to add this in your blogger blog >>>>

Adding this box is very simple all you need to do is go to blogger dashboard>Layout>Add Widget>HTML/JavaScript
Then copy the code from below and change my urls with your ones (colored in red) and then paste it on that box. And after that click on save.

Here is the Codes: -

<style>
#sidebar-subscribe-box{width:290px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url() repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4dFoKlkGhYvdnwe2LDZ-pCsXbMWQ5_KNkJfN-RCi6dgfZoB9BxjL6fzZDDXPQ_FvpkQReTFerd1aDOUbF5NNSfhIK0A4XEIfB_aVDUXgIWWtrGGNnofl04Dk_eycY-daBJN75cC4bgc/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/toalroo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovcIcFi70qVOnxFiwvzckrUkjh8Tyg1859Naab7ni_-aBV7ZWoZ1vkPN8grLQgumMw919p89rirGtYqXrB3SLdOAqs74nEsu0NSy8KTalaHp920-VIcMte8KX1z3RiMpF4M4wQUzjCck/h120/facebook-icon.png" /></a>
<a class="social-icons" href="https://Pinterest.com/sagarbasak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCQ0-4AxyeCu0mtA60r1mNXy3MBLNrcNh8488TWn5hRW6mJW5AtL9HohclAB8ed6HxHBpCgvzWK92wxc3tHegotkUf_jSdRPzNvTM7r8k2gWnCdETTjgKEYlyUtCY-Kd8fA9UVVEkzwY/h120/pinterest-icon.png" /></a>
<a class="social-icons" href="https://twitter.com/SagarBasak10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44IFdwyXEPrbQ2mQxvg2yihHaUlCXdLALESICCJ9_M3y8bc6b0zzxpk-7nFwI6F_j2yjV9YzB7SyABuWuBjrSC_CBVnSByywHpohHXlbPGtjyNbBNlSskXJZrJigaOveSROUszO1QIlg/h120/twitter-icon.png" /></a>
<a class="social-icons" href="https://plus.google.com/115378133162287561777"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqDhN8VX2XG43p_nWAZcDowPKDt5se_jMm8Mo0bIJxfxU1PiWaxq4GsOo-2kt55WfzdVtyPelg-TAzUw73h76AX7wGUz3FGz599VFDKuiKigo1Pp5DqPINWAF9gKONWX5Nngbhac7j1s/h120/google-plus-icon.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/MostUsefulTricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6uGAVaYwPvnEMeVe4JEW31PqcQT-8WuQRK_-_W0Pxo9pgzKK84_tEV2DhWOrNb5OkLlPPlNb8Tr4229HsdxSd6QogOj1eUKSILai6jmZJFOaNId9Hi3Al14CQ6vmAjvRTkznm2heZZUc/h120/rss-icon.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=MostUsefulTricks" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= MostUsefulTricks ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value=" MostUsefulTricks " />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>

Thursday 30 October 2014

couch mode print story

A Beautiful And Useful Blogger Featured Post Widget With Thumbnails

Here I am sharing a beautiful deign or way to show your featured posts to our audiences. Showing featured post is very important as it will increase your blogs traffic in the sky. Also showing beautiful things are very important so here I have created a sum of Beautiful and Useful Blogger Widget Which Will Show Your Blogs featured or special content to your audiences.

You can see the screenshot of this widget below.
Beautiful Blogger featured posts
Screenshot Beautiful Blogger featured posts


How To Add This To Your Blogger Blog
step1 : - 
in step 1 we are adding the CSS Styling to our blogger template.
at first copy the code below and add it on your blogger templates.
step: Go to blogger dashboard > Template >Edit HTML > find for (CTRL+F)  ]]></b:skin>
after that cody the code below and add just before ]]></b:skin>

Here Is the code >>

/*----------- Labnol Like Stuff Gallery -----------------*/
/*-----------MostUsefulTricks.com--------------------*/
/*-----------labnollikestuff.blogspot.com-------------*/
#labnollikestuffboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#labnollikestuffboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#labnollikestuffboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#labnollikestuffboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#labnollikestuffboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#labnollikestuffboxes img:hover{border: 1px solid #c5c5c5; }
.labnollikestuffbody img{float:left}
.labnollikestuffbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.labnollikestuffbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.labnollikestuffbody h3 a:link,.labnollikestuffbody h3 a:visited{color:#2F97FF;}
.labnollikestuffbody h3 a:hover{color:#c5c5c5}
.labnollikestuffbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
step 2:-
next you need to add all your links in your blogger blog.Go to Design >> Add a Gadget >> HTML/JavaScript. Now simply add the following code in that widget:

<div id='labnollikestuffboxes'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>
<ul>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 1 LINK HERE'>
<img height='100' src='POST 1 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK HERE'>POST 1 DESCRIPTION</a></h3>
<p>POST 1 PARAGRAPH</p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 2 LINK HERE'>
<img height='100' src='POST 2 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK HERE'>POST 2 DESCRIPTION</a></h3>
<p>POST 2 PARAGRAPH </p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 3 LINK HERE'>
<img height='100' src='POST 3 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK HERE'>POST 3 DESCRIPTION</a></h3>
<p>POST 3 PARAGRAPH</p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 4 LINK HERE' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK HERE' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK HERE' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
<p>POST 4 PARAGRAPH</p>
</div>
</li>
<li>
<div class='labnollikestuffbody'>
<a class='Fadein3' href='POST 5 LINK HERE'>
<img height='100' src='POST 5 IMG LINK HERE ' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK HERE'>POST 5 DESCRIPTION</a></h3>
<p>POST 5 PARAGRAPH</p>
</div>
</li>
</ul>
</div>
</div>

Conclusion
Before Adding this code to your blog change the colored links with your ones.for post Paragraph do not use more than 15 words.and try to write post Description in 10 Words.

Sunday 26 October 2014

couch mode print story

Labnol like Facebook like box for your Blogger Blog or any kind of website

Here you can get the codes of labnol like Facebook like box for your blogspot blog or any other website. If you have a website then this is a must have element for your site. After a long work I created this thing so here I am posting this for you guys.
Screenshot of Labnol like Facebook like box
Screenshot of Labnol like Facebook like box

As I already know that most of the visitors who will visits this blog are blogger and websites owners, I don’t need to introduce Mr. Amit Agarwal, the blogging legend. He and his sites (labnol.org, ctrlq.org and etc.) they all are awesome. If you have visited his site you may have seen that the design of that sites Facebook like box is very awesome so today I thing that that is something that many guys will want to use.so here is the code for that awesome looking Facebook like box. To get started, copy the code below and paste it anywhere inside your website template. Change the URL (colored in red) to point to your own Facebook page and you're done.

Here Is the Coding Stuff >>

<style>.MostUsefulTricksFB{
width:320px;height:150px;border-radius:3px;position:relative;background-color:#f4f4f4;padding:5px 10px 15px 0;max-width:96%}.MostUsefulTricksFB,.MostUsefulTricksFB:before,.MostUsefulTricksFB:after{background:#f4f4f4;border:1px solid #ccc}.MostUsefulTricksFB:before,.MostUsefulTricksFB:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.MostUsefulTricksFB:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ccc}
</style>
<div class="MostUsefulTricksFB">
<div style="height:160px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/YourPage" data-width="340" data-height="189" data-show-faces="true" data-show-border="false" data-stream="false" data-header="false">
</fb:like-box>
</div>
</div>
<div id="fb-root">
</div><span style='font-size:11px;position:absolute;'>
<a href='http://www.MostUsefulTricks.com/' target='_blank' title='Blogger Widget by Most Useful Tricks'>Blogger Widgets</a>
</span>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=549510788403215";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

How to Add this in Your Blogger Blog

Step1: go to your blogger blogs dashboard
Step2: go to layout
Step3: add a gadget and then choose HTML or JavaScript
Step4: Copy the code from my website give change YourPage to your Actual Page URL and Paste It
Step5: Save It
You Have Done It.

Conclusion : >>

This box is recommended for very body out there. But honestly if I say then one bad news is “the loading time of this Facebook like box” is pretty high. That means it will increase your sites loading speed. About 1-2 seconds. But I don’t think it matters very much as we all do blogging for our position. Please comment if you need any help regarding this code or the like box. The entire code is pretty short but please don’t edit it.

Labnol Like Facebook Like Box
Reviewed by Sagar Basak on Oct 26 2014
Rating: 3.9