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.



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.

How to Install and Activate Microsoft Office 2019 For Free

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to know that How to Install and Activate Microsoft Office 2019 For Free. After a series of preview version Microsoft finally came out with an official version of Office 2019. This mean that you can now download and use it without worrying about fatal errors which you have gotten in beta versions before. However, I regret to inform that according to the disclosures, Microsoft Office 2019 only works on Windows 10. So if you are using Windows 8.1 or older versions, you will not be able to install it. Honestly i hate what Microsoft have done to force user to use Windows 10. An i think Office 2016 is still a good choice for casual users at the moment.



How to Install Office 2019 Without a Product Key

After the download process is complete, you will get an image file. Just open it then run the setup file to install Office 2019 on to your PC.

You can download Office 2019 Just Click Here




After Downloading Just Click on Setup.exe button (It's just looks like that)

When you click on it it can show the message that can ask you permission to install Mcirosoft Office to your PC.


This will take a while please wait.


Upon successful Installation you can open any Office Program to verify some basic information.




Just skip the "Enter Product Key" window by click close button at the top right corner.





An as you can see, I am using Office Professional Plus 2019 and the trial license will expire in 7 days. 



How To Activating Microsoft Office 2019 Using KMS License Key 

Step 1: Copy the following code in to a New Text Document.








@echo off
title Activate Microsoft Office 2019 ALL versions for FREE!&cls&echo ============================================================================&echo #Project: Activating Microsoft software products for FREE without software&echo ============================================================================&echo.&echo #Supported products:&echo - Microsoft Office Standard 2019&echo - Microsoft Office Professional Plus 2019&echo.&echo.&(if exist "%ProgramFiles%\Microsoft Office\Office16\ospp.vbs" cd /d "%ProgramFiles%\Microsoft Office\Office16")&(if exist "%ProgramFiles(x86)%\Microsoft Office\Office16\ospp.vbs" cd /d "%ProgramFiles(x86)%\Microsoft Office\Office16")&(for /f %%x in ('dir /b ..\root\Licenses16\ProPlus2019VL*.xrm-ms') do cscript ospp.vbs /inslic:"..\root\Licenses16\%%x" >nul)&(for /f %%x in ('dir /b ..\root\Licenses16\ProPlus2019VL*.xrm-ms') do cscript ospp.vbs /inslic:"..\root\Licenses16\%%x" >nul)&echo.&echo ============================================================================&echo Activating your Office...&cscript //nologo slmgr.vbs /ckms >nul&cscript //nologo ospp.vbs /setprt:1688 >nul&cscript //nologo ospp.vbs /unpkey:6MWKP >nul&cscript //nologo ospp.vbs /inpkey:NMMKJ-6RK4F-KMJVX-8D9MJ-6MWKP >nul&set i=1
:server
if %i%==1 set KMS_Sev=kms7.MSGuides.com
if %i%==2 set KMS_Sev=kms8.MSGuides.com
if %i%==3 set KMS_Sev=kms9.MSGuides.com
if %i%==4 goto notsupported
cscript //nologo ospp.vbs /sethst:%KMS_Sev% >nul&echo ============================================================================&echo.&echo.
cscript //nologo ospp.vbs /act | find /i "successful" && (echo.&echo ============================================================================&echo.&echo #My official blog: MSGuides.com&echo.&echo #How it works: bit.ly/kms-server&echo.&echo #Please feel free to contact me at msguides.com@gmail.com if you have any questions or concerns.&echo.&echo #Please consider supporting this project: donate.msguides.com&echo #Your support is helping me keep my servers running everyday!&echo.&echo ============================================================================&choice /n /c YN /m "Would you like to visit my blog [Y,N]?" & if errorlevel 2 exit) || (echo The connection to my KMS server failed! Trying to connect to another one... & echo Please wait... & echo. & echo. & set /a i+=1 & goto server)
explorer "http://MSGuides.com"&goto halt
:notsupported
echo.&echo ============================================================================&echo Sorry! Your version is not supported.&echo Please try installing the latest version here: bit.ly/aiomsp
:halt
pause >nul




Step 3: Run this Batch file with admin rights.




Step 4: Done! you Office product has been activated successfully. Please check activation status again.




Note: If you PC can not connect to any KMS servers, please try running the batch file again.

At the End you can see this message on dmc file.




I Hope this Article is really helpful for you if you like this article so please share it on social Media and thanks for reading. If you have any question or concerns, please leave your comments. I would be glad to explain in more details.