08/08/13 | PreToPro Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<i><br /></i>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTiC1LxhR4cEEzn2hSJKzIwh76YYdnrM4eIHDvDH-Ct1V5iixmOE4-905Bd1za4ouh2xEmwqRXnDSy0PvPJvTN8gicjlrn8AAWKIneBCsgdJtIaGev0PZ198BopSM6V8mSpiXd1hA_SzL/s1600/load+more+post+infinite+scrolling+in+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTiC1LxhR4cEEzn2hSJKzIwh76YYdnrM4eIHDvDH-Ct1V5iixmOE4-905Bd1za4ouh2xEmwqRXnDSy0PvPJvTN8gicjlrn8AAWKIneBCsgdJtIaGev0PZ198BopSM6V8mSpiXd1hA_SzL/s400/load+more+post+infinite+scrolling+in+blogger.jpg" width="400" /></a></div>
<i><br /></i>
<i><br /></i>
<i>Infinite scrolling refers to loading contents of blog without actually refreshing the blog page. When the user scrolls down the blog older posts are loaded. It is a very good method to decrease your blog bounce rate as the visitor does not have to leave the page. </i><br />
<i><br /></i>
<b><a href="http://flatui.blogspot.in/" target="_blank">View Infinite Scrolling Demo :</a></b> <a href="http://flatui.blogspot.in/">http://flatui.blogspot.in/</a><br />
<br />
Here are the steps for adding a code in blogger for infinite scrolling:<br />
<br />
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Go to your <b style="box-sizing: border-box;">blogger dashboard</b></span></span></li>
</ul>
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Select your blogger blog</span></li>
</ul>
<ul style="background-color: white; box-sizing: border-box; color: #333333; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Click on <b style="box-sizing: border-box;">Layout </b>from Drop Down menu (<b>shown in picture</b>)</span></li>
</ul>
<div>
<br /></div>
<div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;">
<div style="text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" width="400" /></span></a></div>
</div>
<span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span>
<br />
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">A new Window appear</span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Click on <b style="box-sizing: border-box;">Add gadget</b></span></span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">And select <b style="box-sizing: border-box;">HTML/JavaScript</b></span></span></li>
</ul>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b style="box-sizing: border-box;">(shown in picture)</b></span></span></li>
</ul>
<span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;">   </b></span></span><br />
<div style="text-align: center;">
<span style="font-family: inherit;"><span style="box-sizing: border-box;"><b style="box-sizing: border-box; line-height: 18px;"><b style="box-sizing: border-box;"><a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></b></b></span></span></div>
<span style="font-family: inherit;"><b style="box-sizing: border-box; line-height: 18px;"></b></span><span style="font-family: inherit;"><br style="box-sizing: border-box;" /></span>
<br />
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
<div>
<br /></div>
<div style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out;">
<div style="text-align: center;">
<a class="pirobox" data-pirobox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="-webkit-transition: all 0.4s ease-in-out; box-sizing: border-box; color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none; transition: all 0.4s ease-in-out;"><span style="box-sizing: border-box;"><img alt="http://pretoproblogger.blogspot.com" border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; box-sizing: border-box; height: auto; max-width: 100%; padding: 1px; position: relative; transition: all 0.4s ease-in-out;" title="http://pretoproblogger.blogspot.com" width="400" /></span></a></div>
</div>
<ul style="box-sizing: border-box; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="box-sizing: border-box; margin: 0px 0px 0.25em; padding: 0px;"><span style="box-sizing: border-box;">Now <b style="box-sizing: border-box;">paste the following code to add the Infinite Scrolling Feature</b> on your blog.</span></li>
</ul>
<div>
<br />
<blockquote class="tr_bq">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><br />
<script type='text/javascript'><br />
(function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");<br />
window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();150>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=<br />
a('<a href="javascript:;">Load more posts</a>');c.click(h);var e=a('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkzEjjWCL-sMidgVLjbzbO267XlJw1meYUzcHiy5lssehE3Ih3ZZT9OcMPgwjHd-ING1AA1idxjRDST9BrgaOJXTlNYekHzzow3L0T_b2kyliOyH7dYoSnSk4tODjQVAn4ywbDMIhUavi/s32/ajax-loader.gif" style="display: none;">');f.scroll(k);b=a('<div style="text-align: center; font-size: 150%;"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);<br />
 </script></blockquote>
</div>
<div>
<br />
<ul style="text-align: left;">
<li>Leave the widget title blank.</li>
</ul>
<ul style="text-align: left;">
<li>Click <b>save</b></li>
</ul>
</div>
<div>
<span style="line-height: 22px;"><i>You are done now.</i></span></div>
<br />
<br /></div>

How To Add Infinite Scrolling in Blogger

Infinite scrolling refers to loading contents of blog without actually refreshing the blog page. When the user scrolls down the blog o...

<div dir="ltr" style="text-align: left;" trbidi="on">
<i><br /></i>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4NuKS6Khzkyb3wsYDZtc3l29ZKksPWVtt5MmyVgqRrzQlrZrJvDeoZuu0vvzRXiFELvj6hVO3IG-rMeDjEX8aH0XkVirQHt8cqHKqxZ1-MjPx7ohH9gDGvP7qR7KDbiGFH0zEjbfZp0Z/s1600/blog+layout.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Deciding A Blog Layout - http://pretoproblogger.blogspot.com" border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4NuKS6Khzkyb3wsYDZtc3l29ZKksPWVtt5MmyVgqRrzQlrZrJvDeoZuu0vvzRXiFELvj6hVO3IG-rMeDjEX8aH0XkVirQHt8cqHKqxZ1-MjPx7ohH9gDGvP7qR7KDbiGFH0zEjbfZp0Z/s400/blog+layout.jpg" title="Deciding A Blog Layout - http://pretoproblogger.blogspot.com" width="400" /></a></div>
<i><br /></i>
<i><br /></i>
<i>Many Bloggers don't pay attention to their layout. Almost every new blogger just creates a blog and selects a default template or get some template from other free or paid template providing websites. But the most important thing that they do not pay attention to is : <b>Layout. </b>Some who pay attention to the layout select or design the layout that they like. But what about the visitors? After all every blogger make content for its visitors. So, how to understand which layout visitors prefer more? Here are few tips that may help you to select your layout:</i><br />
<br />
<h3 style="text-align: left;">
What should be the size?</h3>
<br />
Nearly 70% of internet users have big screen of resolution of either 1024x768(most), 1280x800, or 1280x1024. So, you could select a layout that looks good in big screen with high resolutions but do not forget the rest 30% visitors with small screen and low resolutions. Because every visitor is important. So select a layout that does not have horizontal scroll. Visitors hate to scroll horizontally.<br />
<br />
<h3 style="text-align: left;">
Which alignment to choose?</h3>
<br />
As you have seen that most users use big screen. So, in my opinion you should use center aligned layout. Not only it looks great in big screens but also makes your layout more adjustable.<br />
<br />
<h3 style="text-align: left;">
How much columns to choose?</h3>
<br />
Choose either a 2 or 3 columns layout. And it would be better if you keep the sidebars on the right because visitors look for menu items and other action items Make sure that your post content is not thinner than the sidebar(s).<br />
<br />
<h3 style="text-align: left;">
Outline Blocks or not?</h3>
<br />
Test shows that outlining your blocks (For Example: Social bookmarks, forms, blogrolls, categories, etc) is better.<br />
<br />
<h3 style="text-align: left;">
Also Read: <i><a href="http://pretoproblogger.blogspot.in/2013/07/blog-design-and-content-guidelines.html" target="_blank">Blog Design And Content Guidelines</a></i></h3>
<br />
<br /></div>

Deciding a Layout for your Blog

Many Bloggers don't pay attention to their layout. Almost every new blogger just creates a blog and selects a default template or...

Advertise Here

How To Add Infinite Scrolling in Blogger

Deciding a Layout for your Blog

Get FREE updates on your Email | RSS

Popular Posts

Comments

Blog Archive