Adding a Random Post button to your Blogger site is a fun and effective way to keep visitors engaged with your content. When clicked, this button sends users to a randomly selected blog post, encouraging them to discover articles they might have missed. In this tutorial, you'll learn how to easily add this feature to your blog using a simple copy-and-paste code.

Go to the "Layout" page of your Blogger blog, add the following code into an "HTML/JavaScript" gadget, and click Save.

<style>
#myLuckyPost {
  margin-bottom: 10px;
}
#myLuckyPost a {
  display: block;
  background: #333;
  color: #fff;
  text-shadow: none !important;
  text-align: center;
  padding: 6px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
</style>

<div id="myLuckyPost">Loading random post...</div>

<script>
(function () {
  const container = document.getElementById("myLuckyPost");
  const FEED_URL = "/feeds/posts/summary";

  // === JSONP fallback logic ===
  window.showLucky = function (root) {
    const entry = (root.feed.entry || [])[0];
    if (!entry) {
      container.textContent = "No post found.";
      return;
    }
    const link = entry.link.find(l => l.rel === "alternate");
    if (link && link.href) {
      window.location.href = link.href;
    } else {
      container.textContent = "Post link not found.";
    }
  };

  window.feelingLucky = function (root) {
    const total = parseInt(root.feed.openSearch$totalResults.$t, 10);
    if (!total) {
      container.textContent = "No posts available.";
      return;
    }

    const luckyIndex = Math.floor(Math.random() * total) + 1;
    const a = document.createElement("a");
    a.href = "#";
    a.onclick = function () {
      const s = document.createElement("script");
      s.src = `${FEED_URL}?start-index=${luckyIndex}&max-results=1&alt=json-in-script&callback=showLucky`;
      document.head.appendChild(s);
      return false;
    };
    a.textContent = "Are you feeling lucky?";
    container.innerHTML = "";
    container.appendChild(a);
  };

  // === Try modern fetch to get total post count ===
  (async function tryFetch() {
    try {
      const res = await fetch(`${FEED_URL}?alt=json&max-results=0`);
      if (!res.ok) throw new Error("HTTP error " + res.status);
      const data = await res.json();
      const total = parseInt(data.feed.openSearch$totalResults.$t, 10);

      if (!total) {
        container.textContent = "No posts found.";
        return;
      }

      const luckyIndex = Math.floor(Math.random() * total) + 1;
      const postRes = await fetch(`${FEED_URL}?alt=json&start-index=${luckyIndex}&max-results=1`);
      if (!postRes.ok) throw new Error("Post fetch failed");

      const postData = await postRes.json();
      const entry = (postData.feed.entry || [])[0];
      if (!entry) {
        container.textContent = "Random post not found.";
        return;
      }

      const link = entry.link.find(l => l.rel === "alternate");
      if (!link || !link.href) {
        container.textContent = "Post URL missing.";
        return;
      }

      const a = document.createElement("a");
      a.href = link.href;
      a.textContent = "Are you feeling lucky?";
      container.innerHTML = "";
      container.appendChild(a);

    } catch (err) {
      console.warn("Fetch failed, using JSONP fallback:", err);
      const s = document.createElement("script");
      s.src = `${FEED_URL}?max-results=0&alt=json-in-script&callback=feelingLucky`;
      document.head.appendChild(s);
    }
  })();
})();
</script>

Refresh your site and click the "Are you feeling lucky?" button to see it in action.

The post How to Add a Random Post Button in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1. Go to the "Edit HTML" page of your Blogger blog.

2. Scroll down to where you see this line:

<data:post.body/>

3. After the above line, copy and paste the code below to a suitable location:

<!--Related post code start from here-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.btt-rposts{margin:15px 0;}
#btt-rposts-data > div{margin:0 0 15px 0;}
#btt-rposts-data > div:last-child{margin:0;}
#btt-rposts-data > div strong{display:block;margin:0 0 8px 0;}
#btt-rposts-data ul{list-style:none;margin:0;padding:0;}
#btt-rposts-data ul li{margin:0;padding:0 0 6px 0;}
</style>
<div class='btt-rposts'>
<div class='btt-rposts-content'>
<h3 class='btt-rposts-header'>Related Posts :</h3>
<div id='btt-rposts-data'></div>
<script type='text/javascript'>
var homeUrl = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 3;

function bttListEntries(json) {
    var ul = document.createElement('ul');
    var maxPosts = Math.min(json.feed.entry.length, maxNumberOfPostsPerLabel);

    for (var i = 0; i &lt; maxPosts; i++) {
        var entry = json.feed.entry[i];
        var alturl;

        for (var k = 0; k &lt; entry.link.length; k++) {
            if (entry.link[k].rel === 'alternate') {
                alturl = entry.link[k].href;
                break;
            }
        }

        if (alturl !== location.href) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = alturl;
            a.appendChild(document.createTextNode(entry.title.$t));
            li.appendChild(a);
            ul.appendChild(li);
        }
    }

    for (var l = 0; l &lt; json.feed.link.length; l++) {
        if (json.feed.link[l].rel === 'alternate') {
            var raw = json.feed.link[l].href;
            var label = raw.substring(homeUrl.length + 13).replace(/%20/g, ' ');
            var h = document.createElement('strong');
            h.appendChild(document.createTextNode(label));
            var div1 = document.createElement('div');
            div1.appendChild(h);
            div1.appendChild(ul);
            document.getElementById('btt-rposts-data').appendChild(div1);
        }
    }
}

function bttSearch(query, label) {
    var script = document.createElement('script');
    script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&amp;callback=bttListEntries');
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
}

var labelArray = [];
var numLabel = 0;

<b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
        var textLabel = &quot;<data:label.name/>&quot;;
        if (labelArray.indexOf(textLabel) === -1) {
            labelArray.push(textLabel);
            if (numLabel &lt; maxNumberOfLabels) {
                bttSearch(homeUrl, textLabel);
                numLabel++;
            }
        }
    </b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
<!--Related post code end here-->

4. Click on the save button and refresh your site.

The post How To Add Related Posts to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1. Go to "Edit HTML" of your blog.

2. Add this code into the head section of your template. (It is better to add it just after </b:skin> tag)

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "error_page"'>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-expander/1.7.0/jquery.expander.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

$('.post-body').expander({
    slicePoint: 280,
    expandText: 'read more',
    expandPrefix: '&hellip; ',
    userCollapseText: 'read less',
    userCollapsePrefix: ' ',
    summaryClass: 'post-body-summary',
    detailClass: 'post-body-details',
    moreClass: 'post-body-read-more',
    lessClass: 'post-body-read-less',
});
  
});

//]]>
</script>

</b:if>
</b:if>
</b:if>

If you have already added jQuery into your template, you can remove below lines from the above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script>

Note:
slicePoint: the number of characters at which the contents will be sliced into two parts.

3. Now save your template and refresh your site. Final result will look like this:

The post How To Create Expandable Post Summaries appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

If you don't like about the look of that icon, we can change it with our own image. Go to "Edit HTML" page and find this code:

              <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

In the above code, this is the image address of the default Blogger Quick Edit Icon.

http://img2.blogblog.com/img/icon18_edit_allbkg.gif

Change it with an image URL you like.

Save your template and refresh your site to see changes.

The post How To Change Blogger Quick Edit Icon appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Go to the "Edit HTML" page of your blog. Find this code:

<b:include name='nextprev'/>

If you want to show posts page navigation links only at the top you can remove this code.
If you want to show it both at the top and the bottom, then do not make any change to it.

Now find this code:

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>

    <!-- posts -->
    <div class='blog-posts hfeed'>

Add this code just below above code:

<b:include name='nextprev'/>

Final result will look like this:

Save the template and refresh your site.

Note: If you want to style this page navigation differently, use/edit these CSS class in your template :

#blog-pager-newer-link {
    float: left;
}

#blog-pager-older-link {
    float: right;
}

#blog-pager {
    margin: 1em 0;
    text-align: center;
    overflow: hidden;
}

The post How To Move Newer, Home and Older Posts Links to top of Posts appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

First go to "Edit HTML" page of your blog. (Note: Please backup your template before doing any changes)

Find this line:

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

It will look like this:

Replace it with below code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.name != "YOUR_LABEL_NAME"'>
	<b:include data='post' name='post'/>
  </b:if>
</b:loop>
<b:else/>
   <b:include data='post' name='post'/>
</b:if>

Important: Replace the word YOUR_LABEL_NAME with the label name you want to hide posts from.

To exclude posts from multiple categories, use the below code instead of the above code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.name != "YOUR_FIRST_LABEL_NAME" and data:label.name != "YOUR_SECOND_LABEL_NAME"'>
	<b:include data='post' name='post'/>
  </b:if>
</b:loop>
<b:else/>
	<b:include data='post' name='post'/>
</b:if>

Important: Replace the words YOUR_FIRST_LABEL_NAME and YOUR_SECOND_LABEL_NAME with the label names you want to hide posts from.

The post How to Hide Blogger Posts with Specific Labels appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

To add "Featured Post" widget to your blog, just go to your "Layout" tab, click on "Add a Gadget", and select 'Featured Post'.

You’ll be able to place the gadget wherever you’d like on your blog and then choose the post you’d like to show.

If you’d like to highlight something new, you can change the post you feature at any time.

The post How to Add Featured Post Widget to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Follow the simple steps below to do it:

1.Login to your Blogger account and go to "Edit HTML".

2.Now you have to find the code responsible for creating post tiles.

Find the code 1. But if you can not find it, find the code 2 (you will see code 1 or code 2 in 2 locations in your theme):

Code 1:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='headline'>
  <b:if cond='data:post.link'>
	<a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
	<b:if cond='data:post.url'>
	  <b:if cond='data:blog.url != data:post.url'>
		<a expr:href='data:post.url'><data:post.title/></a>
	  <b:else/>
		<data:post.title/>
	  </b:if>
	<b:else/>
	  <data:post.title/>
	</b:if>
  </b:if>
  </h3>
</b:if>

Code 2:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title' itemprop='headline'>
  <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
	<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
  <b:else/>
	<data:post.title/>
  </b:if>
  </h3>
</b:if>

Note: These codes have some differences according to your template. If you can't find code 1 or code 2, search it replacing h3 with h2.

3.Now if you found code 1, replace it with below code (you have replace both code 1):

<b:if cond='data:post.title'>
  <h1 class='post-title entry-title' itemprop='headline'>
  <b:if cond='data:post.link'>
	<a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
	<b:if cond='data:post.url'>
	  <b:if cond='data:blog.url != data:post.url'>
		<a expr:href='data:post.url'><data:post.title/></a>
	  <b:else/>
		<data:post.title/>
	  </b:if>
	<b:else/>
	  <data:post.title/>
	</b:if>
  </b:if>
  </h1>
</b:if>

If you found code 2, replace it with below code (you have replace both code 2):

<b:if cond='data:post.title'>
  <h1 class='post-title entry-title' itemprop='headline'>
  <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
	<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
  <b:else/>
	<data:post.title/>
  </b:if>
  </h1>
</b:if>

4.Click on "Save template" and now you are done.

The post How To Change Heading Tag For Better SEO in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Find this piece of code:

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description,
	  for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
	<data:post.body/>
	<div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
	<data:post.body/>
	<div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

Replace it below code:

<b:if cond='data:blog.pageType != "index"'>

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description,
	  for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
	<data:post.body/>
	<div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
	<data:post.body/>
	<div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

</b:if>

Preview your theme before save changes. If everything is ok, save your theme and refresh your site to see changes.

The post How to Hide Blogger Post Content from Homepage appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

After that find this code (You will find it 2 times):

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

Now paste your advertisement code just below above code (you have to paste it twice, because above code available in 2 places).

Note: If you need to display your advertisement only in post pages, wrap your advertisement code like this:

<b:if cond='data:blog.pageType == "item"'>
Your Ad Code
</b:if>

Look at this image to understand it well:

Save your Blogger template.

The post How to Add an Advertisement Below Post Title in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.