This guide shows how to add a simple monthly calendar to your Blogger blog. It uses one HTML/JavaScript gadget and a small script. No external files are required.

1. Open your Blogger dashboard.

2. Go to Layout.

3. Click Add a Gadget in the area where you want the calendar.

4. Choose HTML/JavaScript.

5. Add the code given below into the content box and click Save.

<div id="btt-basic-calendar"></div>
<script type='text/javascript'>
//<![CDATA[

(function() {
  function generateCalendar(id) {
    var today = new Date();
    var month = today.getMonth();
    var year = today.getFullYear();
    var firstDay = new Date(year, month, 1).getDay();
    var daysInMonth = new Date(year, month + 1, 0).getDate();
    
    var monthNames = [
      "January","February","March","April","May","June",
      "July","August","September","October","November","December"
    ];
    
    var calendar = "<table class='btt-basic-calendar'>";
    calendar += "<thead><tr><th colspan='7'>" + monthNames[month] + " " + year + "</th></tr>";
    calendar += "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead><tbody><tr>";
    
    // Empty cells before first day
    for (var i = 0; i < firstDay; i++) {
      calendar += "<td></td>";
    }
    
    // Fill days
    var day = 1;
    for (var i = firstDay; i < 7; i++) {
      calendar += "<td" + (day === today.getDate() ? " class='today'" : "") + ">" + day + "</td>";
      day++;
    }
    calendar += "</tr>";
    
    // Remaining weeks
    while (day <= daysInMonth) {
      calendar += "<tr>";
      for (var i = 0; i < 7 && day <= daysInMonth; i++) {
        calendar += "<td" + (day === today.getDate() ? " class='today'" : "") + ">" + day + "</td>";
        day++;
      }
      calendar += "</tr>";
    }
    
    calendar += "</tbody></table>";
    document.getElementById(id).innerHTML = calendar;
  }

  // Run on load if a container with id="btt-basic-calendar" exists
  window.onload = function() {
    var container = document.getElementById("btt-basic-calendar");
    if (container) {
      generateCalendar("btt-basic-calendar");
    }
  };
})();

//]]>
</script>
<style>
.btt-basic-calendar {border-collapse:collapse;width:100%;text-align:center;font-family:Arial,sans-serif;font-size:14px;}
.btt-basic-calendar th {background:#f5f5f5;padding:5px;}
.btt-basic-calendar td {border:1px solid #ddd;padding:5px;}
.btt-basic-calendar .today {background:#ffeb3b;font-weight:bold;}
</style>

Tip: You can add a title for the gadget, such as Calendar, to show a header above the widget.

6. Save your layout and refresh your blog. The current month will appear, and today's date will be highlighted.

Note: This calendar code is not limited to Blogger. You can also use it on any other website by pasting the same snippet into your HTML where you want the calendar to appear.

The post How to Add a Calendar to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Some Blogger templates or gadgets require jQuery to work properly. If your theme does not already load it, you can easily add it by following these steps.

Steps

1. Open your Blogger Dashboard and go to Theme.
2. Click Edit HTML to open the code editor.
3. Search for the closing tag </head>.
4. Paste the script below just before </head>.
5. Click Save to update your theme.

jQuery Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Optional: Add jQuery Migrate

If your template or old gadgets stop working after adding the latest jQuery, you can also include jQuery Migrate. Place it immediately after the jQuery script tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.1.min.js"></script>

Tip: Only add jQuery Migrate if you notice errors with older scripts. For most modern templates, the main jQuery script is enough.

Final Step

After saving your theme, refresh your blog and check if everything works correctly. If you see errors in the console, consider adding the optional jQuery Migrate script.

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

Do you want the links in your Blogger Link List widget to open in a new tab? You can do this by adding a small change to your template. This guide shows the steps in a clear and simple way.

Before you start

• Make a backup of your theme first. Go to Theme → Backup → Download.

Step 1: Open your template

1. Go to your Blogger dashboard.
2. Click Theme → Edit HTML.
3. Click inside the code area and press Ctrl + F to search.

Step 2: Find your Link List widget

Search for <b:widget id='LinkList or scroll until you see the Link List code block.

It will look similar to this:

<b:widget id='LinkList1' locked='false' title='Recommended Links' type='LinkList' visible='true'>
<b:includable id='main'>
  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
<b:includable id='content'>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
 </div>
</b:includable>
</b:widget>

Step 3: Add the target attribute

Edit the <a> tag to include target='_blank'. This makes each link open in a new tab.

Important: add a space before target='_blank' so the HTML stays valid.

Update your code to the following:

<b:widget id='LinkList1' locked='false' title='Recommended Links' type='LinkList' visible='true'>
<b:includable id='main'>
  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
<b:includable id='content'>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target' target='_blank' rel='noopener noreferrer'><data:link.name/></a></li>
     </b:loop>
   </ul>
 </div>
</b:includable>
</b:widget>

Adding rel='noopener noreferrer' improves security by preventing the new tab from controlling your blog, and it can also improve performance.

Step 4: Save your changes

1. Click Save in the top right corner of the editor.
2. Refresh your blog and test the links in the Link List widget.

Troubleshooting

• I cannot find the widget: Try searching for the exact widget ID if you know it, for example LinkList12.
• Links still open in the same tab: Make sure you added a space before target='_blank' and saved the template.
• Multiple Link List widgets: Repeat the same change for each Link List block you want to affect.

Done

Your Link List links should now open in a new tab. This is a small change that makes navigation more comfortable for your visitors.

The post How to Open Blogger Link List Gadget Links in a New Tab appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Blogger does not support PHP files directly, but you can still display them. If you already have a PHP page hosted on a server, you can show it inside your Blogger blog using a simple <iframe>. This method is perfect for adding tools, forms, or scripts without needing to change how Blogger works. In this guide, I will explain the steps in a simple way.

Step 1: Host your PHP file

Upload your PHP file to a web server that supports PHP. Blogger itself cannot run PHP, so the file must be hosted elsewhere. For example: https://yourdomain.com/tool.php. If your blog uses HTTPS, make sure your PHP page also uses HTTPS.

Step 2: Add an iframe to your blog

Next, embed your PHP page using an iframe. Go to your Blogger dashboard, edit the post or page, switch to HTML view, and paste this code:

<iframe 
src="https://yourdomain.com/tool.php" 
title="Embedded PHP Page"
width="100%" 
height="420" 
loading="lazy"
style="border:0; max-width: 900px; display:block; margin: 0 auto;">
</iframe>

Replace https://yourdomain.com/tool.php with the link to your PHP file. You can change the height and max-width to fit your design.

Step 3: Add it as a gadget (optional)

You can also add the PHP tool in your sidebar or footer as a gadget:

1. Go to Layout in your Blogger dashboard.
2. Click Add a Gadget where you want it to show.
3. Select HTML/JavaScript.
4. Paste the iframe code and save.

Tips and common issues

• Blank box? Your PHP host may block embedding with headers like X-Frame-Options. Try another host if this happens.
• Mixed content warnings Use HTTPS for both your blog and the PHP page.
• Too short or too tall? Adjust the height value in the iframe code.
• SEO note Content inside an iframe is not read as part of your blog by search engines. Add some supporting text to help SEO.

Example

Here is an example with a placeholder PHP page URL:

<iframe 
src="https://example.com/my-tool.php" 
title="My PHP Tool"
width="100%" 
height="480" 
loading="lazy"
style="border:0; max-width: 900px; display:block; margin: 0 auto;">
</iframe>

This will display the PHP page inside your Blogger post, centered and clean.

Conclusion

That is all you need to do. Blogger cannot run PHP files itself, but you can display them by embedding the page with an iframe. Just host the PHP file on a proper server, then paste the iframe code into your blog. It is a simple and reliable way to bring dynamic features into Blogger.

The post How to Embed a PHP Page in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

If you want to add a textarea to your Blogger blog that automatically highlights its content when hovered over with the mouse, this simple tutorial will show you how to do it. This is useful for displaying copyable code, affiliate links, or tips that visitors can easily select and copy.

1. Login to your Blogger account and go to the "Layout" page of your blog.

2. Click the "Add a Gadget" link in the section where you want to add it.

3. Select "HTML/JavaScript", paste the code provided below, and click "Save".

<textarea rows="5" cols="50" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()">

Enter Your Content Here

</textarea>

Note: Remember to replace "Enter Your Content Here" with your actual content.

Example:

<textarea rows="5" cols="50" onfocus="this.select()" onmouseover="this.focus()" onclick="this.focus();this.select()">

Tips for Bloggers for easy blogging and Making Money.blogger,blogspot tips and tricks.A dummies guide, templates,designs,widgets, JavaScript,HTML codes,SEO,Google AdSense,gadgets,how to monetize Blogger or blogspot blogs.

</textarea>

Look at the result below:

Tips for Bloggers for easy blogging and Making Money.blogger,blogspot tips and tricks.A dummies guide, templates,designs,widgets, JavaScript,HTML codes,SEO,Google AdSense,gadgets,how to monetize Blogger or blogspot blogs.

Note:

• If you don't want to add it as a gadget and just need it inside a post, open the post editor, switch to the "HTML view," and paste the code right where you want it to appear.
• The above code works not only on Blogger but also on any other website.

The post How to Create an Auto-Highlight Textarea on Mouse Hover appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

If you're a developer, tech blogger, or just love sharing code on your Blogger (Blogspot) blog, adding a good syntax highlighter is a must for readability and professional presentation. One of the lightweight tools you can still use is Google Code Prettify, a JavaScript-based syntax highlighter.

This tutorial shows how to easily integrate the Prettify into your Blogger blog, with live examples and alternate skin options.

Step 1: Login to your Blogger account and go to the "Edit HTML" page of your blog.

Step 2: You can load the JavaScript and CSS for prettify via one URL. Add this code just below <head> tag:

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'></script>

Step 3: Save your template. You have successfully added Prettify auto-loader to your Blogger blog. Above code will load the entire system and schedule the prettifier to run on page load.

Step 4: Now when you want to display a code snippet in your blogger post, go to the Blogger post editor and select "HTML view".

Step 5: Wrap your code snippet inside a <pre> tag with the prettyprint class like this:

<pre class="prettyprint">
source code here
</pre>

Code Example:

<pre class="prettyprint">
&lt;script type=&quot;text/javascript&quot;&gt;
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i &gt;= 0;) {
    alert('Hello ' + String(world));
  }
}
&lt;/script&gt;
&lt;style&gt;
p { color: pink }
b { color: blue }
u { color: &quot;umber&quot; }
&lt;/style&gt;
</pre>

Note: You must escape special characters in your code snippet before adding it to the HTML. This ensures the browser displays the code correctly instead of interpreting it as actual markup.

Step 6: Publish/Update your post and view your post. It will look like this:

How to Add Different Code Styles

Only you need to do is, replace "Step 2" code with below codes.

Desert Skin:

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert'></script>

Result:

Sunburst Skin:

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'></script>

Result:

Sons-Of-Obsidian Skin:

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian'></script>

Result:

Doxy Skin:

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=doxy'></script>

Result:

How to Specify the Language of Your Code

File extensions supported by default include: "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

The lang-* class specifies the language file extensions.

You can specify other languages by specifying the language extension along with the prettyprint class.

For example, The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag. So you can add your CSS codes like this:

<pre class="prettyprint lang-css">
CSS code here
</pre>

Example:

View the complete list of Prettify language handlers on GitHub.

How to Display Codes with Line Numbers

To display line numbers, use "linenums" class like this:

<pre class="prettyprint linenums">
source code here
</pre>

Code Example:

<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
  for (var i = 42; --i &gt;= 0;) {
    alert('Hello ' + String(world));
  }
}
&lt;/script&gt;
&lt;style&gt;
p { color: pink }
b { color: blue }
u { color: &quot;umber&quot; }
&lt;/style&gt;
</pre>

Result:

Below code will display a CSS code with line numbers:

<pre class="prettyprint lang-css linenums">
body{background:#000000 url(http://3.bp.blogspot.com/-vB6rbTuTh34/UEw9OyUKQJI/AAAAAAAAIoQ/A3dwg6dKC_g/s1600/background.jpg) center top no-repeat;color:#555555;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;margin:0px;padding:0px;}
a:link,a:visited{color:#C11112;text-decoration:underline;outline:none;}
a:hover{color:#FE3D36;text-decoration:none;outline:none;}
a img{border-width:0}
#body-wrapper{margin:0px;padding:0px;}
</pre>

Note: The codes above work not only on Blogger but also on other websites. Simply add the code from Step 2 right after the <head> tag of your webpage, then use any of the provided examples to display syntax-highlighted code.

Google Code Prettify is still a great choice for lightweight syntax highlighting on Blogger or any other website, especially if you don't want to use third-party script builders. It works out-of-the-box, supports multiple languages, and has various themes you can apply in seconds.

The post How to Use Prettify Syntax Highlighter With Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

The HTML target attribute specifies where to open the linked document. If you want to open a link in a new tab or window, you can use the target="_blank" attribute like this:

<a href="https://www.facebook.com/" target="_blank">Visit Facebook</a>

But if you'd like to make all links on your Blogger site open in a new window automatically, follow the steps below:

1. Go to your blog's "Edit HTML" page.
2. Copy and paste the code below just after the <head> tag:

<base target="_blank" />

3. Save your Blogger template.

Now, all links on your site such as post links, navigation links, and widget links will automatically open in a new tab or window. There is no need to add target="_blank" manually to each link.

Note: This method works not only on Blogger but also on other websites. Simply add the code shown above immediately after the <head> tag of your webpage.

The post How To Set All Links to Open in a New Window appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

This tutorial explains how to add tooltips to the links of your website or blog using "Easy Tooltip" jQuery plugin. A Tooltip is a hint that appears when an user hovers the pointer over an item that contains a brief text message identifying the object. Follow the steps given below to add Easy Tooltip to your website.

1.If you are using Blogger, go to "Edit HTML" of your blog.

2.Add this code just before </head> tag:

<!-- jQuery : remove these 2 lines if jQuery already included -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js' type='text/javascript'></script>
  
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:45,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->
  
<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {
  $('a.easytooltip').easyTooltip();
});

//]]>
</script>

<style type='text/css'>
#easyTooltip{
padding:5px 10px;
border:1px solid #000;
background: #333;
color:#fff;
}
</style>

3.Save your template.

4.Now when you adding a HTML link, "easytooltip" CSS class and title attribute should add like this:

<a class='easytooltip' title='ENTER-LINK-TITLE-HERE' href='ENTER-LINK-URL-HERE'>ENTER-LINK-NAME-HERE</a>

Look at this example:

<a class='easytooltip' title='How to Create NoFollow Link List Widget in Blogger' href='https://www.bloggertipandtrick.net/nofollow-link-list-widget-blogger/'>Create NoFollow Link List Widget in Blogger</a>

Final result will look like this:

The post How to Add jQuery Easy Tooltip to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Many visitors ask how to display raw HTML code in their posts so it appears as plain text and can be easily copied by readers. Here's a simple solution to achieve that.

The Problem is when you paste HTML directly into your post editor (whether in "HTML" or "Compose" mode), the browser interprets it as markup rather than displaying the code itself. For example:

<b>This text would render as bold instead of showing the tags.</b>

So, to display HTML as plain text, you must escape the special characters. Specifically:

• Replace < with <
• Replace > with >
• Replace & with &
• Replace " with "
• Replace ' with '

Manually converting these symbols can be tedious, so we recommend using our free HTML encoder tool.

Follow these steps to get the converted HTML code:

1. Paste your HTML into the tool
2. Click "Encode" to convert the symbols
3. Copy the output and paste it into your blog post

Now your HTML will appear as readable code, and visitors can easily copy it!

Note:

The converted HTML-safe text isn’t limited to Blogger alone. You can use it on any platform where you want your raw code to appear as plain, copyable text—whether it's WordPress, Medium, forums, online tutorials, or even in emails and documentation.

The post How to Display HTML Code in Blogger (Without Rendering) appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Do you wish to redirect a specific Blogger post to another page or an external URL? Whether you're retiring a post, upgrading your structure, or simply improving navigation, there's a simple and effective way that works perfectly on Blogger.

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

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

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

<b:if cond='data:blog.url == "YOUR-BLOG-POST-URL"'>
<meta http-equiv="refresh" content="5; url=REDIRECT-URL" />
</b:if>

4. Replace:

• YOUR-BLOG-POST-URL → with the full link of the Blogger post to redirect from.
• REDIRECT-URL → with the target URL.

Look at the example below.

<b:if cond='data:blog.url == "https://www.bloggertipandtrick.net/p/contact-me.html"'>
<meta http-equiv="refresh" content="5; url=https://www.bloggertipandtrick.net" />
</b:if>

If I add above code to my template, when someone go to my contact us page he will be redirected to my home page after 5 seconds. To redirect without waiting, replace 5 with 0.

5. After making changes to the code, click "Save" in the theme editor. That’s it. Your post now will be redirected to the new URL provided.

The post How To Redirect a Blogger Post to Another URL appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.