How to Enable HTTPS on Blogger / Blogspot - By Wide Info Blog

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - Display Latest Posts from a Specific Label in Blogger. 

Steps for enabling HTTPS on Blogger / Blogspot

Step - 1. Login into your blogger account & select the blog to which you want to enable HTTPS on blogger / Blogspot.

Step - 2. Now click on "Settings" tab & under settings in "basic". Now you will see "HTTPS Redirect" click on the option in front of this & select "Yes". as shown below.

Step - 3. Now save your settings & you are done. Open your blog & see - HTTPS is enabled. 

NOTE :  HTTPS is not available for a custom domain. Friends keep learning & sharing. Visit WideInfoBlog for latest blogs.

Read More »

Display Latest Posts from a Specific Label in Blogger - Wide Info Blog

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - How to Blink Text / Link. 

Now, Steps for Displaying Latest posts from a specific label in blogger.

Step - 1. Login into your blogger account to which you want to Display Latest Posts from a Specific Label.

Step - 2. Now, Go to "Layout" Tab & click "Add a Gadget" where you want to add as shown below. Now add "HTML / JavaScript", copy & paste the following code.

Code : 

<script type="text/javascript">

function recentpostslist(json) {

 document.write('<ul>');

 for (var i = 0; i < json.feed.entry.length; i++)

 {

    for (var j = 0; j < json.feed.entry[i].link.length; j++) {

      if (json.feed.entry[i].link[j].rel == 'alternate') {

        break;

      }

    }

var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs

var entryTitle = json.feed.entry[i].title.$t;

var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";

 document.write(item);

 }

 document.write('</ul>');

 }

</script>

<script src="http://www.MY-DOMAIN.com/feeds/posts/summary/-/Placement Papers?max-results=2&alt=json-in-script&callback=recentpostslist" style="float:right;font:bold 10px Arial;padding:5px 0;"></script>

Note  :  replace 

• MY-DOMAIN   by your blog url
• results=2, by results=5  or more (No. Of Posts)
• Placement Papers   - by your label Name

For latest blogs, keep visiting wide info blog. Keep learning & sharing. Any Question ?? . Ask in Comments.

Read More »

How to Blink Text / Link in Blogger - Wide Info Blog

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - How to backup Blogger posts & Restore from Backup - Part 2. Now We will discuss - How to Blink Text / Link in Blogger.

Steps for Blinking Text / Link in Blogger

Step - 1. Login into your blog & select the blog to which you want to add Blinking text / link.

Step - 2. Add the following CSS to your blog,  See - How to Add Custom CSS to Blogger as shown below.

.blink {

  animation: blinker 1s linear infinite;

}

@keyframes blinker {

  50% { opacity: 0.0; }

}

Step - 3.  Now Go to "Layout" & click on the "Add a Gadget" tab & select "HTML & JavaScript" Now paste the following tag into Gadget & click Save as shown below.

<span class="blink">Wide Info Blog</span> 

You can customise the text according to requirements. 

Note: If you want to blink some url or link use this tag 

<span class="blink"><a href="http://www.wideinfoblog.com" target = "_top">Wide Info Blog</a></span>

Keep learning & sharing this post with your friends. if you have any question, ask in comments.  This blog publishes all tutorials, tips & tricks about blogger. Keep visiting Wide Info Blog.

Read More »

How to backup Blogger posts & Restore from Backup - Part 2

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - How to backup Blogger post & Restore from Backup - Part 1 . In the first part we took a backup of the Blogger Posts. Now we will learn that, how do we restore from a backup file.

Restore from Backup - Steps

Step - 1. Copy & paste your backup file from download folder to Desktop.

Step - 2. Now Under "Settings" Tab, click on the Other tab. Now Under "Import & back up"  click on "Import Content" as shown below.

Step - 3. Now a popup will appear on your screen, click on the "CAPTCHA" to prove that you are not a robot. Now click on the "Import from computer" tab on popup window. Now select the backup file & click "Open" as shown below. It will take few minutes & you are done.

Click On the Image to enlarge. 

Any Question ???. Ask in the Comments. Keep Visiting & Sharing with your friends. For Latest Blogs Visit - Wide Info Blog.

Read More »

How to Add a Google Map to your Website / Blog with Simple HTML Only

Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed -  "How to Disable Comments from all Posts & Pages in Blogger" .
 Now, In this article we will discuss - How to Add a Google Map to your Website / Blog with Simple HTML Only. Now, 

Steps for Adding Google Maps to your Website / Blog:

Step - 1. Login into your blogger account & select the blog to which you want to add google map. Generally map is added to pages, but you can also add to posts.

Step - 2. Now go to your page to which you want to add google map & click "HTML" tab. Now Copy & paste the below code & publish your page - as shown in the screenshot given below.

Code : 

<!DOCTYPE html>

<html>

<head>

<script src="http://maps.googleapis.com/maps/api/js">

</script>

<script>

var myCenter=new google.maps.LatLng(28.613939,77.209021);

function initialize()

{

var mapProp = {

  center: myCenter,

  zoom:10,

  mapTypeId: google.maps.MapTypeId.ROADMAP

  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({

  position: myCenter,

  title:'Click to zoom'

  });

marker.setMap(map);

// Zoom to 9 when clicking on marker

google.maps.event.addListener(marker,'click',function() {

  map.setZoom(9);

  map.setCenter(marker.getPosition());

  });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

<div id="googleMap" style="width:500px;height:380px;"></div>

</body>

</html>

Note : you can customize this google map according to your requirements.

1. Change the latitude & longitude according to your location by replacing "LatLng(28.613939,77.209021)". Find your latitude, longitude Click Here

2. Change zoom level. Find "zoom:10," in above code & change according to requirement.

3. Change MAP Type. Find "MapTypeId.ROADMAP" default is "ROADMAP" but you can change this too 

• SATELLITE (photographic map)
• HYBRID (photographic map + roads and city names)
• TERRAIN (map with mountains, rivers, etc.)

4. Change width & height. Find "width:500px;height:380px;" & change these parameters according to requirements.

Read More »