Blogger Allows Custom domains to use SSL Certificate! HTTPS 2018

Hello, Friends Today we are sharing one of the biggest NEWS of 2018 for blogger users. Last year blogger started to allow Blogspot blogs to use SSL certificate on their blogs. But that support was limited to Blogspot users and they promised to add the support for custom domains too. Now blogger has fulfilled their promised and has now supported SSL/HTTPS for custom domains too. 

With just two ticks your blogger blog will migrate to HTTPS secure version and also Google said HTTPS is also a factor for SEO considering this it will little boost your site SEO and SERP.

Let's discuss the advantages of using it on our blogs.

Advantages of SSL Certificates Why to use it in Blogs?

Blogs will become more secure against the vulnerabilities:
                           Yes, Right Blog will become more secure as a secure connection between visitors and blog will establish when a user opens a post on your blog the connected will be encrypted.

HTTPS is one of the factors of SEO:
                  Like we said above adding SSL certificate will boost your site SEO and improve your blog SERP ranking on Google, Bing and Other Search Engines compare to non-https blogs.

Your Blog will now become a professional blog:
           Yes you heard right your blog will become a professional blog as it will have a valid SSL certificate and all the security measures will be present in the professional and paid blogs.

SSL Certificate is Free so why not to add?
          Blogger is giving us this SSL certificate Free without charging any penny so why not use it and get all the above benefits. From last year we were seeing other platform users like Wordpress etc they got so many benefits so now Google Started to give this similar benefits so why not use it.

Now let start adding the HTTPS to our sites this process involves 2 ticks :P yes this is so simple, easier than chopping slices of apple.

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: Go to the basic of Settings Then you will see a separate HTTPS Section as shown in the image below.

STEP 3: Now change the HTTPS Settings to Yes as shown in the image above and follow it. Click on the image to enlarge it and see clearly.

STEP 4: Now change the HTTPS Availability Settings to Yes. Now it will take few minutes for the process to complete.

STEP 5: waiting few minutes after switching on the HTTPS Redirect switch the HTTPS redirect to yes this will force to redirect non-https pages to https. 

Read more »

JavaScript shortcuts DOM Element Helper Functions for fast coding

Hello! Friends I was working on a website and was just using JavaScript, not any library as it was the demand. So I thought I should create a helper function that could make our code shorter like for example I have a div element with the ID of the container. I need to select it and assign it to a variable.

Normally we have to select it like this:

Example:

var container = document.getElementById("container");

If I need to select more elements with the id's then the same code will be repeated just the difference in id's

So to make it simple like in JQuery we select the same Id in this way:

Example:

var container = $("#container");

See how JQuery saved our time but here if we don't want to use any library then what? that's why I have created a helper function. That will work similar to jquery or easier then Jquery.

This is the function we have created a helper function to get the id of the element.

function $(h){    var idSelector = document.getElementById(h);    return idSelector;}

Here we have created a function with the name of $ (dollar) and it accepts a parameter.

In this function, we have assigned a variable idSelector and given the value of document.getElementById(h);

After declaring, it will return the variable.

Now after using this function, we can get the Id of the element similar to jQuery

Example: if you have a div with the id of a container:

<div id="container">Hello, All blogger tricks</div>

Now to get the id we just need to call the above callback function:\

var content = $("container"); // Here we are calling the function name i,e $ and the parenthesis and the id name.

We will update this post as we create more helper function to get elements by tag and class name also.

Read more »

Automated Latest Posts News Ticker for Blogger

Today I will show how you can add Automated Latest Posts News Ticker to your blogger blog. WordPress blogs can add these things easily by uploading the plugins but in blogger we have to manually add code for it. So this widget will show the 10 [can be increased or decreased] latest posts of your blog in a ticker box.

This ticker is fully automated and you just have to add URL of your blog and it will update the new posts automatically. The live demo of this widget can be seen by clicking the below Live demo button. This ticker will be below the two navigation bars.

Live Demo

Once you have seen the demo we can move on with the instructions of how you can add this news ticker to your blogger blog.

Editing HTML of your blog

First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for  <div id='content-wrapper'> and add the given code just above it.

Or

Adding The Widget in the Blog:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4: After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

STEP 5:  Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

<div style="width:970px;height:20px;position:relative;">
<script type="text/javascript">
var blog_url = "http://www.allbloggertricks.com";
var latest_post = 10;
var scrolling_speed = "8";
var close_button = false;
var info_text = true;
</script>
<script src="http://files.allbloggertricks.com/abt-ticker.js"></script>
</div>
<br />
<br />
<div style='clear:both;'/>

Settings

Change  the following according to your needs -

var blog_url - Add your blog URL by replacing http://www.allbloggertricks.com
var latest_post - The number of posts link you want to have in the ticker
var scrolling_speed - Increase/Decrease the number to increase/decrease scrolling speed.
var close_button - If you want to add close button in the ticker
var info_text - If you want to remove/keep the text "Latest Articles" and RSS icon.

After making the changes save the template.

You are done now. Now you and your visitors can see this Automated Latest Posts News Ticker in your blogger blog.

Read more »