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.

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.

Buy a Warranty for the Phone

When you buy a mobile phone, you are often provided with the opportunity to purchase a warranty package with it. This allows the phone to be repaired if it’s damaged within certain parameters of the agreement. This can be a great way for you to ensure that you can have your smartphone repaired if you break it without having to spend a ton of money.

Put Your Phone in a Protective Case

There are iPhone X cases with screen protectors available that you can put on your Apple device. If you drop your very expensive new iPhone, the case and screen protector will keep it from being badly damaged. The same goes for Android devices. There are even some cases available that are waterproof so that if you drop your phone in water, it doesn’t become waterlogged and ruined. Each of the cases is designed for a specific model of iPhone or Android device, so be sure to read the case for the protector you’re considering carefully to ensure that you invest in the right one for your phone. Cases are available in a variety of styles, so you can show off your unique personality with the case you choose for your phone.

Put a Password on Your Phone

It’s important to protect the information that you have saved inside of the phone, as well. Put a password on the phone so that no one can go into it without your permission. There are some phones that now use fingerprint scanners to limit who can get into the phone and some even use facial recognition. It’s important to make sure the code that you choose for the password on your phone isn’t easy for someone to figure out.

Add the Location Tracker App

There are apps available for smartphones that allow the position of the phone to be tracked at all times. This is a great app to have because if your phone is lost or stolen, you can track the exact place where it’s located so that you can get it back. If the phone was stolen, it’s best to contact the police and let them handle retrieving it so that you don’t put yourself in a dangerous situation by trying to retrieve it on your own.

Have a Battery Booster

A battery booster is a device that you can plug your phone into so that it can get a little more battery life until you can plug it in and charge it. The device will need to be charged in advance in order for it to be as useful as it can be when you need to use it.

Taking the time to protect your phone is important because you never know when it may be dropped or stolen. Most of the items listed above are not overly expensive and well worth the investment if you consider the fact that you won't have to constantly invest money in a new phone every time that you drop yours.

The post Five Ways to Better Protect Your Smartphone appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1.Login to your blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

1.Big Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=bird"></script>

2.White Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME"></script>

3.Black Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=black"></script>

4.Show your Twitter followers in Text:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=YOUR-TWITTER-USERNAME"></script>

The post Twitter Followers Counters For Blogger/Websites appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

<script type='text/javascript'>

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<p>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</p>")

</script>

You are done.Now you can see it as picture below.

The post How To Show Date,Month,Year on Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

However your blog have more than 500 comments add this widget:

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=26191599715c07fbeaa491a5729e478b&url=http%3A%2F%2Fyourblog.blogspot.com&num=10&filter=" type="text/javascript"></script>

Note : Remember to replace yourblog with your blog name.Do not include http://

You are done.

The post Advanced Top Commentators Widget to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

1.Select your contact form fields and decide they are mandatory or not.

2.Select colors,fonts,... for your contact form.

3.Enter your email address.

4.Now press on "Create" button.html code for your contact form will appear.Copy and paste this code to your website.

Now are done.Your Contact form will look like this:

Importance of this contact form is it can submit without Page Rrefresh.And also after submit this contact form thank you message will appear.

If you like to add this contact form you can get it from http://www.foxyform.com/.

The post How To Add Free PHP Contact Form to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
var as = 1;
var bs = 3;
function statusbar()
{
var msg  = "TYPE-YOUR-TEXT-HERE";

var msg1  = "\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\";
var msg2  = "||||||||||||||||||";
var msg3  = "//////////////////";
var msg4  = "------------------";
if(as > 4)
as = 1;
if(bs < 1)
bs = 4;
timer = window.setTimeout("statusbar()",100);
var sds = eval("msg"+as);
var sds2 = eval("msg"+bs);
var ss =sds+"  "+msg+"  "+sds2;
window.status = ss;
as = as+1;
bs = bs-1;
}
statusbar(100);
</script>

Now you are done.

The post How To Add Status Bar Text with Nice Effect appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
var as = 1;
function statusbar()
{
var msg  = "TYPE-YOUR-TEXT-HERE";
var msg1  = "* * * * * * * * * * * * ";
var msg2  = "                                    ";
if(as == 2 )
 as = 1;
else
 as = 2;
timer = window.setTimeout("statusbar()",100);
var sds = eval("msg"+as);
var ss = "    "+sds+"  "+msg+"  "+sds;
window.status = ss;
}
statusbar(100);
</script>

Now you are done.

The post How To Add Status Bar Text with Blink Effect appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language=javascript>
function statusbar(val)
{
var msg  = "TYPE-YOUR-MESSAGE-HERE";
var res = " ";
var speed = 100;
var pos = val;

if (pos > 0) {
for (var position=0 ; position< pos; position++) {
 res += " ";
}
res+=msg;
pos--;
window.status = res;
timer = window.setTimeout("statusbar("+pos+")",speed);
}
else{
if( -pos < msg.length) {
 res += msg.substring(-pos,msg.length);
 pos--;
 window.status=res;
 timer = window.setTimeout("statusbar("+pos+")",speed);
}
else
{
 window.status= " ";
 timer = window.setTimeout("statusbar(100)",speed);
}
}
}
statusbar(100);
</script>

Now you are done.

The post How To Add Scrolling Text to Status Bar appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.