Not Showing All Posts In Blogger Homepage

Number of Posts On Main Page” is not showing the correct number of posts in blogger homepage. Even after changing the number of posts in posts in setting > Post, Comment and Sharing it’s showing the actual number of posts. In this tutorial I will show you how to fix the number of posts on the main page. Even after changing max-results=5 (say) in blogger template and Layout + Setting it’s not showing the actual number of posts, then don’t worry am here to help you out to fix & answer for your question why blogger is not showing all posts in blogger homepage. Read More

How to Setup Custom Domain on Blogger with Godaddy.com

Setting up a Custom domain in blogger is very important for a blogger who wants to create their own blog URL and put a remark on the internet. Blogger Custom domains are more like a vanity URL for any Blogspot blog. It allows users to create a custom short easy to remember URL.
Blogspot allows bloggers (users) to seamlessly integrate any domain name in their Blogspot blog. In this tutorial, I will provide you with a step-by-step guide to connect GoDaddy name in blogger with screenshots, video tutorial and detailed instructions to set up a custom domain name from (yourdomain.blogspot.com to www.yourdomain.com). Read More

Demo And Download Button In Blogger

7 Stylish Demo And Download Button for Blogger

Add Demo and Download Button In Blogger – In my previous tutorial, I showed you how to add an HTML download button in blogger. In this tutorial, you are going to learn How o add a stylish CSS3 Demo and Download Button with hover effect in blogger. Demo and Download buttons are used for many purposes in any blog. Demo button is used to get an idea of the final outcome of the subject matter, whereas a download button is used in a blog to download information by the readers. Today in this tutorial I am going to provide you with 7 best pure CSS3 light coded demo and download button with hover effect for Blogspot blogger blog.

  • Custom Related Post Widget for Blogger.
  • Responsive Social Share Button for Blogger.
  • Best Email Subscribe widget for Blogger.
  • 10 Best Popular Blogger Widgets and Plugins (Beautiful)
  • 35+ Drop Down Menu Widget in Blogger Horizontal Menus CSS & CSS3

What is the use of Demo and Download Button In Blogger?

  • Demo Button – Demo button is a clickable button in blogger which is used for demonstrating an overview of any tutorial or widget. Websites providing widgets and templates need a clickable button for their visitors to give them an idea about how a widget or template looks like. Also, a blog having demo button for a tutorial post instead of anchor link text provides a great user experience to the visitors.
  • Download Button – Download button is a clickable button in blogger which is used for downloading purpose.

How this Demo and Download Button work?

 

This demo and download button are created by using HTML and CSS also some were simple lightweight jQuery demo and download buttons  This simple light coded HTML/CSS demo and download button will work with any blogger template custom either custom or bloggers official template. Among the 7 designs, in one of the demo and download button when you face your mouse towards the demo or download button, you will see an amazing animated hover effect on another button you will see two smaller eyes on the download button. These eyes were made using font awesome icon. Same as other buttons were also equipped with the animated slider demo and download buttons with hover effect. So let’s get into the tutorial to know how to add stylish demo and download button in blogger.

How To Add Demo And Download Button In Blogger?

Adding demo and download button in blogger is very simple. Any newbie with zero coding knowledge can add these piece of codes to their blog. Since blogger doesn’t support any plugins we have to add this piece of codes manually in our blogger template by editing HTML and CSS. Don’t be scared of playing with codes in your template, you will be provided with step by step guide with detailed screenshots to add these HTML/CSS code for demo and download button in your blogger template.

STEP 1: Login to your blogger dashboard and select your blog on which you want to add demo and download button.

STEP 2: Then go to Template > Edit HTML.
[NOTE: It is highly recommended you to keep a backup of your template before changing any code]
STEP 3: Then press anywhere inside your code area and press CTRL+F a search box will pop up in the top right corner inside your code area then type ]]></b:skin> and press enter.

STEP 4: Now among the 7 styles of Demo and Download Button choose the style which you like to add in your blog and paste that code above ]]></b:skin>.

 
Demo and Download Button Style 1
Best Demo And Download Button For Blogger
CSS CODES FOR STYLE 1

 

 body {
    margin: 50px;
    font-family: helvetica, sans-serif;
    background: #e9f0f4;
}
#wrap {
    margin: 20px auto;
    text-align: center;
}
.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #ooo000;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid #efa666;
}
.btn-slide:hover {
    background-color: #0099cc;
}
.btn-slide2:hover {
    background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.btn-slide2:hover span.circle2 {
    color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: #efa666;
}
.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
  }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

 

Demo and Download Button Style 2
Best Demo And Download Button For Blogger

 

CSS CODES FOR STYLE 2

 

.post-body ul.button {
    list-style: none;
    text-align: center;
    margin: 20px auto;
    padding: 2px;
    font-size: 14px;
    clear: both;
    z-index: 2;
}
.post-body ul {
    position: relative;
    display: block;
    padding: 0;
    margin: .5em 0 .5em 1.5em;
    text-decoration: none;
}
.button {
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 10px;
    padding: 2px;
    font-size: 14px;
    clear: both;
}

 

Demo and Download Button Style 3
Best Demo And Download Button For Blogger
CSS CODES FOR STYLE 3

 

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:&#39;f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} 

Demo and Download Button Style 4
Best Demo And Download Button For Blogger
CSS CODES FOR STYLE 4

/* Demo Download Button By Howtofact.xyz
—————————————————— */
.howtofact {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.howtofact ul {padding:0;margin:0;}
.howtofact li {list-style:none;display:inline;padding:0;margin:5px;}
.demo,.download{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demo {background-color: #3498db;}
.download {background-color: #34d968}
.demo:hover {background-color: #2980b9;color: #fff;}
.download:hover {background-color: #2fbd5a;color: #fff;}

Demo and Download Button Style 5
Best Demo And Download Button For Blogger
CSS CODES FOR STYLE 5

/* Starting Css To DEMO &amp;amp;amp; Download Button  */
#m-wrap {
margin: 10px auto;
text-align: center;
}
#m-wrap br {
display: none;
}
.egg-btn-slide, .egg-btn-slide2, .egg-btn-slide3 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 0px;
background: #fdfdfd;
border: 2px solid #009688;
margin: 10px;
transition: .5s;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.egg-btn-slide2 {
border: 2px solid #8BC34A;
}
.egg-btn-slide3 {
border: 2px solid #f73d00;
}
.egg-btn-slide:hover {
background-color: #009688;
}
.egg-btn-slide2:hover {
background-color: #8BC34A;
}
.egg-btn-slide3:hover {
background-color: #f73d00;
}
.egg-btn-slide:hover span.circle, .egg-btn-slide2:hover span.circle2, .egg-btn-slide3:hover span.circle3 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
}
.egg-btn-slide:hover span.circle{
color: #009688;
}
.egg-btn-slide2:hover span.circle2 {
color: #8BC34A;
}
.egg-btn-slide3:hover span.circle3 {
color: #f73d00;
}
.egg-btn-slide:hover span.title, .egg-btn-slide2:hover span.title2, .egg-btn-slide3:hover span.title3 {
left: 40px;
opacity: 0;
}
.egg-btn-slide:hover span.title-hover, .egg-btn-slide2:hover span.title-hover2, .egg-btn-slide3:hover span.title-hover3 {
opacity: 1;
left: 40px;
}
.egg-btn-slide span.circle, .egg-btn-slide2 span.circle2, .egg-btn-slide3 span.circle3 {
display: block;
background-color: #009688;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.egg-btn-slide2 span.circle2 {
background-color: #8BC34A;
}
.egg-btn-slide3 span.circle3 {
background-color: #f73d00;
}
.egg-btn-slide span.title,
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2,
.egg-btn-slide3 span.title3, .egg-btn-slide3 span.title-hover3 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #009688;
transition: .5s;
}
.egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2 {
color: #8BC34A;
left: 80px;
}
.egg-btn-slide3 span.title3,
.egg-btn-slide3 span.title-hover3 {
color: #f73d00;
left: 80px;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
left: 80px;
opacity: 0;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
color: #fff;
}
/* Ending Css To DEMO &amp;amp;amp; Download Button  */

Demo and Download Button Style 6
Best Demo And Download Button For Blogger
CSS CODES FOR STYLE 6

 

.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url(“https://www.zurb.com/images/overlay-button.png”) repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

 

Demo and Download Button Style 7
CSS CODES FOR STYLE 7

.bsdbutton1{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.bsdbutton1 ul{margin:0;padding:0}
.bsdbutton1 li{display:inline;margin:5px;padding:0;list-style:none}
.bsdbutton1 li a.demo,.bsdbutton1 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.bsdbutton1 li a.download{background:#3498db}
.bsdbutton1 li a.demo:hover,.bsdbutton1 li a.download:hover{background:#666}
.bsdbutton1 li a.demo:active,.bsdbutton1 li a.download:active{cursor:pointer}
.bsdbutton1 li a.demo:after,.bsdbutton1 li a.download:after{content:’F054′;background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.bsdbutton1 li:hover a.demo:after,.bsdbutton1 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

After adding your desired Demo and Download Button CSS code in your blogger template make sure you add this code after <head> unless this demo and download button will not work in your blogger blog.

 <script src=”https://s.codepen.io/assets/libs/modernizr.js” type=”text/javascript”></script> <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css” rel=”stylesheet”></link>

How to Add Demo and Download Button in Blogger Post

After successfully adding CSS code in blogger template now its time to add HTML code in blogger post editor to display stylish demo and download button.

To display Demo and Download Button In Blogger Post follow these steps:
  1. Login to blogger dashboard and select your blog.
  2. Go to All Posts > HTML.
  3. Paste the Code in HTML mode on blogger post where you want to display Demo and Download Button.

For Style 1

 

<div id=”wrap”>
<a href=”URL” class=”btn-slide”>
  <span class=”circle”><i class=”fa fa-rocket”></i></span>
  <span class=”title”>Demo</span>
  <span class=”title-hover”>Click here</span>
</a>
</div>
 <a href=”URL” class=”btn-slide2″>
  <span class=”circle2″><i class=”fa fa-download”></i></span>
  <span class=”title2″>Download</span>
  <span class=”title-hover2″>Click here</span>
</a>
</div>

 

For Style 2

<div style=”text-align: center;”><ul class=”button”><li><a class=”demo” href=”URL” target=”_blank”><b>DEMO</b></a></li><li><a class=”download” href=”URL” target=”_blank”><b>DOWNLOAD</b></a></li></ul></div>

For Style 3

 <div style=”text-align: center;”><ul class=”btn”><li><a class=”demo” href=”YOUR-LINK-HERE” target=”_blank”>DEMO</a></li><li><a class=”download” href=” YOUR-LINK-HERE” target=”_blank”>DOWNLOAD</a></li></ul></div> 

For Style 4

 

<div style=”text-align: center;”>
<ul class=”howtofact”>
<li><a class=”demo” href=”URL” rel=”nofollow” target=”_blank”>DEMO</a></li>
<li><a class=”download” href=”URL” rel=”nofollow” target=”_blank”>DOWNLOAD</a></li>
</ul>
</div>

 

For Style 5

 

<div id=”m-wrap”>
<a class=”egg-btn-slide” href=”URL” target=”_blank”>
<span class=”circle”><i class=”fa fa-eye”></i></span>
<span class=”title”>Demo</span>
<span class=”title-hover”>View Now</span>
</a>
<a class=”egg-btn-slide2″ href=”URL” target=”_blank”>
<span class=”circle2″><i class=”fa fa-chevron-circle-down”></i></span>
<span class=”title2″>Download</span>
<span class=”title-hover2″>Download Now</span>
</a>
<a class=”egg-btn-slide3″ href=”URL” target=”_blank”>
<span class=”circle3″><i class=”fa fa-shopping-cart”></i></span>
<span class=”title3″>Buy Now</span>
<span class=”title-hover3″>Purchase Now</span>
</a>
</div>
</div>

 

For Style 6

 

  <a class=”demobutton button” href=”URL” rel=”nofollow” style=”float: left;” target=”_blank”><span style=”display: inline-block;”>Live Demo</span></a>
 <a class=”button downloadbutton” href=”URL” rel=”nofollow” style=”float: left;” target=”_blank”><span style=”display: inline-block;”>Download</span></a> 

 

For Style 7

<div style=”text-align: center;”>  <ul class=”bsdbutton1″>    <li><a class=”demo” href=”URL” target=”_blank”>Demo Link</a></li>    <li><a class=”download” href=”URL” target=”_blank”>Download Link</a></li>  </ul></div><div class=”clear”></div>

Click Save and you are done!
[Make sure to Change with your URL demo or download link.]
 
 Over to you 
That’s all for now; in your Blogger post, stylish demo and download button has been successfully added. 
The whole process may look technical, but once you are inside the dashboard and follow all the steps mentioned above, it will be easier for you to implement.
This is how you can add stylish demo and download button in blogger. If you have any further query relating demo and download button setup comment down we are ready to help you. If you are benefitted by this article Share this article on Facebook and other social media. Comment down let me know how this demo and download button worked in your blog. 😀
  • 35 Handpicked Stylish Blockquote CSS For Blogger.
  • Stylish Email Subscribe widget for blog website.
Display Blogger Posts In Grid View With Thumbnails

Display Blogger Posts In Grid View With Thumbnails

Most of the bloggers customize their blogs and want to display their posts in grid view with thumbnail in their home screen but being newbie they find it difficult. Today in this brief tutorial I will show you a step-by-step process to display all posts in grid view with the thumbnail in the blogger home screen.

Basically, blogs which were image-based they have a lot of posts in their home screen, so when a visitor enters in the home screen they have to scroll down to go down for finding their photo (post). This gives a very bad user experience. So if you want to give your visitors a good user experience then you should convert your blogger home to display posts in grid view with thumbnails.

What is a Grid View?

A grid view or a data grid is a graphical control element that presents a tabular view of data. A typical grid view also supports some or all of the following:

  • Clicking a column header to change the sort order of the grid
  • Dragging column headers to change their size and their order
  • In-place editing of viewed data
  • Row and column separators, and alternating row background colours

What is Grid View In Blogger and how it works?

In Blogger, Grid View is a Script Code which converts blogger post to display in grid style in homepage. The script code overrides the existing codes in blogger template and force blogger posts to display in grid style with the thumbnail.
Before proceeding further, take a look at the grid view with thumbnail script demo look.

Hope that you liked the grid view with thumbnail script overview. If you want to have this grid style script in your blog then precisely follow all the steps.

How To Display Blogger Posts In Grid View With Thumbnails style

Follow the steps given below to display blogger posts in grid view with thumbnail style.

Step 1: Login to your blogger dashboard and select your blog.
Display Blogger Posts In Grid View With Thumbnails

 

Step 2: Navigate Theme > Edit HTML.

Display Blogger Posts In Grid View With Thumbnails

Step 3: Click anywhere inside the blogger template and press [CTRL+F] a pop-up search box will open.

Display Blogger Posts In Grid View With Thumbnails

 

Step 4: Type </head> and hit enter.
Step 5: Above </head> paste the code
display-blogger-posts-grid-view-thumbnails

 

<script src=’https://code.jquery.com/jquery-1.9.1.js’/>
<b:if cond=’data:blog.pageType != &quot;item&quot;’><b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<script type=’text/javascript’>//<![CDATA[
function hideLightbox(){for(var a=document.getElementsByTagName(“img”),b=0;b<a.length;++b)a[b].onmouseover=function(){var a=this.parentNode.innerHTML;this.parentNode.innerHTML=a,this.onmouseover=null}}$(document).ready(function(){var a=200,b=170,c=”https://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/w500-h330-c/no-thumb.png“,d=1;$(“.post-body”).each(function(e,f){var f=$(f),g=$(f).find(“img”).first(),h=f.parent().find(“h3 a”),i=h.attr(“href”),j=h.text();if($(h).remove(),f.empty(),g.attr(“src”)){var k=g.attr(“height”),l=g.attr(“width”),m=$(g).parent();if(f.append(m),d)g.attr({src:g.attr(“src”).replace(/sBd{3,4}/,”w500-h330-c”)}),g.removeAttr(“width”).removeAttr(“height”);else{g.attr({src:g.attr(“src”).replace(/sBd{3,4}/,”s”+a)}),g.removeAttr(“width”);var n=(k/l*a).toFixed(0);g.attr(“height”,n)}}else var g=$(“<img>”).attr(“src”,c),m=$(“<a>”).append(g).appendTo(f);m.attr(“href”,i).css(“clear”,”none”).css(“margin-left”,”0″).css(“margin-right”,”0″).addClass(“postThumbnail”);var o=$(“<div>”).prepend(j).css(“opacity”,”0.9″).css(“filter”,”alpha(opacity=0.9)”).appendTo(m);o.height();o.css(“margin-top”,”-28px”),f.css(“height”,b).css(“overflow”,”hidden”)}),$(“#blog-pager”).css(“clear”,”both”)}),window.addEventListener?window.addEventListener(“load”,hideLightbox,void 0):window.attachEvent(“onload”,hideLightbox);
//]]>
</script>
<style type=’text/css’>
.post {
width:31.3%;
float:left;
display:inline-block;
border-bottom: medium none;
margin: 0 1% 2%;
padding-bottom: 0;
}
h2.date-header,.post-footer {
display: none;
}
h3.post-title, .comments h4,.post-header{margin:0;}
.postThumbnail:hover {text-decoration:none;}
a.postThumbnail div {
text-decoration: none;
color: #fff;
padding:0 5px;
height:24px;
font:bold 12px/25px &quot;Trebuchet MS&quot;,Trebuchet,Verdana,sans-serif;
text-transform: capitalize;
background: rgb(125,126,125);
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#7d7e7d&#39;,endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
.postThumbnail{width:100%;}
.postThumbnail:hover div {
display: block;
}
.postThumbnail img {
width:100%;
background-color: transparent;
border: medium none;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.postThumbnail img:hover {
-ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if></b:if>

 

 Step 6: Click “Save Template“. Enjoy(y) you are done!

 

How To Customize Blogger Posts In Grid View Script?

 

Step 1: To Change the width of the thumbnail replaces 200 with your desired size.

 

Step 2: To Change the width of the thumbnail replaces 170 with your desired size.

 

Step 3: To Change default no image icon replace the thumbnail replace 

 

https://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/w500-h330-c/no-thumb.png 

 

with your desired image icon.

 

Over to you

 

Now visitors of your blog will see your all posts in cool grid style with the thumbnail. If you have any further query relating implementation of Blogger Posts In Grid View With Thumbnails script code comment down we are ready to help you. If you are benefitted by this tutorial Share and let others know. Comment down let me know how this grid style script transformed your blogger appearance.

 

Hide or Remove Blogger Navbar

3 Different Ways To Hide or Remove Blogger Navbar

In my previous tutorial, I showed you how to fix why blogger posts were not showing in blogger homepage, today I will show you how to remove or hide blogger navbar. I know you are in hurry to remove blogger navbar but before you proceed towards the tutorial, I recommend you to understand about blogger navbar its advantages and disadvantages.

What is Navbar In Blogger?

Navbar stands for Navigation Bar in Blogger. Navbar is present at the top of every blogger blog it helps visitors to navigate the blog easily. By default, Navbar is present in all blogger blogs but in most custom coded blogger template navbar is hidden. Now in any blogger blog navbar can be shown or hide anytime. But, if you want to hide or remove blogger navbar in blogger default template you can do that manually by editing some HTML/CSS codes. Since google blogger by default provides this widget in blogger it must have some advantage and disadvantages.

Advantages of Navbar In Blogger

  1. In the default blogger template, at the top of the blogger blog Navbar contains a search box, which visitors can use for searching any article in the blog.
  2. Next, to the right of the search box, a G+1 share option is there, which visitors can use to share articles in google plus.
  3. Just next to the right of share, more option is there with a drop-down cap, which visitors can use to share your article through “Share by Email“, “Share with Facebook“, “Share with Twitter” and “Report” option which your visitors can use to report any article which violates google privacy policy.

Disadvantages of using Navbar In Blogger

  1. In the top right of blogger navbar next to “Share” option “Next Blog“, “Create a Blog” and “Sign In” options were there which distracts visitors and increases bounce rate by leaving visitor from your blog to another blog.
  2. It captures some space above the blog.
  3. It just captures some space and makes your blog look unprofessional.
By Default Blogger navbar is not necessary for any major purpose related to blogging. So it is better to remove the navbar from the blogger blog. Now you have enough knowledge relating navbar its advantages and disadvantages.
Now it’s your choice you want to keep or remove navbar. If you are determined to hide or remove blogger navbar then next part of this tutorial meant for you.

How To Remove Blogger Navbar?

To remove navbar in blogger is very simple. Any newbie with no coding knowledge can remove navbar in blogger following this tutorial. In this tutorial, I will show you 3 Different Ways To Hide or Remove Blogger Navbar.

Method 1

In this method, you can hide or remove blogger navbar using “Layout”. Follow these steps to remove or hide blogger navbar.
3 Different Ways To Hide or Remove Blogger Navbar
  1. Login to your “Blogger Account” and select your “blog” on which you want to hide or remove navbar.
  2. Go to “Layout“.
  3. Click “Navbar” in the Layout.
  4. A Pop-up window will open select “OFF“.
  5. Click “SAVE“.

Also, you can hide or remove blogger navbar selecting “Transparent Light“.

3 Different Ways To Hide or Remove Blogger Navbar
After selecting “Transparent Light” click “Save” and refresh your blog your blogger navbar will be removed.

Method 2 (Removing Navbar Space)

3 Different Ways To Hide or Remove Blogger Navbar
In this method, you can hide or remove blogger navbar by adding some CSS codes in your blogger template. Follow the step to remove or hide blogger navbar.
  1. Log in to blogger account and select your blog.
  2. Goto Theme > Edit HTML.
  3. Press CTRL + F anywhere inside code area, a popup box will appear in the top right corner.
  4. Paste ]]></b:skin> and press enter.
  5. Now, above ]]></b:skin> paste the below given code

# Navbar-iframe {
height: 0;
width: 0;
visibility: hidden;
display: none;
}

Click “SAVE” and you are done.

Method 3

3 Different Ways To Hide or Remove Blogger Navbar
In this method, you have to remove the complete navbar code from your blogger template. Follow the step to remove navbar from your blogger template.
  1. Log in to your blogger account and select your blog.
  2. Go to Theme > Edit HTML.
  3. Press CTRL + F anywhere inside code area, a popup box will appear in the top right corner.
  4. Paste “Navbar” and search the section class=’navbar’.
  5. After getting the code remove the complete code from <b:section……..</b:section>
  6. Click “Save” and you are done.
Lastly
 
Choose any one method from the above-mentioned 3 different ways to remove or hide navbar blogger navbar. I have explained each and every step so that you don’t get any problem. To go through the steps as I mentioned in this tutorial will not take more than a minute. If you have any further query relating implementation of code or removing navbar from your blogger template code area. Leave a comment, we are ready to help you with removing blogger navbar. Comment down let me know which method you used to remove or hide blogger navbar and navbar space.
How To Add Code Box In Blogger Post

How To Add Code Box In Blogger Post

Hello, friends welcome again to my another great Tutorial. In this tutorial, you will learn How To Add Code Box In Blogger. In my previous tutorial, I showed you How to add a pure HTML code box. In this tutorial, we will step above to an advanced level and learn How to add a code box in blogger post equipped with HTML+CSS. So without wasting time let’s get started.

◆ What is Code Box in Blogger?
Code Box is a Text Area used to put specific elements like HTML, CSS, Javascript (.js) etc. to insert codes in blogger post.

 

◆ What is the use of Code Box in Blogger Post?
Code Box is used to differentiate between codes and texts in blogger post. Also, the code box in blogger post enhances visitors user experience since they can copy the codes directly from the code box. Also, when we share codes like javascript(.js) into the blogger post editor it mixes up the codes creates an error. So, to a defined, a separate place HTML codes a textbox is necessary.
◆ How To Add Code Box?

Step 1: Login to your blogger dashboard and select your blog.

How To Add Code Box In Blogger Post

 

Step 2: Goto ThemeEdit HTML

How To Add Code Box In Blogger Post

Step 3: Click anywhere inside the code area and press [CTRL+F]

Step 4: Insert ]]</b:skin> inside search box and hit enter

How To Add Code Box In Blogger Post
Step 5: Above ]]</b:skin> paste the code given below:

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px ‘Courier New’, Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }.code:hover { background-repeat:no-repeat; }

 

Step 6: Click “Save Template”. Enjoy (y) you are done!

 

◆ Customization

 

Now, there were two different styles of HTML code box available to display codes in blogger post. They were 

 

(i)   HTML code box with scroll &

 

(ii) HTML code box without scroll.

 

Code which is provided above i.e., in “Step 5” that code is for HTML code box with scroll effect.

 

If you wanted to add HTML code box without scroll effect just remove max-height: 200px; from “Step 5” or you can simply paste the code for HTML code Box without scroll effect.

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px ‘Courier New’, Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }.code:hover { background-repeat:no-repeat; }

◆ How to Use Code Box in Blogger Post?

 

To add code box in blogger post follow the above steps:

 

Step 1: Login to your blogger dashboard and select your blog.

 

Step 2: Goto Posts > New Posts > HTML

Step 3: Paste this code wherever you want to display code box in your blogger post

<div class=”code”>Your Code Here</div>

Step 4: Change ” YOUR CODE HERE” with your code
Step 5: Click “Publish”. Enjoy you are done!
◆ Last WordHope you are benefitted by this article and learned something new. Let me know how this tutorial helped you to display Code snippet In you Blog Post. For any issues relating implementation of the code snippet drop a comment below we are ready to help you.