5 Cool Recent Post Widgets For Blogger

For bloggers that pride themselves on always staying up-to-date with new content, a recent post widget for Blogger can be an invaluable tool. A recent posts widget for blogger is in many ways similar to a ‘breaking news alert’ that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.

Adding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don’t have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what’s often referred to as the ‘Twitter effect’ where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they’ll leave the site and hurt your bounce rate.

Once you’ve managed to attract visitors to one of your posts using the recent post widget for Blogger, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you’d rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.

Apart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme.

If you’re interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:

How to Add Recent Posts Widget on Blogger

Want to add one of the styles above? Just follow the following steps below:

Log into your Blogger dashboard and click on your blog.
Go to “Layout” and click the “Add a gadget” link on the right side.
From the pop-up window, scroll down and select the “HTML/JavaScript” gadget:
Paste the code of the chosen widget found below it.
Hit the “Save” button and you’re done!

Keep Your Blog Updated

Using a recent post widget for Blogger can truly benefit you and improve your skill as a blogger. As you can see, these designs can look great on Blogger sites, but they do act a little bit like a progress report for the author. If you start to fall behind, the dates on your recent post widget will definitely give you away.

Set a schedule and make sure that you are making regular posts on the blog. These posts will be automatically updated on your widget and readers can view this information whenever they want. Add your recent post widget for Blogger on the every page of the blog or in your template so that these posts can encourage others to continue reading, thus increasing the total time spent on your site.

Add 6 Stylish Custom Search Boxes To Blogger

There’s an unspoken rule in the world of web design that says that every website have a search box. You can, and should, design a custom search gadget to Blogger that contributes to the theme of your site while providing some key benefits to both your customers and you.

Benefits to Customers

Search boxes not only help to increase your website’s design usability, but they’re very convenient to site visitors and regulars. For those that have been to your site before, they know what they want and they want it now. These are the impatient people who don’t feel like wading through different links. If you don’t accommodate this problem you might risk losing those readers.

For newer customers who want to get a feel for your site before investing any more time, it gives them the chance to look for their interests on both eCommerce sites and blog sites.

Benefits To You

Adding a custom search gadget to Blogger perhaps best benefit eCommerce sites because it’s an industry that inherently offers a lot of very specific products. For instance, if you sold clothing apparel and someone was only look for shirts, the search would result would only bring up shirts so that person can look through everything in one place.

Bloggers might not have products to offer, but adding a custom search gadget to Blogger can help site analytics and SEO. Google Analytics offers a tool that will track all the searches performed by your search bar, so that you can use this data when improving your keyword usage and content choices. Google web crawlers and search engine bots will also test out phrases in these boxes on the rare occasion to make sure that all your content leads to somewhere creates a closed loop.

Add Your Own Custom Search Gadget To Blogger

Just because you should have a search bar doesn’t mean you you’re restricted to what time. Your site’s search bar should be easy to find and readily available whenever someone needs it, but other than that the look of the design is up to you. If you want to add a custom search gadget to Blogger, here are 6 stylish choices to pick from. Just copy the code below the search box that you want to add and follow the steps below:

#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type=”text”]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir2-I-O-QPPZCFdZGeOCsDpAWAGeNoupDK7pdmk1Hfdc2XORp6828qc7EM5anNvtAQJfNiibOMpvWg7B3xFfz8N948DIqsz2b21H9F_1YyLE18fmtNvW9k2pD-DzVa_3hQ5Rl_-sHNEkkl/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}

#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type=”text”]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir2-I-O-QPPZCFdZGeOCsDpAWAGeNoupDK7pdmk1Hfdc2XORp6828qc7EM5anNvtAQJfNiibOMpvWg7B3xFfz8N948DIqsz2b21H9F_1YyLE18fmtNvW9k2pD-DzVa_3hQ5Rl_-sHNEkkl/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type=”text”]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijAaZgbp4aETBOnd8za-Wjszsof9X77r7VOwtVEs6U9A-VdxwssXxb1UOCl6EtJWTN-aG3AIPqFP5M6Sx42fKY8scF1eMZB9eFRdqZBod9pAsRNjZ7wDPU32aNiEYFZeO6VMcuv18eUyhc/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}

#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZ3JoGmHdcBnLWBdBfu6zxdHilAdVX5CvL0YLDTAgbUB1hBT7LNAUaQmtsKdDodNnm5nPrQVkkR_N6mCJKAjOfRYwrZ6_8AVJ1qvvSANETf-lslfC6TOWnXJSSHWfNJRjXTVw8a_Ce9Lu/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type=”text”]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:”Arial Narrow”,Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUcoCukqv7rgDDW4Z7eRI_K3zD8fkPJzFLRe3ClH-M3_pa5HbypxX3i8Tx1yleUlR5tM_rlS9xF4Ft5GlP9UDxfoN4psSuavhOhV6Wg5lP8jUJ2FCYwY19gyuR0W0ijmbIBCqzmGXqwdsz/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxnQbjd7m2eeHIYawogO0ABC4GdNAZcodxQOxlBDd6Ss_tLfvFIYkRPlNpftT_ExgW0c1RWG7UqUexzYf1aVecLy65pwY-qicXEBNX89sZsXeJVdXqO6cNzkkAWYN9TnhG6i5xfStF3PVP/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxnQbjd7m2eeHIYawogO0ABC4GdNAZcodxQOxlBDd6Ss_tLfvFIYkRPlNpftT_ExgW0c1RWG7UqUexzYf1aVecLy65pwY-qicXEBNX89sZsXeJVdXqO6cNzkkAWYN9TnhG6i5xfStF3PVP/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}

#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxE_mvn0mEcLYu-TUrazRbzsZOef6y5JuvPt7yw6gon0WBPPkg5lV6Y4voOt8vtBNRw_lwDBwD8QTEbYlA0yR2rbSteJgXIJNvqT3uuH6n1SfVNYtI6zKN9zG4GN2ef6k-iF5mL3T9PJqh/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type=”text”]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px “Arial Narrow”,Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-MSHxBky3WU4J8CUvbwanPS5AzcN6L-MWqnUx507t5hEqwz6XIdFezeHvmP-QVrFz-tlZ7He5fDzi5kAm50Vo0b31WSQU53iwseZDcSLftLyR3wOaN0uokoBTXhieGVWdy56rwRjXxkB/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHYDwqAf840hHhlallfD7CAB8mZD4IQ-E8YsfuKz__2_SYJYCaYTOair2FV16SocMen8h-V6MtVQWRoOYF8hq48mYzR81HRmVrwFNHNRrFMKQJvk3o-M7GsgeIW6aMv_75DSOwHdHJxCVg/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}

#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bBXSM-VUctP3i7K1foC6ZE2b8ZQPhRVNzVZQ8qK7oTV6p4IzNt67peuQTUGG0-7piuGLNqYWOQRG8j2kfIy_Hn9WH0noJmBxo4KpV93iAU_lK9IHyJ_EO96qvSe-CKXqhJO0G5FhqGVM/s1600/search-box1.png) no-repeat;width:250px;height:65px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type=”text”]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px “Brush Script MT”,cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaki4ULasrRyk5oCfi0CcdYqYd3mCihBmhEtsGAF7JKH6fPx8hJVmgY97r97X_pn7-HXRcLswkgsxRGnncCOu0oBmu7-Ber1bQVby0QHMD6UbQxA8wNthToLgs4cioAWrPqqDMdbMLvFpW/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGdvbIRf4pGvA4Svw9RLodPgxNqBAV6oynV7BqzQWiHwNxhCvehVdcr9B79NNenoDnkblUl0FZbu8bFQZjDyeS6xiPfXRnR1TUUNL9hPbezNxMY3R9qJ5O7WVvG1YWmRywo-fqdp-455-/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigGdvbIRf4pGvA4Svw9RLodPgxNqBAV6oynV7BqzQWiHwNxhCvehVdcr9B79NNenoDnkblUl0FZbu8bFQZjDyeS6xiPfXRnR1TUUNL9hPbezNxMY3R9qJ5O7WVvG1YWmRywo-fqdp-455-/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}

#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4aqqtSTaT-NWwvcofugxh2R_C9qbhUSezOwOhz_DRhuZc-XOgKN2Y0KoxnM2mvNeVwPoPmIQQEnCOKAQs9VvqUAa2Njp60uMcwJ0t4nEg7BIXbFTsTOAn-XOwLlhKjN1WkjWyhYf8_Q0u/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type=”text”]{background:transparent;border:0;font:14px “Avant Garde”,Avantgarde,”Century Gothic”,CenturyGothic,”AppleGothic”,sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type=”text”]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG36NTKKWdtnvzZmgfsJ2aaKak-G02RHrTYpfJhRfZJNoQo9yXy2DlpNsbQJuwpLg-fyMRHn1poxnpmwzL2EleG12YEL03CrYMRZR2Z2wLtUQwp3m_LgrYgZig6lAoRmXHnhPdYrFSSvON/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVAXYviI0u7w-Xwk6scHQk9yfPhRCxxyearEhAhg25k91RDQMrQNKT7ZzANMyT3UtsRHR2V366cxIzK7887a1FDIajz8SY9bJsleK3hgkvElNg21uTtwlu2inPD0yOE3YmmDFMcwuR-Bb5/s1600/search-icon-hover.png)}

Steps: How to Add a Custom Search Box to Blogger

Step 1. Log in to your Blogger account, then go to Layout > click on the ‘Add a gadget’ link on the left side.

Step 2. Choose HTML/JavaScript from the pop-up window > paste the code of the search box inside the empty box.

Step 3. Press Save.

That’s it!

There you have it, 6 stylish choices that will let you take advantage from all the great benefits of using a search box, while still helping you make your blog stand out. After adding your new search bar, your visitors will be able to navigate through your site and get to the same place using both the box and the navigation bar.

How To Add An Instagram Widget In A Blogger Blog

If you’re not familiar with Instagram, it’s a photo-sharing network that can be downloaded to your smart phone as an application. Think of it as Facebook without the status updates. By developing a simple service that does one thing, and does it well, Instagram has become one of the most prominent photo sharing apps on the market.

The great thing about using Instagram is that it’s not just for individuals. Businesses and non-profits alike can take advantage of this service to share their day and passions with their dedicated customers and fans. These fans number nearly 200 million active users a month, and approximately 7.3 million new daily posts. That’s an astonishing number of potential new customers available for you to capture.

By adding Instagram on Blogger as a widget, you can unleash a new visual aspect of that site and allow visitors to go beyond just words on a page. With the convenience to carry the application around on your smartphone wherever you go, you can snap pictures, apply filters, and upload that content to your profile. From the profile, a widget specially designed for Instagram on Blogger would translate that data and display the image on your site. Even those visitors that aren’t members of Instagram could benefit from such a service.

It doesn’t matter what you are sharing. Whether you’re the type of person that loves to share pictures of your dinner with the world, or business owner that loves showcasing their brand in everyday life, Instagram can work for you. Adding Instagram on Blogger as a widget also offers an incredibly accessible tool for stock photos to use in new posts.

This guide will explain how to add an Instagram widget to your site with step-by-step instructions. The design of your new Instagram widget is entirely customizable and will allow you to modify the background color, font, and how the widget is actually displayed on the site. When you’re finished, you’ll find that the Instagram widget will blend together effortlessly with your current theme and make your Blogger site truly stand out from the rest.

How to Add An Instagram Widget in Blogger

1. To get the Instagram widget, access the Intagme website here: http://www.intagme.com/

2. Type in your username > select Grid or Slideshow:

3. Select the Thumbnail size of your images (100px is the default) and choose if you want a border around your Photos or not

4. To change the Background Color, simply click on the empty box and pick your favorite color

5. If you want to show the Sharing buttons on your widget, select ‘Yes’, otherwise, click ‘No’.

6. Once you’re satisfied with the widget, press the “Get Code” button and copy your code.

7. Log into your Blogger account and select your blog > navigate to Layout and click on the “Add a Gadget” link on the right side:

8. In the pop-up window, scroll down and click on the “HTML/JavaScript” gadget:

9. Paste the code that you got from the Intagme website into the content section and press the ‘Save’ button to save the widget.

10. Click and drag your widget if you want to change its position and press the “Save Arrangement” button on the upper right side.

And that’s it! Now you have your very own Instagram widget on your Blogger blog to share new photos with visitors, and provide just a glimpse of your life when you’re away from the computer. To change or add any of the photos that are displayed in the widget, you’ll have to go directly through the app itself, or log on to your account via Instagram’s website.

Once you’re ready to show off your new work, let all your customers or fans know by posting a Facebook link to the site or a tweet about the changes and asking them to follow you. Just make sure that you’ve added a few photos before making the announcement, so that they have something to look at. After they access your widget, they can like your new photos and interact with you in entirely new ways.

How To Host Blogger CSS And JavaScript Files In Google Drive

Anyone that has ever worked on a web design or development can tell you that where you decide to store your files is important. Every time someone visits your site, the server or host will access this location and bring up the relevant files that need to be displayed. Wherever you decide to store your files, this will have an impact on some important aspects like the speed that your site loads, your overall SEO ranking and your ability to make necessary adjustments to the site.

Things To Think About

When you are designing your online structure and where to store your important CSS and JavaScript files, here is a run down on how this decision might impact your site later on:

Site Loading Speed

By combining some of the style sheets and website files, the Blogger server only has to collect information from a single location. When you split up your files or decentralize the file system, it takes a longer time for all the data to come together to make your site possible.

Slow loading speeds can negatively impact your SEO ratings because the slower the site is, the less likely that visitors are going to wait around for it to load. If someone visits your site and immediately clicks the ‘back’ button because it’s taking too long to load, that is going to increase your bounce rate and provide Google with statistics that show your site is either low quality or irrelevant to the search keywords.

File Storage Affects SEO

In addition to increasing your bounce rate, storing your files in a central location and managing the name of your files can affect SEO site wide. Web crawlers enlisted by Google, or some of the other search engines, index both the code on your site, and the name and directory of your files. If file names are random or not placed in the proper categories, the web crawlers aren’t going to know what to do with the information.

Clear file structure and a central location provide you with incentive to organize everything and name them appropriately. All the content that is relevant to the subject of your website or blog will be in the same location for web crawlers to review.

Storage Locations Affect Editing Abilities

Shuffling through files and folders or opening up FTP connections just to make some simple edits can be a hassle, and take up a lot of time that could have otherwise have been spent writing new content.

If you’re a Blogger site owner, this is something you need to think about. When you need to make alterations to things like social media sharing buttons, popular posts, recent posts and related posts widgets, you have to know where everything is intended to go, or risk losing both available content and money.

Some of the larger sites that produce hundreds of unique articles each month can’t afford to have content in different locations. When articles start to get lost out of order, they run the risk of duplicating content on their site, or forgetting to post it altogether. Things should be right at your fingertips to minimize mistakes and reduce the amount of time spent editing the site while it’s still live.

Storing Javascript/CSS Files With Google Drive

Storing Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.

Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.

Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.

This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It’s completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.

Step 1. Prepare the CSS/JavaScript Files

First, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the and tags, remove them).

In the Notepad menu, select ‘File’ > ‘Save as’ and type the file name with the .css extension just like I did with mycssfile.css – see the screenshot below.

In the same window, choose “All files” in the “Save as type” option and set the Character Encoding to UTF-8.

If you want to host a JavaScript file, add the .js extension (instead of .css) at the end of your file name (remove the … tags if you see them). Click “Save” and navigate to the location where you want to save the file.

Step 2. Upload Your File on Google Drive

Access https://drive.google.com and log in with your Gmail account. After you logged in, click on the ‘Create’ button and add a new separate folder to upload your JavaScript and CSS files.

Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload.

Now, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.

After the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select ‘Share’:

In the ‘Sharing settings’ window, click on the ‘Change’ link and choose the ‘Public on the web’ option. Press ‘Save’ and copy the link(s) of your uploaded file(s) from the ‘Links to share’ box highlighted in blue, then paste it into a Notepad to use it later.

Step 3. How to Add an External CSS/JavaScript file to Blogger

Before you can use the links, you must replace ‘https://drive.google.com/file/d‘ to ‘https://googledrive.com/host‘ and remove ‘/edit?usp=sharing‘ in the link.

For example, the link to mycssfile.css that I copied looks like this:

https://drive.google.com/file/d/0B4n9GL3eVuV-TkphMkc3SFR2Slk/edit?usp=sharing

Notice the part in blue after the “/file/d/” part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:

https://googledrive.com/host/

Add the file ID like this (remove the ‘/edit?usp=sharing’ part):

https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk

Now log into your Blogger account, select your blog and go to Template > Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:

Just BELOW the tag, add this line:

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk” />

And replace https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk with the link of your CSS file:

If you want to add a Javascript file, search for the following tag:

And add this line just ABOVE it:

<script src='https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg‘ type=’text/javascript’>

Replace the line in blue with your URL:

Finally, press the ‘Save template’ button to save the changes. And you’re done!

In Conclusion

Once you have saved all your file folders and closed out of the drive, open your site in a browser and make sure that all the changes have completed successfully.

Next time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.

As you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work.

How To Display Most Commented Posts In Blogger

One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you’ll need a most commented posts widget for Blogger.

Having a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you’re going to need a few specific things to help you out.

Demo

Here’s What You’re Going To Get

There are certain aspects in the design of a most commented posts widget that you should expect. That’s why you’ll find these specific components with this custom widget:

Ordered by popularity. The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you’ll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you’re looking for a cleaner look.
Graphic incorporation. Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design.
Descriptions that blend in. The internet today revolves around the value that you can provide each individual user. People don’t just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn’t able to provide. By having descriptions that blend in, you’ll be able to enhance the perceived value that your site can provide. This leads to more clicks!

Add the Most Commented Posts Widget to Blogger

Step 1. Log in to your Blogger account and go to Template, press the “Edit HTML” button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger’ search box. Type the following tag inside it and hit Enter to find it:

Step 3. Just below , add this code:

Note: if you can’t find the tag, try to find the following tag instead and add the variables just below it:

<![CDATA[

Step 4. Now search for the following tag (CTRL + F):

]]>

Step 5. And just above it, add this CSS code:

.comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

Step 6. Save the template.

Now, let’s add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the “Layout” section of your Blogger dashboard and click on the “Add a gadget” link on the right side. From the pop-up window, scroll down the list and select the “HTML/JavaScript” gadget:

Copy and paste this script inside the content box:

function stripTags(s,n) {
return s.replace(//ig,””).split(/\s+/).slice(0,n-1).join(” “)
}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++) {
var postURL = “‘” + feed.value.items[i].link + “‘”;
var postTitle = feed.value.items[i].title;
var postthumbnail = ““;
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = ‘

‘ + postComments + “

” + postthumbnail + “‘ + postTitle + “” + ‘

‘ +stripTags(postDescription,10)+’…

‘ + ‘

‘;
document.write(postList);
}
}

<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://helplogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json”
type=”text/javascript”>Add this widget

Here, change http://helplogger.blogspot.com with your blog URL. If you want to add more characters to the description, modify the “10” value in red from “postDescription,10“.

If you want a more simple look (without the thumbnails and post snippets), add this script instead:

function stripTags(s,n)
{
return s.replace(//ig,””).split(/\s+/).slice(0,n-1).join(” “)
}
function mostcommented(feed) {
var i;
for (i = 0; i < feed.count ; i++)
{
var postURL = “‘” + feed.value.items[i].link + “‘”;
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = ‘

‘ + postComments + “

“ + “‘ + postTitle + “” + ‘

‘;
document.write(postList);
}
}

<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://helplogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json”
type=”text/javascript”>
Add this widget

…. and replace http://helplogger.blogspot.com with your address.
To add the “comments” text after the comments number, replace the line in red:

‘ + postComments + “

“

with:

‘ + postComments + ” comments” + “

“

Once you have finished adding your own settings, press the “Save” button to enable the gadget in the sidebar of your blog. That’s it!

To change the background colors of the most commented posts, go to “Template” > hit the “Customize” button and navigate to “Advanced” > “Most Commented” tab. Here you can pick 5 different colors by clicking on the color boxes:

Once you’ve selected your favorite color scheme, click the “Apply to blog” button to save the changes… and you’re done.

Why Use the Most Commented Posts widget?

The basic psychology in every human is that they want to feel like they belong to a community. That’s exactly what this customized widget will bring to your site. No matter what content drew a visitor to see your content, this widget will invite them to join the lively parts of your piece of the internet. This helps to build relationships, with you and with other visitors, and this relationship-building engagement is what you need to start having real value.

Take the time to install this most commented posts widget on your site and you’ll see for yourself why this is one of the most useful widgets that is available right now. Enjoy 😉

How To Center The Blogger Header Image

The header of a website is what distinguishes your blog; it’s your identity or digital fingerprint. Whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine who you are and the type of content that they can expect to read. Therefore, it’s important to develop a header that is both prominently placed and telling of your brand name.

What would seem to be counterintuitive to that idea is the default Blogger settings for header positioning. Whenever you upload a header to the site, it will automatically be aligned to the left of the page. Some Blogger users may be okay with this setting, especially if they are using a header design that doesn’t contain a background. Others may find that their background headers appear cut off, incomplete, or indistinguishable from the rest of their content.

If you find yourself in the second category of users, there is a way to adjust the positioning of your header so that it is displayed as a center Blogger header. By centering your site header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It’s hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.

Center Header Image with Blogger Template Designer

Making the change is relatively easy. You’ll be able to make these adjustments on every page of your Blogger blog without having to change them individually. All you need to do is to modify the CSS of your blog that can be found directly through your Blogger dashboard. Even if you have little to no experience in web design or coding, you can center Blogger header by following these next few steps.

Step 1. Log in your blogger account and select your blog, then go to “Template” and click the “Customize” button on the right side.

Step 2. Navigate to “Advanced” > “Add CSS” tab and paste the code in the empty box:

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

If you have a small image and you want it to become full width, add this CSS instead:

#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
width: 100%;
height: 100%;
}

Step 3. Hit the ENTER key after you paste the code snippet, then click the “Apply to Blog” button.

Here are some other aligning options for your headers:

Align Blogger Header Banner and Text Side by Side

Image on the right and title on the left

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

Image on the left and title on the right

#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}

Note: for larger images, you may need to resize them in order to make them appear side by side with the text.

That’s it!

After making the changes to the CSS and saving your modifications, you may navigate back to your homepage. Refresh the page and you’ll notice that the header is now centered, instead of on the left. Click on a few of your page links and make sure that this modification has been made to every page or post on the blog.

If by chance you don’t see the changes to the header, go back through the code that you modified and make sure that you have copied and pasted the information into the file exactly as instructed. Even minor modifications in the code, or a missing semicolon may fail to make the changes you are trying to achieve, or come away with different results than what’s expected.

The great thing about CSS is that it is your site’s central hub for all things design. From the CSS file, you can modify just about any appearance on your site to give the blog a custom look and feel. Once you’re comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modifications.

7 Search Engine Optimization Tips For Bloggers

SEO, as you might have already know, is an acronym for search engine optimization. In the simplest of words, it’s the way search engines like Google.com, Yahoo.com, Bing.com and others present your page in users’ search results on their sites.

Cool, how do they that?

Well, they do that via sophisticated software tools, called spiders. Consider the whole internet as an empty room, with air particles as websites. Now sneak a spider into that room. Each tiny step that this spider would take now is essentially crawling a website (as the room is dark and full of websites). This is how search engines crawl through the web picking up site after site, studying them and ranking them. This ranking is important, really important. A higher ranked website by Google will always be on the first page of Google’s search results for a related query compared to a lower ranked one.

So, in order to get ranked higher, you and I need SEO. SEO is like black pepper without which fried egg might not taste ‘that’ tastier. In simple words, in order for search engines to find your site and rank it higher than others in your field, you need to optimize it. Let’s see how with these 7 simple tips.

Ways to SEO Optimize your Blog

Before starting with our 7 simple tips for a quality SEO, it’s important to broadly classify those tips into two basic areas, on the basis of origin:

On-page Optimization

Refers to optimization of your actual web content including your HTML code, your text, as well as graphic content.

Off-page optimization

Off-page optimization, however, deals with things like backlinks (hyperlinks pointing to you site from other websites, apps and networks).

1. Create SEO Friendly Blog Post Titles

Post titles are important for SEO. They really are since they are deal makers or breakers. Whenever you write something, make sure you give proper attention to the post’s title. Make your titles simple, intriguing, descriptive and gullible so that people may know what is this all about and what to expect. An even better approach is to wear searchers shoes while giving a title and think how would you Google it if you were looking for content like this.

Also, don’t forget to include keywords in your title and keep it under 70 characters (or search engines would crop it before looking).

2. Improve the quality of your content

If you think ‘content’ isn’t important for SEO, think again! Your content is the most important part of your site. While writing, don’t copy-paste from elsewhere, don’t stuff it with keywords alone, don’t bombard it with images and multimedia files and don’t write any lesser than 300 words. These all would affect your ratings quite poorly.

So, write original, use keywords in scenarios instead of straying them around (like I didn’t use SEO here, SEO there in every next line), use images where they suffice and make sure you name them properly to appear in image search results, i.e. an image with the “img009.jpg” name would never appear in the image search results but “tips_to_success.jpg” would. The best would be to use text content and wrap them proper in HTML tags like

etc. (search engines likes content this way). Also, make sure your blog post’s length is somewhere between 300-500 words – crossing over is fine but lesser isn’t.

3. Keywords are keys

Keywords are terms that others may use to search for your content. While keywords are important for SEO, don’t go on and stuff your site with keywords. This would make your content appear like a spam to spiders, who would neglect it henceforth.

Ideal is that once you have chosen your title (and included your keyword in it, as I have added keyword SEO in title above), use it in page URL, in your starting and ending paragraphs, as well as in article body where required without sounding awkward. Additionally, you may link it using anchor text to relevant resources in and out of site.

Adding keyword in the post URL using Custom Permalink

4. Meta-tags are important, but not ‘that’ much

If we had been living in early part of 21st century, meta tags might have done all the SEO for your site. Unluckily, we aren’t. Google and other search engines have long left using meta-tags for finding site information. Hence, if someone tells you meta-tagging is all you need for your sites SEO, tell them it isn’t.

Nevertheless, it’s important that you use your keywords in your meta-data. Some themes already do that for you, if they don’t (you can check that using page source or using view source code from browser), don’t sweat. You can use 3rd party plugins like All in One SEO Pack and Scribe.

5. Socialize!

Make others talk about your site and share your content on social media sites or their blogs. It gets even better if somehow sites with high ratings link back to your site. This makes spiders think that you are someone important that everyone these days is talking about, resulting in enhancing your ratings dramatically.

Guest posting is another good approach for that. Comment on other sites, make friends with bloggers (best in business) and make them comment at yours. These tiny little things do matter a lot, resulting in enhanced SEO of your site.

6. Link in and Link-Out

Hyperlinks or Links are important from SEO perspective. You can use them to:

Link out to other sites, networks and posts, or even to your previous posts (also called inbound or backlinks) using anchor element with keyword.

Or even better, make others to link in to you, via sharing your content on their sites or social media networks.

As mentioned, an even outstanding strategy for building links is guest posting.

7. Write Often

Sites with new content every day, or twice thrice a week have still far better ratings than those who post every fortnight. A better incoming content frequency makes spider come to your site regularly, resulting in better ratings and enhanced SEO.

Are we done then? Well, trust me – your sites rating is in your hands, not in Google or Yahoo. SEO is just about doing things neatly and in a sophisticated manner. Walk your site these 7 steps for a quality SEO and you will witness the difference yourself at Google, if no place else.

Remember, code clean, write original, socialize… this is what SEO is all about!

Blogger Vs WordPress: Which Is Better For You?

There are two big-name services in the world of blogging: Blogger vs WordPress. No matter where you go on the internet looking for advice, these two names are nearly impossible to avoid because they play such an important role within the online content community.

If you’re just starting out a new blog, or making some major changes to your current layout, you’ll most likely be faced with the decision to choose between Blogger vs WordPress. Both are stellar services that are going to make your life as a blogger much easier, but ultimately, your decision must come down to one. So don’t cross over, let’s walk this path together and ensure that you don’t get lost in the wonder world of web, looking for answers.

Before we start!

WordPress as you might have noticed, comes in two different flavors, wordpress.org and wordpress.com. Seemingly same, but practically, not. Like in Blogger vs WordPress, hosting at wordpress.com is like renting a corporate apartment where the corporate is responsible for maintenance and facilitation of your place. While hosting at wordpress.org is similar to buying your own apartment, where you are responsible for your place’s security, maintenance and many others.

So, wherever in this post you see the word ‘WordPress’; know that it refers to wordpress.org.

User-Friendliness

WordPress is a clear front-runner in the blogging and web design community in terms of how many people actually use the platform. The founder of WordPress, Matt Mullenweg, provided eye-opening statistics that around 18.9% of the entire Internet runs on WordPress. Compared to a 2012 study done by Blogging.org, of all the actual blogs on the Internet, WordPress makes up 43%, Blogger 35%, and the remaining blogs are Tumblr or other less known services.

However, just because something is used more often than another, it doesn’t mean it’s easier to use. The problem with WordPress is that it wasn’t designed for beginners who just want to take up blogging as a side hobby. In order to set up your own WordPress blog, you have to have some previous knowledge of things like hosting, bandwidth, HTML and SEO practices. There are WordPress services out there that will help set up your site and get you online, but WordPress itself comes as a set of files that you are expected to download and configure to your own site.

Some hosting companies have made the idea of using WordPress a little bit easier with things like one-click downloads; but it’s still a pretty steep learning curve for new bloggers to overcome. You also have to deal with paying for the costs of hosting your site and acquiring the domain name. If you opt to use one of the many WordPress services instead of setting it up yourself, you’ll be stuck with a URL such as ‘yourwebsite.wordpress.com’, which takes away from the professional image you may be trying to portray.

Blogger is entirely based on Google and makes setting up a blog a breeze. With Blogger vs WordPress all you need to get started is to sign up for the service using your Google account, or make a new account like you would if you were setting up an email account. From there, Blogger takes responsibility for all your files, backing up the systems and the details associated with operating a content site like a database. Blogger is so much easier in terms of walking you through the steps, providing you with everything you need to be successful and it’s at little-to-no cost to you.

Design & Customizability

Hosting at WordPress means stepping into the Disney world. With hundreds of featured rich-customizable design templates, you would find yourself literally lost in the WordPress arena, ensuring that your site looks unique, catchy and simply marvelous to visitors. The wide array of WordPress templates include customized designs for nearly every walk of life including fashion, entertainment, music, health, kitchen, etc.

Blogger templates, some would say, are not responsive; but let me tell you a secret. With a little search online, you can find hundreds of free, highly customizable, responsive Blogger templates that you can easily integrate into your blog, so that you, and your site visitors stay in touch with your blog through their handsets. For WordPress, however, you don’t need to wander around. By default, it has rich and responsive native designs, making WordPress ideal for mobile bloggers.

Both platforms will allow you to make modifications to the theme and features of the site if you have experience or feel comfortable to use HTML and CSS. They also both provide helpful post areas for when you go to submit new content. These post areas will also include HTML and some basic functions to change the font style and the size of your text.

One design feature between the two that may tip the scale toward Blogger in the Blogger vs WordPress discussion is that Blogger is integrated with other Google services like Google Picasa. Picasa is a photo sharing site that will allow you to share all your personal photos, or the photos that you plan on using within your posts. These can then be accessed via the text editor when you are submitting content and can be easily included with the content.

Gadgets, Widgets & Plugins

Talking of plugins, WordPress provides you with thousands of easy to integrate plugins from security to multimedia, enabling you to add any feature or functionality in your site, in a couple easy steps. Users of this platform have submitted thousands of independent plugins that you can install for just about anything you would need, from SEO to E-commerce. There are so many interesting plugins available, that blog owners often make the mistake of cluttering their site with too many and distracting their readers from the content.

Blogger may not have as many plugins or widgets as WordPress, it does have enough to provide you with what you need. Blogger’s simplicity in many ways provides it with an edge over WordPress because you are able to focus most of your time in producing great content, instead of seeing how many bells and whistles you can add on the site.

The SEO Question

Not every person that starts a blog is looking to make money off the content; some people just like to write for the sake of writing. Whatever your goals are for starting the blog, search engine optimization – or SEO for short – is a key strategy in growing your readership, so others might enjoy what you have to share.

Over 1 quadrillion searches are performed via Google each year. The goal of most SEO producers is to implement strategies that can appease Google so that their content will be ranked higher up in search query results. Blogger is a service created by Google, so it’s obvious that they added their own formulas to the service to ensure that those blogs are doing what they need to do to be found.

Sticking to Blogger means Google would optimize your blog itself from a SEO perspective. All you need to do is check / uncheck a couple of options from your dashboard and Google will start crawling your site with just a click of a button. WordPress takes a hands-on approach that will require you to know a little bit more to modify your website design and content to meet these standards.

And the Blogger vs WordPress Winner Is…

In terms of Blogger vs WordPress, both services might be worth trying out, but ultimately Blogger comes out as a winner in all four categories discussed above. For new or returning bloggers, it is a fantastic service that makes it easy to focus on what you love, regardless of all the add-ons and fancy additions of WordPress. Blogger’s simplicity is perhaps one of it’s greatest advantages and provides bloggers of all experience levels a chance to succeed.

Role of NGOs in India

NGO means non-Governmental organization, which is a voluntary group with social mission. These organization are independent from government. These are non-profitable organization whose mission is to fight the social issues and do charity for public good. They have high degree of public trust which make them more concerned about the society. People join NGOs as their member to work for the welfare of society from their end by keeping the goal of NGO as their primary concern. NGOs receive funding from the government, an individual, or an organization.

NGOs were first called in Article 71 in the charter of newly formed United Nation in 1945. NGOs activity includes environment, social advocacy, human rights, consumer protection, health, development, etc. They work at different level like local, regional, national, international, etc.

Different NGOs work in different form like providing charity (beneficiaries provide input) to the needy people, providing healthcare and education services, by participating in the cause in the form of money, land, material, etc., by aware and empowering the poor people to understand the social, political, economical factor which affects their lives.

Different NGOs in India

1. CHILDLINE India foundation

CHILDLINE aims to reach out to every child in need and ensure their rights and protection. There four Cs model – Connect, Catalyse, Collaborate and Communicate – is the system that enables them to reach out to more and more children, every year.

2. Pratham

Pratham is one of the largest NGO in India that provides innovative learning to improve the quality of education in the country. It focuses on high-quality, low-cost interventions to address the gaps in the education system. Pratham partners with several state governments to help children acquire foundational skills. Their programs have successfully reached millions of children every year.

3. Smile Foundation

Smile Foundation wants to bring about change in the lives of the underprivileged society by enabling civil society to engage proactively in the change process.Smile Foundation aims to empower the lower strata of society especially children and women through relevant education, innovative healthcare and market-focused livelihood programs.

4. CRY (Child rights and you)

Their vision is that every child is happy, healthy and creative and whose rights are protected and honoured in an equal and dignified society. They want to enable people to take responsibility and make them aware of their potential for action and change. It wants people to commit to helping secure, protect and honor the rights of Indian children.

5. Nanhi kali

This education NGO aims to positively impact India’s development by educating girls and encouraging people to contribute to a worthy cause. Nanhi Kali has ensured that 90% of girls in their program successfully complete their schooling till Class X. Project Nanhi Kali supports underprivileged girls by providing them daily academic assistance through Academic Support Centres, Annual Supplies Kit and Digital Tablets to secondary school girls.

Thus, The numbers of NGOs are not limited. There are a lot NGOs who are working to reframe the society and it’s our responsibility to support them in their good cause. As much as we become responsible, the quality of life of needy people will increase. If we share a little part of what we have we can build a great nation.

Blogger Vs WordPress: Which Is Better For You?

Before we start!

So, wherever in this post you see the word ‘WordPress’; know that it refers to wordpress.org.

User-Friendliness

Design & Customizability

Gadgets, Widgets & Plugins

The SEO Question

And the Blogger vs WordPress Winner Is…

7 Search Engine Optimization Tips For Bloggers

Cool, how do they that?

Ways to SEO Optimize your Blog

Before starting with our 7 simple tips for a quality SEO, it’s important to broadly classify those tips into two basic areas, on the basis of origin:

On-page Optimization

Refers to optimization of your actual web content including your HTML code, your text, as well as graphic content.

Off-page optimization

Off-page optimization, however, deals with things like backlinks (hyperlinks pointing to you site from other websites, apps and networks).

1. Create SEO Friendly Blog Post Titles

Also, don’t forget to include keywords in your title and keep it under 70 characters (or search engines would crop it before looking).

2. Improve the quality of your content

etc. (search engines likes content this way). Also, make sure your blog post’s length is somewhere between 300-500 words – crossing over is fine but lesser isn’t.

3. Keywords are keys

Adding keyword in the post URL using Custom Permalink

4. Meta-tags are important, but not ‘that’ much

5. Socialize!

6. Link in and Link-Out

Hyperlinks or Links are important from SEO perspective. You can use them to:

Link out to other sites, networks and posts, or even to your previous posts (also called inbound or backlinks) using anchor element with keyword.

Or even better, make others to link in to you, via sharing your content on their sites or social media networks.

As mentioned, an even outstanding strategy for building links is guest posting.

7. Write Often

Remember, code clean, write original, socialize… this is what SEO is all about!

Add Load More Posts Or Infinite Scrolling To Blogger

You might have seen the implementation of infinite scrolling at Facebook, Twitter or Google+. Instead of showing Older / Newer posts links, we can load posts dynamically whenever a “Load more posts” button is clicked, or by scrolling down the page. This tutorial will show you how to implement Ajax based loading script that will add Load More Posts or Infinite Scrolling to Blogger, so that visitors can easily navigate without reloading the page.

How it works?

– You have the option to add a ‘Load More Posts’ button or load automatically the older posts as visitors scroll down the page.
– Once implemented, Load More Posts / Infinite Scrolling applies to all Blogger posts on index pages (homepage, archive, label pages). It can’t be added on individual posts.

Demo

To see it live, check out the demo below. When you scroll down to the bottom of the page, you will see the “Load More Posts” button. Once you click it, the next 3 posts set to display will load below.

Demo

Adding Load More Posts or Infinite Scrolling to Blogger

1. Log into your Blogger account and click on your blog where you want to add it.
2. Go to ‘Theme’ and click the ‘Edit HTML’ button to open the Template editor > click anywhere in the code area and press CTRL + F keys (or Command + F) to open the search box.

3. Type the tag below in the search box and press ENTER to find it:

4. Just above the tag, add the script below:

a. If you want to load posts with ‘Load More Posts’ button like in the demo blog, add this script:

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

b. If you want to add the infinite scrolling without button, paste this instead:

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

Note: This code uses jQuery library, so if you already have jQuery on your page, please remove the line in red highlighted above.

5. Click ‘Save template’ button and check the ‘Load More Posts’ button / Infinite Scrolling in your Blogger blog.

Conclusion

That’s it! So this is how we can easily add Load More Posts / Infinite Scrolling to Blogger. From now on, our visitors can stay in same page and navigate through infinite number of posts on the fly!

How To Hide Posts From Blogger Homepage

The point of blogging is to make your blog posts visible to your target audience as well as to search engines. However, there are times when you need to hide certain blog posts from homepage. For instance, one post may contain outdated information, so you don’t want it to be seen by your audience but you also want to keep it on your site for records purposes. Or perhaps you want a certain post to still be seen on your blog, but you don’t want it to show in the home page.

Either way, you have to find ways to hide certain blog posts. Fortunately, if you’re using Blogger, you can easily do so by taking a few simple steps. You can use this guide to get started.

Backdate Blogger Posts

Let’s discuss this technique first since it’s simple and doesn’t require you to deal with any lines of code. Basically, the only thing you need to do is to change the publishing date of the post you want to hide; specifically, you need to backdate it to the oldest possible date. Doing this is effective if your Blogger site is configured to show the latest posts first (as most blogs are); once a post is backdated, it will no longer be shown in the home page.

How do you do this? If you’re publishing a new post and want to hide it, look for the “Schedule” option on the right side of the post editor and click on “Set date and time”. Choose a previous date on the calendar, click ‘Done’ and Save the post, then go back to your blog’s home page to check if the post has disappeared.

The same process applies if you want to hide an older post; the only difference is that you need to click on the post’s title in the dashboard to open it in the editor. Backdate the post using the steps above and save it, then open your blog to verify that the post is indeed hidden from view.

Please note that this process will only hide your posts from the homepage. People will still be able to see them if they’d take the time to go through your blog posts from the previous years. This is also the case for those who’d come across your hidden blog post through search engines.

Hide Blog Posts in Blogger Using Code

Another thing you can do to hide a blog post is to edit its code. This is a bit complicated since one small mistake can affect the post structure and make it unreadable. This, in turn, can affect your readers’ experience as they browse through your site and even have a negative effect on your search engine optimization techniques. With this in mind, it’s important to be careful when dealing with code.

Method 1: Hide Blogger Post Using the Post’s label

There are two techniques to choose from, and one of them involves the label of the blog post you want to hide. If you’re ready to go ahead with this method, you’ll first need to make a backup of your template. Having a backup is important since it ensures you’ll have a copy to fall back on in case something goes wrong.

Once you’ve backed up the template, go to “Templates”, click on “Edit HTML” and then click anywhere inside the code area -> press CTRL + F keys and search for this line:

Once you’ve found it, replace it with this code:


            <b:if cond='data:label.name != "add label here“‘>







Note: replace the text “add label here” with the label (case sensitive) of the blog post that you want to hide in Blogger homepage. Keep in mind that above code won’t work if you have multiple labels on that post, so please make sure the post has only 1 label.

Important: every post that you want to show on the homepage should have at least one label otherwise they will not be visible because the b:loop statement won’t be executed for them.

Finally, Save the changes by pressing the ‘Save template’ button on the upper left side of the editor, then view your blog to check if the blog post has been hidden.

Method 2: Hide Blogger Post Using the Post’s ID Number

Aside from the method above, you can use another technique that involves the post ID number of the blog post you’d like to hide. To know the ID number, you must go to the dashboard area, find the title of the post you want to hide, and click the “Edit” text link below it. Doing this will open the post in the Blogger editor.

Once you’re in the editor, click on the address bar above and go to the end part of the URL. Here, you’ll see a line of text that looks like this: postID==, followed by a long string of numbers. This is your post’s ID number. The ID number usually contains 19 numbers, so it will look somehow like this: postID==1234567890123456789. Copy this ID since you’ll need it for the next step.

When you have your blog post’s ID, open the Blogger dashboard, go to Template, and click “Edit HTML”. Search for this line:

Replace it with this one:

Note: if you found two occurrences of it, replace both of them.

Now search for this tag:

Once you find it, paste the following code above it:

#post-1234567890123456789{display:none;}

Don’t forget to replace “1234567890123456789” with the 19-digit ID number of the blog post you’d like to hide. Once you’re done, make sure to save the template. You can open your blog in another tab or browser to check if the post has indeed been hidden.

That’s it!

Whether you backdate your post or opt for the post ID method, you have to remember that the blog post you’ve hidden is still on your website. This means that it will still be indexed by search engines, show up on search engine results, and get found by people who are searching for the keywords that are present in the post. If you really want this blog post to be seen by no one, you’ll need to use robots.txt (for Google) to remove it from search results. Better yet, completely delete the post from your Blogger dashboard and just keep a soft copy of it in your computer.

SHARE TWEET GOOGLE+ PIN IT

Rate this:

Posted on August 1, 2022 by AdminPosted in NewsTagged blogger, blogging.

How To Create A Static Home Page In Blogger

When it comes to home pages, most websites can be divided into two: static and non-static. As their name implies, static home pages stay permanent no matter how many times the website is updated, while non-static home pages reflect the changes that are made to the site and show the latest posts first.

The latter has become well-known nowadays due to the rising popularity of personal and even corporate blogs. However, there are still many people who prefer static home pages because it makes their websites look more organized and professional. It also gives them more control over the readers’ experience on their site and helps them create stronger brand awareness through the uniform message that their home page presents.

Fortunately, if you own a Blogger site and want to make your home page static, you’ll find that creating one isn’t as difficult as it seems. You can create a static home page in Blogger by taking these steps:

1. Create your static home page

The first thing you should do is to create a new page for your blog. This will serve as your static home page but, for now, it will look and act like any other page in your site.

To make this page, you’ll need to go to the main menu of the Blogger dashboard and click on the “Pages” option on the left side on the screen. Doing this will lead you to the “All Pages” menu window. Here, click on the “New Page” button and you’ll enter an editor that looks similar to the Blogger Post editor that you use when publishing a new blog post.

At the top box, enter the title that you want for this page – in this case, let’s call it the “Welcome” page. In the larger text box, type the content that you want to appear on your home page; this can be a paragraph, or two about yourself or your business and what your site is all about.

Once you’re done, click “Publish”. The window will return to the main “All Pages” menu, and you’ll see the new “Welcome” page you’ve created. Copy the URL of the “Welcome” page since you’ll need it later on. To do this, right click on the ‘View’ link and select ‘Copy Link Location’ from the menu.

2. Redirect the default home page to the static one

Once your “Welcome” page is up, the next thing you should do is to change Blogger’s default homepage. This involves redirecting from your site’s original home page to the static homepage that you’ve created so it would be the first thing that people see when they visit your website.

Related: How to Set Custom Redirects in Blogger

To do this, you’ll need to go to main Blogger editor menu, click on “Settings” on the left side of the screen, and choose “Search Preferences”. Under the “Errors and redirections” section, you’ll see the “Custom Redirects” option with an “Edit” link beside it. Click on the “Edit” link to open another window, where you’ll see two boxes named “From” (with your blog’s URL beside it) and “To”.

In the “From” box, enter only a forward slash symbol “/”. In the “To” box, paste the URL that you copied earlier and add the latter part of the URL of the “Welcome” page. For instance, the page’s URL of our demo blog is static-home-page.blogspot.com/welcome.html, so we’ll remove the “http://static-home-page.blogspot.com” address and add only “/p/welcome.html” in the “To:” box. The “/p” signifies that it’s a static page.

Next, check the little box beside “Permanent”, click on the “Save” text link, and press the “Save changes” button. Doing these will redirect your site’s main URL to its new static home page. Access your blog on a separate browser to see if it works.

3. Make tabs for your site

If you’re not planning to make tabs visible in your blog, you can stop at Step #2. But, if you want your site to have tabs that indicate the home page, the main blog page, and other pages you may have (such as the FAQs and Contact Us pages), you’ll need to take another step.

Why is this important? Basically, when visible tabs are enabled in your site, they will show that you have two existing pages: the default home page and the new “Welcome” page you’ve created – both of which redirect to the same static page. This can be confusing for your readers and may even affect your search engine rankings.

To fix this, you first need to enable tabs by going to the “Layout” menu item and click on the “Add a Gadget” link. You can choose to add it below your blog header or sidebar. In many cases, it’s advisable to add it below blog’s header since they’re more visible and give your website a sleek, professional look.

Once the pop-up window opens, scroll down and click on the ‘Pages’ link:

This will open another window named “Configure Page List”. Here, under the “Pages to show” section, you’ll see the default home page and your new static homepage with small boxes beside them. Uncheck the box beside the default home page to hide it from view, check the pages that you want to display in the menu and then click on the “Save” button to save the changes.

You can stop at this point but, if you want, you can also create a specific tab that will lead to your main blog post page. To do this, edit the “Pages” gadget that you just saved and click “+ Add external link”.

On the new window that would open, enter the title you’d like for the page (such as “Blog”) along with /index.html web address, then hit “Save Link” and click the “Save” button on the “Configure Page List” window.

Now, view your site and you will see the pages menu containing the “Welcome” page and “Blog” tabs. To see how this works, you can also visit our demo blog. Enjoy!

Final Note

Having a static home page can be beneficial for your blog. Follow the steps above now to create a static home page in Blogger!

Rate this:

Posted on August 1, 2022 by 1111 EduPubPosted in NewsTagged blogger, Home Page, Page Design.

5 Best Custom Blogger Contact Form Widgets

In the past, adding a custom contact form for Blogger was quite a complex process, and many bloggers were forced to use third party websites. However, even after Blogger launched its own contact form gadget, it was still considered as highly inadequate. This is because the official gadget would only be implemented on the footer the sidebar. Most bloggers preferred having a separate blogger contact form placed on its own page to make their blogs appear well arranged and more professional as well.

Having a well laid-out Blogger contact form is very important. This is the tool that visitors, companies, and brands can use to contact you and it is simply a must-have feature for every blogger. If you are not comfortable with sharing your main email address directly on your blog, then a custom Blogger contact form offers an effective way in which people can easily reach you.

Why you should use a Blogger Contact Form?

If you are still stuck on third party providers, you should definitely consider switching to the official custom contact form for Blogger since it has various unique benefits, like:

Messages are delivered immediately – As the blog administrator, you will receive a message immediately the visitor clicks send.

Reliable – It is the official form developed by Blogger, which makes it more trustworthy and reliable way to initiate contact as compared to using third-party services.

Questions – The contact form offers a platform for your visitors to ask specific questions that they might have regarding the blog you wrote or your business in general. It can be an excellent way of capturing leads and even lead to conversions if you are selling a certain product or service.

Feedback – Visitors can easily comment on your blog by leaving their feedback through your contact form. This feedback can help you determine which post to do next or what areas to address based on the visitors’ comments.

Information or service request – For those who are using the blog as a way of marketing a product or service, potential clients can use the custom contact form for Blogger to reach out and request additional information.

How to Add Blogger Contact Form Gadget

Before adding a custom Blogger contact form to a static page, we need to add the default contact form in the blog’s sidebar to make it functional:

1. Log into your Blogger dashboard and go to “Layout” > click on the “Add a gadget” link on the page elements area.

2. Select “More Gadgets” below the “Basics” tab and click the “+” button to add the Contact Form Gadget.

Hiding Blogger Contact Form from the Sidebar

Once the contact form has been added, next step is to hide it so that it will appear only in the static page.

1. Go to “Template” and press the “Edit HTML” button. Once the code editor opens, click anywhere inside the code area and press CTRL + F keys (or Command + F for mac) to open the search box.

2. Type or paste the following tag inside the search box and hit Enter to find it:

]]>

3. Just above the ]]> tag, add this CSS code:

#ContactForm1{display: none !important;}

4. Click the “Save template” button on the upper left side and view your blog. The contact form widget should be gone.

Adding Custom Blogger Contact Form in a Static Page

Finally, now that we enabled the functionality of the contact form, let’s add a custom contact form in our Blogger blog…

1. Go to “Pages” and click the “New page” button. If you already have a Contact us page, just click the “Edit” link below the page title.

2. Once the Page editor opens, fill up the page title with Contact/Contact Us or any title you want to show. It is recommended doing this before anything in order to make the permalink SEO friendly.

3. Click on the HTML tab as there we will add the code to make the custom Blogger contact form work. On the right site, change the Page settings to hide (“Don’t allow” or “Don’t allow, hide existing”) the reader comments, then click the “Done” button:

4. Below are 5 custom Blogger contact form styles. Pick your favorite and copy the code provided, then paste the code inside the HTML box of your page editor:

Simple Contact Form

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}

Contact form with CSS rainbow divider

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:””;display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}

Blogger Contact Form with CSS Ribbon

.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:””;position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:””;position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}

Shoot Me an Email

Your name:

E-mail address *:

Message *:

Minimal Contact Form

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px “Lucida Grande”;letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}

Get in touch.

Contact form with speech bubble

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:”;position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0%,#397fd0 100%);font:bold 16px “Helvetica Neue”,sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,0.3) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}

5. After you added the code, click the “Publish” button on the upper right side. Now you should be able to see the Blogger contact form live on your static page. To ensure that everything works fine, you can send a message as a test. The message should be delivered to your inbox in a matter of seconds, just make sure that you’re checking the email that you’re using with your Blogger account.

Frequently Asked Questions about the Custom Contact Form for Blogger

Where do the messages go?

Once a visitor asks a question or sends feedback through the Blogger contact form, it is instantly delivered to the email associated with your Blogger account. If a blog has several administrators, then all the individual administrators will receive the comments or questions asked by the visitor.

What is the benefit of using a separate “Contact Us” page?

Even though it all comes down to your personal preferences, your blog will look more professional if it has a separate page for the custom contact form for Blogger. It gives you credibility and also offers you the chance to add a specific call to action in the new “Contact Us” page.

Is it possible to add extra fields?

Unfortunately, no. You can’t add custom fields such as website, phone number or mailing address since Blogger uses special tags in order to transfer data. In any case, the default fields are well laid-out and will help you to get the basic information you need about your visitors.

I have installed the Blogger contact form, but it is not working. What could be the problem?

There are several reasons why you may be having trouble setting up your contact form. The simplest way to troubleshoot is to countercheck the email you linked to the blog and also reinstall the form again.

Ultimately, by using the custom Blogger contact form you gain from consistency in the type of information you request and also reduce spam since you will not have to display your email directly on the blog.

Recent Posts Style #1

Recent Posts Style #2

Recent Posts Style #3

Recent Posts Style #4

Recent Post Style #5

How to Add Recent Posts Widget on Blogger

Keep Your Blog Updated

Rate this:

Benefits to Customers

Benefits To You

Add Your Own Custom Search Gadget To Blogger

Steps: How to Add a Custom Search Box to Blogger

That’s it!

Rate this:

How to Add An Instagram Widget in Blogger

Rate this:

Things To Think About

Site Loading Speed

File Storage Affects SEO

Storage Locations Affect Editing Abilities

Storing Javascript/CSS Files With Google Drive

Step 1. Prepare the CSS/JavaScript Files

Step 2. Upload Your File on Google Drive

Step 3. How to Add an External CSS/JavaScript file to Blogger

In Conclusion

Rate this:

Here’s What You’re Going To Get

Add the Most Commented Posts Widget to Blogger

Why Use the Most Commented Posts widget?

Rate this:

Center Header Image with Blogger Template Designer

Align Blogger Header Banner and Text Side by Side

Image on the right and title on the left

Image on the left and title on the right

That’s it!

Rate this:

Ways to SEO Optimize your Blog

On-page Optimization

Off-page optimization

1. Create SEO Friendly Blog Post Titles

2. Improve the quality of your content

3. Keywords are keys

4. Meta-tags are important, but not ‘that’ much

5. Socialize!

6. Link in and Link-Out

7. Write Often

Rate this:

Before we start!

User-Friendliness

Design & Customizability

Gadgets, Widgets & Plugins

The SEO Question

And the Blogger vs WordPress Winner Is…

Rate this:

Role of NGOs in India

Different NGOs in India

1. CHILDLINE India foundation

2. Pratham

3. Smile Foundation

4. CRY (Child rights and you)

5. Nanhi kali

Rate this:

Before we start!

User-Friendliness

Design & Customizability

Gadgets, Widgets & Plugins

The SEO Question

And the Blogger vs WordPress Winner Is…

Rate this:

Ways to SEO Optimize your Blog

On-page Optimization

Off-page optimization

1. Create SEO Friendly Blog Post Titles

2. Improve the quality of your content

3. Keywords are keys

4. Meta-tags are important, but not ‘that’ much

5. Socialize!

6. Link in and Link-Out

7. Write Often

Rate this: