4TipsBD™ | Exclusive Tricks & Tips

How to add an Estimate Post Reading Timer Plugin in Blogspot Blog - Today Priosoft will share a new widget that is quite interesting. With the help of this plugin, your readers can easily know about your article reading time (e.g How much time it will take to read this article).
Now, before you set up this timer plugin on your blog, make sure to take a look of this widget by clicking on the below demo button. (Just look at the "Title" of this article.)
For those who want to try this plugin on your own blog, simply follow the below simple steps.

• Sign in to Blogger account and go to Blogger dashboard.
• Click the arrow adjacent to 'Go to post list' icon and select 'Template' from the drop down menu. Alternately you can click 'Template' from left navigation menu if you're already within your blog.
• Click Edit HTML.
• Skip this step if jQuery library already installed in your blog. Otherwise Search for (Ctrl+F) </head> and paste (Ctrl+V) the following code before </head>

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></script>

• Search for (Ctrl+F) </b:skin>, copy (Ctrl+C) the following code and paste it (Ctrl+V) before </b:skin>
• Apply the below code just before ]]></b:skin>.

span.right {float:center;display:inline-block;padding:10px 5px;}
.read-time{padding:5px;width:100%;background:#ebebeb;margin-bottom:10px;font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;font-weight:700;font-size:12px;}

• Copy the below JavaScript code and paste it just before </body>

 <script type='text/javascript'>//<![CDATA[
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);
//]]>
</script>

• Now apply the below code anywhere you want to show this widget.

 <div class='read-time'>
<span class='right'><i class='fa fa-clock-o'/> Estimated Post Reading Time <span class='eta'/></span></div>

Conditional tags provide us better control over our templates, allowing us to specify what part of our template appears only under certain conditions.
You may wish to hide a widget or element on one page and display it on the other, need to remove the sidebar on certain pages, or even display buttons on select pages. This is exactly where conditional tags come into play. There are a number of tags available for blogger which, if applied correctly, will help you modify elements of your template

Blogger Conditional Tags

In this tutorial, i will share or update all blogger conditional tags and how to use them properly in your template.

1. Conditional Tag Use

First you need to know how to use them. See below example:

 <b:if cond='ADD_CONDITION_HERE'>
ADD CONTENT HERE
</b:if>

The conditional tags syntax start with <b:if> tags and a cond attributes. Condition need to write as the value of cond attribute. Every opening   <b:if> tag need to be closed with a closing </b:if> tag.

All Blogger Conditional Tags List

Below i have listed all blogger conditional tags. Recently blogger released new condition tags for specific label, i also added this.

1. Homepage
   

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
   ADD CONTENT HERE
   </b:if>



2. Blog Post/Article Page
   

    <b:if cond='data:blog.pageType == "item"'>
   ADD CONTENT HERE
   </b:if>



3. Index Page Index pages include homepage, label page, search page and yearly archive page
   .

    <b:if cond='data:blog.pageType == "index"'>
   ADD CONTENT HERE
   </b:if>



4. Static Pages Static page means blogger page which we created by blogger page section.
   

    <b:if cond='data:blog.pageType == "static_page"'>
   ADD CONTENT HERE
   </b:if>



5. Post and Static Pages
   

    <b:if cond='data:blog.url == data:post.url'>
   ADD CONTENT HERE
   </b:if>



6. Label and Search Pages
   

    <b:if cond='data:blog.searchLabel'>
   ADD CONTENT HERE
   </b:if>



7. Specific Label Change PUT_LABEL_NAME_HERE with your label name. Label name is case sensitive.
   

    <b:if cond='data:post.labels any (l => l.name == "PUT_LABEL_NAME_HERE")'>
   ADD CONTENT HERE
   </b:if>



8. Archive Pages
   

    <b:if cond='data:blog.pageType == "archive"'>
   ADD CONTENT HERE
   </b:if>



9. Specific page/URL
   Change PUT_URL_HERE with any page/post/label etc url

    <b:if cond='data:blog.url == "PUT_URL_HERE"'>
   ADD CONTENT HERE
   </b:if>



10. 404 Error Page
    

     <b:if cond='data:blog.pageType == "error_page"'>
    ADD CONTENT HERE
    </b:if>



11. First Post This is not for a page type. It's used for targeting the posts on multi-post pages like (index,archive,label,search query).
    

     <b:if cond='data:post.isFirstPost'>
    ADD CONTENT HERE
    </b:if>

Applying Conditional Tags

To apply a conditional tag to a content, you need to put your content between the opening <b:if cond..> and closing </b:if>. Example see below

<b:if cond='data:blog.pageType == "item"'> 
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
</b:if>

The above example means that the content will appear only on post pages.

Applying Multiple Conditional Tags

By putting <b:else/> tag, you can add multiple condition. It means that if first condition not work then execute second condition to all of pages. See example below

 <b:if cond='data:blog.pageType == "item"'>
Content-1 EXECUTE IF TRUE
<b:else/>
Content-2 EXECUTE IF FALSE
</b:if>

Above example means that execute content-1 in post page. If it's not post page then execute content-2.

Applying Reverse Conditional Tags

If you want to reverse a conditional tag, you can do it by changing comparison operator from == (is equal to) to != (is not equal to).

 <b:if cond='data:blog.pageType != "item"'> 
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
</b:if>

In the example above, the content will appear all of pages except post page. Remember that you can not apply this method to Label-Search and First Post conditionals.

[info title="Remember" icon="info-circle"]You can place all of conditional anywhere inside the template HTML. It will not work on blogger Layout like (Add a Gadget>HTML/Javascript)[/info]

There are some specific situations when you want to redirect particular website to be opened through HTTP instead of HTTPS. Today i share will share a code which redirect HTTPS to HTTP.To do so you can add the following directives in your website's .

1. Login to your Blogger account, go to Blogger dashboard, click the arrow adjacent to 'Go to post list icon' and select 'Template' from dropdown menu. You can also select the 'Template' from left navigation menu.
2. Click 'Edit HTML'.
3. Search for (Ctrl+F) </b:body> and paste (Ctrl+V) the following code before </b:body>

<script>
var loc = window.location.href+'';
if undefinedloc.indexOfundefined'https://')==0){
    window.location.href = loc.replaceundefined'https://','http://');
}
</script>