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.

Blogger automatically displays a cookies consent banner for European Union (EU) visitors to comply with GDPR regulations. This banner appears at the top of your blog and informs users that your site uses cookies, especially for Google services and personalized ads.

If you're located outside the EU and want to preview the cookies notification, you can no longer use region-specific domains like .co.uk as they now redirect to .com.

Instead, use a VPN, browser extension, or an online tool like "GeoPeeker" to simulate a visit from an EU country. This allows you to see how the cookie banner appears to EU-based visitors, regardless of whether your blog uses a *.blogspot.com address or a custom domain.

The cookie banner in Blogger is automatically managed by Google and is designed to inform visitors about the use of cookies on your site. It highlights how Google uses cookies for services such as personalized advertising and traffic analysis, while also fulfilling the legal requirement to obtain user consent under GDPR regulations.

However, the default message may not align with your blog's tone or design, and some users choose to customize or disable it entirely. This should be done with caution, as it may lead to compliance risks.

How to Change the Blogger Cookies Notification Message

You can customize the cookie banner text and buttons. Go to the theme's "Edit HTML" page and add this code just before the </head> tag:

<script type="text/javascript">
    cookieOptions = {
        msg: "This site uses cookies from Google to deliver its services, to personalize ads and to analyze traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.",
        link: "https://policies.google.com/technologies/cookies",
        close: "Got it",
        learn: "Learn More"
    };
</script>

Note: You need to change the msg text to better fit your blog's language or tone.

How to Disable the Blogger Cookies Notification

Important: Use this only if you fully understand your region's legal responsibilities. Disabling the banner may lead to non-compliance with privacy laws like GDPR.

To completely disable the banner, add the following code just before the closing </head> tag in your theme's Edit HTML page:

<script type="text/javascript">
    cookieOptions = {};
</script>

Note: For most users, customizing the banner (rather than removing it) is the safest and most compliant choice.

For more information: https://support.google.com/blogger/answer/6253244

The post How to Change or Disable Blogger Cookies Notification 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.

<textarea style="width:332px;height:70px;" onmouseover="this.focus();this.select()">This content will be auto-selected on hover</textarea>

Above code includes:

1. A textarea element containing some pre-defined text.
2. The onmouseover event listener that triggers these two JavaScript functions:
(a). this.focus() : Sets focus on the textarea element.
(b). this.select() : Selects all the text within the textarea.

Result will look like the following :

This content will be auto-selected on hover

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

<script src='https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js'></script>

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

snowStorm.autoStart = true;
snowStorm.animationInterval = 33;
snowStorm.flakeBottom = null;
snowStorm.flakesMax = 128;
snowStorm.flakesMaxActive = 64;
snowStorm.followMouse = true;
snowStorm.freezeOnBlur = true;
snowStorm.snowColor = '#fff';
snowStorm.snowCharacter = '•';
snowStorm.snowStick = true;
snowStorm.targetElement = null;
snowStorm.useMeltEffect = true;
snowStorm.useTwinkleEffect = true;
snowStorm.usePositionFixed = false;
snowStorm.vMaxX = 8;
snowStorm.vMaxY = 5;

//]]>
</script>

Note: You can change pink colored values of above code as you like. But it is optional.

You can see a demo of this snow falling effect HERE.

The post How to Add Snowstorm Snow Effect For Websites 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.

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.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

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

jQuery(document).ready(function($) {
    $(document).bind("contextmenu", function(e) {
        return false;
    });
});

//]]>
</script>

NOTE : If jQuery is already included into your theme remove these lines from the above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

4.Now save the template. Refresh your site and try to right click on your website or blog.

The post How To Disable Right Click Using jQuery appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

http://YOURBLGNAME.blogspot.com/?m=1

In mobile version, blogger will be applied one of their basic mobile themes to your site. These themes are not looking nice. But if your custom blogger theme is mobile friendly, you do not want to use these blogger's basic mobile themes.

In this tutorial, I am going to explain how to display non-mobile (desktop) version, when someone browse your blog using a mobile phone. It will be useful if you are using a responsive blogger template.

Go to "Edit HTML" of your blog.

Add below code just after <head> tag of your blog:

<script type='text/javascript'>//<![CDATA[
var curl = window.location.href;if (curl.indexOf('m=1') != -1) {curl = curl.replace('m=1', 'm=0');window.location.href = curl;}
//]]></script>

After adding above code it will be look like this:

Save your template.

Now when someone visit to your blog using a mobile phone, "?m=0" will be added to the blog address instead of "?m=1".

http://YOURBLGNAME.blogspot.com/?m=0

The post How to Redirect Mobile Version to Non-Mobile in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.