Have you lot e'er sentiment to exhibit the accurate fourth dimension of postal service reading on your blogger template? Do you lot know that nosotros tin exhibit the blogspot postal service reading fourth dimension on the page from how long the visitor is reading page or surfing your website or blog.Today nosotros are hither alongside This unique flim-flam which is developed past times Michael Lynch too customized past times Bloggersstand.However displaying fourth dimension of visitor on postal service is non then mutual too you lot bring non seen this.With the attention of this plugin the visitors nosotros teach out to know how much fourth dimension they are statying on your webpage or how much fourth dimension they took to read your article.So Must endeavor this trick too heighten the niche of your blogger website or blog.
This widget plant alongside each too every blogger template version,for this widget you lot must bring fontawesome stylesheet installed inwards your blogger template directory.We bring used Javascript for this gadget too for styling roughly CSS.So to select handle of this tool/plugin follow the steps mentioned below.
How to install javascript to display the fourth dimension of reading on blogger post
Installation Steps:
Step 1. Log inwards to your Blogger describe of piece of occupation organisation human relationship too Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. First Search for <head> by Pressing Ctrl+F keys too Copy the below Font Awesome Icons stylesheet too glue it simply below the <head> tag.
Step 3. First Search for <head> by Pressing Ctrl+F keys too Copy the below Font Awesome Icons stylesheet too glue it simply below the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
If Font awesome Stylesheet is already installed inwards your blogger template,you tin skip the higher upwardly step.
Step 4. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 5. Copy the below CSS code too glue it simply earlier the ]]></b:skin> or </style> tag.
span.right {float: right; display: inline-block; padding: 3px 6px;}Step 6. Now Copy the below javascript code too glue it simply above/before the closing </body> tag.
<script type='text/javascript'>Step 7. Now Copy the below HTML code too glue it within your template where e'er you lot desire to display the postal service reading time,However ideal house for this widget is below the postal service title.To add together below postal service championship honour this <span class='post-author vcard'> and re-create the below HTML too glue it simply before <span class='post-author vcard'>.
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed nether the MIT license
// Customized By www.Bloggersstand.com
!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 chemical component subdivision 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);
$(function(){$('.post-body').readingTime();});
//]]>
</script>
<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>Step 8. Save your template..Done !
No comments:
Post a Comment