Untitled

[ramadevi2020-blog]

20 Best Sites with High Quality Free Stock Photos

In today's online business world, tons of people have a need for quality free stock photos for their blogs, company websites, and everything in between. Unfortunately, there are still a lot of businesses who are settling for the corny stock photo of yesteryear, either because they don't know their options or think they are too hard to find. That's where the good news comes in: good stock photos don't have to be expensive or hidden deep in the crevices of the internet. In our digital age, there's plenty of solid material out there - if you know where to look. Read for more good news? We have your back, and have taken the hassle out of finding these stellar stock images. We're confident that this collection of resources will help you find exactly what you're looking for, whether it's adorable animals, minimalist interior design, and anything in between.

20 of the Best Sites to Download Royalty Free Stock Photos

1. Negative Space

One of the best things about Negative Space is that they are constantly updating their free stock photos every week. With Negative Space, you never need to worry about copyright restrictions, so you can use them for your project without having to jump through hoops. Negative Space has a large selection to choose from, and the interface is very user-friendly. It's easy to sort through the photos in order to find exactly what you need.

2. Death to the Stock Photo

The founders of Death to Stock are dedicated to making beautiful photos more accessible. They knew how important it is for those running blogs and online businesses to not spend all of their profit on images for their websites. The format is simple: just give them your email to get a new bundle of great stock pictures monthly, then just use the ones that apply to your current project. Easy! For businesses with some extra funds to invest, Death to Stock has an affordable Premium membership which gives you access to their entire library of photos (instead of just the pre-selected ones they send), plus some of the profits from the membership are used to further the resource by financing photographers and their projects.

3. Picjumbo

Picjumbo is unique in that all of the photos come from a sole photographer, Viktor, who shares his photos from his home in the Czech Republic. He updates the selection of photos really frequently, so there is always a fresh batch of high-quality graphics to download. To take it a step further, Viktor offers affordable paid packages for businesses that use stock images frequently. He also has a nifty plugin for the Photoshop and Sketch programs for just under 8 bucks.

4. Stokpic

Stokpic is another example of a photographer deciding to give away his photos for free. Ed Gregory decided to share 10 new photos bi-weekly that you can use in any way that suits you. The easy user interface allows you to browse his categories like architecture, fashion, and nature.

5. Kaboompics

The site's creator, Karolina, is a Polish web designer. She is the creative engine behind this extensive stockpile of high-quality pictures. The images address a wide variety of topics. As with the rest of the sites, users can use Karolina's pictures for anything they need. A quick visit to the About page of the site shows how big of a reach it has; during our visit to the page, the Image Downloads ticker stood at a whopping 5,051,906.

6. Startup Stock Photos

Startup Stock Photos is a company that operates on simplicity. They share pictures they're taking anyway in order to help businesses find a cheaper way to gain traction online. You don't have to be a startup business to utilize their images, which is fine by them. The images are free, but they wouldn't say no to a donation.

7. Freerange

Freerange photos derive from a community of in-house as well as external talent. At Freerange, their principles and motivations are clear: "Freerange Stock was formed with the goal to provide quality stock photos for commercial and non-commercial use. For free. We feel that free stock photos can be good photos." Can't argue with that.

8. Libreshot

Every photographer brings his/her own unique style to this fun brand of art. At Libreshot lives a very unique collection of free stock photos.

9. Fancy Crave

The images on Fancy Crave come without copyright restrictions, and they're free of all the corniness of typical stock photos. Attribution is not legally required, but they note that it is recommended if possible. Fancy Craves selects two fresh photos to upload daily, keeping things current and providing beautiful photos to suit all needs.

10. Unsplash

The creativity of the title matches the creativity of their photos. They have pages and pages of quirky, one-of-a-kind images for you to choose from. As you've likely come to expect, these images are able to be used without any copyright restrictions.

11. StockSnap

The photos on StockSnap are of superb quality and most of them are especially great for use as backgrounds. The selection is so interesting and versatile that it's easy to find yourself on page 50 of photos all of a sudden. And yes - they're free.

12. SplitShire

SplitShire is an Italy-based organization that offers pages of incredible free photos for you to use at will. Their philanthropic mission is simply: "Helping you to be awesome out there with great content."

13. Life of Pix

Life of Pix was created by Leeroy Advertising Agency (Montreal, Canada) and they have a real knack for supplying great pictures. Naturally, these cool graphics are fine for you to use - no strings attached. If pictures aren't enough for your unique project, they have a sister company called Life of Vids.

14. Pexels

Unlike most of the other listed sites, Pexels handpicks their favorite photos from a pool of free image sources to ensure that you're seeing only top-tier work. The images that survive their rigorous selection process are then able to be used in any way you see fit. The site also makes searching for your perfect stock photo as easy as possible.

15. HubSpot

HubSpot is a bit different from the rest; there's somewhat of a shortage of high-quality free stock photos available to those who need solely business-themed graphics. Hubspot has a healthy selection of corporate-style images that are perfect for a professional project.

16. Gratisography

The images on Gratisography lie a little further on the wacky side. These creations come from photographer Ryan McGuire, who is known for seeing things a bit differently. His work is significantly quirkier than some other sites (i.e. fake moustaches, pineapples wearing glasses, gummy bears in cereal) but you never know when you project might just call for something out of the ordinary.

17. Jay Mantri

Jay Mantri is yet another good-guy photographer who chose to share his amazing photos with the world. His work is quite sophisticated, and a lot of shots leave you wondering how he did it. This is one artist we'd say to go check out anyway, even if you don't have a specific need for scenic, high-class images.

18. ISO Republic

ISO's Republic's mission is to supply only the best digital images for online businesses of all kinds. One visit to their site will tell you immediately that they are serious about the quality of their content. The photos are top-notch quality, and while the subject matter varies, they all maintain a similar level of sophistication. Similar to some previously listed sites, you have an option on ISO to register for their email list to get extra content not posted on the site.

19. New Old Stock

This free stock photo site embodies classic elegance. They deal exclusively in old photos, usually in black and white. Web designers and history buffs alike will enjoy their large compilation of antique photos. Though there are some unique challenges to the redistribution of old pictures, the site only posts those that have no evidence of copyright issues. Their rules are slightly more stringent than other sites, so just make sure to read up on it before using these photos for commercial purposes.

20. Pixabay

Pixabay is our final choice of free stock photo collection. It has a great archive of plenty of public domain photos (so you can use them without worrying about copyright issues). Thank goodness they have an intuitive search mechanism since they have just shy of a million awesome graphics. Unlike some other sites, it offers a more advanced search that allows you to filter your query as much as you need so you can always find exactly what you want.

[ramadevi2020-blog]

How to Create a Blogger Account?

Are you wondering how to create a Blogger account? Many of us do, because Blogger is one of the most popular blogging platforms out there and it can provide us with an extraordinary, fun way to express ourselves in the online world. Not only is it Blogger a very large blogging website, but it's also full of categories that you can blog on. You have complete control over what you want to blog, and that does make Blogger an amazing platform to begin with. Yet you do have to wonder how to create a blog on Blogger! We are here to help you understand all of that and so much more as fast as possible, thanks to a detailed guide that will showcase all the necessary instructions in a very easy to read manner.

Creating a Google account

What you need to know here is that Google owns Blogger, and because of that you will need to use a Google account to sign in to this platform. You can create a Google account now and then you will be able to continue to the platform without a problem. By creating a Google Account you will be able to access a wide range of Google apps and services like Drive or Mail for example. Visit the page above and share all the necessary information in order to create the necessary Google Account. Thankfully, the process is very easy and it will take only a few minutes of your time. In case you already have a Google Account, you will need to sign on the Blogger page.

Creating your blog

Once you are located on the Blogger page, you will need to press the New Blog button in order to start a blog. You will receive a new window where you will learn how to create a Blogger account. This will enable you to share all the necessary information.

Make sure that you add a title for your blog in the Title area. This is very important because it will allow you to entice the visitor to read more about you and your content. So, try to make the title relevant and appealing

In order for users to find your blog, you will need to create an Address for it. Your blog will have a blogspot.com address, but you will need to choose what goes before blogspot.com. Basically, you can opt for something like abcdef.blogspot.com or anything like that. Remember that this can be modified in the long run. The great thing here is that you will immediately be able to see if that address is available or not. This means you will have the ability to check the address availability really fast.

The next step will require you to choose from any of the presets that are available at this point. Starting with a Template is a good idea, but do remember that this can be modified afterwards as well. So it's a good idea to just pick a template and move onward.

Once you have the blog title, address and template ready to go, you will have to press the Create blog! button. This process will take a little bit until it's completed properly, so just wait for a few seconds as the new blog will soon be added to the blog list. So, if you were wondering how to create a blog on Blogger, this is the simplest way to do it. Maybe the best thing about how to create a Blogger account is that the entire process is very easy to do. Even beginners will have no problem creating and setting up an account. The customization options are plentiful here, so you shouldn't have any problem setting your account really fast! (adsbygoogle = window.adsbygoogle || []).push({});

Starting to post

Although the blog address will be available, you can't call that a blog unless you start writing content in there. Obviously, you will need to learn how to write a post on Blogger, and we are here to help you with that right now. In order to start writing, you will need to click the Create a new post link or you can press the New Post button. Once you do that, you will gain immediate access to the post editor and here you can write the blog as well as make any necessary changes to content that you already wrote.

Write a title for your post

Your post needs to have a title. Towards the top of the Blogger editor you will see that there is a Post title box. Add in the desired post title there. This shouldn't eat up a lot of your time, just try to come up with a post title that is enticing, very easy to use and a delight to read for your audience. A catchy title can be great. Don't opt for the clickbait title that you can see nowadays, make your title feel informative and fun to read as that's what you want. If you want to write a first post, you need to make it introductory. Write about the goals you have, the type of content you want to add and so on. It will not be easy to write down the first words, but if you create a good title it will be easier for you to translate thoughts into words!

Start the writing process

You can create a Blogger post in 2 ways. You can either write the post in HTML or you can use the word processor included here. You have a button located in the top left corner which helps you switch between any of these two writing models. The HTML editor helps you create better web content and you can also use it to insert some special web functions. On the other hand, the word processor is more than qualified to offer you all the extra help you might need here.

Customizing text

If you want, you will be able to customize the text you want without a problem. You will have the ability to use the toolbar located on top of the editor to modify the text as you see fit. This includes formatting, color, size, alignment and so on. You have a Normal drop-down that helps you change the type of content you want to add, so you should consider changing between the desired heading type as you see fit. This also changes the way search engines process your content, so keep that in mind.  If possible, try to break the content into easy to read pieces. Use the Headings in a strategic manner.

Add an image to your post

If you want to make your blog post enticing, you should try to add at least an image. These images make posts a lot easier to read and it's a good idea to make the most out of images if you want to share a great experience for your audience. You will have an "Insert Image" button right above your text editor, on the toolbar. There are multiple options, you can either upload them from your PC/Mac, you can share a link or you can use your webcam to take a picture if you want. However, if you link to other websites, make sure that you showcase their copyright or just refrain from doing that to begin with. There are many sites who do not agree with the idea of having their content stolen, so try to stay away from that!

Modify the post settings

If you look on the right side of your Post Editor, you will be able to access some Post settings. Remember that these make it easy for you to customize your post right before you choose to publish it!

Labels are useful if you want to group multiple posts which are very similar to one another.

Schedule allows you to publish your content at a later date. It can come in handy if you don't want to share multiple articles at the same time.

Permalink is an option that allows you to select the way your post will be linked to in the future. Usually it will maintain the title structure, but there are other link types you can choose from as well.

Location enables you to add a location tag for your post. It's a very good tool for those that move/travel often

Options allows you to modify some features like the user ability to comment on a post for example. You can also choose the way your HTML code is interpreted here as well.

Previewing

A great thing about previewing your post is that you will be able to see how it looks when a reader will access it. This is the right time when you need to check your post for any errors, be it grammar or structural ones.

Save the post for later

This is not the same as scheduling. When you save the post for later, it means that the post just isn't finished at this time and you will continue to work on it at a later time. You can see this as a draft for your future post.

Publishing the post

If you double or triple checked the post and there are no errors, then you are good to go. Still, it's a good idea to go through it at least one more time to ensure that all the content you want is there and you don't have to make any more changes. Add all the necessary labels and tags, make sure that you inserted any links, images and other information that you might need. Once everything is ready, you will just have to press the Publish button located at the top of the panel. This is when Blogger will automatically redirect you to the Posts page. Here you will see the post right on top.

Don't believe that your work is done at this point. In fact, it's far from that. You still have a long way to go before you properly optimize and improve your blog. After all, people won't be drawn in to your blog if you have just a single one to begin with. Work hard to write great posts as they will be able to make your blog stand out in the long haul. Of course, you do need patience. Writing a good blog does require time and you shouldn't rush the content creation. Prioritize quality over quantity all the time. If you don't do that, the experience will be very well worth it in the end.

How can you expand your blog?

As we mentioned earlier, writing a single post is great but it won't draw in a lot of traffic. If you want to write a good post, one that will bring in lots of readers and views, you want to post as often as possible. Quality content will always bring in traffic. Update the blog as often as you can. If you can share at least a post per week, you should do that. A good stream of posts will always come in handy, so make sure that you always write some good, enticing content that will help populate your blog. If possible, we recommend you to create a post Schedule as this will help you better optimize the way you post. This way you will be able to prepare your content beforehand, so you can have it ready when you want to create a new post. The best approach is to write more than 1 post at a time. One can be posted and the others can be kept for a later date if you so desire.

Write for a niche

Generalized content works but it won't really deliver good results for your audience. If you want to get the best results, we recommend you to find a niche as fast as possible. Not only does a niche help you target specific users, but it will also help you become an authority on that topic. We recommend you to research a niche and become an expert on it. This is the best way to create a large audience for a niche and from here to reaching success in blogging will be just a small step. Don't rush the content creation process, especially if you write for a niche. Creating redundant content will just keep people away. As long as you take your time and focus on results for your audience, the experience will be an amazing one. Of course, use the proper content structure in order to cater to the needs of search engines, all while maintaining the content relevant for humans as well!

Reader interaction

Once you learn how to create a blog on Blogger you can create more than a blog in order to reach multiple audiences. But the idea here still remains, you will need to interact with the audience. The community will grow more and more as you put out content, so make sure that you always interact with the audience. Read the comments and moderate them, make sure that you remove spam. Also, reply to people that are interested in what you write. This will help create and nurture a community around your content, which can be very interesting to do!

Advertising your blog

Your blog will need advertising if you want it to grow really fast. One of the best ways you can do that is by sharing it with people anywhere you can. From social networks to social media or any other location, all of these are great places where you can share your blog. We recommend you to try and do the following:

Post a short headline and a link to your article on Twitter

Single Blogger is a Google Product, make sure that you use the Google buttons in order to share on Google Plus and perform other similar actions.

Encourage readers and friends to share your Blogger posts on Facebook and anywhere they can. This will help you reach a large audience really fast.

Make sure that you comment on forums and other blogs. Link to your post there if it's meaningful for that particular topic. This type of practice is called backlinking and it's very good for SEO.

Place ads

Ads are very important if you want to monetize the blog. You won't be able to monetize your blog with AdSense unless you have a blog active for around 6 months, so keep that in mind. You also need to have at least 18 years of age and you also have to obey the TOS. AdSense allows you to receive payments based on the amount of impressions generated by your blog.

Blog customization

You can modify just about anything you want on Blogger, it all comes down to you to make the right changes! For example, you will be able to press Layout and then you can modify the block content for each section of your blog. You also have the ability to Add a Gadget if you want. Blogger has lots of add-ons to choose from, all of which can help you better define your blog! If you want to customize your Template, keep in mind that there are multiple customization options to choose from. You can also keep the template you have now. Programmers can press the Edit HTML button so they can modify the CSS and HTML code.

Stat tracking

Blogger has a dedicated option named Stats where you have the ability to monitor the blog performance. Here you have the ability to see the amount of views you get. This way you can identify what posts are performing better than others. As a result, you know what content works great for your audience in the longer term! Learning how to create a Blogger account is really easy and you can feel free to create multiple blogs if you want. Just make sure that you write content for all of them. Plus, you can also monetize each one of your blogs if you so desire. Take your time and make sure that you provide valid information for your readers. This should be the main reason to create a Blogger account in the first place!

[ramadevi2020-blog]

How to Get a Disabled Gmail Account Back

It can be a frustrating experience when you find your Gmail account is no longer active. Having your Gmail account disabled means losing access to the products by Google that were linked. There are several reasons why your account may have been ended that are mostly due to the Terms of Service policies by Google itself. So, if you have violated one more of the polices either intentionally or not, you can find yourself with a disabled Gmail account. Adding to the frustration is that Google will often disable the account with no warning. However, the good news is that there are simple methods for getting your account back online.

Gmail Account Temporarily Disabled

This is generally the easiest to overcome as Google believes that your account may be compromised. To rectify the situation, you will be asked to provide your mobile number or recover email identification. If you do either, they will send you a text message that will allow you to access your account quickly. You will need to do so within a 48-hour period otherwise it will become more difficult to get back your account.

Gmail Account Disabled Due To Perceived ToS Violation

If your Gmail account disabled included a terms of service (ToS) violation warning, then you will need to fill out their contact form so the process of getting your Gmail account back can begin. You should read the ToS thoroughly so that the violation will not happen again and provide the email address. If you do not get a response, repeat the step every two days until you do.

Gmail account disabled - Google contact form screenshot

Once they have responded, the next step should be to get your Gmail back so that you can gain automatic access to all the Google products including AdSense. You can also visit the help forum where you can open a 'Gmail account disabled' topic. Just focus on the Gmail account itself first as that is the key to the rest of your Google services. You'll want to discuss the issues that you are facing and why this needs to be resolved as quickly as possible. If the Top Contributor pings your thread to the staff at Google, then you should expect your account to be back online in 48 hours or two business days.

Gmail Account Disabled Due To Serious ToS Violations

If the Gmail account disabled was due to a serious violation of the Terms of Service agreement, as well as the Google policies that oversee your account, then you will have considerable difficulty in getting your account back. Such violations would include your AdSense account being involved in click fraud, for example. Serious violations that are clear will make it virtually impossible for your account to be restored. If what happened was not considered a serious violation, then you should be able to get your account up and running within 24 to 48 hours depending on the circumstances. It pays however, to keep all your important data and information outside of your Google accounts in case of getting a Gmail account disabled result. By protecting yourself, the impact will be easier to handle until you can get your account back online.

[ramadevi2020-blog]

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.

[ramadevi2020-blog]

Top 10 Killer Tips to Improve Page Rank

Page rank is based on an algorithm that determines how close your link is to the query that was put into a search engine such as Google. The more important your link is shown to be, the higher it will be ranked on search results pages. The result is that web traffic increases to the links that are ranked at or near the top.

How the Page Rank is Calculated?

The calculations used by the algorithm that determines page rank includes the number of links that are connected to your site. That includes inbound, internal, external, do-follow, and no-follow links along with backlinks. To increase your web traffic, you need to improve page rank so that it pulls in more people who are likely to purchase the products or services that you offer. Here are 10 killer ways to improve page ranking so that more people will start visiting your website.

How to Improve Page Rank?

Submit Site to Web Directories

A simple, but very effective way to increase web traffic is adding more high quality backlinks. This can be done simply by submitting the content to respected web or article directories. They provide a great way for more people to see your content. Some good directories include the following:

DMOZ

Best of the Web (BOTW)

Jasmine Directory

ArticlesBase

Ezine Articles

By finding the right articles and web directories, you can quickly improve your page rank for your content.

Post Regularly

Google like sites that post on a regular basis, so set up a schedule where you have new, fresh content for your site on a daily or weekly basis. Be sure to post on the same day or days each week which will help improve your overall ranking.

Improve Content

If the content is well written, informative, and unique, this will help increase the chance that readers will share it with others. The better the content is presented, the more likely it is to be shared and that will improve its page ranking.

Link Exchange

This is a well-known technique, but it still works. To get a higher page rank, you will need to get other sites that are ranked higher to link to your site. Therefore, you will automatically have good links that will help boost the ranking of your content. This means that you will need to appeal to those with higher ranked sites to agree to share their link with you.

Post on Other Sites

This is also called guest posting, it is another tried-and-true technique that helps you improve page rank. Find blogs that allow for guests to post so that you can receive two or three backlinks in return for what you have submitted. The key is to post on blogs that are in your industry or niche so that you can attract readers to your site.

Add Comments to Other Sites

In addition to posting articles, you should also comment regularly on articles posted on other sites. You will need to set up a schedule so that you can comment on a consistent basis on posts that are in your niche or industry. The more you post, the more active you are in the community which means that more your site will grow in status. While most sites today have Disqus installed which means that a link to your site is automatically posted, others still use the Do-Follow which means you will need to include the link.

Increase Uptime

Be sure that you choose a web host that offers 99.9% uptime so that your website is available to anyone who wants to visit. Long downtimes can significantly cut into your web traffic, so be sure to choose a provider that is reliable and provides guarantees about uptime.

Social Bookmark

The social network is a great way to help increase the visibility of your content and improve page rank as well. By sharing your content on the best social sites, you will get more traffic thanks to the free backlink. Naturally, you’ll want to choose sites that are quite popular like the following;

Facebook

Google Plus

Pinterest

Reddit

Stumble Upon

Digg

Delicious

By sharing with good social media sites, you can increase page rank considerably. Plus, it will work for you over time to help bolster your site. Plus, be sure to be active on your social media sites by responding to questions so that potential customers will stay close to your efforts.

Multiple Pages

This is another old, but useful technique that can improve your page rank thanks to internal linking. Basically, you will need multiple pages that you link together for articles or content that is similar in nature. It takes a little work, but it is well worth it to see the results over time.

Research Popular Keywords

Focus on keywords that are the most common which means using words that people are most likely to use as queries on search engine sites. By using the most commonly searched keywords, you can help boost your page ranking significantly over time. This means having more visitors and better results when it comes to your sales. In addition to these ten proven ways to improve page rank, you should also consider the power of advertising. By creating a simple banner and advertising with it on other sites, you can generate a lot of good backlinks which in turn creates more traffic for your page. Keep in mind that you should be active daily when it comes to blogs and forums that are in your niche as well. Another small trick is to add a link to your signature in forums and emails, although you’ll want to avoid any illegal tactics that will put your website into trouble. By using proper techniques, you can improve page rank naturally which builds for your long-term success. After all, your goal is to be successful by increasing the ranking of your content. So, you should put in the time and effort to do things right to succeed. Which methods do you use to improve page rank? Share with us in a comment below.

[ramadevi2020-blog]

CSS Rollover Image Effect - Change Image on Hover

Rollover image is a design feature where an image changes when your mouse hovers over it. Think of a light bulb that turns on and off when you move your mouse cursor into that area of a page. When a page is loading, rollover images are preloaded into it to ensure that the rollover effect is displayed quickly. This used to be implemented using JavaScript, which is fairly easy with just a small amount of script involved. To make rollover images functional, onmouseover and onmouseout attributes are used to a link tag. The code is then added to a blog gadget or into a new post. It proved to have a number of disadvantages, however, which is why many web developers are using a CSS-only method.

How to create a rollover image using CSS

Here is how to implement a rollover image using CSS. Before getting started, we need to have two images ready, one in its initial/static state as well as its rollover state.

The Image

Place both the static and rollover image in one file and make sure that the rollover image is placed on top of the static one. To achieve the rollover effect, we'll write a code to display the static image and crop the hover image, so that only one image state is displayed at a time. For this tutorial, we'll use the following as a CSS rollover image.

Creating an HTML Anchor Element for our Image

Instead of adding the image file in a tag, we'll display it as a background image of an (anchor) tag. Here's the HTML that we need to add:

#URL">Rollover Image

Note: if you want to make the image clickable, replace #URL with the url of the webpage where you want the link to point to.

Using CSS to Set a Background Image

To create the mouseover image effect, we'll use the :hover CSS pseudo-class. Then, we'll use the background-position property and set the values to 0 0 to move the background image to the upper left corner which will create the rollover effect.

.rolloverimage{ display: block; width: <span style="color: #cc0000;">56px; height: <span style="color: #cc0000;">90px; background: url('<span style="color: blue;">https://1.bp.blogspot.com/-NtrjKUd-0fs/V_ewyJEdB_I/AAAAAAAAL28/D3OfCvvRv4oADehdckX0d919xFeggWZOwCLcB/s180/rollover-image-light-bulb-on-off.png') bottom; text-indent: -99999px; } .rolloverimage:hover{ background-position: 0 0; }

Note: Replace the text in blue with the url of your image file. Please pay attention on the width and height values marked in red, these should be different depending on your file, where the height value is for only one image and not the entire image file!

The result

Hover your mouse cursor over the light bulb to see the rollover image effect in action: Rollover Image.rolloverimage{display: block;width: 56px;height: 90px;margin:1em auto;background: url('https://1.bp.blogspot.com/-NtrjKUd-0fs/V_ewyJEdB_I/AAAAAAAAL28/D3OfCvvRv4oADehdckX0d919xFeggWZOwCLcB/s180/rollover-image-light-bulb-on-off.png') bottom;text-indent: -99999px;transition:all 0s ease 0s !important;}.rolloverimage:hover{background-position: 0 0;}

Adding Rollover Image to Blogger

To add the rollover image as a gadget: copy both the HTML/CSS codes and go to 'Layout', click on the 'Add a Gadget' link > select HTML/JavaScript, then paste the codes in the 'Content' box. Or, if you want to add it inside one of your posts, when you create a New Post, switch to the 'HTML' tab and paste the codes inside the empty box. And this is how you make images swap on mouseover using CSS. Enjoy!

[ramadevi2020-blog]

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!

[ramadevi2020-blog]

Share Blogger Post Automatically to Facebook using IFTTT

Automatically posting a blog post to Facebook used to be a challenge. The idea was simple, which is to notify Facebook that you have a blog you want posted on your wall, and the social media will do as you command. The implementation, however, was more complicated than that. Even with Facebook's post-by-email feature, only the blog name and title will appear on the wall, leaving behind the content or link. There are other plugins available, but they don't work as straightforward as they're supposed to be. There is always something missing.

How to Share Blogger post automatically to Facebook using IFTTT

Here is an online utility IFTTT (If This, Then That), which is capable of moving social postings between sites. Setting it up is fairly easy, and just as easy to use. So, let's see how we can share Blogger posts automatically to Facebook using IFTTT.

Step 1. Sign up for a free IFTTT account

Visit IFTTT.com and set up an account by creating a username and password.

Now, IFTTT will take you through a mini-tutorial - click on the word 'this', 'that' and 'Continue' button several times. Finally, select 3 channels that interest you and click 'Continue' to finish with the registration.

Step 2. Create a new recipe

Once registered, we need to 'Create a Recipe'. A recipe is basically the process of combining two platforms together - in our case, we will combine Blogger with Facebook. This shouldn't take more than five minutes. To get started, click the 'My Recipes' link and then click the 'Create a Recipe' button, as shown below:

Start creating the recipe by clicking the blue 'this' word and select a "trigger channel". The trigger you need to choose is Blogger - search for it in the box, as illustrated below:

Step 3. Connect Blogger blog with IFTTT

Connect your Blogger account in order to tie it with your IFTTT account. A 'Request for Permission' pop-up will appear > click the 'Allow' button and choose which blog you want to use with IFTTT from the drop-down menu, then click the 'Update' button.

After our Blogger blog has been connected, 'Choose a Trigger' that allows you to specify what kind of posts will be published to Facebook. You can choose 'Any new post' or 'New posts labeled'.

Finally, press the blue 'Create Trigger' button to proceed to the next step.

Step 4. Creating the 'That' trigger

After registration, Create a Recipe that will specify the direction with which your blog posting will take. Since you want to link Blogger to Facebook, then the Recipe will be - if Blogger, then Facebook. What you're doing is replacing 'this' to Blogger, which is the source, and 'that' to Facebook, which is the target destination.

To set up 'that', click on the blue-colored 'that'. This will bring up a window that contains a list of social media sites. Search for 'Facebook' in the box and select the 'Facebook Pages' option (select the plain 'Facebook' option if you want to post to your personal profile).

Step 5. Connect Facebook page with IFTTT

Connect your Facebook account. Make sure you are logged into your Facebook account, before you connect. Pressing the 'Connect' button will open a pop-up window to allow IFTTT post on your Facebook page, then select your Facebook page.

Hit the 'Done' and 'Continue to the next step' buttons and we're almost done... You will be prompted to 'Choose an Action', where you get to specify if you only want to 'Create a status message', 'Create a link post', or 'Update a photo from URL'. Choose 'Create a link post' as shown below:

Step 6. Choosing the ingredients

Once you choose an action, a 'Complete Action Fields' window will appear with 'Link URL' and 'Message' box. To add an ingredient, click on the 'Message' field and you'll see a test tube icon on the right hand side. If you click it, a drop-down menu will appear which will let you choose a field to include - select 'PostTitle' and click 'Add Ingredient' blue button on the right side.

If you are unsure of what each ingredient does, please visit this page.

Step 7. Finish creating the recipe

Finally, click the blue 'Create Action' button and your recipe should look something like this:

To complete your recipe, hit the 'Create Recipe' button. And that's it! This is how IFTTT recipes are created. Next time you publish a Blogger post, it will be automatically shared to Facebook.

[ramadevi2020-blog]

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:

                                                                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-<span style="color: red;">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.

[ramadevi2020-blog]

Customizable Related Posts Widget for Blogger

We already posted a few tutorials on how to add related posts widget with thumbnails in Blogger with summaries or only titles, which can be compiled into a single All-In-One Widget with powerful options. This new customizable related posts widget for Blogger integrates all the features we've seen before and more, such as thumbnails (square or round), post dates, excerpts, display only titles / thumbnails. Now let's see what this related posts blogger widget has to offer.

Related Posts Widget Features:

9 attractive styles to match your needs

Show Title, excerpt & thumbnails

Display simple related posts with titles / summaries / post date

Choose whether to display the post thumbnails or not

Ability to control the thumbnail image size

Option to choose square or round thumbnails

Show post text excerpts

Control the length of the post excerpt / title

Determine the number of related posts to display

Requirements:

The related posts widget recognizes post thumbnails uploaded through Blogger itself (or Picasa Web Albums), other images from Photobucket, Flickr, or other non-Blogger hosts will not be supported.

This widget is compatible with the standard desktop Blogger templates except Dynamic Views, which does not accept customization.

The script does not work on private blogs, so your blog / site must be open to the public in order to show.

Adding Customizable Related Posts Widget in Blogger

Log into your Blogger dashboard, go to 'Template' and open template editor by clicking the 'Edit HTML' button below 'Live On Blog' preview. Next, we're going to use the template search feature, be sure to follow these directions exactly: 1. Place your cursor on the template code. 2. Click once. 3. Press CTRL and F at the same time (PC) or Command and F (Mac). The search box will open in the upper right corner of the template editor.

Type in the search box, then press ENTER. This will take you to the tag in your template and highlight it in yellow. Select and copy the entire CSS style below and paste it directly ABOVE the tag:

.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px 'Open Sans', sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px 'Open Sans', sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px 'Open Sans', sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:<span style="color: red;">22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:<span style="color: red;">25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px 'Open Sans', sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px 'Open Sans', sans-serif;color:#999999;}

Next, we need to add the script  - search for the following line:

Once you found it, click the small arrow not beside it but with one level above to expand code and scroll down until you see - right below this tag, you should see the line including the "postQuickEdit" id. See the screenshot for more help:

Just ABOVE the tag, add the following script:

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,]; var relatedSettings = { blogURL:"", relatedHeading:"<h4><span>Related Posts</span></h4>", relatedPosts:4, relatedStyle:4, thumbnailSize:"w300-h200-p-nu", defaultThumb:"https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png", roundThumbs:false, titleLength:"auto", snippetLength:45, centerText:false, openNewTab:false }; //<![CDATA[ var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;">';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"…":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"…":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'<div class="related-snippets">'+q+"":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'<div class="related-snippets">'+q+"":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'<div class="related-date">'+postdate+"":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'">':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'<div class="related-date">'+postdate+"":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'<div class="related-snippets">'+q+"")}b.innerHTML=f+=""+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]); //]]>

How to Customize the Related Posts Widget for Blogger?

To change the 'Related Posts' text that appears above the widget, modify the text in red:

relatedHeading: "<h4><span>Related Posts</span></h4>",

To change the number of posts to display, change the '4' value from this line:

relatedPosts: 4,

Note: you may need to change the percentages in the CSS styles above in order to make posts fit the related container. Just follow the values in red and play with them until you get the best results. To change the style of the related posts widget, modify the '4' value from:

relatedStyle: 4,

Available Related Posts Styles

simple related posts widget that will show post titles only

display post titles and snippets

display post thumbnails, titles and snippets

display related posts thumbnails, titles and post date (shows by default)

display related posts thumbnails and titles

post titles in front of thumbnails, instead of having them below the thumbnail

display thumbnails only

small thumbnail with titles on the right and date below

small thumbnails with post titles and excerpts on the right

Customizing the Related Post Thumbnail Size & Style

By default, thumbnails are resized and cropped automatically to be 300px wide by 200px tall. If you want to change the width and height of the thumbnails, modify the '300' and '200' values from:

thumbnailSize: "w300-h200-p-nu", defaultThumb: "https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png",

Note: 'w' comes from width, 'h' comes from height. To make the thumbnails square, change the 'h' (height) value and make it equal with 'w' (width) value. A higher value will result in more high-res images. If you want thumbnails have rounded corners, change 'false' with 'true':

roundThumbs:false,

Customizing Related Titles & Excerpts

To shorten the post title, change auto with the number of characters to show:

titleLength: "auto",

To reduce or add more characters to the snippets, change the "45" value:

snippetLength: 45,

If you want to center text (title and summary), change 'false' to 'true':

centerText:false,

To open links in a new tab when visitors click on a related post, change "false" to "true":

openNewTab: false

Once you're done with the settings, click the 'Save Template' button and now you can see the related posts widget live on your Blogger blog.

Final words

That's it! With the new customizable Related Posts widget for Blogger you will be able to add unique features to the related content section of your blog. However, all of these styles look and work slightly different, so take your time, and pick your favorite.

[ramadevi2020-blog]

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:

//<![CDATA[ function resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(/\/s72\-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"http://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"";t+="",$(a).html(t)}else $(a).html("<span>No Label!")},error:function(){$(a).html("<strong>Error Loading Feed!")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;font:11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;">LOAD MORE POSTS');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;">')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://1.bp.blogspot.com/-6_Eha7PSRy0/WXI6jskHE9I/AAAAAAAAMB0/6iFQ2qywS2kaNA2evWgsUb51zjRFf69cQCLcBGAs/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);e(document).ready(a)}(jQuery); //]]>

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

.status-msg-wrap{display:none;} //<![CDATA[ !function(i){function e(e){i.getScript("http://"+e+".disqus.com/blogger_index.js")}function t(){g||(g=!0,r?(w.find("a").hide(),w.find("img").show(),i.ajax(r,{dataType:"html"}).done(function(t){var n=i("<div>").append(t.replace(c,"")),o=n.find("a.blog-pager-older-link"),d=n.find(s).children();i(s).append(d),window._gaq&&window._gaq.push(["_trackPageview",r]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&e(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),o?r=o.attr("href"):(r="",w.hide()),w.find("img").hide(),w.find("a").show(),g=!1})):w.hide())}function n(){return Math.max(p.height(),l.height(),document.documentElement.clientHeight)}function o(){n()-(p.scrollTop()+p.height())<150&&t()}function d(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(r=i("a.blog-pager-older-link").attr("href"))){var e=i('<a href="javascript:;">Load more posts');e.click(t);var n=i('<img src="'+a+'" style="display: none;">');p.scroll(o),(w=i('<div style="text-align: center; font-size: 150%;">')).append(e),w.append(n),w.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}}var a="https://1.bp.blogspot.com/-6_Eha7PSRy0/WXI6jskHE9I/AAAAAAAAMB0/6iFQ2qywS2kaNA2evWgsUb51zjRFf69cQCLcBGAs/s1600/loader.gif",r="",w=null,s="div.blog-posts",g=!1,p=i(window),l=i(document),c=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(d)}(jQuery); //]]>

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!

[ramadevi2020-blog]

How to Fix Mixed Content Errors in Blogspot Blogs

With HTTPS now automatic in Blogger the benefits have been considerable. However, there are some issues that are now facing bloggers thanks to this change in policy and one of the most common is mixed content errors.

What are mixed content errors?

This is when a web page becomes secured by SSL, but it contains both secure HTTPS and also the non-secure HTTP which is usually links, scripts, style sheets, video, and images. This results in browser errors that negatively affect the performance of your website and cause security issues. This means that source codes such as template, layout gadget, and post and paste may be causing the issues in the HTML side of the equation.

How to identify mixed content errors?

This is a fairly straightforward process that you can use through Google Chrome: 1. Visit blog using HTTPS, for example - https://yourblog.blogspot.com 2. Access the Chrome Menu at the top-right of your browser window and go to "More Tools" > "Developer Tools" and switch to the "Console" tab or use the CTRL + SHIFT + J keys to open the JavaScript console 3. Look in the Console for mixed content errors which will look similar to these:

Examples of mixed content errors include, but are not limited to the following: - Insecure Script Request - Insecure Image Request - Insecure URL Request You should list all unsecured URLs and visit the other pages on your blog to check for other mixed content errors.

Fix the mixed content errors in a Blogger template

To fix the errors encountered which may be found in the template or layout, you will need to do the following: 1. Go to Blogger and select your blog, then click on "Template" and press the "Edit HTML" button 2. Click anywhere in the code area and press CTRL + F to search for http://

3. Replace all http:// prefixes with https:// Verify that the new URLs using the HTTPS addresses work by opening them in a new window on your browser. If the links you are receiving provide the same results, then you can Save Template. To check for layout errors: Go to Blogger and click on 'Layout' > check for any HTML/JavaScript gadget and click 'Edit' on each gadget. Replace all http:// prefixes with https:// then verify that they are working and hit Save.

Fix the mixed content errors in Blogger posts and pages

To check for post and page errors, do the following: 1. Log into your Blogger Dashboard and select your blog, then click on 'Posts' or 'Pages' and select any post or page > hit the "Edit" link below the Post/Page title. 2. Once the Post editor opens, switch to the "HTML" tab and press CTRL + F keys to look for http:// prefixes. After you found them, replace http:// with https://

Be sure to verify that the new link works by opening up your browser and testing them. After you've tested them, hit Update.

Update to the Blogger post editor to fix mixed content

To find and fix mixed content errors automatically, Blogger has released a warning tool that alerts you to possible mixed content issues in your posts. All you need to do is go to "Edit" inside a post, switch to the "HTML" tab and hit the Update button. All of the errors will be presented along with the ability to fix them. Once they have been corrected, hit Update.

In the end, fixing these types of errors will greatly improve the performance of your blog, particularly when it comes to pages that may have this particular issue with mixed content generating errors. It also applies to custom domains as well as long as you have an SSL certificate. All it takes is a few minutes and you can greatly improve your blog site that has been impeded with mixed content errors.

[ramadevi2020-blog]

Automatic Featured Posts Slider Widget for Blogger

Anyone with a blog wants readers to stay rather than move on to another. It's not being selfish but after someone has read one post, you'd definitely want them to read another, right? After all, isn't it one of the tenets of SEO to make people stay longer on your blog if it has to have a fighting chance at the rankings game? The question now is: how exactly do you entice them to read a few more of your blog posts? First off, you don't know exactly what brought a reader to your site. Well, you sort of do, if you have Google Analytics and all that. But that's beside the point. It wouldn't be productive for you to stare at GA the entire day hoping that it will tell you that yes, someone has been perusing your blog. The point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer. How exactly do you do that?

The Tactics of Persuading Users to Stay

Bloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for Popular Posts, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay. Now, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention. Thankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.

Demo

How to Add Featured Posts Slider Widget in Blogger

1. Go to 'Layout' > click the 'Add a gadget' link in the sidebar area and select 'HTML/JavaScript' gadget from the pop-up window. 2. Add the code below inside the empty box:

ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%} .feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%} .feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}

//<![CDATA[ featuredbwidget({ <span style="color: red;">listURL:"https://helplogger.blogspot.com/", <span style="color: red;">featuredNum:9, <span style="color: red;">listbyLabel:false, <span style="color: red;">feathumbSize:350, <span style="color: red;">interval:3000, <span style="color: red;">autoplay:true, featuredID:"#featuredbwidget" }); function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"><div class="feat-buttons"><a href="#" class="feat-prev">Prev<a href="#" class="feat-next">Next');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"><img class="featuredthumb" src="'+u+'"/><h5>'+k+'<div class="featured-meta"><span class="fdate"><span class="fday">'+t+' <span class="fmonth">'+v+' <span class="fyear">'+x+' - <span class="fauthor">'+m+""}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)}; //]]>

Automatic Featured Posts Slider Settings

listURL - replace "https://helplogger.blogspot.com/" with your blog URL

featuredNum - add the number of posts to display in the slider

listbyLabel - if you want to display posts by category / label, such as the tag fashion, it will be written as listbyLabel: "fashion"

feathumbSize - the size or dimension of the image in pixels

interval - time taken to change the slides position in milliseconds

autoplay - replace true with false if you don't want the slides to change automatically.

3. Once you are done with the settings, click the 'Save' button. Now, this code is for a slider widget which means that instead of just a random list of Featured Posts, you get to display them with images (if they have one) and you can include effects too. You can also control how many slides should be shown because it just wouldn't be prudent to feature your entire oeuvre, right? Plus, being a slider widget, it adds a nice little visual to your site. And we all know how visuals are important in enticing people to stay, don't we?

[ramadevi2020-blog]

Blogger.com turns on HTTPS on all blogspot domain blogs

For many bloggers, enabling the free HTTPS support for your blog on blogspot offers a number of benefits. However, if the latest news from Blogger.com is true you may not need to manually enable the HTTPS support from now on. Every current non-HTTPS blogs are going to be automatically changed to HTTPS and this means a whole new world for bloggers and webmasters who use this particular domain. First, this means that all blogs on blogspot will be granted a free SSL Certificate whether it is something that you want or not. Before, the webmaster was the one who decided whether the HTTPS was right for your site. Today, it has become mandatory which means that you will need to be prepared for the benefits and potential consequences.

The Blogger.com HTTPS Notification

The notification that was sent out by Blogger.com essentially stated that everyone who visits a blog on their domain would be able to view it through an encrypted connection. In addition, all bookmarks and links will still work on your site, but the HTTPS Availability setting will no longer be present and your blog will always use the HTTPS version that is available.

Those who log into their Blogger account will see the message and can interpret for themselves the ramifications of what it truly means. It should be noted that this is only for domains on Blogger.com that are free and that the custom ones will continue to go on functioning as they have in the past. That means there will be no support provided by free SSL HTTPS to custom domains. While this will naturally cause some concern for webmasters because Blogger.com does have some limitations that are well known, the truth is that this particular change may bring about a better, more secured experience to those visiting the sites as well as have a positive impact on search engine optimization (SEO).

What is HTTPS?

The use of Hyper Text Transfer Protocol Secure (HTTPS) is basically a secure version of HTTP. This means that the data which is transferred between the user and server is now encrypted and protected from access or hacking from unwanted third parties.

HTTPS as a ranking signal

Perhaps the most notable impact is how it will affect the SEO of your site. With Google in particular placing a higher importance of HTTPS as compared to HTTP sites, the secured connection actually makes a positive impact thanks to the additional security. Better security means higher ratings for your blog. In addition, your blog might actually run a little better with a secured connection as compared to your competition, some of which might not enjoy such a connection. Since all of your traffic will now be automatically diverted, there will not be a negative effect in terms of loss or lowering of your SEO. In fact, this is actually a good move for blogspot.com and is certainly a worthwhile addition to all of their blogs as the support offers solid benefits for every blogger who uses their domain.

[ramadevi2020-blog]

Stop Blogger from Redirecting Blogspot to Country Specific URLs

Let's say you're from France and have set up - just for examples sake - a blog called frenchlitgeek.blogspot.com where you share your thoughts and insights on French literature. Now, with Google's country specific redirection in Blogger, you might be redirected to frenchlitgeek.blogspot.fr when you try to access your site. The thing is, you perfectly liked the .com and didn't sign up for the .fr but you find yourself being directed there. Sure, your blog works and all but you also wonder why.

Why Did Google Do This?

Google has always supported the expression of views, and they stated as much on their official blog. In the post Free expression and controversial content on the web, which was published in 2007, it said "Our world would be a very boring place if we all agreed all the time. So, while people may strongly disagree with what someone says, or think that a particular newspaper is total nonsense, we recognize that each of us have the right to an opinion." The post continued, "We also know that letting people express their views freely has real practical benefits. Allowing individuals to voice unpopular, inconvenient or controversial opinions is important. Not only might they be right (think Galileo) but debating difficult issues in the open often helps people come to better decisions".

While the company is clearly on the side of people freely expressing their opinions, they also believe that a line has to be drawn somewhere. Then again, for a company providing services in over 100 countries around the world and each with their own national laws and cultural norms, it's surely difficult for a company like Google to decide where to draw boundaries. However, there are cases like child pornography which is illegal in just about any country where decisions are clear cut. For a company whose products are "specifically designed to help people create and communicate, to find and share information and opinions across the world", how does Google deal with this challenge? One of the most challenging areas where Google deals with issues regarding free expression is in Blogger, their content generation platform. Since Google can't check what you've written before you publish, they rely on active vocal users who are diligent in alerting the proper if a post borders on offensive. Then again, that in itself is a tricky issue as well because what one person may view as offensive, another might not. In other words, it's always a work in progress with Google. Fast forward to January 9, 2012 when Google announced it was making changes to the Blogger platform with regards to censorship. That said change would make use of a country specific domain to the Blogger platform. Doing this would allow Google to censor and remove content specific to a certain country. In their announcement, Google said: "Migrating to localized domains will allow us to continue promoting free expression and responsible publishing while providing greater flexibility in complying with valid removal requests pursuant to local law. By utilizing ccTLDs, content removals can be managed on a per country basis, which will limit their impact to the smallest number of readers." The move by Google come after pressure from countries like India that are working on hunting down content on social media sites which are considered inappropriate. Also, the move followed closely on the heels of Twitter's new censorship policies. Since Google aims to "help people create and communicate, to find and share information and opinions across the world", it would be strange to take down a post that was just banned in a certain area. In essence, with country specific redirection, a piece of content can still be accessible by the world save for the country where it was blocked.

How Would Country Specific Redirection Affect Your Site?

Of course, not all site owners greeted the country specific URL change with open arms. A few of the issues brought up in regard to the change include: 1. A reduction in social stats. These are your Facebook Likes, Google +1s and so on from your blog posts. They might be reduced because the URLs from one blog post will be different depending on where your readers are from. 2. A problem with external commenting platforms. If you use Disqus - for example - for your comments section, then you might run into trouble because blog URLs will be different even if essentially the page being accessed is just the same. 3. A slight problem with AdSense earnings. Some users have complained about seeing a dip in their earnings when their pages are served through country specific domains. 4. An issue with link juice. You want external sites to link to you and not your country specific URL. But the issue here is that you can't control how others link to your page. They might use the top level domain or they might use the country code top-level domain.

Stop Blogger from Redirecting to Country-Specific Domains

If country specific redirection affects important factors such as traffic and link juice, and you need those in order to rank well, what can you possibly do? Well, thankfully, Google has provided a way to get around this. All you have to do is add an ncr/ to the end of the URL - ncr here stands for No Country Redirect. So basically, it goes frenchlitgeek.blogspot.com/ncr/. That solution is great but do you want your users to always have to do that every time they visit your blog? To eliminate that hassle, and for the good of your site statistics, a simple redirection script will do the trick. Here's how: 1. Log in to your Blogger account. 2. Click on Template → Edit HTML. 3. Find the tag in the HTML editor by opening the search box using Ctrl + F.

4. Copy the redirection code seen below after the tag.

var blog = document.location.href.toLowerCase(); if (!blog.match(/\.blogspot\.com/)) { blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/"); window.location.replace(blog); }

5. Click on "Save Template". Credit: labnol.com And that's it! Whenever someone accesses your Blogger, they'll be taken to the top level domain rather than the country specific one.

[ramadevi2020-blog]

How to Add Font Awesome Social Icons in Blogger

It's near impossible to find a blog or site these days without at least one social media account to their name. Be it Twitter or Facebook, Instagram or Pinterest, or all of those for that matter, what's become increasingly clear is that social media helps increase your online presence. Gone are the days when you used to rely on good old search engine results alone. These days, maybe you don't rank well in results for your keyword on Google or any other search engine, but you can launch a social media campaign that can hopefully give you the results that you want. Essentially, your site and social media need to co-exist. One cannot live without the other, if you want another way of putting it. Social media is one of the best drivers of traffic on the internet, and if you want to increase your chances of being seen, then you have got to get an account on one or more platforms as long as it fits with your brand's identity.

Spreading Awareness of Your Social Media Presence

Once you've set up your social media accounts, you don't just leave it there to be discovered. Sure, you can make use of hashtags and communicate with industry leaders, but that's not enough to bring awareness to your customers. To let them know you have a presence on Facebook, Twitter, Instagram, Vine or Pinterest, you have to make use of the real estate on your website. How exactly do you do that, you ask? Well, by means of social icons. Social icons are those little images you see that represent a symbol associated with a particular social network. For example, social icons for Twitter usually feature a blue bird. If not that, then a lowercase letter T. The presence of these images remind your viewers that they have other ways of being up to date with whatever you put out. Social media use is pretty high these days thanks to the immediacy of the medium as well as the fun factor. And more likely than not, your audience would want to know whether you're on any social network. If you're on the Blogger platform, you can add these social media representations through Font Awesome social icons.

What is Font Awesome?

Font Awesome "gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS". In essence, it functions as a toolkit where you get access to more than 500 icons for use on your site - free of charge. Now, if you've used social media icons before, you know that there are non-vector varieties. But those offered by Font Awesome are scalable vector icons, and in the long run, they are the better option for your site. Why is that the case? Well, a very good reason would be that images take time to load. Yes, these images are tiny but the point still stands. Plus, images tend to lose their quality as computer resolution increases. In other words, if you want your icons to load faster and have a nice, crisp and clean look, then you're better off with using the collection of Font Awesome. Also, the chance to customize your icons accordingly is definitely an attractive factor too.

Why you should start using Font Awesome?

Of the many providers out there, why stick with Font Awesome?

Large collection of icons. You'll not only find social media icons here, but other traditional icons as well.

CSS support. With CSS, you can adjust the icons according to what suits your site best. You can tinker with the colors, size, shadows and other components. This is something sorely lacking with non-vector images because you're stuck with the icon you chose.

Speed. Vector images are lightweight and therefore load faster.

Free. You don't have to pay a single thing when you use Font Awesome.

So now you know the importance of icons on your site, it's time to learn how to add Font Awesome icons in Blogger.

Adding Font Awesome Social Icons in Blogger

The adding of icons to your Blogger isn't rocket science. In fact, the process is pretty straightforward. Here's what you have to do:

Add Font Awesome Stylesheet into Blogger

Follow the steps below to get Font Awesome working with your blog: 1. Open your Blogger dashboard, go to Template and press the Edit HTML button. 2. Click anywhere inside the code area and press CTRL + F keys to open the search box. 3. Type the tag inside the search box and press Enter to find it.

4. Add the following line of code referencing the location of the font-awesome.min.css stylesheet just below the tag:

5. Click the 'Save template' button to save the changes and start playing with Font Awesome!

Using the Font Awesome Icons

After you get the steps in the previous section done, you're now ready to use Font Awesome in your blog. The first thing you need to do is add the social icons links to the HTML and delete the icons that you don't need anymore. This is a sample HTML that you can add:

In the above HTML code, we can see 8 separate social icons which can be recognized by looking at the link title attribute. For example, the first one is for Facebook. To use the social icons, paste your URL where it says URL-HERE for each social icon you want to include. Put the link between the quotes and make sure to not remove any of the quotation marks. If you want to remove a social icon, just delete that line of code starting with "". Now, keep in mind that Font Awesome works anywhere with the tag as it was designed to work with inline elements. Although you can use , official documentation prefers the option for brevity. Font Awesome icons can be placed anywhere using the CSS prefix fa together with the name of the icon. For a list of social media icon names, you can refer to the official website of Font Awesome. Let's say that you want to display a Youtube icon so you can link it to your official account on the platform. Find the Youtube icon on the list and click on it:

That will bring you to a page for Youtube where you will see this code:

To include the icon within the list, copy any line starting with " from the code above, paste where you want it to appear and replace the code starting with "" with that of your chosen icon. Finally, after adding the icon, the list will look like this:

Note: don't forget to change the title and add your URL between the quotes. Once you've finished editing the icons, insert the code into a HTML/Javascript gadget by going to "Layout" and click on the "Add a gadget" link. If you're using WordPress, paste it in a Text widget.

Customize the Font Awesome Icons Using CSS

Suppose you want to make the icons a lot bigger than they currently are. That task is made simple with the use of CSS. Here's a sample code:

#fawesomeicons a {     font-size: 16px;     width: 30px;     height: 30px;     line-height: 30px; }

To change the font size, increase or decrease the 16px value. Below are the values (30px) for the container's width and height which should always match. Increasing/decreasing these values, will increase/decrease the size of the container where is the font. Here are some different styles for the font awesome social icons. In the CSS, look for the #background-color, #border-color, #font-color and #hover-color text so that you can know here to put the color codes. You can use this tool to generate the color code: Color Code Generator. If you don't know how to add CSS, follow this tutorial.

#fawesomeicons { text-align: center; } #fawesomeicons a { background: #background-color; color: #font-color; display: inline-block; font-size: 16px; width: 30px; height: 30px; line-height: 30px; margin: 0 1px 6px; } #fawesomeicons a:hover{ background: #hover-color; }

#fawesomeicons { text-align: center; } #fawesomeicons a { background: #background-color; color: #font-color; display: inline-block; font-size: 16px; width: 30px; height: 30px; line-height: 30px; margin: 0 1px 6px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } #fawesomeicons a:hover{ background: #hover-color; }

#fawesomeicons { text-align: center; } #fawesomeicons a { border: 1px solid #border-color; color: #font-color; display: inline-block; font-size: 16px; width: 30px; height: 30px; line-height: 30px; margin: 0 1px 6px; } #fawesomeicons a:hover{ background: #hover-color; }

#fawesomeicons { text-align: center; } #fawesomeicons a { border: 1px solid #border-color; color: #font-color; display: inline-block; font-size: 16px; width: 30px; height: 30px; line-height: 30px; margin: 0 1px 6px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } #fawesomeicons a:hover{ background: #hover-color; }

#fawesomeicons { text-align: center; } #fawesomeicons a { color: #font-color; display: inline-block; font-size: 23px; margin: 0 6px 6px; } #fawesomeicons a:hover{ background: #hover-color; }

Now, what if we want to change the background or font color of a specific icon? First, we need to identify the icon class which is just after the

#fawesomeicons a .fa-facebook { background: #background-color; color: #font-color; }

Here, we can change the background and color for the Facebook icon but we can do it for any icon you want. For example, let's add another rule for the twitter icon:

#fawesomeicons a .fa-facebook { background: #background-color; color: #font-color; }  #fawesomeicons a .fa-twitter { background: #background-color; color: #font-color; }

To make the fonts bigger, we can add the CSS code like this:

#fawesomeicons { text-align: center; } #fawesomeicons a .fa{ display: inline-block; font-size: 16px; width: 30px; height: 30px; line-height: 30px; } #fawesomeicons a .fa-facebook { background: #background-color; color: #font-color; }  #fawesomeicons a .fa-twitter { background: #background-color; color: #font-color; }

To apply, copy the code above and add the CSS rule with the icon class that you wish to change. Important: When adding the class for your icon, always put a dot (.) in front of it as you can see in the example above, otherwise it won't work. And that's it! Hopefully, this tutorial helped you to add Font Awesome social icons in Blogger. If you're still in trouble adding them, please take a look at Examples page.

[ramadevi2020-blog]

5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers. Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.

Adding the Popular Posts Widget for Blogger

Just click on your blog title, access the "Layout" menu, click "Add a Gadget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so follow the styles and instructions carefully to find out if you need the snippet and image thumbnail or not).

Once you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it. You can choose from the following styles - see the demo blog:

Demo blog

Popular Posts Style 1 - Box within a box

This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.

CSS code:

.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;} .sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}

Popular Posts Style 2 - Large thumbnails with small post titles underneath

This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.

CSS code:

.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:"";height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px "Times New Roman",Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px 'Oswald', sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px "Times New Roman",Times,FreeSerif,serif;}

Popular Posts Style 3 - Colorful boxes

If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.

CSS code:

.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}

Popular Posts Style 4 - Grid layout

Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.

CSS code:

.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px 'Oswald', sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}

Popular Posts Style 5 - Numbered posts

If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.

CSS code:

.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px 'Oswald', sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:"";height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}

These are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Theme" on the left side and select "Edit HTML" under the template preview. These next codes need to be pasted above the "" or "

" tags, so check the instruction to know exactly where you need to put the code.

Adding the CSS

When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:

Just ABOVE the tag, copy-paste the CSS code of one of the styles above.

Important: If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work. Please note that most of the styles are using the 'Oswald' font which you need to add to your template's code as well. So, search for this tag:

... and just BELOW it, add this line:

Adding the JavaScript

These styles also require using a script in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript code, search the tag and paste the following script just above it:

//<![CDATA[ $(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}); //]]>

Note: if you have already the jQuery library in your template, remove the line in red. After you have added all the codes in the right place, press the "Save theme" button to save the changes. That's it! The five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog.