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.

With WordPress 5.8, old widgets screen was replaced by new block widgets screen. You can now add any block to your site's widget areas. Also all of your classic widgets still work flawlessly with this new block screen. But if you want to stick with the WordPress's old widgets screen, add the code given below into your theme's "functions.php" file:

// Disables the block editor from managing widgets in the Gutenberg plugin.
add_filter( 'gutenberg_use_widgets_block_editor', '__return_false', 100 );

// Disables the block editor from managing widgets.
add_filter( 'use_widgets_block_editor', '__return_false' );

The post How to Disable WordPress Block Widgets Screen appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

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

2.Scroll down to till you see your Blogroll widget code (Note : You may also can find it by searching <b:widget id='BlogList ) :

Your Blogroll widget code will look like this:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList' version='1' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <div id='blog-list-title'>
    <h2 class='title'><data:title/></h2>
  </div>
</b:if>

<div class='widget-content'>
  <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
      <b:loop values='data:items' var='item'>
        <li expr:style='data:item.displayStyle'>
          <div class='blog-icon'>
            <b:if cond='data:showIcon == &quot;true&quot;'>
              <input expr:value='data:item.blogIconUrl' type='hidden'/>
            </b:if>
          </div>
          <div class='blog-content'>
            <div class='blog-title'>
              <a expr:href='data:item.blogUrl' target='_blank'>
                <data:item.blogTitle/></a>
            </div>
            <div class='item-content'>
              <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                <b:if cond='data:item.itemThumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:item.blogUrl' target='_blank'>
                      <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                    </a>
                  </div>
                </b:if>
              </b:if>
              <b:if cond='data:showItemTitle == &quot;true&quot;'>
                <span class='item-title'>
                  <b:if cond='data:item.itemUrl != &quot;&quot;'>
                    <a expr:href='data:item.itemUrl' target='_blank'>
                      <data:item.itemTitle/></a>
                  <b:else/>
                    <data:item.itemTitle/>
                  </b:if>
                </span>
              </b:if>
              <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                <b:if cond='data:showItemTitle == &quot;true&quot;'>
                  -
                </b:if>
                <span class='item-snippet'>
                  <data:item.itemSnippet/>
                </span>
              </b:if>
              <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                <div class='item-time'>
                  <data:item.timePeriodSinceLastUpdate/>
                </div>
              </b:if>
            </div>
          </div>
          <div style='clear: both;'/>
        </li>
      </b:loop>
    </ul>

    <b:if cond='data:numItemsToShow != 0'>
      <b:if cond='data:totalItems &gt; data:numItemsToShow'>
        <div class='show-option'>
          <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
          </span>
          <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
          </span>
        </div>
      </b:if>
    </b:if>

    <b:include name='quickedit'/>
  </div>
</div>
</b:includable>
</b:widget>

3.Now add rel='nofollow' to your blogroll widget code as the example below:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList' version='1' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
 <div id='blog-list-title'>
   <h2 class='title'><data:title/></h2>
 </div>
</b:if>

<div class='widget-content'>
 <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
   <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
     <b:loop values='data:items' var='item'>
       <li expr:style='data:item.displayStyle'>
         <div class='blog-icon'>
           <b:if cond='data:showIcon == &quot;true&quot;'>
             <input expr:value='data:item.blogIconUrl' type='hidden'/>
           </b:if>
         </div>
         <div class='blog-content'>
           <div class='blog-title'>
             <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
               <data:item.blogTitle/></a>
           </div>
           <div class='item-content'>
             <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
               <b:if cond='data:item.itemThumbnail'>
                 <div class='item-thumbnail'>
                   <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                     <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                   </a>
                 </div>
               </b:if>
             </b:if>
             <b:if cond='data:showItemTitle == &quot;true&quot;'>
               <span class='item-title'>
                 <b:if cond='data:item.itemUrl != &quot;&quot;'>
                   <a expr:href='data:item.itemUrl' rel='nofollow' target='_blank'>
                     <data:item.itemTitle/></a>
                 <b:else/>
                   <data:item.itemTitle/>
                 </b:if>
               </span>
             </b:if>
             <b:if cond='data:showItemSnippet == &quot;true&quot;'>
               <b:if cond='data:showItemTitle == &quot;true&quot;'>
                 -
               </b:if>
               <span class='item-snippet'>
                 <data:item.itemSnippet/>
               </span>
             </b:if>
             <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
               <div class='item-time'>
                 <data:item.timePeriodSinceLastUpdate/>
               </div>
             </b:if>
           </div>
         </div>
         <div style='clear: both;'/>
       </li>
     </b:loop>
   </ul>

   <b:if cond='data:numItemsToShow != 0'>
     <b:if cond='data:totalItems &gt; data:numItemsToShow'>
       <div class='show-option'>
         <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
           <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
         </span>
         <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
           <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
         </span>
       </div>
     </b:if>
   </b:if>

   <b:include name='quickedit'/>
 </div>
</div>
</b:includable>
</b:widget>

4.Now save your template and you are done.

The post How To Become Blogger Blogroll Nofollow appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Go to edit HTML of your blog and find this code:

resizeImage(data:post.featuredImage, 72, "1:1")

Change the value 72 to a different value like 120. Now your code should look like this:

resizeImage(data:post.featuredImage, 120, "1:1")

Now you will get 120px square images as popular posts thumbnails.

If you don't like square images, you can change the 1:1 ratio of width to height. For example if I change the ratio to 3:2 like below, I will get 120px width and 80px height images as popular post thumbnails.

resizeImage(data:post.featuredImage, 120, "3:2")

After that save your template and refresh your site to see changes.

The post Resize Popular Posts Widget Images in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

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

2.Find your Link List widget code. It usually starts with "<b:widget id='LinkList". It will look like this:

3.Find this line in that code:

<li><a expr:href='data:link.target'><data:link.name/></a></li>

4.Replace it with this code:

<li><a expr:href='data:link.target' target='_blank' rel='nofollow'><data:link.name/></a></li>

You can see I have added target='_blank' rel='nofollow' to the original code.

Final code will look like this:

5.Save your template. That's it. Now links of the Link List widget have nofollow attribute and they will open in a new tab.

The post Create NoFollow Link List Widget in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

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

2.Find this line. It is the starting line of Blogger Navbar widget code:

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>

3.Select the entire code related to the Blogger Navbar Widget like this and delete it:

4.Save your theme. That's it. Now Blogger Navbar is successfully removed from your Blogger blog.

The post How To Delete Blogger Navbar Widget appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Note: First make sure that you have already added a label widget into your blog.

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

2.Find the code for your label widget. It will look like this:

3.Now locate to this code:

<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
  <b:if cond='data:blog.url == data:label.url'>
	<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
	<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
	<span dir='ltr'>(<data:label.count/>)</span>
  </b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
  <b:if cond='data:blog.url == data:label.url'>
	<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
	<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  <b:if cond='data:showFreqNumbers'>
	<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
  </b:if>
</span>
</b:loop>
</b:if>

4.Replace above code with below code:

<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>Browse By categories</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:loop>
</select>

Note: You can use any name instead of "Browse By categories".

5.Save your Template and refresh your site. Final result will look like this:

The post Create Drop-down Label Widget in Blogger 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.

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

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

#subscribe-btt {
    margin: 0;
    padding: 10px;
    background: #eee;
    border: 3px solid #e8e8e8;
}

#subscribe-btt:hover {
    background: #e9e9e9;
    border: 3px solid #ddd;
}

#subscribe-btt h2.mysocialurl {
    border: 0;
    margin: 0 0 8px 0;
    padding: 0 0 0 56px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-family: Lora;
}

#subscribe-btt h2.my-twitter {
    background: url(http://1.bp.blogspot.com/-YMZoxe6YeAU/VjLfx48cbzI/AAAAAAAANS4/-xMF6d-h6pI/s1600/twitter.png) no-repeat top left;
}

#subscribe-btt h2.my-facebook {
    background: url(http://3.bp.blogspot.com/-x3I2mVz4dz0/VjLfvv-E4lI/AAAAAAAANSU/mtI8MA00knA/s1600/facebook.png) no-repeat top left;
}

#subscribe-btt h2.my-googleplus {
    background: url(http://4.bp.blogspot.com/-ZgHjLWTv3hg/VjLfvhnsveI/AAAAAAAANSY/d-so__lf_MU/s1600/google_plus.png) no-repeat top left;
}

#subscribe-btt h2.my-pinterest {
    background: url(http://3.bp.blogspot.com/-QsPPcMl7rrw/VjLfxLofDUI/AAAAAAAANSs/1v1y-fB5pEQ/s1600/pinterest.png) no-repeat top left;
}

#subscribe-btt h2.my-instagram {
    background: url(http://2.bp.blogspot.com/-y1lyKz1gpew/VjLfviE7bHI/AAAAAAAANSk/bK4YGPwJfpI/s1600/instagram.png) no-repeat top left;
}

#subscribe-btt h2.my-linkedin {
    background: url(http://3.bp.blogspot.com/-g8Svw7M45HQ/VjLfwfBFNEI/AAAAAAAANSc/6kG75VOZyiM/s1600/linkedin.png) no-repeat top left;
}

#subscribe-btt h2.my-youtube {
    background: url(http://2.bp.blogspot.com/-B2Mt0Xr7s1Q/VjLfx4_kfqI/AAAAAAAANS8/5xcxmsRniRc/s1600/youtube.png) no-repeat top left;
}

#subscribe-btt h2.my-rss {
    background: url(http://2.bp.blogspot.com/-OTpOGowrvfg/VjLfxSHIbhI/AAAAAAAANS0/VnHf1jK_WLk/s1600/rss.png) no-repeat top left;
}

#subscribe-btt h2.my-email {
    background: url(http://1.bp.blogspot.com/-F3CIjKLAcrU/VjLfw_yOCdI/AAAAAAAANSo/vqPj9oNwe6c/s1600/mail.png) no-repeat top left;
}

#subscribe-btt .mysocialurl a {
    color: #252e28;
    text-decoration: none;
}

#subscribe-btt .mysocialurl a:hover {
    color: #000000;
    text-decoration: underline;
}
</style>

4.Now go to "Layout" and click on "Add a Gadget".

5.Select "HTML/JavaScript" and add the code given below and click "Save".

<div id="subscribe-btt">

<h2 class="mysocialurl my-twitter"><a href="YOUR-TWITTER-URL">FOLLOW ME ON TWITTER</a></h2>

<h2 class="mysocialurl my-facebook"><a href="YOUR-FACEBOOK-URL">FOLLOW ME ON FACEBOOK</a></h2>

<h2 class="mysocialurl my-googleplus"><a href="YOUR-GOOGLE-PLUS-URL">FOLLOW ME ON GOOGLE PLUS</a></h2>

<h2 class="mysocialurl my-pinterest"><a href="YOUR-PINTEREST-URL">FOLLOW ME ON PINTEREST</a></h2>

<h2 class="mysocialurl my-instagram"><a href="YOUR-INSTAGRAM-URL">FOLLOW ME ON INSTAGRAM</a></h2>

<h2 class="mysocialurl my-linkedin"><a href="YOUR-LINKEDIN-URL">FOLLOW ME ON LINKEDIN</a></h2>

<h2 class="mysocialurl my-youtube"><a href="YOUR-YOUTUBE-URL">FOLLOW ME ON YOUTUBE</a></h2>

<h2 class="mysocialurl my-rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="mysocialurl my-email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

</div>

NOTE : In above code, replace pink colored codes with your social profile URLs.

Final result will look like this:

The post How To Add Beautiful Subscribe Widget to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.