How to Add Load More Posts OR Infinite Scrolling to Blogger

Today I will explain you how to create WordPress kind infinite post loading (scrolling) effect on Blogger. This script is originally created by Simplex Design. Infinite scrolling for blog posts in very charming effect with lite loading effect. I’d first saw this effect on my WordPress.com blog from that time I am desiring this effect for Blogger. If you are not able to understand this effect then you should go to you Facebook wall then scroll down page. There you’ll see the auto loading of old wall entries, this effect is called infinite scrolling until it gets your very first post. In my article I am just changing Blogger pageType tag to make your blog faster and responsive against this script. The main benefit using my version will be you’ll able to load infinite scrolling on home page, archive page and search page while this script will not load on your item page and static pages i.e. blog posts and pages. This means your blog will be more responsive and fast.
If you want to understand this infinite scrolling effect on Blogger. You can see the picture below below. In this picture first page show the default page navigation and second one shows the loading of more post on home and archive page when someone scroll down on your blog this means he or she should not require to navigate by click on page numbers or next post – previous post.
Please Note that, This script will work only on default Blogger templates or less customized templates.

Installing infinite post loading script for Blogger

1. Go to Blogger Dashboard › Select Blog › Template tab › Edit HTML
2. Now search for </head> in your template
3. And paste following code on just above </head>
<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='' type='text/javascript'></script>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: ''
});
</script>
</b:if>
4. If you’re using latest jQuery script you can remove the jQuery code from above code highlighted in red. You should download and upload these files in your own Dropbox or Google Project or Code which are highlighted in green and orange color.
5. Now Save this script (code) in your template
6. Go to your blog’s home page and see the script in action.
If script does not work please reload the complete page.

Customize contact form of Blogger

Customize contact form of Blogger:

Follow the Easy 2 steps below:

Step 1: Add contact form gadget

a) Go to blogger Layout
b) Click on any Add a Gadget link. An Add a Gadget window will be shown, click on More Gadgets, and choose add Contact Form.
On Configure Contact Form Widget window, click Save button.
After added Contact form gadget, please drag and drop it below Blog Posts gadget, then click Save arrangement button.

Step 2: Hide contact form widget

Access your blog Template, and click Edit HTML. In HTML editor, find 

]]></b:skin>
Then, insert before with the code 

.widget.ContactForm {
 display: none;
 }

Step 3: Make contact page

Access Page, then create a blank page with a name mean "Contact" or any text you want.
In page editor, switch to HTML mode and paste the below code into content field 

<style type="text/css">
 .widget.ContactForm {
 display: block;
 }
 .post-footer {
 display: none;
 }
 #blog-pager {
 display: none;
 }
 .blog-feeds {
 display: none;
 }
 .widget.ContactForm .title {
 display: none;
 }
 .widget.ContactForm * {
 max-width: 100%;
 }
 </style>
Then Publish the page.
That's it, it's done now.

How to Create a Great About Us Page?

7 Points to create a great About us page:

1) Your customers are mainly concerned with their needs and what your brand can do to address those needs, not necessarily on how you got started or where you’re from. That’s why you need to have a customer-oriented page that talks about the challenges your audience faces. Acknowledge the reason they are visiting your site and talk about how and why you’ll meet each and every one of their needs.

2) Utilize testimonials (remember to use names/pictures) are an easy, great way to give your brand credibility. Be sure to mention awards or accreditation you've received and ask the reader to leave comments or reach out for more information.

3) Customers like to see things that please the eye. This is why you should have clean graphics, videos, info graphics and more to keep the customer entertained and their experience visually pleasant. The longer you capture their attention, the better the chance of success. 

4) Everyone loves a good story. Focus on the things that make you normal , as well as the things that make you special. Don’t forget to include lots of photos! Customers like being able to put a face to a name, especially if their only interaction with you is by phone or email.

5) Your customers need a way to contact you. Providing a phone number and email where they can reach you is a must. Always make sure your info is up to date and include things like social media information so they can interact with you in as many ways as possible. 

6) Using a few technical terms here and there is fine but don’t get bogged down using confusing terms. Writing simply and conversationally is the best way to go. Confused customers are not happy customers and are less likely to return to the site, let alone become a loyal user. 

7) Keep the theme consistent with the rest of your website and don’t rely too much on overbearing visuals or graphics. Maintain a consistent look, keep everything simple and tell a story. Make sure your tone matches, too.

Top 10 Sites of Backlinks for Blogs and Websites


Top 10 Sites of Backlinks for Blogs and Websites:

Below is the list of some of the top sites to get free Backlinks.

NoBacklink Submission Tools
Submission Type
1.http://www.freelinks.com
Free
2.http://free-web-submission.co.ukFree
3.http://www.free-website-links.com
Free
4.http://www.imtalk.org
Free
5.http://www.smallseotools.com
Free
6.http://www.onlineseoanalyzer.com
Free
7.http://www.fuub.net
Free
8.http://www.freebacklinkcreator.com
Free
9.http://www.linkmitter.com
Free
10.http://www.ruby-web-links.com
Free

ONLINESEOANALYZER.COM: Online SEO analyzer tool back link generate on more than 100 high PR seo check and analyze related sites and will take 1-3 minutes. 

IMTALK.ORG: You get free 3000 back links using the IM Talk website easily. Free back link creator tool will automatically add your link to 2,500+ back links of different websites. 

FREEBACKLINKCREATOR.COM: The freebacklinkcreator tool submits your URL to thousands of different websites that automatically provide free backlinks for your website and increase traffic. 

SMALLSEOTOOLS.COM: Smallseotools generate a large number of high value backlinks. 

Add Blue professional dropdown menu in Blogger

2 Step Process to add blue Professional drop-down Menu:

Step 1
Go to your Blogger Dashboard > Layout > Add a Gadget

Step 2 
Add HTML/Javascript Gadget 

and paste the following code in it


<style>

/* Blue Dropdown Menu by HTD Blogger */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}

</style> 

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">Menu element 1</a></li>
                <li><a href="#">Menu element 2</a>
                    <ul>
                        <li><a href="#">sub element 1</a></li>
                        <li><a href="#">sub element 2</a></li>
                    </ul>
                </li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
                <li><a href="#">element</a></li>
            </ul>
        </li>
        <li><a href="#">Menu element 3</a>
            <ul>
                <li><a href="#">Menu element</a>
                    <ul>
                        <li><a href="#">Sub element</a></li>
                        <li><a href="#">Sub element</a></li>
                        <li><a href="#">Sub element</a></li>
                        <li><a href="#">Sub element</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu element</a>
                    <ul>
                        <li><a href="#">Sub element</a></li>
                        <li><a href="#">Sub element</a></li>
                        <li><a href="#">Sub element</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu element</a></li>
        <li><a href="http://www.htdblogger.blogspot.com">Menu Element</a></li>
    </ul>


That's its.