For most bloggers, the idea of adjusting the coding of their blog to improve the user experience is daunting at best and often quite frightening. HTML5, CSS, and other coding elements are their own virtual language and for the average Blogger user looking to update a personal blog, the automatic settings are about as good as it gets. What if there was a better way to code a blog, whether a beginner or a pro, that could be done within the browser itself?

If you’re using Firefox or Chrome, then you should also be using Firebug. It allows you to code your website in real time, so you can maximize the UX of your blog in no time at all.

You No Longer Need To Edit Through Blogger!

If you’ve ever tried to update a Blogger theme through the editing functions of the website, then you know how difficult it can be. You can preview your designs, but you can’t save any changes to officially see what is going to happen with your site until you publish the edits. If you’ve missed just one line of code or forgotten one small element, you’re going to have to go back into the editing matrix, find the error, update it again, and repeat until you have a responsive blog once again.

What Firebug allows you to do is see all of those elements that make up a website in real time. Instead of editing and then publishing, you can edit in real time and see updates happen, all without affecting the user experiences of visitors that are coming to your site while you’re editing. You can change the fonts, colors, or virtually anything else within the design of the site quickly and see the results of your work as it happens. Don’t like it? Just undo your changes.

It’s really that easy!

Using Firebug to Customize CSS in Blogger

This guide will show you how to modify the CSS code of a Blogger template. Usually, the Blogger Template CSS style declarations are editable through the style.css file, found between the  and  tags.

To download Firebug and get more details regarding its powerful features, visit: Firebug for Firefox, or if you are using Chrome, get the Firebug Lite app. I would recommend to use Firefox, which is more complete and quick, but, nevertheless, both work the same.

Once Firebug is installed, a small bug icon will be available in the upper right of your Web browser’s address bar. Clicking it, a horizontally split screen will be shown at the bottom of the browser’s window. The page will continue to show in the upper half, while the lower half will show the HTML of the current web page.

To customize any web element from a Blogger template, just click either on the Firebug icon in the toolbar, or the “Inspect Element with Firebug” item in the context menu. Next, click the blue cursor button to Inspect and place the cursor right over the element to customize.

For example, let’s say that we want to change the title of the “Blog Archive” gadget. After we clicked the inspect button, mouse over the “Blog Archive” title which will be highlighted as shown in the screenshot below. To change this element, click on it:

Now that we decided which element we want to change, right click on the “Style” panel and select the “Add rule” option:

This will give the class or the id of the highlighted element – in our case, the heading of the Blog Archive (#BlogArchive1 > h2). To edit this rule that we just added, click anywhere near the left curly bracket that will open a text box, so that we can type a new CSS declaration:

And here comes the fun part. Let’s say that we want to make the title red. We will type color and hit Enter, then we will type the color value or the red text and hit Enter. We will also set the set the font size to 20px, text alignment to center (text-align: center) and make the text underlined (text-decoration: underline):

The cool thing about Firebug is that when modifying any CSS property, you can see the results directly applied on the page. So, after adding these declarations, we’ll see a big red underlined title for our Blog Archive gadget (see in the screenshot above).

To apply this CSS rule on a Blogger template, just select it beginning from the right curly bracket and to the #(id) or .(class) symbol, then right click it and Copy the CSS code.

Before making any change, it’s highly recommended to make a backup of your current template. Go to “Template” and click the “Backup/Restore” button on the upper right side. On the same “Template” location, click on the “Customize” button and navigate to “Advanced” > “Add CSS”. Paste the CSS rule that you just copied into the CSS box:

Click the “Apply to blog” button on the upper right corner to save the changes and view your blog.

Firebug Also Gives You One Distinct Advantage…

One of the best reasons to install Firebug into Chrome or Firefox is that it allows you to emulate some of your favorite website designs quickly and easily. Instead of hiring a web designer to do the work, which could cost you thousands, you can simply start Firebug and see what the CSS styles are for your favorite site. This allows you to create a similar widget.

From there, all you’ve got to do is change the coding to make the design elements work under the rules of your own custom.css. This means you can make easy design changes to your Blogger blog without having to go through all of the menus and editing functions so that your template can truly be your own. Do you have some work to do? Sure – but Firebug does all of the primary work for you.

All you’ve got to do is have a creative mind and a few minutes to make changes to the coding design. Whether you’ve been coding for years or are just starting your first blog, this is definitely the best way to make sure that your visitors have the best experience possible!

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

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

Here’s What You’re Going To Get

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

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

Related: Add Multi-Colored Popular Posts to Blogger

Add the Most Commented Posts Widget to Blogger

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

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

Step 3. Just below , add this code:

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

<![CDATA[

]]>

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

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

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

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

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

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

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

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

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

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

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

Step 6. Save the template.

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

Copy and paste this script inside the content box:

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

• ‘ + postComments + “

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

  ‘ +stripTags(postDescription,10)+’…

  ‘ + ‘

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

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

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

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

• ‘ + postComments + “

  “ + “‘ + postTitle + “”  + ‘

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

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

‘ + postComments + “

“

with:

‘ + postComments + ” comments” + “

“

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

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

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

Why Use the Most Commented Posts widget?

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

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

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

Things To Think About

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

Site Loading Speed

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

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

File Storage Affects SEO

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

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

Storage Locations Affect Editing Abilities

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

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

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

Storing Javascript/CSS Files With Google Drive

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

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

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

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

Step 1. Prepare the CSS/JavaScript Files

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

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

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

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

Step 2. Upload Your File on Google Drive

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

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

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

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

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

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

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

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

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

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

https://googledrive.com/host/

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

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

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

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

Just BELOW the tag, add this line:

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

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

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

And add this line just ABOVE it:

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

Replace the line in blue with your URL:

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

In Conclusion

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

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

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

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

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

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

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

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

How to Add An Instagram Widget in Blogger

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

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

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

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

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

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

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

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

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

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

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

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

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

Benefits to Customers

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

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

Benefits To You

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

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

Add Your Own Custom Search Gadget To Blogger

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

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

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

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

#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rdMRLrJDvCBVdTNCZhEV3yWS-vB0OXH_U1VRERfFddyWUlj05O2A7fkuD1q-7nVeOAksFAIr1c7hAMvAQQHTC_6_F9DXqbQ-STstPNmfBapJAweoRwnnrloazln-R-jAasr2YOXHnkiI/s1600/search-box.png) no-repeat;height:27px;width:202px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type=”text”]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px “Arial Narrow”,Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2w6FnYPHrlgXDUgtFq1NVYDEFOPSesF7cAmqgjN2XIhb5W_4DQyvX-gmcaQUSbDhKbCQPr-8Ir0aw2aUzAdXWGv7RZCfrOZwbD1K6diSO6r4pb7u7gaJbHCgUae0kA0mJLXp54tV-QDS/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjF7NMxTK6LvlwzRN46hveIeWNSzdbzRMmklBmckNnVOeprc_TEursiNXsa7UKrE2xLVgvd3-v2iHv3SXY9Sncwb2VIDoI3TaClom_L8yectnOmRdU54aYzdiubhtIW6pjvwDoZp2yMOxk/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}

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

#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi04BjH1d2U0L7M-7qW8NtgPCj7N4mnSd6eCWuB8iuUCS0Ksw4DlWS-yp3_IxHh6EID_2r4Iu1OiwLV7NhnItCEh1vkRtZihxDg6FUxn0t-4YpEC_tgnhpxvHd36u7Ff4Laco1W3x7hryp5/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type=”text”]{background:transparent;border:0;font:14px “Avant Garde”,Avantgarde,”Century Gothic”,CenturyGothic,”AppleGothic”,sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type=”text”]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg2acA2uL3ZZNZWAv-28O5vjR8KuhNM6BsnV1qofWVXOrBzL-Ei0ODvQ7Hyhk-LlgjM4wcAxralDU8WnBh4LnTlvHyTv28R99E_lEcLJGUwi-xSBe8wMzyvSjqiCAc8dkndOB3ZYvihzuN/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Zam0DOCUJNQUQx2HV5CkiQ323V5FHXPGXyYpqhsFGhrDUG1iHCJ9Qc-rd4B9bAsQcrtQpgN5mw4XgWhKVdtnGs27t6rKRjlRddmGW0NRNLqQzxCnhb_GagqUrDSnYL-sIMPnJSRKOiIW/s1600/search-icon-hover.png)}

Steps: How to Add a Custom Search Box to Blogger

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

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

Step 3. Press Save.

That’s it!

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

 Blogger is a fantastic tool for amateur and professional writers that have a passion for publishing online content. Unlike WordPress or hosting companies that require you to design your site before ever getting started, Blogger is a ready to go service right out of the box that will allow you to start writing for yourself or others on day one. The effort required to sign up for an account is minimal, and you can really get as creative as you want, whenever you want.

Even if you aren’t familiar with web development or design, that’s okay. Blogger is a place for everyone. Thanks to the overwhelming support of the Blogger and creative communities, there are plenty of free to use resources out there to make your site look great and keep you focused on what you love best. Here are some of the top sites for acquiring blogger backgrounds that won’t cost you a dime and will look incredible.

Shabby Blogs

Shabby blogs offers some unique texture and graphic rendered Blogger backgrounds to choose from. All of the designs that they have are created to be standard width so you don’t get a lot of flexibility to choose from; however, there are guides out there that can teach you how to extend the sidebars, header, and footer of your screen if you find one you love and this is something important to you. In addition to offering Blogger backgrounds Shabby blogs also has a section for cute little buttons that you can add to your site to give it an extra special touch.

Hot Bliggity Blog

Aside from having one of the coolest and creative names to say out loud, Hot Bliggity Blog has a wide selection of patterned-based blogs for your site. You can choose between different color schemes, and they also offer three different sizes to pick from, standard, widened, and full width. Best of all, they are really easy to install. All you have to do is click on the install link underneath the image. From there it will copy the code for you into your clipboard and give you instructions on where to paste it.

Dotty Dot Dot

Dotty Dot is the place to go if you like geometric type backgrounds that are heavy on squares, plaid, circles, and of course dots. The website is a little bit hard to navigate, but they have a sidebar with a bunch of tags to help you sort through all the available templates and find something you like. Just about every color you can imagine is available if you plan on matching your Blogger backgrounds to your favorite color or font style. The widths of the most of the templates vary so some have heavy padded sidebars, whereas some are very skinny.

LeeLou Blogs

Lee Lou Blogs offers Blogger backgrounds that look a lot like you would find in a scrapbook with a heavy dependency on small pictures and vector graphics. These free templates would go great with any home improvement blog or DIY arts and crafts writer. Most of the free backgrounds are standard size with the high padded sides, but like anything you can get access to more templates if you want to take advantage of any of his premium designs.

CgTextures

If you just want something basic real basic that won’t distract customers from your content, you can head over to CgTextures. Their site is full of photos and textures that could be added as a background image with a reduced transparency. The blog would still look great and you wouldn’t have to worry as much about trying to match your font style and color so that it fits in with the background. Instead you can draw more focus on what’s important and less on the site’s bells and whistles.

Every Stock Photo

Bloggers that want less of an ‘artsy’ look to their site and instead more of a serious appeal can get a picture from Every Stock Photo to use as the background image. You can also benefit by using some of the pictures offered through this site within your blog posts so that you aren’t stuck buying things from premium image providers. There search bar and navigation panel makes it easy to find exactly what you are looking for to see a unique feel to every page.

Shizoo-Design

Shizoo-Design is a German based design firm with about 554 different patterns to choose from. You can find everything from conservative shapes to abstract rainbows and splashes of color. All of the textures are provided in a range of size, anywhere from 1000×700 pixels to 1300×600 pixels so that they will comfortably fit your entire site’s background and work with most browsers and computer screen sizes. Brushes and custom icons are also available from the site, free of charge.

Patterns of Change

Patterns of Changes offers Blogger backgrounds that are cartoon oriented and that can best be tiled across the screen. The site is perhaps one of the easiest to use compared to all the others on the screen, providing a simple navigation bar where you can choose what color you’d like the pattern to be. When you select one of the colors provided, it will come up with a bunch of different patterns usually associated with that color. For instance, when the color brown is selected, one of the choices ia brown cake. Blogger backgrounds for this site might not be the best choice for business professionals, but they certainly are fun.

How to Add a Background Image using the Blogger Template Designer

If you have a background image that you want to upload, then follow these steps:

1. Log into your Blogger account and go to “Template”, press the “Customize” button on the right side. Once the Blogger template designer has opened, you’ll see the Background option on the left – click on it:

2. Now click on the box below the Background image title and it will open a window from where we can select a default background image. On the upper left side of this window, click Upload Image and select the image you would like to use from a location on your computer.

Note that you should use a JPG, GIF, or PNG image that is no more than 300k in size. If your image is too large, then you can use the Kraken.io image optimizer to make the image file smaller.

3. After you’ve uploaded your image, click ‘Done’ and you’ll be taken back to the background menu. Here you will see additional options like: “Alignment”, “Tile” and “Scroll with page”:

• Alignment: change the position of the background image to start either horizontal (left, center, right) or vertical (top and bottom);
• Tile (Repeat): if you want a small background image to fill the page, choose to repeat (tile) horizontally and/or vertically.
• Scroll with page: the box is checked by default, this means that the background scroll along with the page contents. If you want the background picture to not move as the page is scrolled and stay exactly where it is, uncheck this box.

4. For a background image with plain color in the middle for content, you might want to remove the main and header background. Navigate to “Advanced” > “Backgrounds” and type the word “transparent” inside the “Main Background” and “Header Background” box:

5. If the background is smaller than the content area, we can fix this using CSS. Scroll down and click on the Add CSS option, then paste this CSS code inside the box:

body {
background-size: 200%;
}

.body-fauxcolumn-outer .cap-top {
background: none;
}

Note: to change the size of the background, modify the 200% value in red.

Once you’re happy with the results, press the ‘Apply to blog’ button and enjoy the new background for your site.

How to Change Background in a Custom Blogger Template

Sometimes the above options might not appear in some custom Blogger templates if the body.background variable hasn’t been defined. In this case, we will need to access the HTML of the template:

1. Go to “Template” and click the “Edit HTML” button, then click anywhere inside the code area. Press the CTRL + F keys to open the Blogger search box:

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

]]>

3. Immediately before the ]]> tag, paste one of the following code snippets:

For a large background image:

body {
background-image: url(IMAGE-URL.png) !important;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
}

Note: the no-repeat value prevents the image from repeating either vertically or horizontally. Use background-repeat: repeat-y if you’d like the image to repeat vertically, or background-repeat: repeat-x if you want it to repeat only horizontally. To increase the size of the background, change the 100% value.

If using a repeating pattern, add this CSS code instead:

body {
background-image: url(IMAGE-URL.png) !important;
background-repeat: repeat;
background-position: center top;
background-attachment: fixed;
}

4. Open a new tab and upload your background image to Blogger or an image hosting site, and copy the URL of your hosted image to your clipboard. If you don’t know how to do it, please take a look at this tutorial.

After you copied it, replace the text highlighted in blue from above with your image url.

5. Finally, Preview the template to ensure that the background image appears as you want, and press the “Save template” button to save your changes. That’s it!

Using the 8 sites listed above, you have a wide range to choose from when creating a site that really represents you. Given the right tools, designing you blog can be a fun hobby to enjoy that can spark your creativity and improve the quality of your writing. With such a large selection, the hardest part of setting up your new theme will be finding which one you like best.

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

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

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

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

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

Recent Posts Style #1

function showlatestpostswiththumbs(t){document.write(‘

‘);for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBAYS7mop-V-wKT09RCevpG9B0CPFIHeuuws-3SCItmXKNQhxslIqPsND0YxDNPw1lcG1ZY8V7KTAKfa8SNUcRJBRpbByejLHKb7I7frjEiz6jKb9dwGHAl-XvXSbkzU5cgZ6ld792iTe/s1600/no-thumb.png&quot;}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('
• ‘),1==showpoststhumbs&&document.write(‘‘),document.write(‘
  ‘+i+”

  “),”content”in n)var A=n.content.$t;else if(“summary”in n)var A=n.summary.$t;else var A=””;var k=/]*>/g;if(A=A.replace(k,””),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"…")}var _="",$=0;document.write('

  ‘),1==posts_date&&(_=_+w[parseInt(g,10)]+” “+v+” “+f,$=1),1==readmorelink&&(1==$&&(_+=” | “),_=_+’Read more‘,$=1),1==showcommentslink&&(1==$&&(_+=”
  “),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l=’‘+l+”“,_+=l,$=1),document.write(_),document.write(“

  “),document.write(“

“)}document.write(“

“)}

var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;

Recent Posts Widget
Your browser does not support JavaScript!

img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px ‘Ubuntu Condensed’, sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }

Recent Posts Style #2

function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="… read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/]*>/g;if(d=d.replace(v,””),document.write(‘

‘),document.write(n),document.write(‘

‘),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("

“),1==posts_date&&document.write(‘

‘+m[parseInt(u,10)]+” “+c+” “+o+”

“)}}

var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;
/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostsRecent Posts Widget
Your browser does not support JavaScript!

.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px “Avant Garde”,Avantgarde,”Century Gothic”,CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,”Baskerville Old Face”,”Hoefler Text”,”Times New Roman”,serif;}

Recent Posts Style #3

function showlatestpostswiththumbs(t){document.write(‘

‘);for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBAYS7mop-V-wKT09RCevpG9B0CPFIHeuuws-3SCItmXKNQhxslIqPsND0YxDNPw1lcG1ZY8V7KTAKfa8SNUcRJBRpbByejLHKb7I7frjEiz6jKb9dwGHAl-XvXSbkzU5cgZ6ld792iTe/s1600/no-thumb.png&quot;}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('
• ‘),1==showpoststhumbs&&document.write(‘‘),document.write(‘
  ‘+i+”

  “),”content”in n)var A=n.content.$t;else if(“summary”in n)var A=n.summary.$t;else var A=””;var k=/]*>/g;if(A=A.replace(k,””),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"…")}var _="",$=0;document.write('

  ‘),1==posts_date&&(_=_+w[parseInt(g,10)]+” “+v+” “+f,$=1),1==readmorelink&&(1==$&&(_+=” | “),_=_+’Read more‘,$=1),1==showcommentslink&&(1==$&&(_+=”
  “),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l=’‘+l+”“,_+=l,$=1),document.write(_),document.write(“

  “),document.write(“

“)}document.write(“

“)}

var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;

Recent Posts Widget
Your browser does not support JavaScript!

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:’Oswald’, sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}

Recent Posts Style #4

function showlatestpostswiththumbs(t){document.write(‘

‘);for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBAYS7mop-V-wKT09RCevpG9B0CPFIHeuuws-3SCItmXKNQhxslIqPsND0YxDNPw1lcG1ZY8V7KTAKfa8SNUcRJBRpbByejLHKb7I7frjEiz6jKb9dwGHAl-XvXSbkzU5cgZ6ld792iTe/s1600/no-thumb.png&quot;}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('
• ‘),1==posts_date&&document.write(‘
  ‘+A[parseInt(w,10)]+” “+v+” “+f+”

  “),1==showpoststhumbs&&document.write(‘‘),document.write(‘

  ‘+i+”

  “);var g=””,k=0;document.write(‘

  ‘),1==showcommentslink&&(1==k&&(g+=”
  “),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l=’‘+l+”“,g+=l,k=1),1==readmorelink&&(1==k&&(g+=” | “),g=g+’Read more‘,k=1),document.write(g),document.write(“

  “),document.write(“

“)}document.write(“

“)}

var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;

Recent Posts Widget
Your browser does not support JavaScript!

img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: ‘Oswald’, sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}

Recent Post Style #5

function showlatestpostswiththumbs(t){document.write(‘

‘);for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBAYS7mop-V-wKT09RCevpG9B0CPFIHeuuws-3SCItmXKNQhxslIqPsND0YxDNPw1lcG1ZY8V7KTAKfa8SNUcRJBRpbByejLHKb7I7frjEiz6jKb9dwGHAl-XvXSbkzU5cgZ6ld792iTe/s1600/no-thumb.png&quot;}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('
• ‘),1==posts_date&&document.write(‘
  ‘+A[parseInt(w,10)]+” “+v+” “+f+”

  “),1==showpoststhumbs&&document.write(‘‘),document.write(‘

  ‘+i+”

  “);var g=””,k=0;document.write(‘

  ‘),1==showcommentslink&&(1==k&&(g+=”
  “),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l=’‘+l+”“,g+=l,k=1),1==readmorelink&&(1==k&&(g+=” | “),g=g+’Read more‘,k=1),document.write(g),document.write(“

  “),document.write(“

“)}document.write(“

“)}

var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;

Recent Posts Widget
Your browser does not support JavaScript!

img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: ‘Gloria Hallelujah’, cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}

How to Add Recent Posts Widget on Blogger

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

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

Keep Your Blog Updated

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

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

 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.

 SHARE TWEET GOOGLE+ PIN IT