Stylish Popular Posts widget for blogger blog

Popular-Posts-Blogger-widget-style-Thumbnails-3-4

Popular post widget by default given by blogger. If you have not tried then just go to the Blogger Dashboard and you can easily add it. Default popular post widget is simple and not draws much viewer attention. More clicks and pageviews on blog requires proper widget and layout selection. Previously i have been using the default blogger popular posts widget and not getting enough clicks. Viewer just left out after reading the few posts because that widget was simple in looks and not eye catchy. So i suggests you to add the catchy widget according to your blog Background color, fonts and Layout. Let me give you some stylish widget for your blog. You can Modify all the attributes inside that widget through css stylesheet according to your choice.

Blogger Popular Posts widget Style 1 & 2: Widget style is with thumbnails and Posts Title.
Popular-Posts-Blogger-widget-style1-2
Blogger Popular Posts widget Style 3 & 4: Popular posts widget styles with Fancy Color and numbered posts and cool Thumbnails
Popular-Posts-Blogger-widget-style-Thumbnails-3-4
These are the styles for your Blogger Popular Posts widget. Now Stylesheet code for that widget to apply mentioned below. Just Download the Code For the Style which you want to Apply to your Blogger Blog.

Popular posts widget style1
Popular posts widget style2
Popular posts widget style3
Popular posts widget style4

Download the Code which you want to apply as per above Image. Now let’s see how to apply it to your Blogger Blog.

Just Move to The Blogger Dashboard. On the Left Panel click Template > Customize.
Blogger-template-customize
Now inside the Template Designer Paste the copied CSS code which You have Downloaded.
Blogger-Add-css-Template-Designer
Now Apply it and You are Done. View the Blog. You can change the Attributes like color, width, height, font etc.. inside the stylesheet code.

Thanks and Comment below if it worked or not !

Remove/Hide Blogger Navbar: Add professionalism to blog

navbar-configuration-blogger

Here i am posting about one more blogger customization to made the better look and feel. Many of us having the blogger blog. It is the nice platform to start blogging carrier but afterwords when your blog getting good traffic then its important to style it in Professional way as it good impact to our visitors and nice for clear and easy user navigation.

Lets come to the point directly. Let us see how to remove or hide the Blogger Navbar from site. When you visit the Blogger site it shows the Navbar as below on the top of the blog. It shows the default view with Blogger Icon inside.
Hide-Remove-Blogger-navbar
You can easily turn-off the Navbar from the blogger Dashboard.

Turn off Navbar from site:
Move to the Blogger Layout on the top right corner above the Header you’ll find the Navbar Option.
navbar-configuration-blogger
Click on Edit and select the Last option “OFF” to turn off it.
Now Apply the changes and see the changes on blog. It won’t shown up now.

But after turning it off the reserved spaces for navbar still showing up as an empty space on site. So Its looks messy. Let’s see how to remove the Navbar completely from the blog.

To remove (hide) Navbar it  from site:
You can leave it on above step if you are ok with that. Move to the Blogger Dashboard if you wish to remove it ! Move to the Blogger Template Designer. click on Template > Customize > Advanced. Inside that select the Last option Add CSS. Here you can put any css code you want to customize the Blog. Put the CSS code #navbar {display:none} inside the box as below.
css-remove-hide-navbar-blogger
Apply to blog and view the changes. Now you are done with successful removal.

Thanks.

Remove Post Footer between the Blogger posts

Are you Bored with default Blogger look which shows the social network sharing links, Author name, labels, comment link and want to remove entire block between the posts? If yes then follow the easy guide below. You can customize the look by modifying the template HTML code, but we’ll not do in that way because small mistake in the code change affects the working and layout of the blog. But if you are going to change the HTML then don’t forget to Backup it first. Don’t worry, here we’ll see easy step and no need to save the existing template.

Our previous article was on Customize Header Size in blogger and we have performed the css modification steps. same way move to the blogger custom template designer. Just go to the Blogeer Dashboard> Template> Customize> Advanced> Add css. Here on the right-side box add the below code to hide the post-footer line and see the changes on the fly.

 .post-footer-line-1{display:none;}

Apply the changes and view the blog. Now there must be no footer-bar between the posts on homepage. Here you’ve successfully removed the post footer between the posts but here you’ll find the light padding box instead. so the entire block isn’t removed. Let me tell you it is the default Padding code to the footer. You can remove it. Just add the below line to css to remove the padding.

.post-footer{padding: 0px 0px;}

Now you’ll find the complete removal of the footer block. But it’s not looks professional because there is no separation line between the posts. So it’s important to add the line between the posts. To do that just add the below line along with the previous css code.
border-bottom: 2px solid
So the final code looks like:
.post-footer{padding: 0px 0px; border-bottom: 2px solid}
You can add the line of your choice like dotted or full. change the color and thickness of line according to your needs.

You are done here !
Thanks and happy Blogger Customization.

Quick Fix to Remove Image Border in Blogger

Blogger-Add-css-Template-Designer

Every blogger using the Image in their blog to describe the scene step by step or to add more user engagement by placing the attractive image. Image does not looks fine and professional with image border. We need to add some CSS code inside the Blogger to get rid of that image border and make blog looks more professional. Let me walk you through step by step guide on how to add the css inside blogger.

Move to the Blogger Dashboard and you can add the css in two ways. 1) By placing the CSS in HTML code or 2) By Adding it to the Blogger Template designer. If you are doing it in the first way by Placing the css inside html then its important to backup the Template first. But let me walk you through the easy way by placing the css externally such that no Template Backup is required.

Just move to the Blogger dashboard > Template > Customize and Now Inside the Blogger Template Designer move to the Add css option as shown in the Image below.
Blogger-Add-css-Template-Designer
Now place below CSS code as shown in the below.

 .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

Now Apply the code and Bingo! See the Images in your Blog post. Now you have the Images without Border in Blogger.

Thanks and Leave the comment below if you have any trouble !

Put Adsense in the Middle of Blogger Post: Maximize revenue

Adsense-in-the-Middle-Blogger-Post

Every newbie blogger start blogging with the free blogger service by Google and i think it’s the great choice for start up. One more advantage is that you don’t need to buy the Hosting Space as its free and you get the up and running blog in just few minutes. But It requires more customization if you want to put the HTML Ad or banner code inside the Blog post. You could put it manually but let me give you the easy steps to Put the Adsense or Any other ad code manually by just Tweaking the HTML of the code. But Before Making any changes to the HTML just try to Backup the Blogger Template First. Because little wrong change might ruin your Template.
Adsense-in-the-Middle-Blogger-Post
NOTE – The Code given below is the Mixed representation of the Ad unit. Means By default your Ad will shown Above the post and whenever you want to display ad. in the Middle of the Post then you need to Add one line in HTML. After adding that one line the Ad won’t appear in the Top but it’ll be available in between the post where you placed the code.

If you want to Place the AdSense only Below the Post Title then follow the Guide here – Put Adsense Below Post Title in Blogger

After successful backup of the Template. Click anywhere inside the HTML code and Press Ctrl+F to find the <data:post.body/> section of the Code. Search for it and you would get multiple entries of it. Locate to the third <data:post.body/> section and Replace <data:post.body/> it with the Below HTML snippet.

<div expr:id=’&quot;adsmiddle1&quot; + data:post.id’/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div style=’clear:both; margin:10px 0′>
<div style=’float:left;’>
YOUR ADSENSE CODE GOES HERE ..
  </div>
</div>
</b:if>
</b:if>
<div expr:id=’&quot;adsmiddle2&quot; + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’>
var obj0=document.getElementById(&quot;adsmiddle1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;adsmiddle2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var r=s.search(/\x3C!– adsense –\x3E/igm);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Place the Your Adsense code at the Red Line Mentioned Above between the Div section. I aligned the Adsense Code in the Left of the Page. You could set it as per your choice. Now You are Almost done and Save the Template.

Now Final step is to Place the Adsense Section in each post while publishing new post. Place the small Snippet <!– adsense –> in the post HTML where you want to display the Adsense.

Now you are done and View the Published post. If you are not adding the Above code in the HTML then the default Ad will displayed at the Top of the Post. So its the Mixed HTML modification to Display the Adsense as per your need.

Hope you won’t have any trouble on implementing the stuff. If you have any doubt regarding this guide and if the code doesn’t works for you then Feels free to ask or comment below.

Thanks !