Beautiful Popup Email Subscription Widget For Blogger

Hello and Welcome to GetWebInfo. Here at this post you can learn about the widget's amazing popup email subscribe widget for. Many popup email subscription widgets for Blogger published by several blogs including BTNT, you can check the previously published popup subscription widget on BTNT.




This is the main reason for designing this widget. All widget takes the load time and page size as a result of publishing and reducing performance before using jQuery function.


Add an amazing and elegant popup email to Blogger Add widget


Adding CSS code

Step 01: Edit Template> HTML on Blogger Dashboard

Step 02: Click within the html editor CTRL + F and a search box appears on the top box of your Blogger HTML code.

Step 03: Find Now]]> </ b: Skin>

Step 4: CMS code below the space 

/***** OnClick PopUp Email Subscription Form CSS By Getwebinfo.com*****/
#popup-wrap .popup-button { background: #A1362A url("http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #70261D; }
#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }
#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }
#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

Step 05: Now Save your Template

Adding Email Subscription From HTML Code


Step 01: On the Blogger Dashboard go to Template>Edit HTML Button

Step 02: Click inside the HTML Editor Press CTRL+F

Step 03: Now Search for </body>

Step 04: Above that place the following HTML Code

<div id="popup-wrap">
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger'></label>
  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'></label>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'></label>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class="popup-title">Subscribe Via Email</span>
                    <span class="popup-content">Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='YOUR_SUBSCRIBE_ID'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your email...'/>
                        <input id='subbutton' title='' type='submit' value='Sign up'/>
                    </form>
                    <br />
                    <span class="popup-footer">Your email address is safe with us!</span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->
Step 05: In the Above HTML code Search for  YOUR_SUBSCRIBE_ID and replace it with your Feed Burner User Name.

At the End your Template Setting and You can all don. I Hope this article is really helpful for you if you like this article so please share it on social media thanks.



How to Add Facebook Mobile Comment Form to Blogger BlogSpot Mobile View

Welcome to GetWebInfo. Here you will learn about this post here as to how to add the Blog Mobile Comment form to Blogger BlogSpot Mobile. If you have customized custom Blogger Mobile Template, you can customize your blog's mobile view as custom. You can add and remove what you like and remove as much as you want to know about it.


To get started I recommend you enable the Custom Blogger mobile template. If you do not know how it works in your blogger blog account and go to "Template" click the "Mobile" icon. Select "Show Mobile Template on Mobile Devices". Select "Custom" from the drop-down and save your template.

Step 01: Find your Facebook app ID

Step 02: If you do not know how you can find your Facebook App ID and you may be able to find your Facebook app ID.

Step 3: Next you have to log in to backup your login to Blogger Dashboard and go to <Template> Edit HTML".

Step 04: Click inside the HTML and use CTRL + F and find the body

Step 05: Just love it only above <div id = 'fb-root' />

Step 06: Copy the code below and paste it just below <div id = 'fb-root' />
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1569785879914041&version=v2.0″;
  fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
Now your template HTML code box is looks like that

Step 07: Now just Save Your Blogger Template

Step 08: Click inside the HTML and Use CTRL+F to find out this code is given below

<b:if cond=’data:top.showMobileShare’>
Step 09: Carefully find the ending </div> as seen in the screenshot below



Step 10: Directly Below it copy and paste the code below </div>


<p align=’center’>
<span style=’font-size: 15px;font-weight:bold;’>Facebook Comment Box </span>
</p>
<div style=’text-align: center;’>
<fb:comments expr:href=’data:post.url’ expr:title=’data:post.title’ expr:xid=’data:post.id’ mobile=’yes’ numposts=’10’/>
</div>
Step 11: Now finally Save your Blogger Template and you can all don. Just check first time that every thing is working properly to your Blogger template before your don this work.




How To Make Your Blogger Menu Float While Scrolling

Hello and Welcome to Getwebinfo. Here on this post you can learn about that How To Make Your Blogger Menu Float While Scrolling. The most common topic on Google Search Engine this is and i am decide to create a post for all of you and you can easily use this method to solve your this problem. This can be super handy and add to your user experience since the visitor won't have to scroll all the way back up to the top of the page to see your menu links. 





How to Add Floating Menu While Scrolling

First Method 

The fist and easiest way to do this is to simply position your navigation menu at the very to of the page and allow it to stay in a fixed position as the user scrolls down, keeping your menu at the very to of your page will avoid having to add any JavaScript, so if you aren't comfortable with editing your blog's code then this is the method for you Here is an example for you.

Make sure you have added the Blogger "Pages" widget to one of the header areas in your layout page (either the Cross-Column or Cross-Column2 widget spaces). Then follow the steps below

Step 01: Login to Your Blogger Account and Click on Customize Pages

Step 02: Select Advanced from the side menu then Add CSS

Step 03: If you've already inserted custom CSS in this box scroll down to the very bottom of your code

Step 04: Add the following CSS code to the box

/* Blogger floating menu by getwebinfo.com*/
#navbar {display:none}
#PageList1 ul {
position:fixed;
top:0px;
z-index:1000;
background-color:#ffffff;
width:100%;
max-width:1100px;
}
.content-inner {
margin-top:30px;
}
Step 05: Change the "max-width" variable to the overall width of your own blog content area.

Step 06: The "margin-top" variable should be the height of your navigation menu. You can leave it as is if you haven't modified your blogger pages menu.

Step 07: You can also change the background color variable to a hex color code of your choice. Right now it is set to white.

Second Method 

The Second Method is for menus that are positioned below the header image or not positioned directly at the top of the screen.  For blogs designed this way, You'll want the menu to say in its desired position at first and then float in place as the visitor scroll past where it's settled. Here is how to achieve that:

Step 01: Login to Your Blogger Account and Click on Customize Pages

Step 02: Select Advanced from the side menu then Add CSS

Step 03: If you've already inserted custom CSS in this box, scroll down to the very bottom of your code

Step 04: Add the following CSS code to the box

/* Blogger Floating Menu by getwebinfo.com */
#navbar {display:none}
#PageList1 ul {
height:30px;
background-color:#ffffff;
width:100%;
max-width:1100px;
z-index:1000;
}
Step 06: Now just Save your Blogger Template

Step 07: Click on Edit HTML button of your blogger

Step 08: Right before </head> in the code, paste the following code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<!--Blogger Floating Menu by Get Web Info.com-->
<script type='text/javascript'>
//<![CDATA[
$(function() {
        var nav = $('#PageList1 ul');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                   });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});
//]]>
</script>

Step 09: Save your Changes and view your page Now.

Note: If you have problems with the menu not doing what it should, it could be matter of having duplicate jQuery scripts in your blog code. Try removing the first line of the code (show again below and save)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

I Hope this article is really helpful for you and if you like this article or this article is really help you out so please share it to your social media accounts thanks.





How to Place Google AdSense Ads below Post title of Blogger Mobile View



Hello and Welcome to GetWebInfo. Here on this post you will be able to learn about that How to Place Google AdSense Ads below Post title of Blogger Mobile View. If you view this blog on a mobile device you are likely to notice AdSense Links ad below the post title. I decided to implement this placement when i discovered that those links ads display on almost all mobile browsers unlike the non-links Ads which all times will be blanks on some mobile screens.






How to Get Started With This Topic

Step 01: Sign in to Your Google AdSense Account 

Step 02: Click On "My Ads" tab and Click on "New Ad Unit"

Step 03: Give it any name and under "Ad Size" Select "Links Ads" Only

Step 04: Click on 200×90 Verticle X-Large Size

Step 05: Customize "Text Ad Style" as desired (Not Much Compulsory)

Step 06: Click on "Save and Get Ad Code"



Step 07: Now Log In to Your Blogger Blog

Step 08: Click on "Template" > "Edit HTML"

Step 09: Click Inside the HTML and use "CTRL+F" to find the code below

Step 10: Find This Code Given Below

<b:includable id=’mobile-post’ var=’post’>
Step 11: Once you find the code scroll down gently till you see the code below:

<div class=’post-body entry-content’ expr:id=’&quot;post-body-&quot; + data:post.id’ itemprop=’articleBody’>

Step 12: Paste your Google AdSense Ads Code directly Below the code above

Step 13: Now Just Save your Template


Note: If you want to Customize your Placement You can use this format given below

<br>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
 <div class=’toppostadmobile ‘ style=’text-align:center;’>
PASTE PARSED CODE HERE </div>
</b:if>
 </br>

Using the Code above will force the links Ad appear in the center below post titles on Post Pages onlye. View one of your blog posts on Mobile view using default browser of your mobile device and you should see the AdSense links Ad below the post title on Post pages.

You can Access the Mobile view of your Blogger Post on PC by adding ?m=1 at the end of the URL.

Try it and let me know if it works for you.

This implementation will only display the AdSense links ad on mobile view of your blog and not on desktop view.




How to To Create Social Content Locker In Blogger BlogSpot



Hello and Welcome to GetWebInfo. Here on this post you can learn about that How to To Create Social Content Locker In Blogger BlogSpot. How many people are using social networking websites to boost their website's Traffic? There are tons of professional Bloggers who entirely depends on the Social Traffic. However, it is extremely difficult to get social exposure quickly. Though there are some widgets which help increase social followers but not enough. Do you use multiple social sharing widgets on each and every page of your site? However still your social exposure is on the lower side. Actually the problem is that people lover your content.





How to Install Content Locker Is Blogger? 

The Steps are extremely straightforward that even a small kid can follow it. There is no need of learning any HTML coding because all we have to do is to copy paste the coding. Now you can just follow these steps to install social widget locker in blogger.


Step 01: Go To Blogger.com > Template> Edit HTML> Proceed

Step 02: Search for </head> just and above it paste the following CSS coding\

<link href='http://mybloggerlab.com/StyleSheet/lockercss.css' rel='stylesheet' type='text/css'/>

Step 03: After pasting the coding save the template and proceed to next step

Now where you want to add a social content locker in his specific article then you can follow these steps to add Social Content Locker in Blogger Blog.

Step 04: Go to Blogger Layout

Step 05: Select the HTML Tab from the blogger post editor and paste the following coding

<article id="default-usage">
<div class="to-lock" style="display: none;">
     
<!--Hidden Content Starts (You can Use HTML BELOW)-->

<div style="text-align: center; margin-bottom: 20px;">
<img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
Add Your Hidden Text Here
</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mbllock.js"></script>

<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://www.getwebinfo.com",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/getwebinfo",
appId: "418044881593120"
},
google: {
url: "http://www.getwebinfo.com"
}
});
});;;;
     
</script>

Customization of the Widget 


  • For Facebook Replace This URL with your own http://www.facebook.com/getwebinfo
  • For Twitter you can Change This URL with your own http://www.getwebinfo.com
  • For Google Plus you can Change this URL with your own http://www.getwebinfo.com
  • Do not forget to add your Facebook App ID Other wise the Faceook Like button will now work properly. Replace this App ID code 418044881593120
  • Replace Add_Hidden_Image_Here with your own Image that you want to Hide
  • Replace "Add Your Hidden Text Here" with the text that you want to hide from user 
I Hope this article is really helpful for you and if you have any problem about this article so please content us we can solve your problem as soon as possible.



How To Create Sticky Floating Navigation Menu in Blogger





Hello and Welcome to GetWebInfo. Here on this post you will learn about that How To Create Sticky Floating Navigation Menu in Blogger. Are you Tired of your laborious Navigation bar and would desire to refurbish it with something that could amuse your visitor? Navigation bar is deliberated as the core element of a website because it represents the complete outlook of a website. Navigation bar has most prominent information about that helps users to navigate throughout the website. As we all are well aware that Navigation bar appears at the top of a website.




Why to Add Sticky Navigation Bar in Your Site?

It is extremely frustrating when we have to scroll back to top in order to navigate to other pages. Sometimes a person gets so annoyed that without any further delay, he leaves the website. However, by adding a scrolling Navigation bar it would allow users to take a long bread and read your content without facing any problem whatsoever.


How to Add Sticky Navigation Bar in Blogger? 

In Order to implement this tutorial there is no need to learn anything just follow these simple and easy steps and you can be able to add sticky navigation bar in to your blogger blog.

Step 01: Log in to your Blogger Dashboard

Step 02: Go to Template and just Click On Edit HTML button

Step 03: Type from your Keyboard CTRL+F and a search box has been appeard to your blogger blog HTML side.

Step 04: In the template Search Style sheet just type ]]></b:skin> tag and just above it paste the following CSS coding. To Change the color of Hover effect then from the following coding replace it with this code color #1bc4de.


/*--GetWebInfo Sticky Navigation Bar--*/
#MBL_wrapper .MBL_social_wrapper
{
margin-top: 15px;
}
#MBL_wrapper
{
width: 100%;
margin: auto;
background: #fff;
height: 50px;
border-top: 5px solid #2c2f32;
border-bottom: 1px solid #EBEBEC;
-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
position: fixed;
z-index: 999;
}
#MBL_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}
#top_menu a
{
color: #fff;
}
#top_menu
{
display: block;
float: left;
list-style: none;
margin-top: 12px;
}
#top_menu li
{
display: inline-block;
margin-right: 15px;
font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
font-size: 14px;
text-transform: uppercase;
}
#top_menu li ul
{
display: none;
}
#boxed_wrapper
{
width: 980px;
margin: auto;
}
.MBL_standard_wrapper
{
width: 960px;
margin: auto;
}
.MBL_standard_wrapper.wide
{
width: 980px;
}
.MBL_standard_wrapper.header
{
margin-bottom: 0px;
}
.MBL_social_wrapper
{
width: auto;
float: right;
}
#menuforall .MBL_social_wrapper
{
margin-top: 15px;
}
.MBL_social_wrapper ul
{
list-style: none;
}
.MBL_social_wrapper ul li
{
float: right;
margin-left: 5px;
}
.MBL_social_wrapper ul li img
{
width: 24px;
}
#MBL_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}
.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}
#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}
#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}
#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
{
display: none;
list-style: none;
background: #000;
position:absolute;
padding: 0;
margin-top: 51px;
width: 200px;
height: auto;
z-index: 1000;
padding-top: 5px;
border-bottom: 5px solid #000;
border-left: 0;
}
#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}
#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
{
background: none;
}
.main_nav li ul li
{
width: 100%;
}
#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
{
color: #fff;
display: block;
width: 188px;
font-weight: bold;
line-height: 1em;
padding: 10px 0 10px 12px;
background: none;
}
.main_nav ul, .main_nav
{
list-style: none;
margin: auto;
width: 600px;
height: 50px;
z-index: 999;
float: left;
border-left: 1px solid #EBEBEC;
}
.main_nav ul li,  .main_nav li
{
display: block;
float :left;
margin: 0;
}
.main_nav ul li a,  .main_nav li a
{
display: block;
float :left;
margin: 0 0 0 0;
padding: 18px 15px 14px 15px;
color: #2c2f32;
font-family: 'Patua One';
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #EBEBEC;
}
.main_nav ul li ul li a,  .main_nav li ul li a
{
width: 165px;
padding: 7px 19px 7px 16px;
border: 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
}
.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a
{
border-bottom: 0;
}
.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a
{
color: #fff;
background: #1bc4de;
}
.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
{
border-right: 0;
}
.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
{
display: block;
width: 170px;
line-height: 0.7em;
padding: 5px 0 5px 30px;
}
.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
}
 div
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
a
{
color: #2C2F32;
text-decoration: none;
-webkit-transition: color .2s linear, background .1s linear;
-moz-transition: color .2s linear, background .1s linear;
-ms-transition: color .2s linear, background .1s linear;
-o-transition: color .2s linear, background .1s linear;
transition: color .2s linear, background .1s linear;
}
/* Font Face ----------------------------------------------- */
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
ul{
margin: 0;
padding: 0;
list-style: none;
}


Step 05: Again in the template search for <body> and just below it Paste the following HTML coding. However if anyone is unable to Find <body> tag then look for <body> tag and below it paste the Following coding. Don't Forget to replace all Hashes (#) according to your desire needs.


<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>
<li><a href='#' target='_blank'><img alt='' src='http://4.bp.blogspot.com/-xodteBnLv_o/UMt2MhUxNTI/AAAAAAAAJkI/OaeijLxpGbM/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='http://3.bp.blogspot.com/-y2QGcmB-W8c/UMt2N7nGwZI/AAAAAAAAJkU/cgiX_vZKuJE/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='http://1.bp.blogspot.com/-7QcpMgVNe7Q/UMt2Nd0-caI/AAAAAAAAJkM/COoeVsc8u-I/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='http://3.bp.blogspot.com/-9txEaiKK4tQ/UMt2fH9HZNI/AAAAAAAAJks/OyuUs6Iey70/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='http://2.bp.blogspot.com/-T-gXdBaWDP8/UMt2eKpPnKI/AAAAAAAAJkk/DGb0SWy084Q/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='http://1.bp.blogspot.com/-35AQ0H_SNHQ/UMt2dVSPtmI/AAAAAAAAJkg/cV1dPIIQoN4/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='http://3.bp.blogspot.com/-hP7Q0_xIyMs/UMt2wjfkxjI/AAAAAAAAJk8/cdn70uuqA00/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='http://3.bp.blogspot.com/-GvBd6a5GqxQ/UMt2wFEbISI/AAAAAAAAJk4/ZM5I29YzOHE/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='http://2.bp.blogspot.com/-qu2EsReNPng/UMt3aIQ6sSI/AAAAAAAAJlY/RcCW3BI06o4/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='http://3.bp.blogspot.com/-nZJuxAiV91c/UMt2xc-ydNI/AAAAAAAAJlE/y_2cYBzI8-M/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='http://2.bp.blogspot.com/-kjb4ky538Ss/UMt2yD_43JI/AAAAAAAAJlM/TsonJ3OT0r4/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>
<!-- End Navigation -->
Step 06: After adding these both codes to your Blogger theme just Save your template and you can all don. If anyone has any query or difficulty then feel free to leave a comment below we would love to hear you.




How to Add an Animated Ramadan Lantern Widget In Blogger

Hello and Welcome to GetWebInfo. Here you can learn how to add animated Ramadan Lantern Widget In Blogger. Have you ever thought about decorating your Blogger Blog with something special about the glorious occasion of Ramadan? The Ninth Month of the Muslim year, which is fasting from sunrise to sunset. Recently, one of our users asked us about how to add an animated Ramadan Kareem Lantern in Blogger to make this website a religious month of Ramadan.





How to Add Animated Ramadan Lantern In Blogger 

The First thing you need to do to is go to Blogger and Log In in to your Google Account After Logging in you will be redirected to Blogger Dashboard. Now go to your >>Blogger Template>> Edit HTML and search for the ending </body> tag. On finding the tag, just above it paste the following piece of code.

<!--  Ramadan Lantern By GetWebInfo.com -->
<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="900" height="0">
<div style="float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="192" height="144"><param name="movie" value="http://mybloggerlab.com/Scripts/stardima.swf"/><param name="quality" value="High"/><param name="wmode" value="transparent"/><embed src="http://mybloggerlab.com/Scripts/stardima.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="192" height="144" quality="High" wmode="transparent"></embed></object>
   </div>
  </td>
 </tr>
 </table>
</div>

Conclusion

Congratulation Once Everything is don simply press the "Save" button and Animated Ramadan Lantern is ready and good for your website. Now go and check your website to see the Animated Ramadan Lantern in your Blogger Blog.

We hope this article is really good for you if you like this article so please share it with your friends on social media.

How to Add jQuery Countdown Timer Widget in Blogger

Hello and Welcome to GetWebInfo. Here on this post you will learn about that How to Add jQuery Countdown Timer Widget in Blogger. Have you ever though of adding a Milestone Countdown timer widget to your Blogger Blog? From time to time we bring change to our blogs or website maybe it's your blog's anniversary, new product launch or something else. A countdown timer can always keep year readers updated about something that's going to happen. This could turn out to be so helpful in creating magnificent interest among your readers because no every day you release a new product. Well in this article we will show you that how can you add a countdown timer widget in your blogger posts pages sidebar and home page etc.





How to Add jQuery Countdown Timer Widget in Blogger

Step 01: The First thing you need to login to your Blogger Account

Step 02: Go to Template >> Edit HTML and Press from Keyboard this key CTRL+F

Step 03: When appear find search bar just write here is </head> and just above it past the following piece of JavaScript and CSS coding.

<style>
#countdown_def {
height: 100px;
width: 230px;
margin: auto;
margin-bottom: 30px;
}
ul.countdown_default {
margin: 0px;
float: left;
padding: 0px;
}
ul.countdown_default li {
display: block;
background: #fff url('http://1.bp.blogspot.com/-C0D6Mz3MsfI/Uosx6kdekwI/AAAAAAAAAso/lWwGXh8h3sk/s1600/js_bac.png') no-repeat left top!important;
width: 50px;
text-align: center;
position: relative;
float: left;
height: 70px;
margin-left: 5px;
padding: 0px;
}
.timeRefDays, .timeRefMinutes, .timeRefHours, .timeRefSeconds {
width: 50px;
}
ul.countdown_default li span {
font-size: 22px;
font-weight: bold;
color: #fff;
line-height: 72px;
position: relative;
}
ul.countdown_default li span::before {content: '';width: 100%;height: 1px;position: absolute;top: 31px}
ul.countdown_default li p.timeRefDays,
ul.countdown_default li p.timeRefHours,
ul.countdown_default li p.timeRefMinutes,
ul.countdown_default li p.timeRefSeconds {
margin-top: 1em;
color: #909091;
text-transform: uppercase;
font-size: 10px;}
</style>
<script type="text/javascript">
/*<![CDATA[*/
/*MBL jQuery Countdown Widget*/
(function(b) {
    function n() {
        var b = document.createElement("canvas");
        return !(!b.getContext || !b.getContext("2d"))
    }
    b.fn.countdown = function(d, p) {
        function q() {
            currentDate = Math.floor(((new Date).getTime() - e.offset) / 1E3);
            f < currentDate ? (null != a.callback && a.callback.call(this), "undefined" != typeof r && clearInterval(r)) : (seconds = f - currentDate, days = Math.floor(seconds / 86400), seconds -= 86400 * days, hours = Math.floor(seconds / 3600), seconds -= 3600 * hours, minutes = Math.floor(seconds / 60), seconds -= 60 * minutes, "knob" != a.skin ? (0 != a.format && (days = 2 <= String(days).length ? days : "0" + days, hours = 2 <= String(hours).length ? hours : "0" + hours, minutes = 2 <= String(minutes).length ? minutes : "0" + minutes, seconds = 2 <= String(seconds).length ? seconds : "0" + seconds), g.text(days), h.text(hours), k.text(minutes), l.text(seconds), 1 == days ? g.parent().children(".timeRefDays").text("Day") : g.parent().children(".timeRefDays").text("Days"), 1 == hours ? h.parent().children(".timeRefHours").text("Hour") : h.parent().children(".timeRefHours").text("Hours"), 1 == minutes ? k.parent().children(".timeRefMinutes").text("Minute") : k.parent().children(".timeRefMinutes").text("Minutes"), 1 == seconds ? l.parent().children(".timeRefSeconds").text("Second") : l.parent().children(".timeRefSeconds").text("Seconds")) : (g.val(days).trigger("change"), h.val(hours).trigger("change"), k.val(minutes).trigger("change"), l.val(seconds).trigger("change")))
        }
        var a = {
            skin: "countdown_default",
            fallbackSkin: "countdown_default",
            option: {
                day: {
                    max: null,
                    eClass: "days"
                },
                hour: {
                    max: 23,
                    eClass: "hours"
                },
                minute: {
                    max: 59,
                    eClass: "minutes"
                },
                second: {
                    max: 59,
                    eClass: "seconds"
                }
            },
            dateStart: null,
            dateEnd: null,
            format: !0,
            callback: null
        }, e = {
                timezone: !1,
                offset: 0
            };
        d && b.extend(!0, a, d);
        p && b.extend(!0, e, p);
        var f = (new Date(a.dateEnd)).getTime() / 1E3,
            m = (new Date(a.dateStart)).getTime() / 1E3,
            c = (new Date).getTime();
        if (isNaN(f)) alert("Invalid or null dateEnd mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or null date mm/dd/yyyy. Example: 12/25/2013 17:30:00");
        else if ("knob" != a.skin || null != m && !isNaN(m))
            if (m > c) alert("Starting date is greater than the current date"), b(this).append("Starting date is greater than the current date");
            else {
                !0 == e.timezone && (e.offset = 36E5 * parseInt(e.offset) + 6E4 * (new Date).getTimezoneOffset());
                c = b(this);
                "undefined" != typeof d.option && "undefined" == typeof d.option.global && (d.option.global = {});
                a.option.day = b.extend(!0, {}, a.option.global, a.option.day);
                a.option.hour = b.extend(!0, {}, a.option.global, a.option.hour);
                a.option.minute = b.extend(!0, {}, a.option.global, a.option.minute);
                a.option.second = b.extend(!0, {}, a.option.global, a.option.second);
                "knob" == a.skin.toLowerCase() && n ? (a.skin = a.skin.toLowerCase(), c.append('<input class="' + a.option.day.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.hour.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.minute.eClass + '" type="text" value="0" data-readonly="true" /><input class="' + a.option.second.eClass + '" type="text" value="0" data-readonly="true" />'), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."), a.option.day.max = Math.floor((f - m) / 86400), c.find(a.option.day.eClass).knob(a.option.day), c.find(a.option.hour.eClass).knob(a.option.hour), c.find(a.option.minute.eClass).knob(a.option.minute), c.find(a.option.second.eClass).knob(a.option.second)) : ("knob" == a.skin.toLowerCase() || n ? c.append('<ul class="' + a.skin + '" ><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>') : (a.skin = a.fallbackSkin, c.html('<ul class="' + a.skin + '"><li><span class="' + a.option.day.eClass + '">00</span><p class="timeRefDays">Days</p></li><li><span class="' + a.option.hour.eClass + '">00</span><p class="timeRefHours">Hours</p></li><li><span class="' + a.option.minute.eClass + '">00</span><p class="timeRefMinutes">Minutes</p></li><li><span class="' + a.option.second.eClass + '">00</span><p class="timeRefSeconds">Seconds</p></li></ul>')), a.option.day.eClass = "." + a.option.day.eClass.split(" ").join("."), a.option.hour.eClass = "." + a.option.hour.eClass.split(" ").join("."), a.option.minute.eClass = "." + a.option.minute.eClass.split(" ").join("."), a.option.second.eClass = "." + a.option.second.eClass.split(" ").join("."));
                var g = c.find(a.option.day.eClass),
                    h = c.find(a.option.hour.eClass),
                    k = c.find(a.option.minute.eClass),
                    l = c.find(a.option.second.eClass);
                q();
                if (f > (new Date).getTime() / 1E3) var r = setInterval(function() {
                    q()
                }, 1E3)
            } else alert("Invalid or null dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00"), b(this).append("Invalid or null dateStart mm/dd/yyyy. Example: 12/25/2013 17:30:00")
    }
})(jQuery);
/*]]>*/
</script>

After installing the JavaScript and CSS paste this code anywhere you would like to display the Countdown widget. For example if you want to display it somewhere in the sidebar then go to Blogger>>Layout>> Add a Gadget>> Add HTML/JavaScript>>  And paste the following code in the text area.Same method when you put this code to Posts and in Pages.

<div id='countdown_def' class='timerArea' ></div>
<script>
$(document).ready(function() {
$("#countdown_def").countdown( {
dateEnd:'11/12/2017 18:01:30',
format:true,
callback:function(){alert('Def Ready')}
},
{
timezone:false,
offset:0
}
);
});
</script>

Note: Do not forget to customize the date and time of your counter widget because this would be the main thing which will operate it. From the above code search for 11-12-2017 18:01:30 and replace it with your personalized date and time for the timer widget.

Notice : This widget required 1.7+ jQuery.js file. In case you are using old jQuery file, make sure you upgrade it to 1.7 or plus. For Example:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>

I Hope this article is really helpful for in learning how to add a countdown timer widget in Blogger sidebar, Posts, Pages and home page. Let Us know if you have any problem about this topic.

How To Fix Facebook Post Thumbnail Issue In Blogger

Welcome to GetWebInfo. Here you can find out about this post in how to fix Blogger in a Facebook Post thumbnail issue. Sharing your articles on Facebook, you can see an incorrect post thumbnail instead of displaying correct thumbnails. When we share our articles on Facebook, many of our users complained about incorrect post thumbnails. In articles we will show how to post a blog issue in blogger thumbnail problem.







Why Invalid Post Thumbnail Show in Facebook 

There are many reasons why there is a wrong post thumbnail on Facebook. One of the most common issues is that multiple images are set on the "og: image" tag that are responsible for showing photos as thumbnails when sharing the Facebook link. This problem rotates around the Facebook OpenGraph tag that forgets to add Blogger developers to more blogger templates. It automatically opens the first image from your posts and makes your post thumbnail.


Adding "Oge: Image" tag to your Blogger Template

The first thing you need to solve this problem is to include the "og: image" tag in your blogger template.If you have the possibility to include at least "Number: image" in your tags, go to Blogger> Template> HTML and just paste it on the top <tag> tag code.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>

Be sure you must upload image to your blogger post from your system had drive because image from any external source or URL would not be accepted by neither Blogger nor Facebook.

Manually Uploading Your Thumbnail Image

If you still face this problems that Facebook is not picking up your correct images as post thumnail then you can manually upload your thumbnail images while your are sharing articles on Facebook. As it can be seen in the screenshot below that how can you upload the image you want to show as thumbnail.


The Image will be saved in your Photos section. Whenever suers will share your posts on Facebook it will continue to display the correct image.

Facebook Debugger Tool at Work

The best way to figure out or troubleshoot the problem is not responsible for the correct post thumbnail image on Facebook is using Facebook Debugger Tool. Just past your Desire URL, your debugger tool in the toolbar and you will notice a list of errors that you need to fix your blog more user friendly with Facebook.

I hope this article will be helpful to those who are constantly facing this issue on their blogs. If any of our readers have resolved the issue with the methods that are not listed above then feel free to share it in comments below.

How to Hide Author name and labels from Blogger Posts

Hello and Welcome to GetWebInfo. Here on this post i will tell you that How to Hide Author name and labels from Blogger Posts. Whenever you post any article on Blogger, it automatically shows up author name along with labels under the post titles, or at the very end of your post depending upon your blogger template. We have seen many newbies who want to hide author name to protect their privacy and even labels from their blogger posts to make their blog look more professional. Today in this article we will show you how to hide author name and labels from blogger posts.




How to Hide Author Name and Labels from Blogger Posts 

So Here are the steps which you need to follow to complete your process that you can easily hide the author name and labels from Blogger Posts.


Hide Author Name from Blogger Posts

Step 01: First of all Log in to your Blogger account and Select your Desire blog

Step 02: Now just click on Template from sidebar then Click on "Edit HTML"

Step 03: After that press CTRL+F and search for this code
<data:posts.author/>
Step 04: Ones you found it then simply remove it from your blogger HTML Code

Step 05: You will have this code more than one time in your blogger template so simply remove all of them from your blogger bloge.

Step 05: Now just save your template and you can all don!


Hide Labels From Blogger Posts

Here are the steps that learn you how to Hide Labels from Blogger Posts.

Step 01: First of All Login to your blogger blog

Step 02: Now click on Template from sidebar and then Click on Edit HTML

Step 03: After that Press CTRL+F and search for the ending of </head> tag

Step 04: Once you found </head> tag then simply paste the following code just above this ending tag

<style>
.post-labels {display: none;}
</style>
Step 05: Finally Save your Template and it will hide labels from your and you can all don!

This was our article which has made you learn to hide author name and labels from blogger posts. We are sure you guys must have availed from this article. If you have any question about this topic so please comment on this post i will reply you as soon as possible.



How to Add Custom Ads.txt File in Blogger BlogSpot

Hello and Welcome to GetWebInfo. Here on this post i will tell you that How to Add Custom Ads.txt File in Blogger BlogSpot. This is really important for Every Publisher, advertisements are a key sources of revenue. Similarly on Blogger.Com Platform Vacuous advertising companies allows to place Ads on your blogs, But it is equally crucial to check the authenticity of the Ads that are being displayed on your site. Verifying the authenticity of advertisements can be made through Ads.txt files. To avoid frauds or viruses. Ads.txt aims to secure both the Publisher and The Advertiser from any unavoidable circumstance.






What is Ads.txt?

The "Ads.txt" file carries information about different advertiser networks which are authorized by the website owner, and these advertisers or ad companies can show their ads on your website. The idea behind using Ads.txt file is to avoid placement of fraud and false ad placement from unknown sources. But when you put this Ads.txt code to your blog or site then your site is secure and safe on world wide web. Ads.txt file helps buyers in choosing authentic sellers and publishing authentic Ads on their blogs website or any publishing medium.


How to Add Ads.txt File in Blogger

Step 01: First of all Login to Your Blogger Account

Step 02: Select Your Blog where you want to put this Ads.txt code


Step 03: In third step after selecting blog, you need to got search preferences under settings as shown in the screenshots below


Step 04: Now under monetization you will find option to enable custom Ads.txt file for your blog. Just click edit and then select yes option to enable costume Ads.txt content as shown in the Picture below



After Enable your ads.txt file a text box will appear copy the ads.txt setting from your third party monetization platform and paste it in to the text box to link your ad monetizer with your bloge or website.

Once everything is done now just click on save button to save your setting. That's it your Ads.txt file is now live on your blog.

How to Find Ads.txt Code on to our Site

It's very simple and easy to find out your Ads.txt file code. First of all make sure that you can put AdSense code to your website or Your website is verify from Google AdSense. Now just type your Domain in in to URL bar Like that "https://www.yourdomainname.com/ads.txt" and press enter button from your keyboard. Now you can see some thing like that
google.com, pub-2686573185598384, DIRECT, f08c47fec0942fa0
Now that's set. This is your Blogger Ads.txt code just copy and past it to your Custom Ads.txt Monetization Box and you can all don. If you this article so please share it with your friends on social media. If you have any issue about this topic so please comment on this post i will reply you as soon as possible.