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 | BloggerTipandTrick.net.

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 | BloggerTipandTrick.net.

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 | BloggerTipandTrick.net.

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 | BloggerTipandTrick.net.

Adding an official X (Twitter) Follow Button to your Blogger site is a quick way to let visitors follow you with one click. It helps you grow your followers and stay connected with your audience. In this guide I will show you how to add the button directly to your blog.

Copy and Paste This Code

Here is the code you need. Replace YourHandle with your actual X/Twitter username (without the @ sign).

<a href="https://twitter.com/YourHandle"
   class="twitter-follow-button"
   data-show-screen-name="true"
   data-show-count="false"
   data-size="large">
  Follow @YourHandle
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Tip: You only need the script line once per page. If your template already has it, you can remove the last line.

Note: This follow button code is not limited to Blogger. You can also use the same code on any other website, such as WordPress, static HTML pages, or custom CMS platforms. Just paste it into your site’s HTML and it will work the same way.

Method A: Add the Button with a Gadget

1. Log in to Blogger and go to Layout.
2. Click Add a Gadget → HTML/JavaScript.
3. Paste the code shown above.
4. Click Save.

The button will now appear in the sidebar, footer or any gadget area you choose.

Method B: Add the Button in Your Theme

Important: Make a backup of your theme first (Theme → Backup). Blogger templates can be different, so check carefully before editing.

1. Go to Theme → Edit HTML.
2. Search for <b:includable id='post' var='post'>. Inside this block you will see <data:post.body/>.
3. Paste the same follow button code just before <data:post.body/>.

This will make the button appear at the top of every blog post.

If you want the button to be aligned to the right, wrap it with a simple <div> like this:

<div style="float:right; margin:6px 0 10px 10px;">
  <!-- Follow button code goes here -->
</div>

Customize the Button

• Show or hide username: Change data-show-screen-name to true or false.
• Show or hide follower count: Change data-show-count to true or false.
• Button size: Add data-size="large" for a bigger button or remove it for the default size.
• Position: Use a wrapper <div> and add CSS such as float:right; or margin.

Fixing Common Problems

• Button shows only as a link: Make sure the script line is included once per page: <script async src="https://platform.twitter.com/widgets.js"></script>
• Button does not appear in posts: Check that you pasted the code inside <b:includable id='post' var='post'> and before <data:post.body/>.
• Button loads twice: Remove extra copies of the script so only one remains.
• Wrong account: Double check that you replaced YourHandle with your own username.

That’s it. Now your Blogger site has a working X (Twitter) Follow Button and visitors can follow you instantly. Happy blogging!

The post How to Add Official X (Twitter) Follow Button to Blogger appeared first on Blogger Tips And Tricks | BloggerTipandTrick.net.

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 | BloggerTipandTrick.net.

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 | BloggerTipandTrick.net.

This quick tutorial explains how to submit your Blogger blog’s sitemap to Google Search Console. Every Blogger blog has a sitemap file automatically created by Blogger. You can access it by adding /sitemap.xml to the end of your blog URL.

For example: https://YOURBLOGNAME.blogspot.com/sitemap.xml

Follow the steps below to submit your Blogger sitemap to Google Search Console:

1. Go to Google Search Console and sign in with your Google account.

2. Select your blog from the property list (top-left dropdown).

Note: If your blog isn't added yet, click "Add Property" and enter your full blog URL (e.g., https://yourblogname.blogspot.com), then follow the verification steps.

3. In the left sidebar, click on "Indexing" → "Sitemaps".

4. Under "Add a new sitemap", enter your full sitemap URL like this:

https://YOURBLOGNAME.blogspot.com/sitemap.xml

5. Then click the Submit button.

Your Blogger sitemap has now been submitted to Google. After processing, you'll be able to view indexing status, discovered URLs, and any crawling errors in the Search Console dashboard.

Note: If you're using a custom domain (like https://www.mycustomdomain.com), your sitemap URL would be:

https://www.mycustomdomain.com/sitemap.xml

The post Submit Blogger Sitemap to Google Search Console appeared first on Blogger Tips And Tricks | BloggerTipandTrick.net.

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 | BloggerTipandTrick.net.

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://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 | BloggerTipandTrick.net.