Whats up guys, Here we discuss about the new technologies, useful software, blogging techniques and some ways to earn money online.

21 June 2016

Why you shouldn't use external Templates in blogger?

Whats up Guys,
All the steps are given with Images
Why you shouldn't use external Templates in blogger? Build new one up from its own basic templates.
  It's not big but informative. Just get back to your seat and relax guys. Many newly arrived peoples are made a big mistake in this matter and upcoming bloggers also will do this. They choose attractive XML templates from external sites. Now, What is the worse because of this? There is a proverb too, Beautiful is also Dangerous too.
  Customization has a main contribution in maintenance of a blog. You might already have experienced that, It is necessary to customize and modify your blog often as your needs and to reach more viewers. It is very hard to think, if you can't customize your blog for some needs after you did many more with this. Basement should be made very very correctly for everything. Are you with me?
  Another bad thing is images linked with the templates also may be gone if its host stops hosting. After that you sites' whole decorations also will be crashed. How will you feel then? It is not search engine friendly too. I don't know how. But it is true. It may be because of its size. Some options in template customize aren't work for the external templates including its layout length. There are many options won't work for them. You have to edit them via coding which may blow your entire template.
So, What is the easy way to go?
  Build your own template from basic templates offered by Google blogger. You may also better to select dynamics templates from blogger by its default. It is very easy to make a unique template and possible to create more than billion of them. Just follow these simple steps to go.
  • Choose any of the template available by default in blogger from lists Simple, Picture Window, Awesome Inc., Watermark, Ethereal, Travel.

  • Go to Customize button in orange color in Templates (See Picture).
  • Now you will see blogger's template editor interface. It is able to switch to the default template here also. Jump to Background tab in the left top corner. Set any background you want preloaded designs or upload your own picture. If you want plain background, leave it to none. Select a color theme. Its color pattern going to be changed in following step. Select any your favor.

  • Then jump to layout tab. Don't adjust its widths before this step which will be useless after chose another layout. Then Select anyone for main layout and footer layout suit to you.

  • Go to Adjust Width tab. Adjust side and main wrap width of your template. All changes are shown instantly below the settings.

  • Go to Advanced tab and Customize everything there as your needs. You can change texts' font, color, size etc to Page text, title, links etc individually. 

  •  Click on Apply to Blog and Hit Back to Blogger.

  • Go to the Layout tab from list in left. Adjust all of your gadgets' position including Header and Menu/ Pages. You can use Labels gadget instead for Menu/ Pages. You can insert your own HTML or Script here. For decent blog, hide/ off navigation bar and set your own Favicon. Try Google Adsense which is to earn some money from your blog impressions and ads click.

  That's all guys. You have got a impressive and smart template which is only in your blog. Don't forget to share, like or plus, tweet our site. Thanks again for your arrival.

Tags: Blogging, Blogger, Blogging Tips, blogger templates, customize template, create blogger template.
If you like our Articles Collection Please Like or Plus or Share. It will helpful to improve our site. You can also subscribe with your email to get instance updates from our site.
Thanks for your visit, Subscribe with us to get updates immediately to your inbox : Contents : Whats up Here

15 June 2016

Add a Popup Box with Close Button to a Your Blog : Direct Popup HTML script code

   There are many needs for a popup box to your blog. Many purposes such as show floating ads, convince visitor to subscribe or get shares and like to your site, show survey forms to get facts and comments from user, show your certain product to sell. You may need to show them while site loading or in a click and hide with another button click.'
   I explain about editing a sample code to build up all types of popup boxes. It is able you to customize all the things in the popup box after you read this. Let begins to topic,
   First know about the CSS style code Which is used to shine up your popup box. Style sheets are used to change your plain HTML into a shiny site.
   Every tag after # carries style for its own objects defined in HTML. Period or full stop “.” also can be used instead of the hash #.
#Object1_Name{ Here the styles are defined for object1. You could modify everything here to change style for the certain object1 }

#backgroundPopup
{
Popup will be shown in fixed position and visitor cannot access content in your blog which will be shaded, for the code given here by default. If you want a popup code which move along the site while all the content are active, Modify code in this tag by removing “display:none;” and changing “position” to static. }

#popupContact{ You can adjust font size, border, background color etc here. You can also change the width and height. But You must set a certain value other than percentages for those.}

#popupContactClose{ You can change properties and position of its close button here.}

#Content{ it’s able to customize characteristic of text entered in the div Content tag here.}

   You can also able to add more styles and divisions for the styles with same tag id. This style code strip should be added into your blog HTML just before the popup code in order to get good impression of the blog. It is also eligible to add this code combine with the popup code. However, I have given those codes separately to teach you full customization of popup box HTML. Some sample and edited ready made popup codes suit for some popular needs also been attached at last here. First you copy and edit the style code given below.

Style Section Code
<style>
#backgroundPopup{ display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0;  background-color: transparent;  background:rgba(0, 0, 0, 0.5); z-index:999; }

#popupContact{ display:none; position:fixed; _position:absolute; height:500px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px;}

#popupContactClose{ background:url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png) no-repeat;    width:37px; height:37px; display:inline; z-index:3200; position:absolute; top:-15px;  right:-16px; cursor:pointer; text-indent: -99999px;}

#Content{ color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic;     line-height:30px; }
</style>

   Let get into the HTML Section guys. It is the portion deciding how the objects in the popup should be arranged.

<div id="*****"> the stars (*****) in the id are the tags set in the CSS style code. Style of every division is decided by its corresponding tag in the style sheet.

HTML Section Code
<div id="backgroundPopup">
<div id="popupContact">
<a id="popupContactClose">x</a>
<div id="Content"> Your Content Here </div>                    
</div>
</div>

   You should include all of your things’ code need to be show in popup just after <div id="Content"> tag.
<div id="Content"> Your Content here </div>
It is able to add any HTML, Script, iframes, ads etc in the “your content here” area. You have to be care about that every HTML tags are closed and enclosed properly inside of it. You should consider its view size if you set height and width for #popupContact and #backgroundpopup tags in CSS style code above to avoid content overlapping popup. That is all to say about HTML section. Let we move to the Script section.
   You can also open up another web URL when viewer close popup. Find <a id="popupContactClose">x</a> add this following code between a and id in it.
href="Your WEB URL Here"
   In Script section, there are not much things to learn. First you know how the popup showing system works. Popup will be shown only once and never again for few days after closed by a user. You could modify this code to show popup all the time when page reloaded by the user. It uses cookies to avoid show again after you close it. You can customize that how many days should be taken to show it again to the user for subscription requests. Find { expires: 7 } in script and change the days 7 into anything you want. It is twice in it code, the second used to close popup with escape key on keyboard. Change in both places. If you want to show popup for every page reloading, find this code popupStatus = 0; and change the 0 into 1.

Script Section Code
<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">

</script>
<script type="text/javascript">
 var popupStatus = 0;

//this code will load popup with jQuery magic!
 function loadPopup(){

//loads popup only if it is disabled
 if(popupStatus==0){
 $("#backgroundPopup").fadeIn("slow");
 $("#popupContact").fadeIn("slow");
 popupStatus = 1;
}
}

//This code will disable popup when click on x!
function disablePopup(){

 //disables popup only if it is enabled
 if(popupStatus==1){
 $("#backgroundPopup").fadeOut("slow");
 $("#popupContact").fadeOut("slow");
 popupStatus = 0;
 }
}

//this code will center popup
function centerPopup(){

 //request data for centering
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $("#popupContact").height();
 var popupWidth = $("#popupContact").width();

 //centering
 $("#popupContact").css({
 "position": "absolute",
 "top": windowHeight/2-popupHeight/2,
 "left": windowWidth/2-popupWidth/2
 });

 //only need force for IE6
 $("#backgroundPopup").css({
 "height": windowHeight
 });
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
 if ($.cookie("anewsletter") != 1) {

 //centering with css
 centerPopup();

 //load popup
 loadPopup();
 }  

 //CLOSING POPUP
 //Click the x event!
 $("#popupContactClose").click(function(){
 disablePopup();
 $.cookie("anewsletter", "1", { expires: 7 });
 });

 //Press Escape event!
 $(document).keypress(function(e){
 if(e.keyCode==27 && popupStatus==1){
 disablePopup();
 $.cookie("anewsletter", "1", { expires: 7 });
 }
 });
});
</script>
  
You can also set to show it once for every sub URLs or pages in your site. Find tag <script type="text/javascript"> and add var url1=window.location.href; just after that. Find all the three “anewsletter” and replace it with url1 without any quotes. You have done. It can be used for to show share or like popups in every pages in your blog.

Positioning your popup

The code given below will center your popup. If you want to show it in your favor position, remove code between //request data for centering and //centering. Then give your top and left coordinates in pixels(px) in //centering section.

 //this code will center popup
function centerPopup(){
 //request data for centering
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $("#popupContact").height();
 var popupWidth = $("#popupContact").width();
 //centering
 $("#popupContact").css({
 "position": "absolute",
 "top": windowHeight/2-popupHeight/2,
 "left": windowWidth/2-popupWidth/2
 });
 //only need force for IE6
 $("#backgroundPopup").css({
 "height": windowHeight
 });
}
#Content{ color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic;     line-height:30px; }
</style>

Some Sample Popup HTML Scripts Codes

1.Feedback Subscription Popup Box HTML Script code:
 <style>
#backgroundPopup
{ display:none; position:fixed; _position:absolute;
/* hack for internet explorer 6*/
height:100%; width:100%; top:0;
left:0; background-color: transparent;    
background:rgba(0, 0, 0, 0.5);z-index:999; }
#popupContact{ display:none;
position:fixed; _position:absolute;
/* hack for internet explorer 6*/ height:500px; width:500px; background:#FFFFFF;
border:4px solid #ddd; z-index:999;
padding:8px; font-size:13px; }
#popupContactClose{    background:url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png)
no-repeat;    width:37px;    height:37px;    display:inline;    z-index:3200;    position:absolute;    top:-15px;    right:-16px;    cursor:pointer;    text-indent: -99999px;}
#Content {    color: #AAAAAA;    font-family: times New Roman;    font-size: 25px;    font-style: italic;    line-height:30px; }
#insideimg {    float: left;    height: 80px;    padding: 0 25px 0 10px;    width: 80px; }
#btntfollowForm {  padding: 15px; }
#btntfollowForm img {  border:none; }
#btntfollowForm p {  margin: 0 0 10px;}
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px;        margin-bottom: 20px; padding: 10px 5px 10px 25px;  border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box;   -moz-box-sizing : content-box;       box-sizing : content-box; -webkit-border-radius: 3px;    -moz-border-radius: 3px;         border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;      -o-transition: all 0.2s linear;   transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}
#btntfollowForm .button input{    background: none repeat scroll 0 0 #3D9DB3;    border: 1px solid #1C6C7A;    border-radius: 3px 3px 3px 3px;    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;    color: #FFFFFF;    cursor: pointer;    font-family: 'Arial Narrow',Arial,sans-serif;    font-size: 24px;    margin-bottom: 10px;    padding: 8px 5px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);    width: 30%;    float: right; }
#btntfollowForm .button input:hover{    background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87);   -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;         box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
#btntFollowFooter {  color:#222;  text-align: center;    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;    padding: 7px 0;    margin-top: 80px;    text-shadow: 0px 2px 3px #555;    position: absolute;    width: 500px; }
#btntFollowFooter a {    color: #222;    text-decoration: none; }
#btntFollowFooter a:hover {    color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg {    background:none;    right:-14px;    width:22px;    height:26px;     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png',sizingMethod='scale'); }
#btntfollowForm  input{ padding: 10px 5px 10px 32px;    width: 93%; }
#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0;}
<![endif]-->
</style>

<div id="backgroundPopup">
<div id="popupContact">
<a id="popupContactClose">x</a><br />
<div id="btntfollowForm">
<center>

<img alt="email" border="0" src="https://lh3.googleusercontent.com/-
qaaiWPDGTtM/VAlBpbH0_5I/AAAAAAAAAfs/eSK0mQYj3YY/s200-no/feed.png" />
</center>
<div id="Content">
Subscribe to our mailing list to get the
updates to your email inbox...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open 'http://feedburner.google.com/fb/a/mailverify?uri='Your Feedburner Name here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri"
type="hidden" value="Your Feedburner Name here" /><input name="loc" type="hidden" value="en_US" /><br /><div>
<input type="submit" value="Subscribe" /></div>
</form>
</div><div>
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a></div>
</div>
</div>

<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">

</script>
<script type="text/javascript">
 var popupStatus = 0;

//this code will load popup with jQuery magic!
 function loadPopup(){

//loads popup only if it is disabled
 if(popupStatus==0){
 $("#backgroundPopup").fadeIn("slow");
 $("#popupContact").fadeIn("slow");
 popupStatus = 1;}}

//This code will disable popup when click on x!
function disablePopup(){

 //disables popup only if it is enabled
 if(popupStatus==1){
 $("#backgroundPopup").fadeOut("slow");
 $("#popupContact").fadeOut("slow");
 popupStatus = 0; }}

//this code will center popup
function centerPopup(){

 //request data for centering
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $("#popupContact").height();
 var popupWidth = $("#popupContact").width();

 //centering
 $("#popupContact").css({
 "position": "absolute",
 "top": windowHeight/2-popupHeight/2,
 "left": windowWidth/2-popupWidth/2
 });

 //only need force for IE6
 $("#backgroundPopup").css({
 "height": windowHeight
 });}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
 if ($.cookie("anewsletter") != 1) {

 //centering with css
 centerPopup();

 //load popup
 loadPopup();
 }  

 //CLOSING POPUP
 //Click the x event!
 $("#popupContactClose").click(function(){
 disablePopup();
 $.cookie("anewsletter", "1", { expires: 7 });
 });

 //Press Escape event!
 $(document).keypress(function(e){
 if(e.keyCode==27 && popupStatus==1){
 disablePopup();
 $.cookie("anewsletter", "1", { expires: 7 });
 }
 });
});
</script>

2.Social Share box float right all the time : Floating Script.
   You Should add this code after <body> tag to show G+ button.
<script src="https://apis.google.com/js/platform.js" async defer></script>
<style>
#Popupcontact
{ height:274px; width:52px; margin:0auto; position:fixed; _position:absolute;
border:3px solid #ccc; top:230px; right:0.5px; padding:5px;}
#glike{position:relative; top:2px; }
#Gplus{ position:relative; top:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT8o4yIwcDquLGDQdm4PCFrb6czrhK8uAS2HzijB_wZfK5jtQQfxhDFLqoVrUYtYWwMcUzDbA1e2DSu6cuReUD6hWgpJeEA61zQuWBO90EtFr5TO87cNbK3D4_rVFC1fIldBDw0SXBfI_x/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
#fbshare{ position:relative; top:-14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiezleUvWb7A_DjF0kOXD7Dwtq3OkGMPDDpa58hwoYxGeJhf1-28a8eqGHMXfsJJcm8ygUaI4VbChDalqSbTrbac5GQlJJFKL5AUh7IZZpwsJ6MWGK1TbNgqw4n86SE3A5OWIZiWTkj87A/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
#twit{position:relative; top:-34px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ASFKQy1TlvTMTwZQ1jueoXt0Nh4_H0SPgM59dj2XTm-XwSqKvnBv9xaEY9VBZjk_RJflG7woeXE9KTEu0_X6cE5juO7OyuWG3W_TE0IkDuMFG1A5xQiSvI0n5MsYpxT5-c-dntJhgq4h/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
#linkin{position:relative; top:-52px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcpbzFcpAB4O5zMCtEyToo9q6e29QtglpKshta8FvTiY3BHm6rPcrlVlDdGedXTT6XIs49Xx-Rbi2qsjm6aI6ynFLkCxKFKIkl8JQkbcqdEwfZ1MT164ZxAS1vlbTUdeH4SjHNom0PznV/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
</style>
<div id="Popupcontact">
<center>
<!-- Place this tag where you want the +1 button to render. -->
<div id="glike" class="g-plusone"  data-size="tall"></div><br />
<a href="https://plus.google.com/share?url=" id="Gplus"></a><br/>
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" id="fbshare"></a><br />

<a id="twit" href="https://twitter.com/share" class="twitter-share-button"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';</script>
<br>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=" id="linkin" ></a>
</div></center>
<script>
var url1=window.location.href;
document.getElementById('fbshare').href += url1;
document.getElementById('Gplus').href += url1;
document.getElementById('linkin').href += (url1+"&title=&summary=&source=");
</script>

3.Facebook Share Request Popup Box HTML Script code (Big and Force to share):
<style>
#Popupcontact
{ height:272px; width:52px; margin:0auto; position:fixed; _position:absolute;
border:3px solid #ccc; top:230px; right:0.5px; padding:5px;}
#glike{position:fixed; top:2px; }
#Gplus{ position:relative; top:-3px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT8o4yIwcDquLGDQdm4PCFrb6czrhK8uAS2HzijB_wZfK5jtQQfxhDFLqoVrUYtYWwMcUzDbA1e2DSu6cuReUD6hWgpJeEA61zQuWBO90EtFr5TO87cNbK3D4_rVFC1fIldBDw0SXBfI_x/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
#fbshare{ position:relative; top:5; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiezleUvWb7A_DjF0kOXD7Dwtq3OkGMPDDpa58hwoYxGeJhf1-28a8eqGHMXfsJJcm8ygUaI4VbChDalqSbTrbac5GQlJJFKL5AUh7IZZpwsJ6MWGK1TbNgqw4n86SE3A5OWIZiWTkj87A/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
#twit{position:relative; top:2px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ASFKQy1TlvTMTwZQ1jueoXt0Nh4_H0SPgM59dj2XTm-XwSqKvnBv9xaEY9VBZjk_RJflG7woeXE9KTEu0_X6cE5juO7OyuWG3W_TE0IkDuMFG1A5xQiSvI0n5MsYpxT5-c-dntJhgq4h/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
#linkin{position:relative; top:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcpbzFcpAB4O5zMCtEyToo9q6e29QtglpKshta8FvTiY3BHm6rPcrlVlDdGedXTT6XIs49Xx-Rbi2qsjm6aI6ynFLkCxKFKIkl8JQkbcqdEwfZ1MT164ZxAS1vlbTUdeH4SjHNom0PznV/s50-no/) no-repeat;  width:50px; height:50px; display:inherit;}
</style>
<div id="Popupcontact">
<center>

<table>
<tr>
<div id="glike" class="g-plusone"  data-size="tall"></div>
</tr>
<tr>
<a href="https://plus.google.com/share?url=" id="Gplus"></a>
</tr>
<tr>
<a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" id="fbshare"></a>
</tr>
<tr>
<a id="twit" href="https://twitter.com/share" class="twitter-share-button"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';</script>
</tr>
<tr>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=" id="linkin" ></a>
</tr>
</table>
</center></div>
<script>
var url1=window.location.href;
document.getElementById('fbshare').href += url1;
document.getElementById('Gplus').href += url1;
document.getElementById('linkin').href += (url1+"&title=&summary=&source=");
</script>


4.Popup code to show Floating Ads for each view of your site pages first time.
<style>
#backgroundPopup1{ display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5); z-index:999; }
#popupContact1{ display:none; position:fixed; _position:absolute;height:500px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:0px; font-size:13px; }
#popupContactClose1{ background:url(https://www.networkcapital.net/images/close_button.gif)   no-repeat;    width:37px;    height:37px;    display:inline;    z-index:3200;    position:absolute;    top:-15px;    right:-16px;    cursor:pointer;    text-indent: -99999px;}
#btntfollowForm1.button input{    background: none repeat scroll 0 0 #3D9DB3;    border: 1px solid #1C6C7A;    border-radius: 3px 3px 3px 3px;    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;    color: #FFFFFF;    cursor: pointer;    font-family: 'Arial Narrow',Arial,sans-serif;    font-size: 24px;    margin-bottom: 10px;    padding: 8px 5px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);    width: 30%;    float: right; }
#btntfollowForm1.button input:hover{    background: #4ab3c6; text-decoration: none; }
#myword1{color: #AAAAAA;    font-family: times New Roman;    font-size: 25px;    font-style: italic;    line-height:30px; }
#btntfollowForm1.button input:active,
#btntfollowForm1.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87);   -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;         box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter {  color:#222;  text-align: center;    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;    padding: 7px 0;    margin-top: 80px;    text-shadow: 0px 2px 3px #555;    position: absolute;    width: 500px; }
.btntFollowFooter a {    color: #222;    text-decoration: none; }
.btntFollowFooter a:hover {    color: #fff; }
<!--[if lt IE 7]>
#btnt-container a1.btntCloseImg {    background:none;    right:-14px;    width:22px;    height:26px;     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih9qMMLSQAWLFQF8L6oDqVM4l7kqZnXu6Ukxfbt_LIDQlQPLsSTHyc9_7dXQrLoeDkh2sOfGjGTqi-SvNTVhsgUVKRken2TWEIMZSyZTFUnnmec3tXWd2ubGw-651GX96P7lzUAVc0HuU/s38-p/x-mark-button-md.png',sizingMethod='scale'); }
#btntfollowForm1  input{ padding: 10px 5px 10px 32px;    width: 93%; }
#btntfollowForm1  input[type=checkbox]{ width: 10px; padding: 0;}
<![endif]-->
</style>
<center>
<div id="backgroundPopup1">
<div id="popupContact1">
<div id="myword1">
<p>Your Text here</p>
</div>
<center>
Your ADS Here. Adjust the size of this popup.</center>

<a href="" target="_blank" id="popupContactClose1">
</a>
</div></div></center>

<script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
</script>
<script type="text/javascript">
 var popupStatus1 = 0;
//this code will load popup with jQuery magic!
function loadPopup1(){
 //loads popup only if it is disabled
 if(popupStatus1==0){
 $("#backgroundPopup1").fadeIn("slow");
 $("#popupContact1").fadeIn("slow");
 popupStatus1 = 1;
 }
}

//This code will disable popup when click on x!
function disablePopup1(){
 //disables popup only if it is enabled
 if(popupStatus1==1){
 $("#backgroundPopup1").fadeOut();
 $("#popupContact1").fadeOut();
 popupStatus1 = 0;
 }
}

//this code will center popup
function centerPopup1(){
 //request data for centering
 var windowWidth1 = document.documentElement.clientWidth;
 var windowHeight1 = document.documentElement.clientHeight;
 var popupHeight1 = $("#popupContact1").height();
 var popupWidth1 = $("#popupContact1").width();
 //centering
 $("#popupContact1").css({
 "position": "absolute",
 "top": windowHeight1/2-popupHeight1/2,
 "left": windowWidth1/2-popupWidth1/2
 });
 //only need force for IE6
 $("#backgroundPopup1").css({
 "height": windowHeight1
 });

}
var url1=window.location.href;
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
 if ($.cookie(url1) != 1) {
 //centering with css
 centerPopup1();
 //load popup
 loadPopup1();
 }    
 //CLOSING POPUP
 //Click the x event!
 $("#popupContactClose1").click(function(){
 disablePopup1();
 $.cookie(url1, "1", { expires: 100 });
 });
 });
</script>

If you have any doubts in this section, Don't hesitate to contact me via comments conversations and your feedback are also welcomed.
 
Tags: Blogging Tips, popup advertisement, popup box scripts, popup code, popup html script, popup script, popup with close button, social share popup, styles up html, Website creation

If you like our Articles Collection Please Like or Plus or Share. It will helpful to improve our site. You can also subscribe with your email to get instance updates from our site.
Thanks for your visit, Subscribe with us to get updates immediately to your inbox : Contents : Whats up Here
Related Posts Plugin for WordPress, Blogger...

Whats up to Read<>