How to Remove Showing Posts With Label in Blogger

The "Showing posts with label" notification  always shows  above the posts everytime time you click on a label link. I know some of  us don't want to show it in our blogs since it is quiet useless and just occupy additional space in our post. If that is the case, this article is useful for you.

Removing "Showing post with label...show all posts" (Version 1)

Step 1. Go to  BloggerDashboard >> Template >> Edit HTML (always back-up your template)
Step 2. Click anywhere inside the template code, then search - using CTRL+F -  and find the code below:

<b:includable id='status-message'>

Step 3. After you have found it, click on the sideways arrow before to it, to expand the rest of the code.

Step 4. Below is this code that you need to remove,

<b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

Step 5. Remove all that set of code and  replace it with the code below,

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Step 6. Save your template and you're done. Enjoy!  : >)

Removing "Showing post with label...show all posts" (Version 2)

Here is another way of removing it from your blog using only a simple  css on it. Please follow  the steps below:
Step 1. From your Blogger Dashboard, go to  Template and click Edit HTML.
Step 2. Search the code below

]]></b:skin>

Step 3.  Just above the code in step 3, add the css  below,

.status-msg-wrap{
display:none;
}

Step 4. Save your template and say Bravo!

Professional Random Posts Widget for Blogger with image thumbnails and snippets

Random posts widget in Blogger sites is needed when you  have too many posts and visitors don't always have the mind to go through all the articles written  just  to make an idea of your blog's content. This type of widget allows your visitors to find content more easily and therefore  it is useful to gain popularity in the blogosphere. In this post  I will show you how to add a random posts widget to display a list of posts in a random order with thumbnails and it snippets.

Click For Live Demo

Also Check :

1. How to Add Related Posts Widget
2. How to Add Widget Below First Post in Blogger
3. How to Add Recommended For You In Blogger

Show Random Posts with Thumbnails and Posts Summary in Blogger

Step 1. Go to your  Blogger  account
Step 2. Click  Layout.
Step 3. Click on the Add a gadget link and select Html/JavaScript from the popup window.
Step 4. After selecting the Html/Javascript,  add the following code below with its styles being attached.

<style>
#random-posts img{border-radius: 70px;float:left;margin-right:5px;
width:40px;height:40px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: -10px;border-bottom: 0px solid #000000; padding: 4px 4px -5px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=3;
var rdp_snippet_length=0;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQbPN3XYxOabWN5V0llDNtjY4aiipU8FXRuNywfUXF_SuQweU66AWxM5KLm7sGVuFortoqFmNL7Lt60NKdtlnEPBlMg5ZOCQ5cesU8HnNntxEYYZW2kUDwf9FLcWvO5q80hiInvK41Tw/s1600/no_thumb.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Step 5. After pasting the above code, give your new widget a title .You can type "Random Posts, Selected Post, Recommended Post" or any  related name  that you want.

Random Posts Options

- Thumbnail dimensions: 
Adjust the border radius (roundness) of the image thumbnails by changing 70px in the second line.
Adjust the size of the thumbnails in pixels, replace the 40px value of the third line.

- Summary length: 
You can control the the length of the summary (in characters) by changing the 0 value from var rdp_snippet_length=0;
In the above code  I set  it to 0 in order to have no snippet , but if you want to add snippet of your random post, please add numerical value like 100, 110, etc.

- Post info: 
if you want to hide the post date and comment count change 'yes' from var rdp_info='yes'; to 'no';

- Font Size for Posts Titles and Summary: 
Change the font size  11px ( 9th line) for the post snippet.
Modify the value 12px (7th line) in order to change font size for the posts title.

Step 6. Click on the Save button and you're done! Your sidebar will display a random posts widget on each of your blog pages.
reference: helplogger

Create a CSS Image Slider with Thumbnails for Blogger

Hey guys, are you having a problem on how to make image galleries/sliders for your blog? This tutorial is the answer for it. Photoblogs  need this kind of trick in order to show their images in a nice and professional manner but not only for those kind of blogs since we need photos occasionally to present some ideas in our readers.  In this tutorial, I will show you  the steps on how to make it. An overview of this is tweak is  having a mini blocks of images at the top which will enlarged at the bottom each time an image is selected  upon hover of the mouse on the  thumbnail and that was acquired through adding some CSS on it.

See demo here.

How to Add A CSS Image Slider with Thumbnails to Blogger

Step 1. Log in to your Blogger Dashboard >> Template >> Edit HTML
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3.  Look for the code below by  pasting it inside the search box and hit Enter.

</head>

Step 4. Just above/before the  tag above, paste the css code below:

<style type='text/css'>
.bttimage-container {
position: relative;
width: 620px;
height: 610px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.bttimage-container a {
display: inline;
text-decoration: none;
}
.post-body img {
max-width: 600px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18%; /* mini-thumbnails width */
margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */
a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1.5s ease;
-moz-transition: top 1.5s ease;
-o-transition: top 1.5s ease;
-ms-transition: top 1.5s ease;
transition: top 1.5s ease;
}
</style>

Step 5. Save template button.

Step 6. Go back to Blogger Dashboard and select any of the post you have published or you may choose a New Post where you will add the add the HTML code  inside a post or page by clicking the HTML section/button.

Hint:

Another way of putting the  HTML codes is thorough going ether to Lay -out and choose Add a new Gadget buttom then click HTML/Javascript.

<div class="bttimage-container">
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="BIG-THUMB-URL1" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL3" />
<img class="large-thumbnail" src="BIG-THUMB-URL3" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL4" />
<img class="large-thumbnail" src="BIG-THUMB-URL4" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="SMALL-THUMB-URL5" />
<img class="large-thumbnail" src="BIG-THUMB-URL5" />
</a>
<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>

Customization:

• Replace http://bloggingtipsandtrix.blogspot.com/ with the url of your page/post where you want to land a certain link.


• To add pics inside the image slider just replace MINI-THUMB-URL and LARGE-THUMB-URL texts with the URL of your image.


• The URL for the SMALL-THUMB-URL and BIG-THUMB-URL in every set or box is the same. See blockquote below for an example. Or you can do it separately depending on your preferences.

<a href="http://bloggingtipsandtrix.blogspot.com/">
<img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZH4PEyml7ukLnLdsD2AUzhoBcqdutGuSfYuFfKIPzx_475rnjbKuf3VsXeqgxRlcbPfw4rmW8kCLooq4Q2m2KLd3CPh08kLEV90yrby66tgJ6fLZk_FUt-s3Lr9Fei50OXkOkH68_08Oa/s1600/photo+slider+in+blogger.png" />
<img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZH4PEyml7ukLnLdsD2AUzhoBcqdutGuSfYuFfKIPzx_475rnjbKuf3VsXeqgxRlcbPfw4rmW8kCLooq4Q2m2KLd3CPh08kLEV90yrby66tgJ6fLZk_FUt-s3Lr9Fei50OXkOkH68_08Oa/s1600/photo+slider+in+blogger.png" />
</a>

Note:

The last LARGE-THUMB-URL1 should be replaced with the URL of the default image that will appear on your slider.

Read this post to know how to get the image URL from your uploaded photo in Blogger.

Also read:

How To Show Or Hide/Cover Blog Content With Images Using CSS

Step 7. Finally, save your widget/gadget or publish your page/post and that's it! Enjoy Buddies :-)
Credits: helplogger.blogspot.com

How to Add Borders to Sidebar Titles in Blogger

Putting border(s) around  your sidebar title is one way of catching eyes attention to your readers. It drives readers to grab attention on it  and see some links  in that area. I know this is  basic in blogging yet useful  in some other ways. Below are the simple steps on how to customize (putting borders) to  your blog sidebar  title.

Demo here

Adding Borders to Sidebar Titles in Blogger

Step 1. Go to your Blogger Dashboard
Step 2. Click Template then have a back on it by clicking the Back-up button
Step 3. Hit the Edit HTML button
Step 4.  Find the code below by clicking anywhere inside the Template code then in your mouse use the  Control F. Place the code below inside the box.

]]></b:skin>

Step 5. Just above that code in step 4, place the code below

.sidebar h2 {

border-top:1px solid #000000;
border-right :1px solid #000000;
border-bottom :1px solid #000000;
border-left :5px solid #000000;

margin- top;0
margin- right;0
margin- bottom;0
margin- left;0
padding:0 0.2em;
line-height:1.5em;
}

Customization:

• To change the border size in each corner, simply change 1px in line 2 to 4 and 5px in line 5. The greater the value the bigger its appearance.
• To change the border style which is solid, replace it with dotted, ridge, dotted, dashed, double,groove, inset or outset. Click here to see the appearrance of these diffrent border styles.
• To change the color of your border style, replace #000000 (black) with other hexadecimal colors
• The margin is set to zero but you can adjust it. You can experiment this one according to your preferences. Don't forget t o add px after the numerical value like 1px,2px etc.
• The padding is the distance of your sidebar title form your sidebar border
• And finally, the line height speaks on the position of your sidebar title inside the borders.

Step 6. Save your Template and you're done buddy!

Try to read:

How to add Background Image in every Sidebar Title
Adding Webkit- Box-Shadow to Menu Tabs and Side Bar Title
How to Animate Borders in Blogger Sidebar
How To Customize Labels In Blogger Using CSS3

How to Add a Widget Below First Post in Blogger

Another way of  making  a gadget/widget to appear  below the first snippet in your first read more post is through applying the Blogger conditional tag (<b:if cond='data:post.isFirstPost'>.....Some codes here....</b:if>). Furthermore, if you want to show or hide this widget gadget in a specific page in your blog, you can also use the other Blogger conditional tags.

See Demo Here.

Adding A Gadget or Widget Below First Post Snippet in Blogger

Step 1. Go to your  Blogger dashboard
Step 2. Click  Template and have a back-up of it for your reference.
Step 3.  Hit the Edit HTML button
Step 4. Search the line below  inside the search box and hit Enter to find it

<b:include data='post' name='post'/>

Step 5. Just below it add this code:

<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin:10px auto;">
Your widget that you want to show or hide
</div>
</b:if>

Note:

The code that you are going to put must be parsed properly using a parsing tool.
If you want that the widget that you have added  will appear only in home page of your blog, use the code below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost'>
<div align="center" style="margin:10px auto;">
Your widget that you want to show or hide
</div>
</b:if>
</b:if>

How to Add Adsense Code Below First Post Description In Readmore

Putting Adsense Code in our blog need to be tricky  in order to gain more money from our visitors. Here, we will add adsense code right after the first snippet in your read more i.e. in your homepage. We will use the read more scripts that we use in my previous tutorial. Below is the process of making it.

Click this for the live demo

Note:

The Ads in image above is not  an ad from Adsense, it is from Bidvertiser. I used it only for clarification of  below tutorial.

How to Add Adsense Code or Any Code Below First Post Description In Readmore

Step 1. Please follow the  procedure from step 1 to the last step of that tutorial (How To Create Magazine Style With Post Summaries And Thumbnails On Blogger).
Step 2. In step 4 of that tutorial,  you have added a certain lines of scripts. Below that scripts, you add your adsense code or any widget as shown in the blockquote below

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading >></a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Your Adsense Code Here/ Widget Here

Note: 

Your adsense code or any widget will not work if it is not being parsed properly. You can  use our parsing tool for free.

Step 5. Since you have added a new widget below your first post in read more, the margin will be changed accordingly. You may play the margin of your read more by using the css below

.post {
margin: 86px 0 -48px 0;

Note:

Add that above CSS code above the tag ]]></b:skin>
The first nemerical value  (86px) is responsible for the top margin.
The second  one (0) is for the right margin.
The third one (-48px) is for the bottom margin and
The last vaue (0) is the right margin.

Step 6. After you have set this in your blog  you may now click the save buttom and you're done.
If you have a little difficulty setting its margin. Don't hesitate to call me and  I'm glad to help you.
Happy Blogging Buddies!!!