Install Beautiful Download Box Button with Counter

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out latest Article are about to Install Beautiful Download Box Button with Counter in Blogger Post. Maybe you often see the download button which will automatically give a countdown time when we click and after the time is finished it will usually open automatically to the page or directly download the file provided by the site. So even with tips on Installing the Download Box Button with Counter. I will share this concept more or less the same.



The reason why installing the download box with the counter is one of them is to reduce the rate of Bounce Rate of our blog when visitor visit the page.



Before adding this widget make sure that on your blog you have Fontawesome installed if not then please add this code before </head> or   &lt;/head&gt;&lt;!--<head/>--&gt;

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>


First of all Open Blogger> Click the Themes menu, Eidt HTML and add this CSS code just before </head> or   &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
 After that just add this below code just before </body> 

<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script>
Edit the writing on the code that is marked, edit also the 1 - 10 number 10 means that the countdown time needed is 10 seconds.

After these just save your blogger Template.

Now the Next step is that to add the caller Download Box, add the code in new blog post just for checking that the code worke fine or not.

Add This below code in new post HTML Tab.

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
File Name Here
</div>
<button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> download</button>
<a href="https://www.blogger.com/linkdownloadx" id="downloadx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i aria-hidden="true" class="fa fa-user-circle"></i> GetWebInfo.Com </span> <span class="file-size"> <i aria-hidden="true" class="fa fa-file"></i>
 Your File Size</span>
</div>
</div>
<div class="catatan-downx">
Detail of The File .
</div>
</div>
Re Edit the posts marked with your posts and links. Replace linkdownloadx in href="linkdownloadx" to link your destination.

You can change Red highlighted lines with your own desire detail that can you like to be show on to your blog post. I hope this article is really work for you if you like this article so please share it on Social Media thanks for reading.

Vienna Lite 2 Responsive Blogger Template Free Download

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Blogger Premium Template that can be free for you. I will tell you that How Can You Download Vienna Lite 2 Responsive Blogger Template for Free. Vienna Lite responsive Blogger Template is the 2nd version of the Vienna Lite template.


 In the making stage this template does not require a long time because the base already exists in the Vienna Lite template which is distinguished slightly on certain elements. The features are removed so that the process of loading blog pages becomes faster.



This is a high speed blogger template here i will check using Google Page Speed Insight for mobile getting a score of 94 and the desktop getting a score of 100.


And in The GTmetrix score can be checked in the image below.



Vienna Lite 2 Responsive Blogger Template
GetWebInfo.Com 42 KB
Vienna Lite 2 Responsive Blogger Template Free Download.

How to Install a Newsticker Widget on Blogger

Hello and welcome to GetWebinfo.Com. Here on this post you can be able to find out Latest Newsticker Widget on Blogger. This time i will share a great tip with you that How to Install a Newsticker Widget on Blogger. I Share the newsticker widget because there is a request from Blogger friend and incidentally yesterday i updated the origin SEO pro template, so there is no harm in me i share one of the Pro features of the template because the source code blog demo feature intentionally open for resins for posting this.

Hello and welcome to GetWebinfo.Com. Here on this post you can be able to find out Latest Newsticker Widget on Blogger. This time i will share a great tip with you that How to Install a Newsticker Widget on Blogger. I Share the newsticker widget because there is a request from Blogger friend and incidentally yesterday i updated the origin SEO pro template, so there is no harm in me i share one of the Pro features of the template because the source code blog demo feature intentionally open for resins for posting this.

The Main function of this widget is to display a list of some of the latest articles with slide animations, almost the same as the recent post widget, but only in the form of the title of the post. Okay just go ahead, Following are the steps on How to Install a newsticker Widget on Blogger.

Install NewsTicker Widget on Blogger

First of all open Blogger> Click the Theme menu and the Edit HTML button> Then add this CSS code before </head>
<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>
Next Step to add the code just below right before </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.getwebinfo.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
Note: Change the code marked with your blog address and change the number 10 according to the number of posts you want to display.


Well, then add the code below freely anywhere as long as it's still in the body between <body> and </body> as in the previous post.

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>News Update<span class='breakhidden'/></span>
      <div id='recentbreaking'>Loading...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
            var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
            var now = new Date();
            document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;,&quot; + &quot; &quot; + now.getDate() + &quot; &quot; + monName[now.getMonth()] + &quot;&quot;);
         </script>
      </div>
   </div>
</div>
<div class='clear'/>



After doing these all step you can save your Blogger template and see the result. I Hope this widget work really well on to your template. Hope you like this article and thanks for reading my article.

How to Add Related Post Widget in Middle of the Post in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this Post you can be able to find out Latest Article are about Related post Widget in the Middle of the post. On this post you can easily learn that How to Add Related Post Widget in Middle of the Post in Blogger. Every blogger owner who use blogger want to display a number of related post article according to the label below the article either in the from of links and thumbnails or links only. But it's a little different than before, here i will give a tutorial on How to install related post in the middle of the post.



Widgets related post in the middle of this post also have the same function as related posts which are usually under posts, which are taken from certain labels that have been specified in certain articles.
The related post widget allows visitors to explore other articles on certain blogs. Thus page views on blogs will also increase.

Before doing this method please make sure you can backup your Blogger HTML theme.


Step 01: First of all Open Blogger> Template> Click the Edit HTML button> Add the code below before the tag </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
Step 02: Now you can add the CSS code just below ]]></b:skin> or </style>
/* Related Post Style 1 GetWebInfo*/
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
First Style of Related Post Widget 



/* Related Post Style 2 GetWebInfo*/
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
Second Style of Related Post Widget 


/* Related Post Style 3 */
.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}
.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}
.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#fff;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
Note: Make sure on your blog you have installed Font Awesome so that the icon can appear.

Step 03: Next step is that search for this snippet <data:post.body/> and replace it with the code that can given below.

Note: In the template you will find this code  <data:post.body/> many time it's depend on to your template, But i will recommend you to replace this code with the second one that you find in to your template.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
 Step 04: Now you can Save your Template and you can all don.

I Hope this article is really helpful for you and if you like this article so please share it on social media with your friends. Thanks for Reading.

Stylish Popular Post Widget with Star Rating for Blogger

Hello and welcome to GetWebInfo.Com. Here on this post you can be able to find out latest Article are about Popular Post Widget. How to Make a Stylish Popular Post Widget with Star Rating for Blogger. This time i will give a trick on how to add a star rating icon in the Popular Post widget with Font Awesome.



The addition of the star rating effect was inspired by the Popular Post widget on the WordPress platform which serves to display the voting results given by visitors to certain articles. Well for those who want to try this trick so that the Popular Post Widget looks more attractive please follow these Simple steps.



Step 01: First of all add Font Awesome because this widget supported with this Font Awesome widget. You can add the following CSS link above </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 02: After adding font awesome just Add the Code below just before ]]></b:skin> or </style>

Style 1
/* Popular Post by GetWebInfo */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}




Style 2  

/* Popular Post by GetWebInfo */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

 Now Save your Template.

Step 3: After adding this code to your Blogger HTML. Now go to Theme Layout and In Side bar Menu just add a new widget (Popular Widget) and Save your Template.

I Hope this article is really helpful for you if you like this Article so Please share it on Social Media with your Friends thanks for reading.

How to Install Pop Up Congratulations on Fasting in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out latest Article are about How to Install Pop Up Congratulations on Fasting in Blogger. Not feeling the month of Ramadan in 2019 has arrived, the holy month is full of blessings we will soon be entering. Ramadan is one of the most eagerly awaited moments by Muslims around the world. Because at this time there are many benefits and special things that are always felt by Muslims. So when Ramadan arrives this special month will always be welcomed with joy.



To welcome this blessed holy month Arlina Design will give tips on how to put on a congratulatory pop up speech. The way it works is quite simple, a pop up message will appear when we open a page in the blog that is equipped with a close button to close the message. For those who are curious, Let's follow the method given below.




How to Install PopUp Congratulations on Fasting

Step 01: First open Blogger> Theme Menu> Click the Edit HTML button and add the code given below just before </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

Step 02: After adding this code now you can add below code just before </body>

<b:if cond='data:view.isHomepage'>
<div id='arlinapuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>Close</a>
<div class='puasa19'>
   <p>Happy Fasting</p>
   <p><span class='ramadhan2019'>Ramadhan Kareem 1440 H</span></p>
   <p>Forgive Me Body and Soul</p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if>
After this just click on Save button and see the results on your blog.




One Time Even by Adding Cookies

If you want to add this code and want to display this message only once in the browser so use this code...

Same Method Just Add code below before </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes zoomIn{from{opacity:0}50%{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#myModal{display:none}#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:1001;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 1s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#336d9e;color:#fff}#arlinapuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}#hiding{background:#3979b0;position:absolute;bottom:20px;right:78px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:20px;padding:0 10px;line-height:28px;min-width:28px;transition:all 0.3s}#hiding:hover{background:#336d9e;color:#fff}.matilampuku{position:fixed;top:0;background:rgba(0,0,0,0.35);left:0;right:0;bottom:0;margin:0;z-index:1000;animation:zoomIn 1s}
@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>
 Then After this please add this code below before </body>


<b:if cond='data:view.isHomepage'>
<div id='myModal'>
<div id='arlinapuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='javascript:void(0);' onclick='document.getElementById(&apos;myModal&apos;).style.display=&apos;none&apos;;return false;' title='Close this message'>Close</a>
<div class='hidemodal' id='hiding'><span title='Do not show this message again'>&#215;</span></div>
<div class='puasa19'>
   <p>Happy Fasting</p>
   <p><span class='ramadhan2019'>Ramadhan Kareem 1440 H</span></p>
   <p>Forgive Me Body and Soul</p>
</div>
<div class='ketupat duaa'/>
</div>
<div class='matilampuku'/>
</div>
<script type='text/javascript'>
//<![CDATA[
function setCookie(e,i,o){var n=new Date;n.setDate(n.getDate()+o);var a=escape(i)+(null==o?"":"; expires="+n.toUTCString());document.cookie=e+"="+a}function getCookie(e){var i,o,n,a=document.cookie.split(";");for(i=0;i<a.length;i++)if(o=a[i].substr(0,a[i].indexOf("=")),n=a[i].substr(a[i].indexOf("=")+1),(o=o.replace(/^s+|s+$/g,""))==e)return unescape(n)}var Arlina_COOKIE="cookiearlina",hideMe=document.getElementById("myModal"),cookie=getCookie(Arlina_COOKIE),cookiearlina=cookie||hideMe.style.display,hiding=document.getElementById("hiding");hiding.onclick=function(){setCookie(Arlina_COOKIE,cookiearlina,100),hideMe.style.display="block"===cookiearlina?"none":"block",cookiearlina=hideMe.style.display},hiding.onclick();
//]]>
</script>
</b:if>
After this Just Save your Setting and you can all don.

I hope this article is really help full for you. If you like this article so please share it on social media with your friends. Thanks for reading.

How to redirect Blogger 404 Error (Page Not Found) to Homepage

Hello and welcome to Getwebinfo.Com. Here on this post you can be able to find out that How to redirect Blogger 404 Error (Page Not Found) to Homepage. When a user goes to a nonexistent URL on your blog or website Blogger will display this error 404 (Page Not Found) message at the top of your blog post area "Sorry the page you were looking for in this blog does not exist"



Hmm this probably not the best first impression you'd want to give a potential reader. Before the user hits the Back button or closes the browser's window/tab and disappears forever, you might want to redirect the page to your homepage where the chances of him/her staying and read more articles that can will be post on to your blog or website.




One of the way to redirect is to use meta refresh but the problem with this method is it breaks navigation (it wont go back to the page you came from when you hit Back button). The better method is by using JavaScript and i think i have found the simplest way to do this on to my Blogger blog.

It is wise to include these two components in the redirection process:


  • Redirection message to inform that the page doesn't exist and the user is about to be redirected. Failure to do so will make the user feels cheated when the searched information is nowhere to be found on the landing page (homepage). Here's an example for you:


(" Sorry, the page you were looking for in this blog does not exist. You will be redirected to homepage shortly")


  • Tim delay - to provide sufficient time for the user to read the message prior to redirecting.

Based on the above example. this is how you add the new message and the redirect script to your blog.

Step 1: Go to Setting> Search preferences> Custom Page Not Found (Under Errors and Redirections).

Step 2: Click Edit and Paste this Code given below.

Sorry, the page you were looking for in this blog does not exist. You will be redirected to homepage shortly.
<script type = "text/javascript">
//Blogger 404 Redirect v1.0 by GreenLava(Getwebinfo.com)
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000);
</script>
 You can paste it like that show in picture








(Note! you can change the red line with your own demand text)


  • The tops is the message. You are free to change it.
  • To redirect to a page/ Site other than your homepage, replace pathname with href, and / with the Url of the page or site.
  • The number 5000 is the delay in milliseconds. It's means your not page found message will be redirect on to your website home page in 5 seconds. you can change it to whatever value that you want to appropriate. Zero means immediate redirect.
Step 3: Now can save your Changes.

To check that your 404 Page work properly just type in address bar of your browser (www.yourblogger.com)

I hope you like this article and if you like this article so please share it on social media to support us. Thanks for visiting.

How to Show Post Excerpts With Thumbnail in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article are about How to Show Post Excerpts With Thumbnail in Blogger. You could do this by manually adding jump links while writing posts, but this is a way to automatically add a "read more" button to each post on your blog. It can make your homepage appear neat, load faster and can help help readers easily scan through multiple posts and see what grab their attention. 



Change Post Layout / Show Post Excerpt / Summary with Featured image

Step 01: Go to Template > Edit HTML and find </head>, paste the following right above it.

<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
} }
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<div class="xopostimg"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height +'px"/></div>';
summ = summary_img;
}
var summary = imgtag + '<div class="xopostsummary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Step 02: Now find <data:post.body/>, skip the first one which is for mobile and go to the next. You'll see something similar to this.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
 <!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
<div class='post-footer'>

Step 03: Now Replace <data:post.body/> with the code given below. If you have two <data:post.body/> in your template within this section, you may need to replace them both.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>"</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Step 04: The image is wrapped with class xopostimg and text is wrapped with class xopostsummary. You can use these selectors to style that section further in the CSS.

/* Style Post Excerpt - XOMISSE */
.xopostimg { /* Style Post Excerpt Image - ADD CSS BELOW */
}
.xopostsummary { /* Style Post Excerpt Text - ADD CSS BELOW */
}
4. To style the read more button to suit your blog design go to Template > Edit HTML and find ]]> </b:skin>. Add the following code above ]]> </b:skin>
/* Style Read More Link - XOMISSE */
.jump-link { /* Style Entire Jump Link - ADD CSS BELOW */
}
.jump-link a { /* Style Jump Link Text Link - ADD CSS BELOW */
}
.jump-link a:hover { /* Style Jump Link Text Link On Hover Over - ADD CSS BELOW */
}

Add your styling in between the brackets. Check out this link for more ways to customize the read more link.

To change the read more text link you'll need to edit the section of the above code that looks like.

<div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>" </a></div>

Check out this tutorial to customize the read more jump link on blogger. To use an image instead of text -  replace read more "<data:post.title/>" with the image code as shown in the this tutorial.

Step 05: To change the height and width of the thumbnail you can alter the numbers in this section of the code.

img_thumb_height = 200;
img_thumb_width = 300;
If your thumbnails image are looking a little squished, alter the values below.

summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300; 
To change the height and width of the summary & images. You can also make the images full width and automatic height.

Step 06: You can make some adjustments to the tutorial to change the style or layout (image size, image position, read more button style, read more button positions, etc.) or if you don't want to do it yourself or aren't sure what to change, check out our custom coding service to get this style, a featured post layout or a Pinterest Style grid layout installed.