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.

Customizing Body Width of Soho Blogger Theme

Blogger's new themes are responsive and you get a very little option to change the set width of the main area. The theme designer doesn't even an option to adjust the widths either.

We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.

This post would be very short, the reason for this being short is that this tutorial will simply teach you how to do a specific thing - here setting the width and that doesn't require too much technical background. Also we will be posting a series of customization tutorial for Blogger's new Themes (Soho, Contempo, Emporio and Notable), be sure to subscribe to our blog for updates.

Getting Started

Currently the largest width Soho theme stretches is 1000px, if the screen is more than 640px the blog post area as well as header & footer will stretch as much as 1000px.

The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.

CSS Snippet

Following is what we need, you don't have to customize it, it works well with existing standard screen widths and stretches the areas as required. Copy the CSS code -

/* For screen widths less than 1280px */
/* For screen widths less than 1280px */
@media screen and (min-width:1280px) {
    .centered-bottom, .centered-top {
        width: 1180px;
    }

    body.item-view .widget.Blog .post {
        width: 800px;
    }
}


/* For screen widths less than 1400px */
@media screen and (min-width:1400px) {
    .centered-bottom, .centered-top {
        width: 1300px;
    }

    body.item-view .widget.Blog .post {
        width: 1060px;
    }
}

After copying keep it in a notepad / textedit app since we are going to need it in the next step.

You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.

Applying the CSS

For a complete guide on adding CSS codes in Blogger refer to this tutorial - How to add CSS to your Blogger Blog.

1. Open your Blogger Dashboard and choose the blog
2. Go to the Theme section
3. click on Customize
4. Navigate to Advanced Add CSS
5. In the Add custom CSS text field enter the copied CSS code from the previous section. It should look like this -
   
   
   
   
   
6. Click on Apply to Blog to save the changes and go to the blog to see it live. 

That's it. Once the CSS is applied you will start seeing the customized width live on the blog. 

What's next?

We plan on posting more small tutorials like this on customizing parts of new themes. If you have any suggestions email it to us on depy45631@gmail.com or post your idea in the comments below. 

Adding AdSense Ad Inline With Post in Blogger

There are numerous tutorials and tips on increasing revenue on AdSense by using different ad placement techniques and practices, many of them work great, but Ads in the main body content is one of the most vital place.

Ads placed in post body can make a significant difference in the revenue but you have to do it wisely, it is where the main focus of a site's visitor is for most of the time during their visit so it is important to make sure the experience is not obstructed for the visitor due to the ads.

In this tutorial you will learn a simple way to add AdSense ad in your post and have it display in a good manner that is by floating the ad to a direction and have the paragraphs wrap around it.

Set Things Up

You can simply paste an Ad code in the post editor and the ads will appear but that isn't always what you need. How about floating it to the left or the right so the text wraps around it? We are going to learn just that by using simple markup and CSS so you can selectively add the Ads to any post at the best position you like.

Add The CSS Styles

We will get onto the main part where you have to work with the ad codes later before that let's set a few lines of CSS that is going to complement the box which is going to contain your Ad. This tutorial is meant for square ads only.

/* By default it floats to left */
.ad-container {
    float: left;
    padding: 10px 0;
    padding-right: 10px;
}

/* For ads floating to the right */
.ad-container.right {
   float: right;
   padding-left: 10px;
   padding-right: 0;
}

/* Centered Box */
.ad-container.center {
    float: none;
    padding: 10px 10px;
    text-align: center;
}

/* Clearing floats */
.ad-container br {display: none;}
.ad-container:after, .ad-container:before {
    content: "";
    display: block;
    clear: both;
}

If you are not sure where to add this CSS code please check the guide on adding CSS to a Blogger blog

The HTML Container

What does this do? Well, you can, as I already mentioned, paste the Ad Unit's code provided by AdSense in the HTML mode in the post and the ad will start appearing but you get a very little and not-an-easy option to position the ad as you like. With this you can.

Copy the following code and have it saved in your favorite text editor so you can use it in the next steps easily.

<div class="ad-container">
  <!-- Paste your code here -->
</div>

The HTML markup is simple, just put your AdSense code between the first and the last line i.e where <!-- Paste your code --> is and that is it.

You need to know a small thing if you want to have the ad centered to floated to the right as by default it floats to the left. Check the following line of codes trimmed from the HTML markup provided above.

<div class="ad-container center">

We added the keyword "center" in side the class="" attribute. If you want the ad to appear centered then you have to add it too to your markup.

<div class="ad-container right">

In case you need it on the right just add "right" in there and that's it. Simple!

Once you have this markup ready with your AdSense Ad code you may proceed to the new steps that guides you through adding it to the post through post editor.

Put The Final Code In Post

By now we assume that you have finalized the code i.e edited the markup and included your ad unit code where described.

To put it into your post click on the "HTML" button when you are in the post editor

After switching to the HTML mode paste your code around the text where you want it to appear. Mostly ads are put at the start of the blog post but if you wish you can put anywhere for example at a position where you know the readers are going to spend most time reading or focusing. 

Make sure that when you paste the code anywhere in the post in HTML mode you paste it outside a <span> or <div> tag that may be there to contain some other text or paragraph/image.

For any further help on this you may use the comment box below to let me know. 

Adding Two Or Multiple Column Paragraphs in Blogger Posts

Writing is a brilliant thing, but writing with style is even brilliant! But one thing that many blog authors want to have is the multiple column paragraphs, that's paragraphs side-by-side.

Above is an example of three column paragraph. In this tutorial I am going to guide you how to work with multiple column or newspaper style paragraphs in Blogger editor.

Why not use MS Word to copy and paste?

One simple idea is to format the text in MS Word or some rich text editing software and then copy and paste the code in the post editor, but I would not recommend it, rich text editing software mostly aren't made for the web, and the code/markup they generate is not compatible with HTML, so it's not completely a good idea.

Basic Prerequisite

Mostly the first part is one-time setup, once you do it you can easily add these style of paragraphs to any new or existing blog posts.

This would require a bit knowledge of basic HTML to be able to tell what are HTML markup, and most of you might already be familiar with it if you have worked in the "HTML" mode in Blogger post editor.

Even if not I will tell you the basics things you need to know, and that would take no longer than 5 minutes.

Let's get started

There are two parts in this, first is the one-time setup of the CSS in your Blogger Template (See how to apply CSS to your Blogger Blog) and the last one is to create the HTML markup for the columns of paragraphs, and set the required configurations like how much space you want a column to take, like 1/4, 2/4 etc. and that also includes adding the text you want in each column.

1. The CSS Code

First thing as we discussed is the CSS code that handles all the styling this particular HTML markup would need in order for the paragraphs to be displayed in multiple columns.

Copy the following CSS code:

/* 
# Multiple Paragraphs style by Deepak Kamat 

# depy45631@gmail.com (author)

# Free & Open License to Use in commercial and or personal projects/works.
*/
.multiple-para {
  margin: 15px 0;
}
.multiple-para *, 
.multiple-para *:after,  
.multiple-para *:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
}

.multiple-para:after,  
.multiple-para:before {
  content: "";
  display: block;
  clear: both;
}

.multiple-para .para-50 {
  display: block;
  float: left;
  width: 50%;
  padding: 0 10px;
}

.multiple-para .para-33 {
  display: block;
  float: left;
  width: 33%;
  padding: 0 10px;
}

.multiple-para .para-25 {
  display: block;
  float: left;
  width: 25%;
  padding: 0 10px;
}

Copied? Now refer to this tutorial about adding CSS styles to your blog and follow the instructions to apply the code in your blog correctly.

Note: Do not change and or delete anything from the code provided if you don't have idea of what you are doing.

The HTML Base

The Base code is pretty simple, nothing very fancy, just a few regular div tags are needed for this. Following the simplest example of code for this.

<div class='multiple-para'>
    <div class='para-25'>This is the first paragraph</div>
    <div class='para-25'>This is the second paragraph</div>
    <div class='para-25'>This is the third paragraph</div>
    <div class='para-25'>This is the fourth paragraph</div>
</div>

I haven't added any large piece of text to make it look clear, just a small line of text "This is the nth paragraph" for each.

About the Configuration

How this works? The thing that makes this HTML work visually is the CSS we added. To configure this we have to change the class names i.e class='para-25' to the other possible names para-33 and para-50

The idea is simple, in the above example code, each paragraph i.e <div> tag takes 25% percent of the space available and thus 4 paragraphs with 25% width can be fitted in. If we need three paragraphs we can change para-25 to para-33 and the three will fit in perfectly.

We have to keep in mind that the sum of width of all the paragraphs in the container (<div class='multiple-para'>) doesn't exceed 100, else it will break down and cause problems.

Here's the list of configurations you can make:

• 2 Columns - para-50 | para-50
• 3 Columns - para-33 | para-33 | para-33 OR para-50 | para-25 | para-25 
• 4 Columns - para-25 | para-25 | para-25 | para-25

Not sure how to use any of this information? Here's a demo, say I want 3 columns of the same width then I will do this with the HTML markup provided above:

<div class='multiple-para'>
    <div class='para-33'>This is the first paragraph</div>
    <div class='para-33'>This is the second paragraph</div>
    <div class='para-33'>This is the third paragraph</div>
</div>

And a live demo of it (with different text of course):

---

Lorem ipsum dolor sit amet, adipiscing elit. Ut non ex venenatis, egestas est vitae, lacinia libero. Sed pretium aliquet ultricies.

Cras pretium venenatis sollicitudin. Nulla sit amet condimentum erat. Aliquam mattis elementum mauris vel suscipit. In lacinia nec felis dictum vehicula.

Integer blandit, ex eu tristique eleifend, urna eros tempor leo, nec tincidunt risus purus sed massa. Pellentesque cursus eros.

---

Using the HTML

The section above must be read and understood well before you continue. In the previous section I explained how the paragraphs can be configured by changing the class names, the names that inside class='' in the HTML tags.

1. I recommend you to use a plain text editor like Notepad copy and edit the HTML code, it will be cleaner. Copy the HTML code into your text editor and replace the text inside the HTML tags, for e.g the red highlighted part is what you have to change:
<div class='para-33'>This is the first paragraph</div>

2. Once you are done editing the HTML markup, go the the Blogger post editor. And switch to HTML mode, the button is on the top left corner below the post title line "Compose | HTML", click on "HTML" and paste the HTML markup in the place where you want the multiple column paragraph to appear.

Responsive (with Media Queries) Paragraphs

If you are using a Blogger template which is responsive, then on smaller sized devices the text will be squeezed to fit, we will need a CSS with media queries rule to control that. Though I haven't still included it right now, but if more people request it in the comments I might consider updating it.

So do subscribe to our blog feed to receive update

Auto Hide Notification Box in Blogger

Notification boxes in blogs can be useful for notifying readers about something hot on your blog. But this notification box is a bit different from others, it hides automatically after a specified time.
You may find lots of tutorials about these types of notification boxes but this one is different. It hides itself after a specified time which is the best thing about this. It won't remain there on the page forever (which can possibly disturb the reader not interested in notifications).

Before we proceed to the tutorial check what you are going to add to your blog. 

Demo

Proceed to the tutorial to know how to add it to your blog.

The HTML

The first thing we need is the HTML code as always. The code is simple and you can edit its content easily to make it ready for your blog. This is the HTML snippet

<div id='float-bar' style='display:none;'>
<b class='notifyTextbld'>Notification:</b>
Hello! Welcome to our blog and blah blah blah. See this new post <a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>
</div>

The box contains bold text "Notification" and below it is some message you want your readers to see. You may also include an anchor link to a post or website you want the readers to visit.

Edit the HTML

You will need to edit the text (on line number 3) to display your own message. You know how to do it, just replace the sample text with your own meaningful message. It also contains an anchor link :

<a rel='nofollow' href='http://stramaxon.com'>Cookies!</a>

If you want your readers to visit a page then you can add your own HTML anchor links or any element, you can even add images inside it.

If you are not familiar with HTML but want to add different HTML elements use the Blogger post editor to set the elements in a graphical user interface, switch to the HTML tab, copy the HTML and paste it in the third line of the HTML.

Add the HTML

To add this HTML you have to edit your template HTML so it's good to backup your current template.

We can add this HTML anywhere in the template (inside body element) but to make sure it doesn't interfere with any other element in the template it is best to add it below everything. Follow this steps to do that :

1. Go to your Blogger Dashboard
2. Click on the Template tab
3. Press the Edit HTML button, ignore the warning and proceed. 
4. Now open the in-page search function in your browser (default CTRL+F)
5. And search for </body> 
6. When you find it, paste the HTML code just above it and save the template. 

Once done, check your blog for the HTML (it might be at the bottom), it may look dull, to make it beautiful we will need the CSS. So proceed to the next step.

The CSS

Yeah, this is what gives life to dead HTML skeleton.  The following CSS will be used to style the notification box.

#float-bar {
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
background-color:rgba(248, 248, 248, 0.85);
color:#000;
padding:10px 30px 30px 30px;
font-size:16px;
position:fixed;
right:10px;
top:0px;
width:500px;
border-radius:0px 0px 10px 10px;
z-index:99999;
}

#float-bar a {color:#000;}
#float-bar a:hover {color:#000;text-decoration:none;}

#float-bar .notifyTextbld {display:block;margin-bottom:20px;}

Editing the CSS

You might want to modify the codes. Edit the values in the highlighted lines.

• Line 3: This the background color of the box. Replace the value with a rgba color value (with alpha transparency) or HEX color code. 
• Line 4: This is the color of the text inside the notification box. Use HTML Color Picker to choose a HEX color code  
• Line 6: This is the size of font inside the notification box. Change the 16px to a desired value.
• Line 8: You can edit both the property name and its value. Change right to left if you want the notification bar to appear on the left side. And also you can change the 10px to a some other value, this decides how far the box should be from the position. 
• Line 9: The number of pixels you can the box to be far from the top. 
• Line 10: This is the width of the box. Change the pixel value if you want.

If you know about CSS (it's easy) you may try adding for removing properties to design your own different box.

Adding the CSS

Check this tutorial to learn how to add CSS in Blogger
http://stramaxon.blogspot.com/2012/03/how-to-add-css-to-your-blogger-blog.html

The JavaScript jQuery 

The final step is to add the JavaScript jQuery script. The script controls how the box should enter and exit. We can do a lot of things with it but for now we will just do the basic in and out stuff.

Including jQuery Library

If you already have jQuery library installed then skip this step. If not then copy the HTML line below :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

To add this in your template : Go to your Blogger Dashboard -> Template -> Edit HTML -> Search for </head> and paste the code just above </head> and save the template.

Now you may proceed to the next step.

The jQuery Script

This is the script you need.

<script type='text/javascript'>
$(document).ready(function(){
$('#float-bar').slideToggle(445,function(){
$(this).show(function(){
setTimeout(function (){
$('#float-bar').slideUp(445);
},5000);
});
});
});
</script>

You don't need to change anything in this script expect the number of seconds you want the notification bar to stay on the page.

The line number 7 contains a number value 5000 which is the number of milisecond after which the box will disappear. 1000ms = 1sec, so just change the value to set a different time for it to hide. If you want the box to stay on the page for 20 seconds you may change the value to 20000

Adding the Script

The procedure to add the script is same as adding the HTML in the body. To add it go to your Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </body> in the template and then paste the jQuery code just above </body>.

Showing it just on Homepage

You might not want this notification bar everywhere so the question how do you set it to just display on homepage, post pages, or an index page and archive pages.

The best way to do this is to use Blogger conditional tag (which works on the backend) which will make the box render only on the page type you specify.

The code we will need is this

<b:if cond='data:blog.url == data:blog.homepageUrl'>
//The HTML/JS/CSS or any code you want.
</b:if>

Replace the 2nd line in this code with the HTML code of the notification box and then add it to your template as instructed in in the tutorial. All we did is added the <b:if> conditional tag around the HTML code provided in the tutorial.

Now check your blog for the new notification bar. How is it ? I hope you liked it but if you found any error in the code then do post it in the comments. 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 

Center gadgets tittle in Blogger

The gadgets title in blogger are aligned to left by default, read this tutorial to know how to align it to center or a different direction.
See the screenshot of how it will look

Before

After

It looks good, isn't it ?

The CSS code

Align it center : A simple CSS has been used to achieve this. The CSS is this

aside .widget .title
{text-align:center !important;}

A two line CSS code, what can be easy than that ! To know how to apply this CSS, check this link.


Align it right :  But what if you want the gadget title to be on the right side ? Then use this CSS

aside .widget .title
{text-align:right !important;}

That was easy too. Check the link to know how to add CSS in blogger blog.

Chances are that your HTML can be different so you have to use different selectors on the first line of CSS, use chrome developer tools to make that task easy.

Thanks for visiting our site, subscribe to the blog for more amazing blogger tricks and updates. 

Disable users from selecting text and images on blog/website

Bloggers using tricks to disable right click are benefited in ways. They may have surely get red of their content being copied.
There are more steps you can take to make your content secure and can disable others from copying it. I posted a tutorial on disabling right click but there more techniques you have to use to protect your content better.

Demo

We can disable the selection of text or images on any website or blog to disallow others from copying your contents. It can be done with CSS easily. You just have to make some small customization depending on your needs.

body {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

The above CSS will disable selections on all elements including text, images, tables etc. Learn from the examples below  


This CSS will work in Blogger, it disables selection on all elements in a post. Means users will be able to select every element on sidebars,headers and other parts of the blog except the .post-body area.

.post-body {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

The CSS below will only disable selections for images in the whole document, cause i have put body in the selector.

body img {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

Or if you want to disable selection for images in post area only, then this CSS will work (for Blogger)

.post-body img {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  -o-user-select: none;
  user-select: none;          
}

This was a quick overview on the user-select CSS property and the way to disable selection on elements. If you want to apply CSS on your blogger blog can check this tutorial.


If you want the disable selection for elements in a specific part of your web page then you use chrome developer tools to know it's class and put it into the selector area of CSS code.

Disable right click without JavaScript

There are many JavaScripts that can disable right click on a website or blog, but JavaScripts can be bypassed in many ways and just to reduce the chances for copy-cat to copy your contents use the disable right click technique along with the technique in this tutorial.
http://stramaxon.blogspot.com/2012/07/disable-right-click-without-using.html

Hover effect and Expandable Search box for Blogger

Search box is now a compulsory gadget in every blog for ease of access to the contents on any blog or website. I had already posted a tutorial on creating a classic but good looking search bar for blogger.
This tutorial is also about creating a search box but with an advanced design and concept.You can see a similar design on apple.com, i saw it long ago, when i don't had any idea on how to make it. But today writing the tutorial for people seeking help to make a search box like that or we can say expandable search box.

See the demo to make sure this what you want.

Demo

The HTML

The HTML is same as in previous tutorial but the main thing we focused in this search bar is it's design and the effect of expanding when it's on focus state. This HTML can be applied on any website if you have access to edit it's HTML. But special guidance for Blogger users :

1. Go to Blogger Dashboard
2. Select hte Layout tab
3. Now click on 'Add a Gadget' 
4. Select HTML/JavaScript gadget from the list. 
5. Now Add this HTML into it's content area but remember to make required changes.

<div class='srch-cnt'>
<form action="http://www.stramaxon.blogspot.com/search" class="formupsearch" method="get">
<input class="searchinputarea" placeholder='Search for..' maxlength="255" name="q" size="25" type="text" value="" x-webkit-speech="true" />
<input class="boxsearch123" type="submit" value="search" />
<input class="checkbutton23" name="sitesearch" type="radio" value="" />
<input checked="checked" class="checkbutton23" name="sitesearch" type="radio" value="stramaxon.blogspot.com" />
</form>
<a class='attrbl' target=blank' href='http://stramaxon.com/2012/07/hover-effect-and-expandable-search-box.html' title='Get this Gadget'>Get this!</a>       
</div>

The changes you have to make into this HTML code block :

• Line 2 : Change the URL is action attribute with your's url with /search at end. e.g
  action='http://www.mysite.blogspot.com/search' 
• Line 3 : This is optional change, just change the placeholder value. It is the group of words that appears when you haven't enter anything into the search box. 
• Line 6 : This is the last edit, just replace the URL in 'value' attribute with your blog's or website URL without. 

So, once these changes are made on your HTML you can save the gadget. Now place the gadget block at upper side so your visitors can easily find the search box.

The CSS styling

The overall role in this search box is of CSS which gives it a look. Search box are classic by default but applying CSS on it to make them look good is a trend.

Applying CSS is very easy, check this guide on how to add CSS to Blogger blog.
This is the CSS code we will use to style the search box and it will do it's job like a charm.

.checkbutton23
{display:none;}

.srch-cnt
{text-align:right;}

.searchinputarea
{
    width:150px;
    border:1px solid lightgrey;
    height:26px;
    padding-left:6px;
    padding-top:2px;
    background-image:-webkit-linear-gradient(top,#F8F8F8,rgba(228, 228, 228, 0.93)) !important;
    font-weight:normal;
    font-size:14px;
    font-family:'verdana';
    box-shadow:inset 0px 0px 0px gainsboro;
    color:#505050;
    background-color:gainsboro;
    font-style:italic;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
    
}
.searchinputarea:hover
{box-shadow:inset 0px 0px 7px lightgrey;}
.searchinputarea:focus
{
    box-shadow:inset 0px 0px 8px gainsboro;
    background:white !important;
    font-style:normal;
    color:black;
    outline:1px solid lightgrey;
    border:1px solid transparent;
    width:200px; /* Width it should be when in focus */    
}
.boxsearch123
{
    text-indent:-9999px;
    vertical-align:top;
    height:31px;
    width:40px;
    border:1px solid grey;
    background-image:url("http://cdn4.iconfinder.com/data/icons/iconsweets/50/search.png");
    background-size: 30px 30px;
    background-position: 6px -0px !important;
    background-color:#EBEBEB;
    cursor:pointer;
    box-shadow:inset 0px 0px 0px #D8D8D8;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    -ms-transition:all 0.3s;
    -o-transition:all 0.3s;
    transition:all 0.3s;
}
.boxsearch123:hover
{box-shadow:inset 0px 0px 10px #D8D8D8;}
.boxsearch123:active
{box-shadow:inset 0px 0px 10px #B4B4B4;}
.srch-cnt .attrbl
{
    color:grey !important;
    border-bottom:1px dotted black;
    font-size:10px;
    visibility:visible !important;
    display:inline-block !important;
}
.srch-cnt .attrbl:hover
{
    text-decoration:none;
    color:grey !important;
    border-bottom:1px dotted black;
}

Just apply this CSS into your blog.


Note : Edit the width property in .searchinputarea:focus selector to change the size of it's width when focused. It is the width it should expand to.


Note : There's an image (search icon) which is hosted on another server, if you don't want sudden deletion of images from their server than download the image which is here  http://cdn4.iconfinder.com/data/icons/iconsweets/50/search.png Upload it to your own server or a photo hosting service such as Picasa and find the URL in the CSS code and replace it your's hosted image link.

Now when you are done doing this then check your blog for the amazing looking search bar. I have put the attribution in the search bar so that your readers can also enjoy this search bar on their blog with a click.

Hope you loved this tutorial and i am sure you will subscribe to email newsletter for more Blogger gadgets and tips. Do come back and leave your comments on this post to let us know how you were helped with this search widget for Blogger.  

Blogger Comment design like on 'Spice up your blog'

Big blogs like SpiceUpYourBlog is inspiration source to many people. Spice up your blog or SYB is a blog on blog designs, SEO tips and etc. Paul Crowe the owner of SYB is very knowledgeable about blogging and web design. In this tutorial you will learn how to make your blogger comment system design like on Spiceup your blog. 
SYB is well designed by Paul Crowe. But the comment system design is one of the best thing we find in SYB, the design and it's look makes the comments easier to understand.

Now you don't have to keep that boring comment design by Blogger. We can easily change the overall design of comment and make it look and like the comment system on SYB.

Before you Apply this design, don't forget to check the

Demo


It can be done easily with CSS. You can make changes to the CSS if you understand what you are doing or you may just ignore making any changes. Follow these Instruction to add this long CSS

1. Go to Blogger Dashboard 
2. Now click on the Template tab
3. Click on the Customize button
4. Select the Advance tab > scroll down and Add CSS 
5. Now you will see a textarea on right side, this is where you have to paste the HTML

@font-face {
  font-family: 'Philosopher';
  font-style: normal;
  font-weight: 400;
  src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.comment .avatar-image-container {
border: 1px solid #B6B6B6;
max-height: 70px !important;
margin-top: -5px;
width: 70px !important;
position: relative;
z-index: 50;
}
.comment .comment-block {
margin-left: 75px !important;
}
.comment .comment-header {
background: none repeat scroll 0 0 #A9F5D0;
color: #333;
font-size: 15px;
font-weight: bold;
margin-left: 60px;
}
.comment .comment-header a {
color: white !important;
text-decoration: none;
}
.comment .comment-content {
background: none repeat scroll 0 0 #FEFFF9;
border-bottom: 2px solid #E6E6E6;
font-size: 14px;
margin: 0 0 30px;
padding: 5px 5px 10px 10px;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD;
color: #333;
display: inline-block;
line-height: 1;
margin: 0 3px;
padding: 3px 6px !important;
text-decoration: none;
}
.comment-header cite {
background: none repeat scroll 0 0 #DF7401;
border: 1px solid white;
color: white;
padding: 2px 20px;
position: relative;
z-index: 99;
margin-left: -20px;
}
cite.blog-author {
background: none repeat scroll 0 0 #8181F7 !important;
}
.icon.blog-author {
display: none !important;
background: url("") no-repeat scroll 0 0;
margin-left: 90px;
width: 60px !important;
height: 60px !important;
position: absolute;
right: 5px;
bottom: 5px;
top: 10px;
}
.comment .comment-header {
color: #333;
font-size: 15px;
font-weight: bold;
}

.comment .avatar-image-container img {
border: medium none !important;
height: 70px !important;
width: 70px !important;
max-height: 70px !important;
max-width: 70px !important;
}
.comment .comment-actions a {
background: none repeat scroll 0 0 #DDD !important;
color: #333 !important;
display: inline-block !important;
line-height: 1 !important;
margin: 0 3px !important;
padding: 3px 6px !important;
text-decoration: none !important;
font-size:16px;
}
.comment .comment-actions a:hover {
background: #CCC !important;
text-decoration: none !important;
}

.comments {
font-family: 'Philosopher', arial, serif !important;
font-size: 1em;
color: black;
}
.comments .continue a {  
display: block !important;
font-weight: bold !important;
padding: .5em !important;
color:#E34600;
font-size:16px;
}
.comments .continue a:hover {color:#4D3123;text-decoration:none;}
.item-control {
display: none !important;
}
.comments .continue {
border-top: 2px solid transparent !important;
}

This is a pretty long CSS but it works very well. After you apply this CSS to your blog, check your blog for the brand new SYB like Comment System which your readers will like.It also attracts your readers to comment which is good for your blog. 

How to create 'Next' 'Previous' buttons like DamnLOL in Blogger

If you have a photography blog, then you have always wanted to have Next and Older post buttons just like the buttons in DamnLOL. We are just going to teach you how to make buttons like that.
It can be done with CSS, copy and pasting it is easy, but writing it took about 30 mins and lot of hardwork. This tutorial will only work for Blogger, if you try this in Wordpress then it's possible that it will not work but you can make it work by putting the right selectors at the right place.

I thought of writing this tutorial because the design at DamnLOL next and previous post navigation is great and can increase your page views and also visitors time on page.

Demo

We have done it by styling the classic Next and Older post button, but to make this CSS work well, you have to remove any customization you made to the Next or Previous links, the navigation links should be classic as given by Blogger. It works best with the blog's having no extra customization to next and previous links.

Let's play with the CSS.

<style type='text/css'>
/* By Deepak Kamat 
   http://stramaxon.blogspot.com 
*/
.blog-pager-newer-link,.blog-pager-older-link
{
    position:absolute;
    top:1px;
    z-index:999;
    color:transparent !important;
    width:55px;
    height:66px;
    background-color:red;
}        
    
.blog-pager-newer-link {
    position:absolute;
    right:-27px; /* Change this value to change the position of newer post link */ 
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 0px; 
    background-color:transparent !important;   
}
.blog-pager-newer-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 67px;     
}

.blog-pager-older-link {
    position:absolute;
    left:-67px; /* Change this value to change the position of older post link */  
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-color:transparent !important;
    
} 
.blog-pager-older-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:0px 67px;    
}
</style>

To add this CSS, you don't have to add it by going to Add CSS in the Template Designer. If you want to paste it there, then remove the <style type='text/css'> from top and remove </style> from bottom, then it will be compatible with the Add CSS option in template designer.
Or
You can paste the CSS with the <style> tag in Template directly by going to Blogger Dashboard | Template | Edit HTML | Find </head> in the template and paste the whole CSS with <style> tag above </head>
Note : Just Copying and pasting the CSS will not work on your blog correctly, you have to make changes to it's position. You need to define where it should be in the right or left, to fit with your blog.
See line 18 and 31, you have to change it's values to fit with your site.

Want those designs on Post Pages only?

If you don't want this design on home page then you have to use the HTML version of CSS, which you are supposed to paste it above </head> in your template.

For it to only render on Post page you have to put Blogger Conditional, it will look like this.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* By Deepak Kamat 
   http://stramaxon.blogspot.com 
*/
.blog-pager-newer-link,.blog-pager-older-link
{
    position:absolute;
    top:1px;
    z-index:999;
    color:transparent !important;
    width:55px;
    height:66px;
    background-color:red;
}        
    
.blog-pager-newer-link {
    position:absolute;
    right:-27px; /* Change this value to change the position of newer post link */ 
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 0px; 
    background-color:transparent !important;   
}
.blog-pager-newer-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:55px 67px;     
}

.blog-pager-older-link {
    position:absolute;
    left:-67px; /* Change this value to change the position of older post link */  
    top:50px; /* Change the position from top */
    background:url('http://www.damnlol.com/img/buttons.png');
    background-color:transparent !important;
    
} 
.blog-pager-older-link:active {
    background:url('http://www.damnlol.com/img/buttons.png');
    background-position:0px 67px;    
}
</style>
</b:if>

To add it go to your Blogger Dashboard > Template > Edit HTML > Proceed > Use CTRL+F to find </head> and paste this Code above </head> and Save Template. That's it, now you have the DamnLOL like navigation links on your blog too !!

If are not able to position the buttons at the right place, then leave comment with your blog address and i will check it and give you the correct position CSS.

Subscribe to our blog for more updates and do comment here if you found this helpful.

Keep gadgets visible or opened in Dynamic Views

Don't you think visitors don't like gadgets being hidden in the side, how they would ever know that there's something on right side of page. Dynamic Views hover effects are great but some people don't like hidden stuffs at all. I will show you how to keep the gadget's in view even if it's not being hovered.  

Before

After

You can see the effect in the above picture, the gadgets block will always be visible to any visitors. There's no need to hover over them to see all the gadgets. This increases the number of people using your gadgets, as seen on Dynamic Views, people don't make use of the gadgets.

We will make the gadget static with a single line of CSS. Follow these steps.
Go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS in the custom CSS box and press enter after the last line. Preview it once, if you are okay with it then Apply to Blog.

#gadget-dock
{right:0px !important;}

Hope that will work well for your Dynamic views template. Do subscribe for more updates.

Advanced Feedburner Subscription gadget for Blogger

Previously i posted a tutorial on adding a shiny Feedburner subscription widget. This widget is the 2nd version of that subscription gadget. This time it's very classic and looks clean. 

This subscription widget is one of the best Blogger Gadget i have designed, the work of this gadget is simple but the looks it has got with CSS3 makes it professional.

Demo

Activate Email Subscription for your Feed

First of all you have to enable Email subscription for your Feed profile by going on  http://feedburner.google.com/, now click on your Feed name. You will see Publicize tab, click on it and one left there will be 'Email Subscriptions' and if you don't have it active you will see 'Activate' button. Just click on it.

But be there, you will need the code you get after you 'Activate' actually you only need the name for your Feed. Your code would look like this.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/>
</p>
<input type="hidden" value="Stramaxon" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>
</p>
</form>

On first line you can see this http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon , you can see i have highlighted the word after = in the address, 'Stramaxon' it's the name of my feed. You will also need your feedname. So copy it on a text editor for quick use.

The HTML 

For the subscription gadget, HTML is the most important part. The HTML code which you will need is as follows.

<div class='subscribe-stx'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='frm-stx-btm' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<p id='email-ui'>Subscribe with Email for updates</p>
<div class='inl-9005'>
<p>
<input class='nam-subeml' name='email' style='width:140px' type='text'/>
</p>
<input id='ui015424' name='uri' type='hidden' value='Stramaxon'/>
<input id='ui03994' name='loc' type='hidden' value='en_US'/>
<input id='ui63494' type='submit' value='Subscribe'/>
</div>
<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/Stramaxon' target='_blank'>YOUR_BLOG_NAME</a></p>
<div class='attr-stx'>
<a href='http://stramaxon.blogspot.com/2012/06/advanced-feedburner-subscription-gadget.html' target='blank'>Get this Gadget</a>
</div> 
</form>
</div>

See these edits you have to make

Line 3 : Line 2 is little lengthy, so you have to scroll to side. In the last section, remember we took a the feed name, in my case it was 'Stramaxon'. You can see this URL in line 2  http://feedburner.google.com/fb/a/mailverify?uri=Stramaxon   You just need to replace the uri with your feed name, check the 'Activate Email Subscription for your Feed' section to know what's your feed name. 

Line 8 : You need to do the same changes, in the Value field just put your feed name.
<input id='ui015424' name='uri' type='hidden' value='Stramaxon'/>  

Line 12 : Again the same, just have to replace 'Stramaxon' with your feed name and replace YOUR_BLOG_NAME with your Blog name, you can write any thing there.
<p id='ui43524'>Get updates from <a href='http://feeds.feedburner.com/Stramaxon' target='_blank'>YOUR_BLOG_NAME</a></p>

You just need to make these three changes and the HTML is ready to be applied on your Template.

Where to add the HTML : After you have your HTML ready, put it on a plain text editor such as Notepad.

1. Go to your Blogger Dashboard | Template
2. Click on Edit HTML | Proceed (not available if you are using Dynamic Views)
3. Check mark on 'Expand Widget Template' 
4. Use CTRL+F or F3 to open default on-page search in your Browser
5. You need to find the following code <div class="post-footer"> 
6. And paste the subscription box HTML code above <div class="post-footer">, after you place the code hit Save.     

That's the part with HTML, check any of your Post page and see if the subscription box is appearing or not.

Don't worry if it's not styled, we still have to play with the CSS

Show only on Post Page

You may only want this subscribe box to be shown on the index page i.e the Post page. The HTML above will render the subscribe buttons on all types of page but wrapping the subscribe box HTML around Blogger conditional tag you can tell the server to load it only while the page is a Post Page.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
//HTML CODE HERE
</b:if>

The CSS 

The CSS is the main stuff that makes the gadget looks so professional and makes it an eye candy. But writing this CSS took me about 2 minutes.
To add this CSS go to Blogger Dashboard -> Template -> Customize -> Advanced -> Add CSS -> Paste the CSS in the custom CSS box, press enter after the last line and hit Apply to Blog.

Here's the Full CSS we will use to design the subscription box.

.frm-stx-btm 
{
    
    border:1px solid gainsboro ;
    padding-left:10px;
    border-left:25px solid #62C7FF;
    background:linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 720px 70px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;    
}


.frm-stx-btm:hover
{
    background:-webkit-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-moz-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-ms-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
    background:-o-linear-gradient(45deg,#F3F3F3,rgba(226, 226, 226, 0.59)),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10mVTUuIBHuWI2BoK4BYfEvUfdjoVEoDqplXFPqLjRvbO8XjFvzQ-m-EoGbscg4x8oU7Jrt2G0aR1j4Fbaq5djohQ6UZjQcUn9tAe0IpOLOwP-cKk1T3AenwPfsl8UVk8hkubLQPlaWVg/s1600/Blogger-02.png') no-repeat 520px 20px;
}   

.frm-stx-btm ::selection
{
    background:#3F6083;
    color:white;
} 

.nam-subeml
{
    display:inline;
    border:1px solid lightgrey;
    width:300px !important;
    height:30px;
    padding-left:10px !important;
    font-size:25px;
    color:grey;
    font-family:Arial, Helvetica, sans-serif;
    padding-bottom:5px;
    padding-top:2px;
    
}

.nam-subeml:focus
{
color:black;
}

.inl-9005 p 
{display:inline !important;}

#ui63494
{
    width:100px;
    height:38px;
    top:-2px;
    position:relative;
    border:1px solid darkblue;
    font-family:verdana;
    color:white;
    background:-webkit-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-moz-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-ms-linear-gradient(45deg,#5FA3FA,#5494E6);
    background:-o-linear-gradient(45deg,#5FA3FA,#5494E6);
    font-weight:bold;
    font-size:14px;
}

#email-ui
{
    font-size:20px;
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    margin-bottom:10px;
    word-spacing:2px;
    letter-spacing:1px;
}
.attr-stx
{
    display:block !important;
    visibility:visible !important;
    text-align:right;
    padding:10px;
    font-family:'tahoma';
    font-size:14px;
}    
.attr-stx a
{ 
    display:inline-block !important;
    visibility:visible !important;
    text-decoration:none;
    border-bottom:1px dotted grey;
} 
.attr-stx a:hover
{
    display:inline-block !important;
    visibility:visible !important;
    text-decoration:none;
    border-bottom:1px dotted grey;
    background-color:aliceblue;
} 

Copy and add this CSS to your Blog. Now check your blog page (should be a post page). If you did it all correct then you will see the subscription box clear and shiny.

This can be used on websites or other blogging platform also, just remember that you have to place the HTML and CSS at the right place for it to display correctly.