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.

Do you need to disable text selection/text highlighting on your website without using any JavaScript code? If the answer is yes, add this CSS code into your website to prevent users selecting text on your website or blog.

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

If you're using Blogger, add the CSS code just before ]]></b:skin>. For WordPress users, go to your WordPress Dashboard → Appearance → Customize → Additional CSS and paste the code there.

Note: This CSS works on virtually any website and is highly compatible with all major web browsers.

To see it in action, try selecting the text below.

Hi, I am an unselectable text. If you are not sure, try to select me.

If you want to disable text selection for a specific part of your website instead of the entire page, you can replace the body selector with any HTML tag, class, or ID.

To disable selection on a <div> with a specific ID:

#my-section {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

To target a class:

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

This way, you can apply the effect only where it's needed, such as on buttons, widgets, or specific content blocks, without affecting the entire page.

The post How to Disable Text Selection using CSS 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.

1.If you are using Blogger, Go to the "Edit HTML" page.

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

<style type='text/css'>
/* Make selected text white on a #cc0000 background */
::-moz-selection {
    background: #cc0000;
    color: #ffffff;
}

::selection {
    background: #cc0000;
    color: #ffffff;
}

/* Make selected text inside code tag white on a #333333 background */
code::-moz-selection {
    background: #333333;
    color: #ffffff;
}

code::selection {
    background: #333333;
    color: #ffffff;
}

/* Make selected text inside pre tag white on a #44ceff background */
pre::-moz-selection {
    background: #44ceff;
    color: #ffffff;
}

pre::selection {
    background: #44ceff;
    color: #ffffff;
}
</style>

Note : You can change above hex color codes as you like.

4.Save your template and refresh your website. Now try to select texts. Final result will be look like this:

If you are using WordPress, add above code(without style tags) into your style.css file.

The post How To Change Colors of Selected/Highlighted Texts appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

a[rel~="nofollow"]

We can write styles for above CSS selector like this:

a[rel~="nofollow"] {
    background: #333 !important;
    color: #fff !important;
    text-decoration: none !important;
}

Note: Above code is only an example. You can create your own CSS.

The post How to Style NoFollow Links appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

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

2.Find the start of html tag (<html). It will nearly look like this:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

3. Now add b:css='false' into the html tag like this:

<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Look at the image given below:

Save the template and refresh your website. Now check HTML source again. You will no longer see any default CSS styles from Blogger.

The post How to Remove Blogger Default CSS appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Do you want to display circular images on your website? With CSS3, this can be done with in few seconds. You can use CSS border-radius property to make rounded images. Just add below CSS code into your style-sheet.

.img-rounded {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

Note: If you are using Blogger, go to "Edit HTML" and add it just before ]]></b:skin> tag.

Now when you want to make an image circular, just add "img-rounded" CSS class into it. Look at the example below:

<img class="img-rounded" src="https://www.bloggertipandtrick.net/wp-content/uploads/2016/08/rounded-images-with-css.jpg" />

Result:

The post How to Create Rounded Images with CSS appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

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

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'>
/* Blogger Share Buttons by www.bloggertipandtrick.net */
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,300italic,700,700italic,600,600italic&subset=latin,latin-ext);
.blogger-share-buttons{color:rgb(126,126,126);display:block;font-family:'Open Sans',Tahoma,Verdana,Arial,sans-serif;font-size:14px;font-weight:normal;height:auto;line-height:24px;margin-top:10px;margin-bottom:10px;width:100%;width:100%;text-align:center;}
.blogger-share-buttons div{display:block;width:120px;margin:2px;display:inline-block;vertical-align:middle;}
.blogger-share-buttons a{text-decoration:none;display:block;padding-left:20px;color:#fff !important;font-weight:bold;-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s;}
.blogger-share-buttons a{padding:7px 10px 7px 10px;}
.blogger-share-buttons a i{margin-right:10px;}
.blogger-share-buttons .fb-sharebtn a{background:#3B5999;}
.blogger-share-buttons .twitter-sharebtn a{background:#01BBF6;}
.blogger-share-buttons .gplus-sharebtn a{background:#D54135;}
.blogger-share-buttons .linkedin-sharebtn a{background:#136F9B;}
.blogger-share-buttons .pinterest-sharebtn a{background:#CB2027;}
.blogger-share-buttons .delicious-sharebtn a{background:#3173D1;}
.blogger-share-buttons .fb-sharebtn a:hover{background-color:rgb(50,75,129);}
.blogger-share-buttons .twitter-sharebtn a:hover{background-color:rgb(1,159,211);}
.blogger-share-buttons .gplus-sharebtn a:hover{background-color:rgb(191,52,40);}
.blogger-share-buttons .linkedin-sharebtn a:hover{background-color:rgb(15,89,125);}
.blogger-share-buttons .pinterest-sharebtn a:hover{background-color:rgb(174,28,35);}
.blogger-share-buttons .delicious-sharebtn a:hover{background-color:rgb(38,90,168);}
</style>

4. Now find this line:

<b:includable id='post' var='post'>

5. From that line scroll down slowly until you see a code more similar to this:

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

6.Copy below code and paste it after the above code:

<!-- Blogger Share Buttons by www.bloggertipandtrick.net -->
<div class='blogger-share-buttons'>
    <div class='fb-sharebtn'>
		<a expr:href='&quot;https://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'><i class='fa fa-facebook' aria-hidden='true'></i> Facebook</a>
    </div>
    <div class='twitter-sharebtn'>
		<a expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'><i class='fa fa-twitter' aria-hidden='true'></i> Twitter</a>
    </div>
    <div class='gplus-sharebtn'>
		<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' target='_blank' title='Share this on Google+'><i class='fa fa-google-plus' aria-hidden='true'></i> Google+</a>
    </div>
    <div class='linkedin-sharebtn'>
		<a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share this on Linkedin'><i class='fa fa-linkedin' aria-hidden='true'></i> Linkedin</a>
    </div>
    <b:if cond='data:post.firstImageUrl'><div class='pinterest-sharebtn'>
		<a expr:href='&quot;https://pinterest.com/pin/create/button/?source_url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Pinterest'><i class='fa fa-pinterest' aria-hidden='true'></i> Pinterest</a>
    </div></b:if>
    <div class='delicious-sharebtn'>
		<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this on Delicious'><i class='fa fa-delicious' aria-hidden='true'></i> Delicious</a>
    </div>
</div>

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

The post How to Add Flat UI Share Buttons to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

Go to "Edit HTML" of your blog. Copy below code and paste it just before ]]></b:skin> tag:

#navbar-iframe{height:0;visibility:hidden;display:none;}

It will look like this:

Now save your template.

The post How To Remove/Hide Blogger Navbar 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.