WHAT IS THE RIGHT LAYOUT FOR YOUR BLOG?

Right structure or layout is important for any blog or site. On my blog I have a three-column layout. But the site is still just one column. I don’t necessarily mind a three column layout as long as it remains clean & streamlined. but, if it gets too busy then it won’t be a pleasant experience. And, making your blog pleasing to the eye is one of the keys to keeping your readers engaged and coming back.

Here I am presenting some correct layout:-

One column layout

There isn’t a lot of variation for a one column layout, the content is front and center.

Two column layout

The two column layout can be displayed like the image above content/sidebar. And, you could also switch it up and go sidebar/content. Which ever fits your flow is going to be the best decision.

Three column layout

The three column layout offers the most flexibility, but like I mentioned before be careful the “look” of your blog doesn’t get too busy or overwhelming. The image above is set up as sidebar/content/sidebar, but you could also do content/sidebar/sidebar, or sidebar/sidebar/content.

You could also separate out the footer into two or three columns to add more room for widgets. And, you could also swap the menu & header areas.

Read More

How to Remove Blogger Navigation Bar (Navbar)

Blogger show a navigation bar by default at the top of every blogger blog. It’s called navbar (Navigation Bar). Navigation is not bed it may be useful. But sometime we need to remove this navbar because it does not look professional. The Blogger navbar is mostly hidden in in third party blogger templates. Now i will show you that How to Remove Blogger Navigation Bar (Navbar). Just follow the instruction.

There are some advantages of Navbar:-
When you click on the B icon, it will take you to blogger.com
a quick link to your Dashboard and "Sign in /Sign out" dialog
You can easily search for other blogs
Next Blog - takes you to a random, recently-updated Blogger blog

The disadvantage of navbar is If you have customized design, Navbar doesn't adjust with design for looking wise.

Process:-

1. Hiding of Navigation Bar is very easy. You have to add small CSS code in your blogger template.

2. Go to your Blogger dashboard

3. Click on > Template >Edit HTML

4. Now find “]]></b:skin>” and just before this code pase above given CSS.

5. Now save your Template and refresh your blog and see blogger navbar has been removed. 

Add below given CSS in your blogger template:-

#navbar-iframe { display: none !important; }

Finally, Problem solved!

Now you can Remove Blogger Navigation Bar (Navbar)

Congratulations!

If there any problem, don't hesitate to contact me

Read More

How to change mouse cursor pointer in blogger

Change mouse cursor in blogger blog with fancy or cut cursor. You can use animated cursor according to your blogger design. Change your pointer with your favorite image to make your blog more stylish. It’s very easy to change mouse point in blogger or BlogSpot blog. Many blogger ask this question how to use custom mouse pointer in blogger blog. So today am writing this post to guide all my blog reader. Customize your blog by changing mouse cursor. Now i will show you that How to change mouse cursor pointer in blogger. Just follow the instruction.

Process:-
1. Login to your blogger Account
2. Select your Blog.
3. Click Template
4. After this Click to Edit HTML option.
5. Now Find “]]></b:skin>”Code By pressing Ctrl+F.
6. Now exactly before it, add the below any Cursor Design Code which you like.
7. Now Click Save Template Button.


Some Cursor Design is Given Which you like Copy Code and past It Before]]></b:skin>

Design 1:-

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJbC_5cekLIt-38KQdVX5cAwmGQeIjocPZRHwpexzeHuQGr3QBBWx-MQu-U-pWB3-4IcpwCfR7RTStVXc2lsRd9PSL9zq4p_opONQ-GUqI1fJoF5OdJS8lnFOywzwjfuqiDpViPNWBWo/s50/cursor%2520%25281%2529.png),progress;}

Design 2:-

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiMgwvEW85wl-aZqeXn0Wko_aTJrkkHup2Ai1a6gyV39OpnoXqG4DKjxjmQWH75ohJwX65ynoIXH-FVA6kRPtr-MvzI5VIemvLAOwOI5_BcdbEwcmTWydTrXfM7je3zBbmP-YNSVpgECY/s32/cursor%2520%25282%2529.png),progress;}

Design 3:-

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHxJqqL1NcvRDWVeEs5YKmXqt0VSDYYFIKB1aluD16GLl5FbDxSwFZa5ZWHtheZe6WaTU7gi0hO4pf07ZGjBqBenNJi5KmloYYuj0QfkVJtsAkedBm6hvXw6z8mnfc7qBC0aBfHsfRLk/s50/cursor.png),progress;}

Design 4:-

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5odhyphenhyphen25y9i10fvTxTfh0djKW1RCKxhcRqV0gNY69LmkoPt6McE8lSRO6r-R4KrRE_IevEXqWuGBXTL6RjCiH_vVkG9umG3A_b1W3aGuWSiKk_G-0z8FLiCyxpuwhBrUI9P0IMQ-a6pk8/s45/custom%2520cursor.png),progress;}

Design 5:-

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJmvbwHs58_rS9O7T2IkBm9UZIKHAAOsQZpeJt7dRJMJxLRDqiuSBuB96qVeprwJrHREpXLBDdeZXLCFyStdEgAPBTFY69LEj59I7WTOEBdAa0uFyyrf4MrxQoEI1wUPoAe1-u78b3FQ/s49/cursor%2520%25283%2529.png),progress;}

Design 6:-

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_3f42hENlbvjFn_S_VYej-fLhOksAHceLC4-YWQgi96Fntqp6zgPMiYyLVBgYCxyX-t3cLrP67Z0NcayXmVpky0WOkQ3RcFYwGdqaXZ90nemGMPvbEVvZIURcdUq8jO3SOT2425kO3WM/s44/custom%2520cursor%25201.png),progress;}

Design 7:-

body, a, a:hover {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEfGy7QvZtriViXH_jiFcssXrJUrZgQbwfk0_7TV3n5EJwMBv5h4KhBhlckj7U41XwXH2qVfCb_WexFw7jwIZWk9zM8pG2RwTHKrtRgQVmPjTI1mmmDPIee148-9dfWQuGcTRATO2nEGc/s30/Custom%2520cursor%25202.png),progress;}

Finally, Problem solved!
Now you can change mouse cursor pointer in blogger
Congratulations!
If there any problem, don't hesitate to contact me

Read More

How to Add Back To Top Button in Blogger With Smooth Scrolling

It is the time to forget old way pressing scrolling button for go to the top of the page and it’s take long time to reach to top of the page. Just add a new smooth back to top button. It’s very cool widget for blogger. Suppose your webpage is very long and user wants to go in the top of the page. In that case it’s a best way to adding a smooth scrolling button for again go to the top.Now i will show you that how to Add Back To Top Button in Blogger With Smooth Scrolling. Just follow the instruction.

Process:-
1. Go to Blogger
2. Take Backup of your Blog Template
3. Go to Template > Edit HTML > search for the <head>
4. just below/after the <head> tag place this bit of code: and save template 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

note: you may already have a jquery script in your blog’s template, if you are using Jquery Script on your blog then skip process no. #3 and #4

5. Now go to Layout > click Add a Gadget > select an HTML/Javascript
6. Copy and paste the code below into the content section.

<!--Smooth Back to Top Button Start--> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; font-size: 12px; padding: 1em; display: none; } .back-to-top:hover { text-decoration: none; } </style> <a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUm2T0QDjRfJGqUpgjPEpGxO-Cm9iUnwew8QKyt8v7ihFaosGtle6ywst2J95eSh6ODshLfYdAxAAoTV4jMDFbzPxI48fMDuChF8DPHPoZj2GVxLLKBo71ESnelu0XLnocIO7gdCY6lzKb/s1600/backtotop.png" alt="Back to Top" / ></a> <!--Smooth Back to Top Button End-->

7. Now save.

note: You can change the Back To Top button by replacing the Image URL which is at the end of the code

Here some Image URL with different Back To Top button:-

http://www.carrieloves.com/wp-content/uploads/2015/02/back-to-top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGkzv_0zhroWQgbIiqo_BIdXR5EW7X8gbCJqx49TdrynT47hVGfQy4VCxJ81ftWIQ5GE3G0P2vu3vNDGcPnCBKWDbH5RPP1Jj-3aPfX4zlFRhyWYJaUDhH6l9fW0v_WWlujfId4s9WPWd_/s1600/back+to+top+.png

Finally, Problem solved!

Now you can Add Back To Top Button in Blogger With Smooth Scrolling.

Congratulations!

If there any problem, don't hesitate to contact me

Read More

How to Add code box area in Blogger

Did you ever wondered how to add code boxes on your blogger post? There are two ways, one is a simple method which is best suited for beginners (like me) and the other is the advanced method which gives your code box a more professional look but requires a little source tweaking. But here i am shearing the 1st method that is quite easy to apply. Basically code box separate the HTML code from the other text. It seems nice and easy to understand the code. Now i will show you that How to Add code box area in Blogger. Just follow the instruction.

Process:-
1. From blog post click on HTML

2. Now copy & paste the following code
<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">
YOUR CODE
</textarea>
3. Now save and view.

YOUR CODE

note: the code box will appear like the above
Just replace your html code with YOUR CODE
You can also increase the row number by change it.

Finally, Problem solved!

Now you can Add code box area in Blogger.

Congratulations!

If there any problem, don't hesitate to contact me

Read More