Full Sized Background Image on Blogger with Blur Effect

In this short tutorial you will learn how to add an image as the background of your blog that stretches to all edges thus fills your entire blog's background portion.


Looking to add a nice effect to your blog by using beautiful pictures as background images? It is a great way to personalize a blog, depending on the color scheme of your blog and the feel that you want the blog to have can all be improved by using an image as the full background.



This tutorial will be guiding you through the process of setting a custom full size image on your Blogger blog with a few lines of CSS as well as showing a way to give it a blurred glass effect.

Here's a quick demo of what you are going to have on your blog by following the steps to add the CSS to your blog: Full Page Background Image Blurred Effect using CSS

Uploading the image

Whatever image you are going to use you have to upload it somewhere in its full size first. The best place to upload it is Blogger itself, it gives unlimited photo storage as well as fast servers from Google wouldn't ever slow your blog down. 

1. Open a draft post in your Blogger dashboard
2. Upload the image
3. When the image appears in the post area, right click on it and "Copy image address" or "Copy link address", the option might be different on different browsers.
4. Paste the copied URL that is the image's address in a Notepad / Textedit app. We may get something like this
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg
5. Keep it with yourself, we will need this in the next step. 

The CSS Snippet

CSS is what makes it possible for us to add designs to our websites and blog. This one does the job for adding a full screen background.

html, body {
    background: url('IMAGE-URL-HERE') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Copy the CSS code and paste it in another Notepad / Textedit window.

In this code, replace IMAGE-URL-HERE with the image URL we got in the last step.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I've done it, what now? Now that you have placed your image's URL in the code we are ready to make it appear on the blog. but before that please do take a backup of your existing blog theme.

1. Log-into your Blogger Dashboard
2. Go to the Theme   section
3. Click on "Customize" 
4. In the Theme Designer go to Advanced > Add CSS
5. Paste the CSS snippet into the text area on the theme designer page and click on Apply to Blog on the top right

Open your blog to see the updated background image. Right now you wouldn't see the blur effect, we will see how to do that in the next step.

Let's give it a blurred effect

We assume you are still in the Advanced > Add CSS page in the Theme designer from the last step. A small change in the URL of the image is required to get the blurred effect - that is to reduce the size of the image. Yes, the smaller the image the more blurry it will be. So that's our general idea, instead of using a photo editor app to make the original image blurry we use a small version of the original image.

Let's suppose your code is this, the URL of your image is of course different than the one in the following one.

html, body {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrajfadQBUo8BooKtb2RHwsSG3DsiDCrVtBHEkAVqP6zcdTmtcmXJ3XQiBo1B0WO6AaeyLOljOpRaaaabRAbD4Y0jnfBmq6pY9TZrb9z0v7pIaWucvuvajBbg2KiWedjLR5pDoqAC9xy2/s1600/photo-1434394673726-e8232a5903b4.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

In the URL of your image, which may look something similar to this:

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s1600/photo-1434394673726-e8232a5903b4.jpg

Change the number with the s prefixed to it to something smaller.

https://3.bp.blogspot.com/..............ynOTNfQCKgB/s32/photo-1434394673726-e8232a5903b4.jpg

s32 means the CSS code will load a version of the image that is only 32 pixels wide, so when a small image stretches from edge to edge on a screen it becomes blurry and gives the perfect effect we want.

You can change the value to whatever you like to adjust the level of blurriness of your background image. Change that small part in the code and again click on Apply to Blog to update the CSS code and make it go live on your blog.

Help Needed?

On some third-party themes and even the original themes provided by Blogger the code may not work properly due to some other CSS setting that may be overriding it. If you are unable to get it working then please share your blog URL in the comments down below along with the code that you are using as it is. We would be glad to jump in to help.

FancyBox 3 Image Lightbox & Slider for Blogger.com Blogs

Lot of us posts photos on our blogs daily and being able to view it in light box / gallery view is a basic function for every blog and Blogger does provide one but one that is very old and needs an upgrade so we have decided to post this tutorial to help you add FancyBox 3 in your blogger blog.


FancyBox 3 is an image / content light-box plugin that provides the feel of a modern and responsive website. If you have had experience with the Blogger's default light-box feature you may have felt that it is very basic and for a blog that focuses more on photos and images it might not be the best option.

Demo & Comparison

For example, here we have two photos, the first one is set to open in Blogger's default light-box and the other is the FancyBox light-box plugin.

Here's a demo on a test blog - Demo for Image Lightbox 

Images with Blogger's Default Lightbox

  

Images with FancyBox 3 Lightbox

  

The jQuery plugin, FancyBox plugin is more than just a image lightbox / gallery, it can do a lot more than just images but in the Blogger environment we will be just focusing on images because that is what we need here.

Here are a few attractive features of the FancyBox plugin -

1. Modern design and feel
2. Responsive and touch enabled, works flawlessly on mobile devices. 
3. Full screen and zoom option
4. Slideshow option for multiple images in a gallery (i.e a post in Blogger blogs)
5. Very flexible - if you know basic HTML / JavaScript you can do a lot more with this plugin. 

Setting it up

Note: Before starting consider taking a backup of your current Blogger template

The FancyBox 3 plugin is a jQuery based plugin and for it to work jQuery needs to be added to your template as well though many templates (most likely if it is a third-party template or you have previously added such plugins) may already have jQuery added into it and it is not recommended to add it again as that just makes the page load the same thing twice which is not good for the performance of a website. 

Check if you already have jQuery:

In this tutorial we will be asking you to add certain script files required for the plugin to work, jQuery code too, though if you already have it on your blog then avoid adding it again is the best option.

To check whether you have jQuery or not follow these steps -

1. Go to your Blogger Dashboard > Themes
2. click on Edit HTML 
3. open in-page search CTRL+F/CMD+F and enter the keyword "jquery"
4. Does it take you to a line with "<script src='.../jquery.min.js' " (may look similar) ? If yes then you already have jQuery
5. And if not then you do not have it, so in the next steps be sure not to omit the jQuery script. 

Adding the scripts and stylesheets

The Fancybox plugin is a lightweight jQuery plugin with a lot of functionalities. It depends on jQuery to work, and a stylesheet that tells the browser how to display things under it, in total there are 3 files we will be adding, namely - jQuery, FancyBox Script and FancyBox Stylesheet. 

Note: If you already have jQuery in your template it is recommended you remove the line from the following HTML markup that adds the jQuery script. 

Copy the following HTML snippet, 

<!-- FancyBox CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" type="text/css"/>

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- FancyBox 3 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

Upon copying paste it in a Notepad / TextEdit application. When you have the code snippet in a text editor remove the line with <!-- jQuery --> and the line after that if you found that jQuery already exists in your template, else keep the whole code without making any changes. 

To add it in the template, 

1. Go to your Blogger Dashboard > Theme
2. Click on the Edit HTML button on the page
3. search for </body> 
4. Paste the code immediately above the </body> tag
5. Save the theme.

The </body> tag is basically the end of the body of the page and that is where we are adding the scripts because such scripts are run only when the complete HTML has been loaded. 

In case you already had jQuery in your template and you deleted the jQuery from our code then do remember that these scripts should always come after the jQuery's script, adding them before it may result in error. This is a common mistake people make, and confirming this can save you a lot of time in figuring out what went wrong.

Disable Blogger's Lightbox

The codes we added in the previous section has no effect on your images now and that's normal, we haven't initialized the scripts so you wouldn't be able to open it using FancyBox lightbox plugin as for now, we will be doing that shortly, but before that make sure you turn off Blogger's default image lightbox as it may conflict with the one we've added.

1. Go to your Blogger Dashboard
2. Settings > Posts, comments and sharing settings
3. Next to "Showcase images with Lightbox" choose "No" from the dropdown list. 
4. click on the "Save settings" button on the top right of the page.

Great, now the lightbox from Blogger is disabled and we can continue on activating our new lightbox plugin. 

Activating the plugin on photos / images

Without specifying which images is to be activated in lightbox we assume that all images inside of the post body that has links to an image is supposed to open in the lightbox. 

It is important for us to tell the plugin that "Hey, don't have effect on images outside of the post body" that's because there are many images all over the blog that you don't want to be opened in the lightbox so we isolate the plugin within the post body. 

Copy the following code,

<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){
   /**************************
   This part makes sure we select only the images and photos that is supposed to appear in a lightbox
   **************************/
   $(".post-body a img").each(function(){
     var isImage = /\.(?:jpg|jpeg|gif|png)$/i.test( $(this).parent("a").attr("href") );
    
     if ( isImage ) {
       $(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
       $(this).parent("a").attr('data-fancybox', 'postLightBox' );
     }
    
     else {
       // .. do nothing
     }
   });
  
  
   /**************************
   This part initializes FancyBox on the qualifying images
   **************************/
   var options = {
       infobar  : true,
       buttons  : true,
       speed    : 300,  // Animation duration in ms
      margin : [40, 20] // Space around image, ignored if zoomed-in or viewport smaller than 800px
   };
  
   $("[data-fancybox]").fancybox( options );
 });
//]]> 
</script>

You have to add this code after the line of code we added in the "Adding the scripts and stylesheets" part of the tutorial.

1. Go to your Blogger Dashboard > Theme
2. Click on the Edit HTML button on the page
3. search for </body> 
4. Paste the code immediately above the </body> tag 
5. Save the theme.

It's time to test it! After saving the theme open up your blog and go to a post with images and click on the image and it should now be opened in the new modern light box rather than the old one Blogger provides initially.

Have questions? 

You might have questions about the plugin or something about it that isn't working as you expected, we've put down some common questions and its answers for you - 

Is FancyBox safe to use?

Yes, it is one of the most popular jQuery plugin for content lightbox on the web and it is used by hundreds of thousands of websites. 

Learn more about it on FancyBox's homepage.

Would it work in the new Blogger themes?

Yes, it is supposed to work perfectly in the newer themes. If you are facing issues with any theme please comment down below with your blog URL and we will take a look.

As for third-party customized themes we cannot guarantee.

How can I make it work only on the images I want it to?

The part $(".post-body a img").each(function(){ in the code that activates tells the plugin which images to choose and by default it activates on all images inside of a post body. 

If you want it to work only on certain images and not all then follow these steps 

1. Open your blog post in the post editor and click on the HTML button next to the Compose button 
2. When you are in the HTML mode, look for the image's code which might be something like
   
   

   <a href="[.....]"><img src=" [.....] "/></a>

   
   To the <a> tag add a specific class name value to it, for e.g
   
   

   <a class="lightbox-image" href="[.....]"><img src="[.....]"/></a>

   
   You can notice we added class="lightbox-image" to the <a> element.
   
3. In the JavaScript snippets change
   
   

   $(".post-body a img").each(function(){

   
   to
   
   

   $("a.lightbox-image").each(function(){

   
   And save it to the template code.
   

Now images which is inside an anchor link i.e <a> tag that has a class name that you defined, here we used "lightbox-image" (you can use anything else that starts with an underscore or an alphabet).

I would like to add captions to my lightbox images, how do I do it?

Caption that you want to appear for a image should be manually added in the source of the image's HTML code. Here's how you can,

1. Open the post in the post editor and switch to the HTML mode 
2. Look for an image's HTML code, at minimum it would look like this
   
   

   <a href="{image-url}" >
   <img href="{image-url}"  />
   </a>

   
   
3. Add data-caption="Your caption here" to the <a> of the image, e.g
   
   

   <a data-caption="This is a caption of the image" href="......." >
   <img href="........"  />
   </a>

   
   
4. Save the post. 

Basic HTML is supported inside of the data-caption attribute, so you can add italic, bold or large text inside of the caption as well.

I want to customize it according to my needs, how do I do it?

If you have a good knowledge of JavaScript, HTML and CSS then you can head over to the plugin's homepage and take a look at the documentation to learn how to customize it - http://fancyapps.com/fancybox/3/

Not everyone is a coder we understand but to customize it according to ones' needs some advanced knowledge is needed. You can hire or ask a web developer / designer to help you out.

If your need is not big and what you want can be achieved by simply modifying a few codes here and there I can provide your free of cost help though in case it requires good amount of time and work I am available for hire as well. You can contact me at depy45631@gmail.com for any help or hiring me for a work.

Anything else?

For feedback, suggestions and requests please comment down below. 

Set Mobile Browser Theme Color for Blogger Blogs

More people now loves reading on the go, be it a news article or a travel blog, almost everyone's first choice for reading blogs and browsing social media sites are smartphones. Same goes for your readers, many may love reading on their smartphones, and setting a theme color would make your Blogger blog stand out in the crowd.


The major browsers even on smartphones are very advanced and it provides a lot of options for websites to personalize how their website looks on a readers phone, they can control the icon they see in the browser as well as the color of the browser's address-bar in mobile Chrome, Opera and Firefox OS.

If you use Chrome you might have noticed that  upon visiting some websites the top bar of Chrome changes color and mostly according to theme of the website. It is not something that Chrome does magically, the website developers can set a specific color for Chrome to be themed with and that is very simple.

Bloggers on the Blogger.com platform has transitioned to a mobile-first approach, and it is a wise thing to do as the readers are more comfortable on mobile phones than on a laptop or a PC.

Setting Theme Color on your Blogger Blog

By default if you visit your blog on a mobile browser, here Chrome, you will see the default light grey color on the top bar, and that looks boring.

Doing this is very simple, it requires you to add a line of code in your template and that's it. The steps are mentioned below.

Note: It is recommended that you always take backup of your template before making any code customization. Click here to see how to take a backup of your Blogger template.

Before we proceed, copy this line of code -

<meta name="theme-color" content="#4285f4"/>

1. Now, go to your Blogger Dashboard and select your blog. 
2. Click on the "Template" option in the left panel
3. Once the section is loaded, you will see a button with "Edit HTML" label, click on it to open the template editor.
4. Inside the template editor hitCTRL+F  / ⌘ + F and search for <head>, it should be on the top already so you will find it easily
   
   
   
5. Now paste the code we copied before immediately on the next line of <head>



Once the code is at place it should look similar to the screenshot above. Now click on "Save template" on the screen and then load your blog in Chrome browser on your smartphone. You will now see that the top bar of Chrome has turned into another color other than the default light grey color.

Set your desired color

You may of course want to set a color of your choice, the one that would be set in the default code provided in the tutorial you will get a dark blue color.

To change the color that is set you have to make edit in the code that you use, this is the code -

<meta name="theme-color" content="#4285f4"/>

The yellow highlighted text #4285f4 (without the quotes) is the hex value of the color, in HTML colors also has hex values. If you aren't sure what is the hex value of the color you want, go to http://www.color-hex.com/ to choose the color and get your desired color's hex value. Then replace the yellow highlighted part with your own.

For example, if we want a certain shade of green, which has the hex value #215C03, we modify our code to this

<meta name="theme-color" content="#215C03"/>

That is simple. All you have to do is replace the hex value in the code with your desired color and place it in the template by following the steps in the previous section.

It's all. Impress your readers by doing what most Blogger blog owners don't think about.

Comment on the post if you like this, share it with your friends and family for them to make their blog look pretty as well. For any questions or suggestions feel free to comment.

Add a Background Image to Gadgets in Blogger

Making your blog beautiful means adding some eye catching images on the layout and gadget is one of the place where you may want to use a background image to spice up the look.
Not every Blogger is a web designer and it could be difficult for a person not familiar with basic web designing to give styles to pages in coding level and that can be an obstacle for a blogger to design their blog on their own.

Coming to the topic, if you want a background image on your gadgets to make it look beautiful but can't find any option in the template designer provided by Blogger then you are at the right place.

Adding a background image to an element on a web page is a single line code for us but it can be fascinating to those who are new to it and it's you ! You can experiment how it works and play with it and learn some basic web designing too.

Background Image for Gadgets

The actual reason behind writing this post is not to explain how to use the background image CSS property but to make you familiar with CSS selectors. A selector in a rule is the most important thing to tell the browser to apply those styles to which element on the page. People can learn CSS easily but if you don't know about FireBug or Chrome Developer Tools then you can't practical play with the CSS.

I would suggest you to read these articles :

• CSS Selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• Using Chrome Developer Tools - http://www.stramaxon.com/2012/07/how-to-use-chrome-developer-tools.html
• Bonus - Writing efficient CSS (and more on selectors)

The CSS

To add a background image to a gadget in Blogger, we first need to know what selector we should use to apply the styles. You can do it by using the Chrome Developer Tools (Google Chrome only). But you can use this selector in most of the templates on Blogger.

.sidebar .widget {}

(This is just the selector). We have put .sidebar because we just want to apply the style only to the .widget element inside the sidebar, it's important because blog post area is also wrapped in a .widget class, and if we only use this class selector it will select every widgets including the blog post area.

The code we need to apply a simple good background image on a gadget is this :

.sidebar .widget {
background-image:url('http://image.com/background.png');
background-repeat:repeat;
}

Background Image : If you apply this code on your blog then it will point to a image that doesn't even exist (not yet) so it's simple that first step is to upload your background image in a supported format online and then replace http://image.com/background.png with your image's link.

Background Repeat : CSS is a human readable language and you may have already understand what this does. It controls whether your background image should be repeated to cover up the area or not. There are two more variant for this property that controls the background repeat for x and y axis.

It's better to repeat your background images unless you want it to be a single complete background picture, in that case you should change repeat to no-repeat.

If you don't know how to apply CSS on your Blog then check this old article
http://stramaxon.blogspot.com/2012/03/how-to-add-css-to-your-blogger-blog.html

Experiment it

Don't just stop with the instructions, you should experiment it yourself. Guys, CSS is not a programming language, it's a fun and simple language using which we can give colors and styles to our websites. If you use Google Chrome then it's great, use the Chrome developers tools to try out CSS onsite and do more other interesting stuffs. 

Understanding Responsive Design And Using It

Responsive Design, it is what you will hear all around in a forum of web designers/developers. Some people don't even have any idea about it and most of them are business owners who just want their website's work to be done.
If you are a business owner or just a pro blogger in any field you may want a better look for your blog/website and that's when you will search for a local web design company but have you ever tried to know if they are building up your site with the latest and advanced technologies available ?

The problem is both with the client and the company, the client isn't a web geek so he probably doesn't know what's right or wrong to be used to build their website, so the client is innocent here but the web design companies that promises to offer good website is the problem, they have some certified web designs (took a 6 month course, got a job and now building dull sites) who don't even have the idea about the newest technologies. You probably don't want a site thathave lots of table elements in it to build the layout and which looks like websites used to in the 90's.

That was a huge argument about those so called web designing companies, coming to the point, we were talking about the new technologies for designing website and those are HTML5 and CSS3 for sure. Many option in these new standards are amazing, and if you use it in the right way you can take your website design to a next level. Especially the responsive design, but what is it ?

Responsive Design can make your site responsive !

Here, the meaning of responsive is little different. What it's exact work is to make your site layout fit on different layouts but don't you wonder how it was possible even when these technologies weren't available ? Yup, it was possible but was very impossible and needed a lot of work on the server side. First the web developer needed to create different files for different devices and then to instruct the server to load different files for different devices and that's how it worked before but now on a single HTML file you can set layouts for different screen sizes, here it depends on the screen size, not the device and that has many advantages as you don't have to create new designs for all new devices launched, that would be time wasting.

Making Your Site Responsive

If you are a blogger or business owner then you shouldn't get into it, what I suggest you is to hire a good web designer who have good knowledge about it (I have some) and $1000 is worth the work, anyway you can talk to the design about it, but don't contact a local web design company about it or they will just make a huge flash homescreen and that's what they will want thousand of dollars. Always be careful before you hire a web designer, it's the question about your website and business.

Responsive Design is normally achieved with CSS3's Media Queries but sometimes weird guys use JavaScript too for some more dynamic responsive design. It's a little logic thing, like you first have to decide what to do when the screen size is this and then give suitable styles for the surrounding elements too else it will be all messed up. The whole game is about the metrics of elements and you have to do some maths too and as I already said, applying some logic will give you better results.

Fluid layout is not exactly similar to responsive design but it's another advance technology, as the name suggests, it can make a layout act like a fluid, means it can fit in any size or shape and that's it work.

If you are a young or passionate web developer willing to learn these new techniques then there's a one trusted source of information, the MDN website, see this page to learn about Media Queries https://developer.mozilla.org/en-US/docs/CSS/Media_queries

Good News for Blogger Users : I have created many websites with responsive and fluid layout but never for Blogger template but in a few days I am going to launch the Blogger's first responsive Template, so sign-up for our newsletter to keep yourself updated. 

Seperated Box for Gadgets in Blogger

Blogging is about the content and it's most important thing you need on your blog but design matters too for your readers and visitors to be on the page for a longer time. This design tutorial will teach you to add designed borders around your gadgets to make it more beautiful on your blog.

Why is it important to give a more sleek look to your gadgets, they aren't that important for your visibility in search engines but if you want your users to find it easy to read your blog then you must give good looks and structure to your aside contents.

In many blogger templates, gadgets are in their own separated boxes and in other's they are not, but they won't look that good without a little more touch with CSS. It works the best when you don't want to have titles for your gadgets but yet want them to look as different gadgets on the page.

Add borders to gadgets

Giving clean and good looking borders to a gadget on Blogger don't takes more than 2 minutes. You just need the CSS for it, which i will provide in the tutorial and the instructions to add it. I have added two different effects, check it below.

Normal borders

If you don't want a simple but yet eye catching borders around your gadgets then the CSS below will give you what you want. - See the Demo

.sidebar .widget {
border:3px dashed black;
padding:10px; 
}

The CSS above will give a black dashed border of 3px width on all your gadgets/widget on the sidebar. Changes can be made in the CSS code.

1. There are three different parts in the border property.The first value which is 3px is the width of the border.In the middle it's the type of border we will use, currently it's dashed, they can be solid | dashed | dotted | double | groove | ridge | inset | outset .Last is the color, you can change the color with the help of our color picker.
2. Padding is the space between your gadget content and the borders. 

Funky hover border effects

This one is little different, little more funky and responsive. Can react on user movements over the gadgets, when you mouse over the gadget the borders will appear else it will remain without border. What i like the most in this is that it reacts on user interaction. CSS for this border design is below - See the demo

.sidebar .widget {
border:3px dashed transparent;
padding:10px; 
-webkit-transition:all 0.8s ease;
-moz-transition:all 0.8s; 
-ms-transition:all 0.8s;
-o-transition:all 0.8s;
}
.sidebar .widget:hover {
border:3px dashed black;
padding:10px; 
}

The first CSS style block is what the gadget should appear when it's not being hovered and the other block is for styles when it's being hovered.

Add CSS to Blogger

Check the link below to know how add CSS to a Blogger blog.
http://www.stramaxon.com/2012/03/how-to-add-css-to-your-blogger-blog.html

That's it, once you apply the CSS check your blog with the border designs, hope you like it and your readers will like it too. Please comment for feedback.

Static update/notice message with hover effect for Blogger

Have you ever been away for your vacations and you can't update on your blog ? Don't you feel your readers would wonder why aren't you posting anymore, maybe they will even leave you blog because your blog is inactive. In this post i will be telling you how to add static message box on your blog.
It's very useful to keep your readers updated about your current status and that keeps them from assuming that your blog is inactive. I found it very useful when i changed my domain thus it was important to inform my readers about the domain change and it helped them understand the cause of redirection on my blog.

Demo

If you want some message that appears on all pages of your blog then try this tutorial, i am sure you will love this to inform your readers about anything. This plugin connects you more to your readers and give them importance, now follow the steps below to add it.

1. Add the HTML in your template

The first step is to add the HTML. We have used anchor HTML tag for the message box, it's because if you want the message to go on a link you can put the link in href value, you can write a blog post for more information related to the message.

The HTML code is as follows

<a class="stx-update" href="" target="_blank" title="A message">Thanks for visiting our blog you can join us by subscribing</a>

Changes you can make

1. Fill the href attribute's value with a link if you want your visitors to go on a link by clicking it. For example href="http://stramaxon.com/p/update.html" 
2. Change the value inside title attribute, the text inside the title value will appear when you will hover it. For example mouse over this text and see the box appear with the text in it's title attribute.
3. The main change you need to make is the text between <a> and </a>, it will appear to your visitors.

Once you have made the necessary changes to the HTML you can now continue adding it into your blogger blog. Check the next step to know how to easily add it.

Placing the HTML in your template

You need to add the HTML code in your template by following these steps : (backup your template beforehand)

1. Go to your Blogger Dashboard
2. Click on the Template tab
3. Then open Edit HTML and Proceed
4. Use CTRL+F to find </body> in the template and place the html code above </body>
5. Save the template

That's it ! Once the HTML is appearing in the blog, you are now ready to style it using CSS

The CSS design

CSS is what gives the basic anchor HTML an awesome look and feel. Check the CSS code below and learn what you can change in the CSS

.stx-update {
text-decoration: none !important;
position: fixed;
right:0px;
left:0px;
top: 0px;
display: block;
background-color: #49A2E7 !important;
text-align: center !important;
padding: 20px !important;
z-index: 9999 !important;
color: white !important;
font-size: 17px;
font-family: 'verdana' !important;
border-bottom: 8px solid rgba(255, 255, 255, 0.69);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
opacity: 0.8;
overflow: hidden;
}

.stx-update:hover {
opacity: 1.0;
}

You can make changes to the CSS, only make changes if you know what you are doing.

• Line 8 : Change the box color to your favorite or the color that looks good with your blog. Here's a list of basic CSS colors but you can also see the shades of those colors - CSS colors list
• Line 12 : This is the for the color of text into the message, check the link above for CSS color list.
• In fact you can modify anything in the CSS as per your needs, so enjoy, if you want any specific design message box you can contact me on depy45631@gmail.com

Now when you are done with modifying the CSS, read further to know how to add it to your blogspot blog.

Adding the CSS to blogger

You now have to add the CSS code in your template. To do that follow the steps below or just check this tutorial to know how to add CSS to template. 

1. Go to Blogger Dashboard
2. Locate the Template tab
3. You will see Customize button there, click it
4. You will be in the Template designer
5. Click on Advanced tab on the left pane
6. From the Advance tab, click on the Add CSS
7. And paste the CSS in custom CSS text area, preview it. If it seems to be correct and working then Apply to Blog.

Great ! If you did everything correct then you will see the new message box on top of your blog page.

Your Feedback and Suggestion

The design of this box was made simple but interactive, but if you think there's something that needs to improved then feel free to comment on our blog and also subscribe to our email feed updates. 

Hover effect Heat meter design Popular post widget on Blogger

Any Blogger blog can be easily customized but did you know that we can also customize the existing gadgets   ? It becomes very easy to design gadgets on a blog with CSS and i love doing it. In this tutorial you will learn about adding heat meter style for popular post gadget.
In this tutorial you don't have to add any external HTML into a gadget. We will be applying CSS style on the default popular post widget in Blogger to give it a heat meter style with hover effect. Follow the steps below to continue to the tutorial.

Demo preview

1. Configure the Popular post widget

Before we put styles onto it, we have to configure the popular post widget for the style to be compatible with it. To do that that go to your Blogger Dashboard -> Layout -> Edit/Add Popular Post gadget -> And configure it like this

Leave the image thumbnail and snippet check mark unchecked, and set to display 5

2. The CSS

CSS for this effect is very long. You don't need to edit or customize the CSS, it looks the best in what it is.
But if you know what to do then you can try your hands on this. But before that follow the instruction and add this CSS to your template.

.sidebar .PopularPosts .widget-content ul li{
height: 100%;
line-height: 22px;
float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: gray;
}
.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}

.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

Copy the CSS into your notepad or any word processing program.
Note : This is a scroll box so make sure to copy the whole code.

3. Adding the CSS

Now it's time to add the CSS to your blogger template.
Add from Template Designer : The easiest way is to add from the Template designer. To do that go to your Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the copied CSS in custom CSS box and preview, if it's okat then hit Apply to Blog.

Or add directly to Template : For a long CSS i recommend you adding the CSS directly to the Template. And to do that Go your Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Now use CTRL+F to find ]]></b:skin> and paste the copied CSS just above this tag. Preview the template and Save.

That's it ! Now see your Popular post gadget design, isn't it amazing ?

You tried but nothing happened ? Don't worry i am here to assist you, just provide your blog address in the comments and i will tell you what to do. Also comment if you loved this post and want to say thanks.

Listverse like Number Listing design for Blogger and Websites

Listverse, one of the most interesting site with collection of top 10 list on different topic. If you are also a regular reader of Listverse like me then you may know about it's list numbering design, it is what led me to create this tutorial.
If you want Listverse like template for your blog then check this post, we recently published the template details  http://stramaxon.blogspot.com/2012/07/listverse-template-blogger-seo-friendly.html 

For a direct demonstration of what you will be learning to create in this tutorial can be seen on the listverse.com itself. Below is the demo by me on a blogger blog.

Demo

The first time i saw it, i felt that it was made with HTML tables but then i inspected it and found that it was with simple HTML div elements and CSS was used to give it a grid view.


You can implement this into any website if you can edit it in HTML. Follow the steps below to scornfully add it into your blog post or website.  

The HTML we need

The trick is simple, first we will use the HTML which is very important and then simply we will apply the CSS onto it but we will talk more about CSS in next section, see the structure of this HTML to know more about it. (Copy this HTML)

<div class="itemheading"><span class="itemnumber">10</span>
<div class="itemtitle">This is an Item</div>
<div class="itemmore">Description</div>
<div class="cl"></div>
</div>

Now before we implement the codes, read what each HTML line means

• Line 1 : The first div element is parent of all div elements in it. As for the span element , it's what displays as the number on the list and you can edit it to your needs, for example change the 10 to 9,8 etc. or even letters.
• Line 2 : This div element is for the title of the list item, you can change the text in it 
• Line 3 : This is for the description of the list item. It's optional you can also keep it's value empty.
• Line 4 : Just clear:both for clean look

Guidelines to add into Blogger Post

To add this HTML into your Blogger post, then read the steps below

1. First open the post in Post Editor
2. Now switch to HTML mode, you can switch to HTML mode by clicking the button next to 'Compose' in the post editor which says HTML. When you are in the HTML view of your Post Editor , now place your cursor at where you want the numbering to be and then copy-paste the HTML shown above . 

That's it, now you can continue writing your post. But there are some things you must remember

• Never style the text into the HTML with the customization option in Blogger Post Editor
• Delete any BR tag into the numbering HTML or it will look cluttered (The br issue is already solved with the CSS, but you may make it a habbit) 
• Put text out of the closing div tag in the HTML
• For every numbering item you have to put this HTML separately.  

If you keep these things in mind, you will successfully finish the first step of adding this list design.

CSS styling

The HTML bone structure is ready but we still have to make it look like the numbering items on Listverse, to do that, a few lines of CSS is needed. Below is the CSS needed to design the numbering items like Listverse.

/* LISTVERSE ITEM LIST DESIGN CSS BY DEEPAK KAMAT */
/* Chunk Font */
@font-face {
  font-family: 'ChunkFiveRegular';
  font-style: normal;
  font-weight: 700;
  src: url(http://s0.wp.com/wp-content/themes/vip/listverse2/extras/Chunkfive-webfont.woff) format('woff');
}
.itemheading {
border-top: 1px solid #C5DDD8;
margin-bottom: 20px;
margin-top: 31px;
}
.itemheading .itemnumber {
border-right: 1px solid #C5DDD8;
border-top: 1px solid #C5DDD8;
color: #2C2C2A;
float: left;
font-family: 'ChunkFiveRegular',Arial,serif;
font-size: 37px;
font-weight: bold;
line-height: 37px;
margin-right: 10px;
margin-top: 3px;
min-width: 45px;
overflow: hidden;
padding: 17px 10px 10px 0px;
text-align: center;
}
.itemheading .itemtitle, p .exclusions {
border-top: 1px solid #C5DDD8;
color: #2C2C2A;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 24px;
line-height: 24px;
margin-top: 3px;
padding: 17px 12px 0 31px;
}
.itemheading .itemmore {
font-size: 16px;
line-height: 16px;
color: #6D6D6A;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
.itemheading br {display:none;}
.cl {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}

Yaa, this is the few lines of CSS which you need. Learn, how to implement it into your blogger blog.

Adding CSS in Blogger

On Blogger platform, adding the CSS is very simple. Just follow the steps below to quickly add the CSS into your blogger template. (Click here for tutorial)

1. Go to Blogger Dashboard 
2. Now select the Template tab
3. Click on the Customize button in the Template tab
4. You will be taken to the Template Designer, select the Advanced tab
5. From the Advance menu you will see Add CSS 
6. Click on the Add CSS and paste the CSS in the custom CSS box and hit Apply.

That's it ! You are done with adding the numbering list design on your blog. Thanks to listverse.con for being an inspiration for this design.

Your suggestions 

Thanks for reading this. If you have any suggestion or just want to say thanks to us then drop your comments below. Your comments are very important for us to improve our post and tutorials. Check more blogger tutorials on our blog.

Buy the ListVerse like Blogger Template for Blogger

We have published the details of the template here to buy it [Click here]. You can see it in action at this link. We will soon write about the template on our blog but if you want to buy it now, see below

The Template is premium and you have buy it. The template is only for $30. For information contact us on
depy45631@gmail.com 

Add 'Read Previous post' link at bottom of Posts in Blogger

If you have a well structured blog with links to right things at right places then your chances of getting more readers increases and that's what any blogger wants. This tutorial shows you how to add an good looking link to previous post at bottom of every post automatically.
When you are new with all this HTML and CSS thing in blogger then you add a static thank you message at bottom of post one by one in all blog post while writing it, but there's more you can do with the template, you can add your own elements in the template to make your blog look better.
Demo
This is a post you will find helpful if you want to add something at bottom of every post : http://stramaxon.blogspot.com/2012/07/adding-any-thing-under-every-post.html
Coming back to main topic of the post, it's about adding a link to previous post under each and every post automatically. Read further for the codes.

The skeleton HTML

Before you start, Backup your template.
As usual we need the HTML to be in place and then we will add some CSS effect on it. The HTML code is actually just an anchor HTML with bloggers layout data tags to dynamically get the link of previous or older post.

<a class='lst-post' expr:href='data:olderPageUrl' target='blank'>Read our Previous Post</a>

Copy the above HTML to your clipboard by selecting and clicking CTRL+C.

How to add this HTML

We have to place it in the template and to do that follow these steps.

1. Go to your Blogger Dashboard 
2. Select the Template tab (in new interface)
3. Now click on the 'Edit HTML' button on the page
4. Click on 'Proceed' 
5. Then check mark the box which says 'Expand Widget Template' (Important)
6. Use CTRL+F to find <div class='post-footer'> in the template, you may not copy and paste the text from here, type <div class='post-footer'> yourself in the search box which appears after hitting CTRL+F
7. Once you find this line  <div class='post-footer'> paste the HTML provided just above the code.
   
   
8. When you have place the right code at right place then you can Save the Template.

Now check one bottom of your one of post and you will see the link to previous post, but doesn't it look so dull ? It needs to be painted in CSS3 to attract reader's attention.

The CSS

.lst-post
{
    display:block;
    font-family:'verdana' !important;
    cursor:pointer;
    background-color:rgba(10, 74, 133, 0.49);
    margin-bottom:-5px;
    margin-top:16px;
    color:white !important;
    padding:5px 10px;
    -webkit-transition:background-color 0.3s ease-in-out;
    -moz-transition:background-color 0.3s ease-in-out;
    -o-transition:background-color 0.3s ease-in-out;
    -ms-transition:background-color 0.3s ease-in-out;
    box-shadow:0px 0px 4px gainsboro,inset 0px 0px 2px white !important;
    font-size:14px;
    text-shadow:1px 1px 1px grey;
    border-radius:4px;  
}
.lst-post:hover
{
    background-color:rgba(6, 128, 224, 0.49);
    text-decoration:none;
}

The CSS code is lengthy but useful, all you have to do is now to add the CSS in your template to apply the style onto the link.


Now follow these steps to know how to add the CSS into the template

1. Go to your Blogger Dashboard
2. Now select and Template 
3. In the Template tab you will see the customize button
4. You will enter the template designer
5. Click on the Advanced tab > Add CSS 
6. Now paste the CSS in the custom CSS box, Preview it before you save to make sure it's working well.
7. If it's okay, hit the Apply to Blog button refresh your blog with CTRL+F5 and see the link just below any of your post !

That's it ! This feature will keep your visitors engaged with your page and that's a good thing for your SEO and pageviews. Your readers will stay online for more time on your blog.                  

Your suggestions

You can help us make our blog post better by giving your suggestions and informing us about any error in post or the codes. Drop your precious comments which is very important for us. We will love to hear from you. 

Create Google like Scroll bar in blogger blog

If you look back at Google web pages back in mid 2011, they were simple just like a classic web page like other pages but 2012 seems to be a design year and that's why each and every big company painted their web pages with dynamic looks and features. One of the extraordinary thing about Google is it's scroll bars, they are just awesome and anyone wants to implement it, this tutorial will show you how to do that.

Many websites used the same design for scrollbar with different techniques, some with JQuery or etc. Many blogger users also wanted to use the same design for their blog but they were helpless as most of the blogger users just have basic knowledge of web languages so it was difficult for them to make such design on their own.

Before

After

This tutorial will teach you how to design the scrollbars like that in blogger.
Actually the trick is very simple, the scrollbars are design with new CSS3 scrollbar selectors which only works in webkit, unfortunately their's currently no way to make it work in non webkit browsers such as Firefox, Opera etc.

I have recently published 'Dream Blog V2' template in which i have implemented the scrollbar design. So here's the demo


Demo

The CSS

It is all CSS which do the designing on the scrollbar and you don't need to worry about heavy javascript codes, a simple CSS code block can do it. This is the CSS, you don't need to make any changes in this code but if you know what to do then you can change color and some values to fit your needs.

/* Webkit Scrollbar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #FFFFFF;
-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;   
border: 1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background: #646464;
-webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);  
}
::-webkit-scrollbar-thumb:hover {
background: #AAA;
}
::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

Adding the CSS

Adding this CSS is easy, check this tutorial or follow these steps.

• Go to Blogger Dashboard 
• Select the Template tab
• Click on Customize button
• When you are in template designer, select Advanced
• And from the Advanced menu select Add CSS 
• Paste the CSS there and hit Apply to Blog. 

That's it, now clear and caches and reload your blog by hitting CTRL+F5 and you will see the Google like scrollbars on your blog, now when your readers ask you how you did it you can tell them about us :)

If you are facing any problems implementing the code then you can send us your message by dropping comments. 

'Dream blog' - 2nd version of best SEO template

This is the second version of our best SEO template called 'Dream Blog', we got positive feedback about 'Dream Blog' template and also got some suggestion regarding the Template. This new version is more better than the older one but both works great for SEO.
We decided to launch 'Dream blog' as a free template so that everyone can enjoy the benefit of a SEO friendly template.

Preview Template Download - Server 1 Download - Server 2

Downloading and installing

Extracting the files : You can find the .xml file inside the RAR file you can download in the above links, use WinRAR program to easily extract files from the zip file.
Installing the template : The first step to install 'Dream blog v2' template on your blog, you have to upload the xml file on your template section, check this tutorial.


Note : Always Backup your template when you try to make any changes to your blogs Template.

About the dreamblog-V2-CSS.css file

Once you extract the template, you will see two text file, one xml (the template) and a CSS file named dreamblog-V2-CSS.css, the CSS file contains overall CSS code to design the template and if it's not linked in the template then your blog will have no good style with 'Dream blog' template.


I am already hosting the CSS file on dropbox and it's where the CSS file is downloaded on your template, it means that i can make changes in design by applying CSS style on the CSS file hosted on dropbox anytime. You may host the CSS file on your own server or dropbox so that you have control on it or if it ever gets deleted on my dropbox then you will have the CSS file with you and you can use it yourself.


You can find the link in the template and replace it with your link to the hosted CSS file on your server of hosting service. Replace this link :
http://dl.dropbox.com/u/93278694/dreamblog-V2-CSS.css
Go to Blogger Dashboard > Template > Edit HTML > Use CTRL+F to find the link and then replace it with your own link.

Features

This template is second version of our 'Dream Blog' and many features are same as the previous one. Because this is a new version you will see lot more improvements and new features, just a quicklist of the features. 

1. Best SEO template for blogger cause we kept the template as simple as possible to make your blog load faster and that helps in improving SEO.
2. The structure of the template is well formed and that makes the template interface better and gives it more usability
3. CSS file is hosted externally and that's 
4. New CSS3 scroll bar in this template is what makes it a 2012 template, the scrollbar only works in Webkit browsers, other browsers don't support styles for scrollbars. 
5. Content on this template is easier to understand
6. Used small picture for the full page background to improve page load, you can get more background designs here. 
7. Compact header to give more room to the contents
8. SEO friendly page title i.e  Post Title | Blog title
9. Gadget separated in different boxes.
10. Search box at the top, visitors can search for the content they are looking for without scrolling throughout the page. 
11. Post Author info and post timestamp added under the post title
12. Customized Lightbox, giving the default blogger lightbox a brand new look.Customize it yourself using this tutorial. 
13. Previous post link below the post title 
14. Jump to comment button at bottom right corner of the page for quick reach to the comment section 

These were some specification of the template. 

Add more stuffs

Just as the previous template, this template also allows you to add new features in blog if they are well formed. We have just named our blog a blogger gadget resource, so here are some of our gadgets which will look good in the 'Dream blog v2' Template, some have been already added so check before you add.

1. Hover effect on images in posts - Blogger
2. Under line gadgets title in Blogger
3. Hover effect and Expandable Search box for Blogger
4. Advanced Feedburner Subscription gadget for Blogger
5. Show/Hide effect for Gadgets in Blogger with JQuery
6. Good looking search bar for your blog or website

Your feedback and suggestions

Now we want to know about our template by you. If you have any suggestion regarding the template then do comment in with your query or the message. We will love to hear from you.