Facebook Popup Like Box For Blogger

Hello and Welcome to GetWebInfo. Here on this Post you will found the simple and easy method that Facebook Popup Like Box For Blogger .  Facebook Popup like box for Blogger is a basically effective Blogger widget to boost your Facebook likes. In my opinion it is the best way to promote your Facebook business page. By using this popup like box, you will be able to bring your Faceook Fan page in from of your audience right after landing on your blog. For this reason, you will have 1000 times better result in the case of getting Facebook likes, social activity Social engagement. Follow and the overall social exposure.



The Importance of Facebook Popup Like Box in Blogger Site

Only creating good content is not enough for being a successful blogger. Social community, activity, promotion and fans are a major part of bogging success. As a matter of fact, we can consider Facebook as the king of social medias. Therefore, we must think to utilize this massive media with more than 1.3 billions users. Usually smart blogger add a facebook like box widget to their blog's sidebar. A huge reader attention means more Facebook Likes. More Facebook like means huge social exposure, followers and targeted traffic. IF you analyze any popular blog, you will find a big amount traffic they receive from Facebook. So you should also be smart and use this lightweight Facebook popup like box in your blogger.


How to Add Facebook Popup Like Box In Blogger?

Step 01: Log in to your Blogger Account and go to the Dashboard > Layout Section

Step 02: Click on the "Add a Gadget" link in the footer or sidebar section. Remember, the recommended area to add this widget is the footer.

Step 03: After Clicking on the "Add a Gadget" link a popup window will appear. Just select from this box "HTML/JavaScript" gadget from the list and click on it.



Step 04: When HTML Box appear just copy the below code and past it to your HTML code box after pasting just click on Save button and you can all don.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<style>
#popupFbLikeBox {display:none;position:fixed;background:rgba(0,0,0,0.7);height:100%;width:100%;left:0;top:0;z-index:99999;}
#popupArea {position:absolute;background:white;height:270px;width:auto;left:63%;top:58%;border-radius: 5px;margin:-220px 0 0 -375px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#popupClose{text-align:center;padding:10px;position:relative;cursor:pointer;background: linear-gradient(#eee, #fff);border-top-left-radius: 5px;border-top-right-radius: 5px;color:#000;}
#popupClose:hover{color:red;}
.fbLikeboxArea {margin:0 auto;width:366px;height:1px;margin-top:16px;margin-left:20px;position:relative;}
@media only screen and (max-width: 500px) {
#popupArea{left:63%;top:58%;margin:-220px 0 0 -250px;}
.fb-like-box,.fb-like-box span,.fb-like-box span iframe[style]{width: 100% !important;}}
</style>
<script>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);if (value === null || value === undefined) {
options.expires = -1;}if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '',
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));}
//get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};
//]]>
</script>
<script>
jQuery(document).ready(function($){
if($.cookie('logedin_user') != 'yes'){
$('#popupFbLikeBox').delay(2000).fadeIn('medium');
$('#popupClose').click(function(){
$('#popupFbLikeBox').stop().fadeOut('medium');
});
}
$.cookie('logedin_user', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='popupFbLikeBox'>
<div id='popupArea'>
<div id='popupClose'>CLOSE
</div>
<div class='fbLikeboxArea'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/getwebinfo&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>




Step 05: You must replace the https://www.facebook.com/getwebinfo with your own Facebook Page URL.

Note: If you can't be able to find out your Facebook Popup page then please clear your browser history and refresh your website page then you can be able to see your facebook page.

I Hope this article is really helpful for you if you like this article so please share this article to your social media account thanks......

How to Add Google AMP To Blogger Website Full Setup

Hello and Welcome to GetWebInfo. Here on this post you will learn about that How to Add Google AMP To Blogger Website Full Setup  to your Blogger Blog. Google AMP (Accelerated Mobile Page) is a light speed technique that developers have to made to speed up a website by avoiding some code in Java and CSS to make your website support fast. I am sure you have heard about this. Blogger Blogspot websites have been waiting to implement AMP until now AMP is now fully available to blogger websites.




What Is Google AMP 

The Full meaning of AMP is Accelerated Mobile Pages. These pages are viewed in the mobile phone view that speed up your website page loading speed by skipping some render blocking Java and CSS files and is viewed under Google. It is a new project by Google to build mobile web pages for static content that rendder fast AMP pages use AMP HTML, AMP JS and AMP CDN to precess and deliver light web pages at lighting speed.

How to Add Google AMP to Blogger Websites

The HTML AMP Setup involves changing the HTML code on your template to the AMP code to Enable AMP HTML Code.

Step 01: First Of All Login to your Blogger Account and Reached out to your Blogger Dashbaord

Step 02: Reach out to the left commands by navigating to them to the Template command

Step 03: Click on the Template Command and then locate the Edit HTML Next to Customize

Step 04: Click anywhere in your code and then click on CTRL+F in windows or CMD+F from your Mac System

Step 05: Search for This <html>

Step 06: After finding the above code just replace it with this below code

<html amp=’amp’>

Add Charset and View-port Meta Tags

In this section of the AMP setup you have to look at your template code to figure out if it has the charset and viewport meta tags present before adding the code provided below. If they are not present, then you will paste the below code just under the <head> tag:

 <meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

If you want to know if the Charset and Viewport code are present search any of the two names and you will only find it  in the head section of your Blogger Template.

Blogger AMP Setup for CDN

The AMP CDN Code is a code that instracts the phone brosers to use the AMP version by adding the script in the head section.

This code just add above code at the ending of this tag </head>

 <style amp-boilerplate=’amp-boilerplate’>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate=’amp-boilerplate’>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>
That's All with adding the AMP CDN, save your template theme and lets go to the other step.

Step 04: Image AMP Setup for Blogger

The Image used in the desktop responsive version is not the same resolution and dimensions that is used in AMP versions. In that case we add the image AMP code to feature the image of your website post to show in AMP Pages. Now here you can change the Image Code with this code

<amp-img src=”AmpImage.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>
The Amplmag JPG is an example of your image url as indicated in the code after uploading. You will have to delete the image src to amp image src  code above but make sure you copy the image URL first before changing and then replace to the Amplmag JPG and thats all set.

Step 05: AM Conanical Link 

It's paramount to see that you are discoverable with the canonical tag used in your blogger template. The AMP version also uses canonical. Add this below code to your blogger template below the charpset..

<link expr:href='data:blog.url' rel='canonical'/>
<link rel="canonical" href="https://www.getwebinfo.com" />

By adding Cornanical tags, you set them to poing to the homepage and your website posts. 

Note: Please Change This URL "https://www.getwebinfo.com" with your own blog or website URL


How to Check the Blogger AMP Validation 

To Know whether your blogger blog is now an AMP page, then you can check out some of the AMP validation check websites that are around the world and help users to know about their website that can be eligible for AMP pages or not.


  • https://www.ampproject.org/

    This website will help you with all the problems you may need to solve for your blogger AMP versions by using the below Idea. 

I hope this article is really help full for you if you have any problem so please comment on this post and i am reply you as soon as possible. Thanks for reading this article.....



How to Disable Text Selection In Blogger Posts

Hello and Welcome to GetWebInfo. Here on this Post i will tell you that How to Disable Text Selection In Blogger Posts. To avoid your posts from being stolen by test selection in blogger and pasting it to their websites, we use the code to make sure we block them to make work hard for them. To disable text selection in blogger, we have to use some CSS functions that specify what will be selected and what will not want people to steal content from. We also have Javascript code to disable text selection feature but it blocks all text including blockquotes. From this step you can save your template data easily without copy,paste issue..




How to Disable Text Selection In Blogger Posts with CSS

To Disable the Blogger post from supporting highliting, add the below code as instructed below.

Step 01: First of All Login to your Blogger Account and Access to Dashboard

Step 02: Navigate to Template right sidebar option

Step 03: Click Edit HTML

Step 04: Click anywhere in the code and press "CTRL+F"

Step 05: When the search box appeared in blogger HTML mode then Just Type out there is ]]></b:skin> 

Step 06: After finding the desire code just paste CSS above ]]></b:skin>Above it.

body {-webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none;}


When you add the above code in your CSS part and save your template. 


Disable Text Selection Excluding Blockquote and Codes In Blogger

The CSS below will allow users to copy the content in the blockquote or in code form. That's for people who provide code detail to blog visitors. Copy the below CSS and use the same procedure as the one used in the first example.


body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;}
blockquote {-webkit-touch-callout: text; Except Blockqoute-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
-webkit-user-select: text;}
.post code {-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}


That's all you need, use the code above save changes and load your website and try to see if any text will be selected. If it doesn't select, then you are good to go and your blogger users will be safe from plagiarism. If you would like to use the javascript code instead, follow the below steps. 

How to Disable text Highlighting Selection in Blogger with JavaScript 

The Blogger JavaScript code to disable text highliting is as attached below use it in your blogger blog follow these easy and simple steps...

Step 01: Log in to your Blogger Dashboard 

Step 02: Click on Your Blogger Layout Section

Step 03: Then click on Add a New Gadget

Step 04: Choose HTML/JavaScript option and add the below JavaScript code

 <script type="text/javascript">
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

Step 05: After Putting this code to Blogger HTML widget just Save Your Template and You can All Don!! I Hope this article is really helpful for you and if you don't get any type of benefit from this post so please tell us. Thanks for Reading..........

How to Automatically Resize Blogger Images to Fit Blog Post Area

Hello and Welcome to GetWebInfo. Here you can learn how to automatically automate the Blogger Images to Blog Post Area. Blogger offers quick and easy Blogger offers most of the tools you need to add and resize. You can upload photos directly on the platform and even change the dimensions based on the type of content that you are trying to produce.



In order to do this create a post and click on the small photo icon on the top toolbar next to the font style setting. A pop-up will show up on your screen asking you where you want the image source to upload. You have a choice between adding pictures from


  1. Your Local Computer
  2. Previously uploaded images on the blog
  3. Picasa Web Albums
  4. An Image URL 
  5. From Online Photo Stock Images Sites

Once you selected the image that you want to use, you'll see four images sizes to choose from - Small medium. large and X-Large images size: it also gives you the option to determine the alignment. If you find that the four preset dimensions aren't providing the outcome to your site desire.


Step 01: Retain The Image Quality

If you know that you are going to need to resize the Blogger images once you post them to your blog, make sure you start a photo larger than 640px dimensions of x-large option. It is easy to bring an image down in size, but if you try to make a small image larger, you will get some of the quality lost. Just make sure that you are looking for a file size containing the image: the larger the file the slower it will load on your website.

Photoshop is a powerful image editor that can help you resize your blogger images or post your images before you post, but it is also a costly investment. There are also many other freeware image editors that can perform the simple question of resizing the photo. Determine what size you want to do in the page and manually resize Blogger images to those dimensions other users found that 700px is a pretty flexible size that works well on posts.

Once you have your photo resized and added to your post, click on it and select the Original Size option. If your photos are going to be more than the post editor, it probably means that they are the body of your post larger than that, so let's fix it and make them fit.



Step 02: Modify The Site's CSS

Nex you;ll want to modify the CSS of your Blogger template to accommodate the adjustment, Don't worry you won't need much coding experience to complete this task.

Open up your Blogger Dashboard and Go to "Template" Customize. You'll see the option for Advanced, click on it and find your way to the "Add CSS' Tab paste the following CSS code inside the empty box.

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}


Adding the code to the section, automatically adds it between the <b:skin>....<b:skin> tags of your Template (Template> Edit HTML, and The ]]></b:skin> tag). SO no matter whether you add it above ]]></b:skin> or with in the Add CSS box the efect should be the same.

To Spruce up the post even more, add the last three lines shown in green below:

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}

This code will get ride of any borders and padding around the image and give it a much more natural look within the post. Hit the "Apply to Blog" button once you've finished adding it.

Note: This will only change the images set to Original size, To resize images with different sizes and apply this change on All the pictures added to your posts, add this CSS instead

.post-body img {
width:100%;
height:100%;
display: block;
}

Step 03: Create A Blog Post

After making the adjustments to both file size and CSS, you may go back to the post editor and repeat the Step 01 to add an image. When you return to the screen that asks for size, click on the "Original size" Option and confirm your choice.

I hope this article is really helpfull for you, if you have any problem so please post a comment on this article i will reply as soon as i can do.

How To Center The Blogger Header Image

Hello and Welcome to GetWebInfo. Here on this post you will learn that How To Center The Blogger Header Image. The header of a website is what distinguished your blog it's your identify or digital fingerprint. Whenever a visitor accesses your blog for the first time, the header is one major aspect that is used to determine with you are and the type of content that they can expect to read.




What would seem to be counterintuitive to the idea is the default Blogger setting for header positioning. Whenever you upload a header to the site. It will automatically be aligned to the left of the page. Some Blogger users may be okay with this setting, Especially if they are using a header design that doesn't contain a background. Others may find that their background headers appear cut off, Incomplete, or indistinguishable from the rest of their content.


Center Header Image With Blogger Template Designer

Making the change is relatively easy. You'll be able to make these adjustments on every page of your Blogger blog without having to change them individually . All you need to do is to modify the CSS of your blog that can be found directly through your Blogger Dashboard. Even if you have little to no experience in web design or coding, you can center Blogger header by following these next few steps.

Step 01: Log in to your Blogger Blog Account and select your blog, then go to "Template" and click the "Customize" button on the right side.



Step 02: Navigation to "Advanced" > "Add CSS' tab and paste the code in the empty box

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

If you have a Small image and you want it to become full width, add this CSS instead

#header-inner {
 background-size: cover;
 width: 100% !important;
 text-align: center;
 }
 #header-inner img {
 width: 100%;
 height: 100%;
 }
Step 03: Hit the Enter Button from your keyboard after you paste the code snippet, then click the "Apply Blog" Button from Blogger.


Here are some other aligning option for your headers.


Align Blogger Header Banner and Text Side by Side


Image on the Right and Title on the Left Side

You can also put this code to CSS Box of the Blogger

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

Image On the Left and Title on the right side

#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Note: For larger images, you may need to resize them in order to make them appear side by side with the text.

After Making all of these changes you can all done. You may navigate back to your homepage. Refresh the page and you 'll notice that the header is now centered. instead of on the left. Click on a few of your page links and make sure that this modification has been made to every page or post on the blog. The great thing about this CSS is that it is your site's central hub for all things design. From the CSS file, you can modify just about any appearance on your site to give the blog a custom look and feel. Once you are comfortable performing minor adjustments to the appearance of your site, you can start to get creative and come up with your very own modification.

If you have any problem about this post so please post comment on this post i will reply you as soon as possible.

How to Add Email Subscription Form To Blogger Blogspot

Hello and Welcome to GetWebInfo. Here on this post you will learn about that How to Add Email Subscription Form To Blogger Blogspot. Whe you are providing usful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, You need an Email Subscription form in your blog,



To Add Email Subscription Form To Blogger Blogspot

Step 01: Lot in to Blogger then Go To Layout> Click on "Add a Gadget" Link



Step 02: From the Pop-up window, just scroll down and click on the gadget of HTML/JavaScript.

Step 03: Past the following code inside the empty box

<style>
.hl-email{
background:url(http://4.bp.blogspot.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GetWebInfo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="your Blog Name" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Widget Setting


  • Replace the URL Address in to Green to change the email Icon
  • To change the width or the text area. increase/decrease the 130PX value in red 
  • Replace The Feed Burner URL with Your Own Feed Burner URL ( http://feedburner.google.com/fb/a/mailverify?uri=GetWebInfo
  • Replace GetWebInfo with your feed title. It appears at the end of your feed link. 
Step 04: Now save your widget and check your blog and Enjoy!!!

How to Make The Blogger Posts Have A Calendar For the Date In

Hello and Welcome to GetWebInfo. Here on this post i will tell you that How to Make The Blogger Posts Have A Calendar For the Date In. It's quite common to see calendr style dates next too some WordPress posts but for the Blogger platform it isn't always easy adding it. But who said you can't do it? You need to look no further than this blog.

How to Make The Blogger Posts Have A Calendar For the Date In


How to Create Calendar Style Dates in Blogger


Step 01: Go To "Setting"> Language and Formatting" - "Date Header Formate" and change the date formate as you can see in this example below ( First add Day, Month and Finally Year)..



Step 02: Go To Template > Click the "Edit HTML" Button



Step 03: Click Anywhere inside the code area and press CTRL + F to open the blogger search box.

Step 04: Type or Past the following line inside the search box and hit Enter to Find it Out.

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Step 05: In case you find it twice, replace it twice with this code

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Step 06: Now type this Tag inside the search box and hit Enter to find it

</head>
Step 07: Just Above the </head> tag, paste this code

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(http://1.bp.blogspot.com/-NVj6tUKJgLo/UBShW2dCLSI/AAAAAAAACZk/3TkTa8Hzqt0/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>
Step 08: Now preview you template and make sure everything looks ok, hit the Save Template Button.

You can all don now. I hope this article is really help for you if you like this article so please share it to your social media account thanks.

How to Add AdSense Ads in the Middle Or Anywhere Inside Blogger Posts

Hello and Welcome to GetWebInfo. Here on this Post i will tell you that how can you Add AdSense Ads in The Middle or Anywhere inside Blogger Posts. We can manipulate the location of the ads to be displayed by adding a script inside the template and using a tag inside our post to where we want the AdSense Ad to appear. Once added we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.

Manually inserting AdSense Ads in the middle of posts in Blogger is pretty easy and simple steps, Just follow these steps below.




Adding AdSense Ads in the Middle or Anywhere Inside Blogger Posts


Before preceding it is recommended to backup your template: Go to "Template" and click on the "Backup/ Restore" button to save a copy on your hard drive.



Adding The Script

Step 01. First thing we need to do is Parse the AdSense Code and convert it ti plain text. Then go to "Template" Click on the "Edit HTML" button and click anywhere inside the code area to search using CTRL+F keys this tag"

<data:post.body/>
Note: You May find it several times, but we need to stop at the second one. Or If you can't see any changes test the third one.


Step 02: Replace <data:post.body/> with this code:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="clear:both; margin:10px 0">
<!-- Add here the code of your ad -->
</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
Step 03:Add the converted AdSense Code on where you see the <!-- Add here the code of your ad --> annotation, then save the changes by clicking on the "Save Template" Button....

Note: For centering the Ads, add the </center></center> tags before and after the AdSense code, like this.

<div style="clear:both; margin:10px 0">
<center>
<!-- Add here the code of your ad -->
</center>
</div>


Adding The AdSense Annotation to Display the Ad

Step 04:  When you create a new post, add this annotation inside the "HTML" section to where you want the Google AdSense ads to appear:

<!-- adsense -->

For Example


This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo. <!-- adsense --> This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.This is demo from GetWebInfo.


Example in Picture





Please Note that if you don't add this annotation to specify where to display the ad, then it will appear below the title by default. After doing all this precess open you'r website in new window and make sure everything working properly. I hope this article is really help full for you if you like this article so please share it to social media thanks.......

Advanced Random Posts Widget For Blogger With Image Thumbnails And Snippets

Hello and Welcome to GetWebInfo. Here on this post you can learn about Advanced Random Posts Widget For Blogger With Image Thumbnails And Snippets. When your blog has too many posts, visitors don't always have the time or desire to go through all the posts written there in order to make an idea of the blog's content. Thus, a random posts widget that will allow visitors to find content more easily could be really useful.








Adding Random Posts with Thumbnails and Posts Summary On Blogger





Step 01: Login to your Blogger Account, select your blog and go to Layout

Step 02: Add new widget by clicking on the "Add a Gadget" Link and select "HTML/Javascript" form the popup window.

Step 03: After Adding the HTML/Javascript Copy and Paste the following script inside the empty Content Box.

<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}
#random-posts img:hover {
    opacity: 0.6;
}
ul#random-posts {
    list-style-type: none;
    padding: 0px;
}
#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}
#random-posts a:hover {
    text-decoration: none;
}
.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}
#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

Random Posts Options 


  • Thumbnail Dimensions: To change the size of the thumbnails in pixels replace the 75px value
  • Summary Length: You can control the length of the summary by changing the 110 value from var randomposts_chars=110:
  • Post Infor: If you want to hide the post date and comment count change "Yes" from var randomposts_details='yes':to 'no':
  • Font Size for Posts Title and Summary: To modify the font size for the post snippet modify the 11px value and for the posts title, the 12px value.

At the End Just Click on the Save Button and View Your Blog to make sure every thing work good like you want. Hope this article is really helpful for you if you like this article so please share it on social media thanks.

5 Best Popular Posts Widgets For Blogger

Hello and Welcome to GetWebInfo. Here on this post you can know about the the Best popular posts widgets for blogger. If you are using Blogger as the platform for you personal or business blog, you're probably looking for ways to customize it and make it your own. This way you'll make your web pages unique and eye-catching and ensure the'll stand out from the many other pages on the Internet.




Adding The Popular Posts Widget For Blogger

Just click on your blog title access the "Layout" menu, click "Add a Gadget" and choose Popular Posts".

A window will appear asking you to configure the widget by choosing which posts you'll feature those that were most viewed in the past 7 days or 30 days or from the beginning of your blog.

You also be asked choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and or the snippet.



Once You've followed these instructions, you'll get to see the basis version of the Popular Posts widget for Blogger in you blog. You can stick with this if it matches your blog design but if it sticks out like a sore thumb or doesn't suit your taste.


Popular Posts Style 01 -  Box With in a Box

CSS Code of the Widget

<style type='text/css'>
.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;}
.sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}
</style>


Popular Posts Style 02 with CSS Code



<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:&quot;&quot;;height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}
</style>


Popular Posts Style 03 with CSS Code



<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}
</style>

Popular Posts Style 04 With CSS Code




<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px &#39;Oswald&#39;, sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}
</style>


Popular Posts Style 05 With CSS Code



<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px &#39;Oswald&#39;, sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:&quot;&quot;;height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}
</style>

These Are just some of the Widgets styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so go to your blog, click "Theme" on the left side and select "Edit HTML" under the template preview.


Adding The CSS

When the template editor has opened click anywhere inside the code are and hit CTRL + F or Command F to search  the following tag.

</head>
Just Above the </head> tag, copy- paste the CSS code of one of the styles above.


Important Note: If the Popular Posts widget is located in the footer of your blog, remove the sidebar class found in the CSS code in order to make it work.

Please note that most of the style are using the "Oswald" font which you need to add to your templates code a well as you can.

So search for this tag

</head>
and Just Below it Add this Line:

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Adding The Javascript 


These style also require using a script in order to resize the popular posts image and trim the post snipped and title. To add the JavaScript code, search the </body> tag and paste the following script just above it.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>

//<![CDATA[
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Note: If you have already the jQuery library in your template then remove the line in red color.

After you have added all the code in the right place. Press the Save Theme Button of your Template and You can All don!!!!!!

How to Set Custom Redirect In Blogger

Hello and Welcome to GetWebInfo. Here you will learn how to set a custom redirects in Blogger (BlogSpot). Over time most blogs can go through many changes, like posts being added or deleted. In some occasions, you do not want people to get 404 messages when they are negative to posts or pages that do not exist on your blog and instead, all other requests to another page to redirected to specific links.



One of the best ways to avoid broken links and keeping your traffic in the right direction in the custom redirects is the Blogger Custom Redirects Tool. This tutorial will show you how to set up blogger posts for redirects and redirects and old URLs to a new URL. But before redirecting any URL you must know about two types of redirects



  1. A 302 redirect means that the page has moved temporary. This redirect does not contain the URL value to the new location and instead. It will take visitors to an appropriate location so that you are not showing them a 404 page not found, or an error page. You can use a 302 redirect for quick pages or maintenance pages.
  2. A 301 redirect mens that a page has permanently moved to a new location. Use the 301 redirect when you deleted or changed the URL, of your post. In most instances, 301 redirects are always recommended for SEO because they will link the link juice to the redirected page and visitors will also benefit from this.


How to Redirect old URL to New URL in Blogger

Step 01. Login to your Blogger account with email and password

Step 02. Click on your blog> Go to Setting / Search Preferences and Click Edit next to Custom Redirects.



Step 03. Enter the old URL in the From field and the new URL in the To field including the forward slash 


Note: Do not enter the full URL in these fields. Just omit the address of your blog and type only the rest of the Link. Again this works only if you wish to redirect within your blogger blogs and not to any external links. 

Step 04. Click the Save link and the Save Changes button and your all don!




Finally you can all don. If you have want to redirect more pages, just click the "New Redirect" Button . I hope this article is really helpful for you if you like this article so please share it on social media thanks.

Popup Email Subscription Widget for Blogger

Hello and Welcome to GetWebInfo. Here on this post you will found out the latest article about How to Setup Popup Email Subscription Widget for Blogger. Get a beautiful popup email subscription widget for Blogger without any cost.



This is truly a professional looking email subscription widget to increase user engagement and activity. You may have got many popup widgets but this one will surely below your mind. I have designed this highly professional looking popup email subscription widget for blogger with pure HTML, CSS and JavaScript. for this reason you will find this widget more flexible and user friendly.

Also this popup email subscription widget has a clean and eye catching look attract more visitors. As a result it is going to turn more readers into subscribes. I will provide complete setup and configuration instruction here. So you will be able to add this in your blog within few clicks. Finally I recommend you to setup and configure feedburner feed management services to achieve optimum result, because the widget is optimized for it and let your subscribers use the ultimate features of it.


Why we Use Popup email Subscription Widget for Blogger?


  • It could be the ultimate solution to increase blog readers and subscribers
  • It will notify every subscriber automatically after publishing a new post
  • It will increase total number of returning visitors and decrease bounce rate
  • It can increase up to 700% more emails subscribers of a blog
  • Easy Email Marketing and list building solution for free

Make Your Template Eligible for Popup Email Subscription Widget

The Popup email subscription widget is designed to work with blogger and Feedburner. So there will not be any problem to use this if you configure your template and Feedburner properly. To Enable Popup Email Subscription Widget for your Template you can make sure that your Template are have these widget by default if not then bring these things up for your template before enable Email Subscription to your template.....

  • Enabling "jQuery" in our template if it is not don yet.
  • Importing "Font Awesome" Icons.
  • Import "Oswald" free Google web font.
Note: If you are using any default blogger template then you may have to add all these three scripts but if you are using any custom blogger template then these three things already enable to your blogger template. 

Step 01: First of all Login to your blogger account 

Step 02: Go to Theme Section and Click on Edit HTML Template

Step 03: Use CTRL+F Command to find out </head> tag.

Step 04: Now after finding the above tag paste the below code right before the ending tag of </head> as i have show you in below picture....



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>




Step 05: Finally click on the Save Theme button. So you have enabled your template for the popup email subscription widget.


Add Popup Email Subscription Widget for Your Blogger

Adding Popup email subscription widget for blogger is very easy.

01. In the Blogger HTML Editor, Scroll all the way down and find the ending </body> tag.

Popup Widget is looks like that:



Code of Popup Subscription Widget

<style>
#to-popup-form,#to-popupbody{display:none;position:fixed;z-index:999}#tech-ornate-subscribe input.submit,.s-box-container .s-box h3.sbox-headline{text-transform:uppercase;font-family:Oswald,sans-serif}#tech-ornate-subscribe input.submit,#to-popupbody .pbLink,.s-box-container .s-box h3.sbox-headline,div.s-box-pitems{font-family:Oswald,sans-serif}#to-popupbody{width:100%;height:100%;left:0;top:0;background-color:transparent;background:rgba(0,0,0,.5)}#to-popup-form{width:650px;height:350px;background:#fff;border-top:6px solid #ddd;border-image:-webkit-linear-gradient(left,red,#00f 33%,#ff0 66%,green) 1%;padding:8px;font-size:13px}#to-popup-dismiss{background:url(https://bloggersorigin.com/wp-content/uploads/2017/05/cross.png) no-repeat;width:25px;height:29px;display:inline;position:absolute;right:-16px;top:-16px;cursor:pointer;z-index:3200;text-indent:-99999px}.s-box-container{height:350px!important;overflow:hidden}.s-box-container .s-box i.sboxicon{margin:0 0 0 15px!important;padding:0!important;color:#8b0000}.s-box-container .s-box h3.sbox-headline{display:inline;padding:0!important;margin:0 0 0 10px!important;font-size:24px;color:#006400}.s-box-container .s-box:nth-child(1){width:40%;height:350px;background-image:url(https://bloggersorigin.com/wp-content/uploads/2017/05/pointing-girl.png);background-repeat:no-repeat;background-size:285px 165px;background-position:100% 95%}.s-box-container .s-box:nth-child(2){width:58.5%;height:350px}.s-box-container .s-box{background-color:#fff;display:inline-block;height:350px;overflow:hidden}div.s-box-pitems{list-style-type:none;padding:10px 5px 0 30px!important}p.s-box-items:before{content:"\2713";color:#006400;margin-right:10px}p.s-box-items{font-weight:500;font-size:14px;line-height:normal!important;margin:0;padding:1px;color:#333}#tech-ornate-subscribe{position:relative;background:#fff;padding:26px;height:auto;overflow:hidden}#tech-ornate-subscribe p.btext{margin:30px 0!important;padding:0opacity: .8;font-size:13px!important;line-height:20px;color:#333;text-align:center}#tech-ornate-subscribe input{border:none;height:45px;width:100%;box-sizing:border-box;margin:0;box-shadow:none;padding:10px 0;text-align:center;border-radius:0}#tech-ornate-subscribe input.email-field{background-position:5px 14px!important;background:url(https://bloggersorigin.com/wp-content/uploads/2017/05/email.png) no-repeat #F1F1F1;padding:10px;border-radius:5px;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF;-moz-box-shadow:0 1px 1px #ccc inset,0 1px 0 #fff;-webkit-box-shadow:0 1px 1px #CCC inset,0 1px 0 #FFF}#tech-ornate-subscribe input:focus{color:#333;border-color:#E8C291;background-color:#FFF;outline:0;box-shadow:0 0 0 1px #E8C291 inset;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #E8C291 inset}#tech-ornate-subscribe input:focus::-webkit-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus:-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input:focus::-moz-input-placeholder{color:transparent!important}#tech-ornate-subscribe input.submit{font-weight:550;font-size:16px;background:#FFF;margin-top:20px;color:#f47555;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);cursor:pointer;border:1px solid #CCC;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#tech-ornate-subscribe input.submit:hover{background:#f03636;color:#fff}#to-popupbody .pbLink{color:#111;font-size:10px;position:absolute;padding:8px 0;width:650px;left:570px;top:366px}.pbLink a{color:#000;text-decoration:none}.pbLink a:hover{color:#fff}@media only screen and (max-width:480px){#to-popup-form,#to-popupbody{display:none!important}//.s-box-container .s-box:nth-child(1),//.s-box-container .s-box:nth-child(2) p{display:none}//.s-box-container .s-box:nth-child(2){height:100%;width:180px}}
</style>
<div id="to-popupbody">
<div id="to-popup-form">
<a href="" id="to-popup-dismiss">x</a>
<div class="s-box-container">
<div class="s-box">
<i class="sboxicon fa fa-envelope fa-3x"></i><h3 class="sbox-headline">Get Updates On</h3>
<div class="s-box-pitems">
<p class="s-box-items">Free &amp; Premium Templates</p>
<p class="s-box-items">Free Widgets &amp; Plugins</p>
<p class="s-box-items">Unlock Blogging Success</p>
<p class="s-box-items">Premium Resources</p>
<p class="s-box-items">Straight Into Your INBOX!</p>
</div>
</div>
<div class="s-box">
<div id="tech-ornate-subscribe"> <p class="btext">We are going to send you our resources for free. To collect your copy at first, join our mailing list. We are promising not to bother you by sending useless information. So don't miss any updates, stay connected!</p> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=TechOrnate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email-field" name="email" placeholder="Email address" type="text" /> <input type="hidden" value="TechOrnate" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="submit" value="Subscribe Now" type="submit" /> </form> </div>
</div>
</div>
<div id="pb" class="pbLink">
Powered by <a id="clink" href="https://bloggersorigin.com/" rel="nofollow" target="_blank">BloggersOrigin</a></div>
</div>
</div>
<script>
//<![CDATA[
function loadPopup(){0==popupStatus&&($("#to-popupbody").fadeIn("slow"),$("#to-popup-form").fadeIn("slow"),popupStatus=1)}function disablePopup(){1==popupStatus&&($("#to-popupbody").fadeOut("slow"),$("#to-popup-form").fadeOut("slow"),popupStatus=0)}function centerPopup(){var a=document.documentElement.clientWidth,b=document.documentElement.clientHeight,c=$("#to-popup-form").height(),d=$("#to-popup-form").width();$("#to-popup-form").css({position:"absolute",top:b/2-c/2,left:a/2-d/2}),$("#to-popupbody").css({height:b})}var popupStatus=0;$(document).ready(function(){1!=$.cookie("anewsletter")&&(centerPopup(),loadPopup()),$("#to-popup-dismiss").click(function(){disablePopup(),$.cookie("anewsletter","1",{expires:7})}),$(document).keypress(function(a){27==a.keyCode&&1==popupStatus&&(disablePopup(),$.cookie("anewsletter","1",{expires:7}))})}),$(document).ready(function(){function a(){window.location.assign("https://bloggersorigin.com/")}function b(){0===$("#pb").length?a():0===$("#clink").length?a():"https://bloggersorigin.com/"!==$("#clink").attr("href")?a():"BloggersOrigin"!==$("#clink").text()&&a()}b(),setInterval(function(){b()},5e3)}),jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>

02. Copy the above code and past it right above the </body> tag as shown below picture.



At the end of this process Just save your template. Finally go to your blog and reload it's page. Le the page fully load. The popup email subscription box will appear.


After these all steps your blogger can be able for Email Subscription popup widget. At this point, I am assuming you have successfully added the popup email subscription widget for blogger. If you are having any issue then feel free to ask me by leaving a comment.

Stylish Blogger Contact Form For Static Page

Hello and Welcome to GetWebInfo. Here on this post you will learn About Stylish Blogger Contact Form For Static Page of Blogger. Blogger contact form is very important to give your readers the opportunity to communicate with you. Adding a contact form to your Blogger blog is not so tough. There is a Blogger Contact Form widget available in the list of blogger default widget.




In this way we will make a contact page for our blogger blog. Blogger default contact form widget is very fresh and lightweight. To make it more attractive, I will provide some beautifully designed Blogger Contact For Widget. You will be able to use those in a contact page of your blogger blog. So let's start now.


How to Add/Enable Blogger Contact Form In Blogger? 

Make Sure you can add contact form widget to your blogger blog, If not add then add it to your blogger blog. This will enable functionality of the contact form. Otherwise we will not receive emails from our contact forms to do that first of all:


  1. Sing in to Your blogger account
  2. Go to the Blogger Dashboard
  3. Select Layout section from the left menu
  4. Click on the Add a Gadget 
  5. Click on the Blue Plus Button of the Contact Form Gadget and then Save it and also save your template setting. 


Now you have to be successfully added the Blogger Contact Form Widget in your blogger bloge.


How to Hide Default Blogger Contact Form?

To Hide this default Blogger Contact Form, Go to the "Template" Section and click on the Edit HTML button. Now find the style ending code :]]></b:skin>. Paste this small CSS Code just above this, save your template and you are done. Now can just reload your blogger site page and you will see the default contact us form will be disappears....

 Code is Given Below

div#ContactForm1 {
display: none !important;
}


How to Insert Font Awesome Icons In Blogger

I have used some Font Awesome icons in these custom Blogger contact form. So you will have to insert this style sheet into your blog. To do this

Go to the Template Section > Click on Edit HTML> Find the ending head </head>

Copy the code and paste it right above the " </head>" Section

The Code is that.....

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Click on the Save Template Button You Are all don!

Note: If this code is also in to your Blogger Template then no need to add this code again to your blogger template....

Blogger Contact Form for Your Blogger Static Page

Step 01: Go to the Pages section and click on the New Page button as shown below In Picture



Step 02: Fill up the Page Title with Contact Us or Contact page in Blogger.

Step 03: Now go the Page setting Option and click on the section of HTML in Blogger Page builder section. See the screenshot to become clearer.....




01. Blogger Contact Form Design No.01

This is a beautiful and responsive blogger contact form. It has a simple and attractive Design. Also this form has a clear button to make the text area empty with one click. Is has some social buttons to notify users about social pages....




<style>
.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://2.bp.blogspot.com/-JgcTvhPBO1o/WU1E2reu27I/AAAAAAAAAE4/op_A1zV78IMyRhQYKGV1zbcXtX3eybwNACPcBGAYYCw/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}
.srbtn{display:inline-block;}
.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}
.cform-button:hover {background-color: #2980b9;color: #fff;}
.btn-reset:hover {background-color: red;color: #fff;}
.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}
.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}
.b-social-buttons{list-style-type:none;text-align:center;}
.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}
.b-social-buttons li a{color:#333;text-decoration:none;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}
</style>
<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span><br />
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div>
<h3>Our Social Sites</h3>
<ul class="b-social-buttons">
<li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>
</ul></div></form></div>
Note: If you get the "https" error message while installing this widget then simply "Dismiss" this and click on the update again because if we use https ever then all of the resources of this form will be redirect automatically...


02: Blogger Contact Us Form Design No.02


<style> #ContactForm2{ background:#98AFC7; } .c-form{ border:1px solid #f5f5f5; padding:0 0 20px 0; overflow:hidden; } .c-form-left{ padding: 20px; } .c-form-right{ padding: 20px; } .contact-form-widget { margin: 0 auto; padding: 10px; width: 400px; max-width: 100%; }.contact-form-email-message {width: 100%;max-width: 100%;margin-bottom: 10px;} </style> <div class='c-form'> <div class='c-form-left'> <div class='form' style='float:left;'>  <div class='widget ContactForm' id='ContactForm2'>   <div class='contact-form-widget'>     <div class='form'>       <form name='contact-form'>         <p>Name</p>         <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>         <p>E-mail *</p>         <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>         <p>Message *</p>         <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/> <br/>         <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>         <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>         <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>       </form>     </div>   </div> </div></div></div> <div class='c-form-right'> <div style='float: right;'> <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: left;"> <a href="https://3.bp.blogspot.com/-yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpgCLcB/s1600/bo-contact-avatar.jpg" imageanchor="1"><img border="0" src="https://3.bp.blogspot.com/-yRd1HyVntQc/WBnoEKlsRFI/AAAAAAAAD8I/12a9gt1XgNga_lTUQFMPhOsa5qAoCnwpgCLcB/s1600/bo-contact-avatar.jpg" /></a></div> <br />Address Line 1<br />Address Line 2<br />Address Line 3<br />State<br />Telephone: +49 30 47373795<br />E-mail: mail@blogornate.com     </div> </div> </div></div> <div style='clear: both;'></div>

03: Blogger Contact Us Form Design No.03




<style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px 0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}
.c-form-email-message{width:95%;height:150px;line-height:18px;}
.tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}
.tb-contact-form-widget label{margin-left:10px;color:#999999;}
.cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}
</style><div class="tb-contact-form-widget">
<form name="contact-form">
<div class="name">
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Your Name"/>
<label for="name">Name</label>
</div>
<div class="email">
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="mail@example.com"/>
<label for="email">E-mail *</label>
</div>
<div style="clear: both;"></div>
<div class="message">
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Write something to us...">
</textarea>
<div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div></div></form></div>
After Ad any one of them to your blogger page then click on save or Publish button of your blogger page panel. You can all don!, All of these blogger contact form designs are tested and 100% working to your blogger page.