Featured Posts

Best Facebook Pop Up Button For Website/Blogs(Blogger,WordPress..etc)

Perhaps,You have touched with this post, How Social Network Influence in Tracking website traffic for a certain Limit,If you are not aware about this ..Please read this Post first.


In fact,we can't forces our visitors to drop a like on our Facebook,twitter,Google plus pages.So,what we have to do,Disturb or tackle the mind with mind freaky pop up buttons on it( on our webs ) in a pop up manner.Most probably many of them closes,many of them probably not aware this also. Basically,Young bloggers or new bloggers.So,they drop a like and wait for our updates.

Now a days,Facebook is standing first in the social networking,and the arrival of smartphones boost up their facilities along with it.so that viewing web version also made easy through it.

Hence Pop up Button Forces 40-50% visitors to drop a like on our webs,If we adopts frequent updates.

Now have a look How to Add Pop Up button or Pop Up Like Box For Websites.
Here I will Give an Example about Blogger Blog.

Go to Blogger Dashboard>> Layout>>Add a Gadget>> Html/Java script>>Paste the Below Code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, 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() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, 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 type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(15000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Best-Blog-Tricks-Official/339755399486549&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><center>
<span id="linkit"><a href="http://www.bestblogtricks.com/2013/12/best-facebook-pop-up-button-for.html">Facebook Like Box</a> <a href="http://www.bestblogtricks.com">Widget</a></span></center>
</div>
</div>
                               
Note 1:

Replace https://www.facebook.com/pages/Best-Blog-Tricks-Official/339755399486549 this link with your Facebook and Save it.


Here the pop up Maintains 15 second pop up.So In order Increase of decrease the delay period. You can change by
1 sec= 1000
10 sec= 10000
20 sec= 20000
30sec= 30000
Like this we can increment or decrements the  time period up to our decision.

Note 2:

If you wan't to pop up button on every page of your posts .Then remove this Html code from this.
                 
                       $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });


Conclusion:

By default setting delay time period enhances and you can easily tackle the mind of your visitors as well in tackling a single like on it.

How to Create Sitemap For Blogger

Marketing Now a days is getting tough and search engines difficult to reach all the sites is getting tough and moreover to attract visitors sitemap is must for website to get a brief summary about what kind of posts have been added and what all changes in posts have been recently done can be easily identified in a single look.

We all know that creating sitemap in webmaster tool is must to identify search to look our websites,but when viewers reach our website.,Analytic view for sitemap is must for them to see what all contribution are we done for them in our tricky sites.so generation of sitemap is a must..!!

In my recent post about, Adding Contact form for Blogger is a must for every websites/blogs.While surfing along the network,as discussed above,Looking for the required posts is a weird.So,Sitemap allow visitors to have a easy way to identify all the website posts in a single views.


Steps to be Noted While Adding Sitemap in Blogger 

Go to Blogger>> Dashboard>>  Create New Page >>Insert Title as "Sitemap" >>Blank Page>> Insert the Below HTML code and Paste it.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.YourBlogDomainName.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Now Change YourBlogDomainName With your Blog Domain Name,whether its custom domain or freedomain.Change as it is.. 
Click Publish..

Conclusion:

If you point out any problem in adding this format in blog,drop your free comments below and drop your view on this.



Best Customized Contact Form For Blogger

Contact Form is an essential factor for each and every website, in order to contact a blogger via with his/her visitors about the queries and suggestion, more than dropping in a posts as comments.Contact Form is eternally important for a publisher.

In Blogger Blog we have already available a Installed Plugin Inside the Layout Boxes.In fact, it's not reliable in perfect looking inside the web,Hence our viewers will not able to identify where it's been installed.Moreover type of format is not up to the mark for an informer.

So most of you are concerned with recent gadgets.Here I'm installing a neat described format for you,that can be easily applied over blog blog.More over it can be set at the navigation bar or footer bars.Hence a visitor can easily navigate for contact.

How to Install Contact Form Into Blogger Blog.

Step-1:

Go to Dashboard>Layout>Add a Gadget > More Gadget> Ok.



Step-2:


Go to Blogger>Template>Edit HTML
Search For </head>
Just above this paste the below code.
<style>
#ContactForm1{ display:none!important;} </style>

If you installed already contact form on using from above discussed,It will gets disabled and below code will tends to display the proper code for instead of it.

To install Contact Form Successfully.

Step-3:

Go to Dashboard>>Pages>>New Blank Page>>Paste the Below HTML code in HTML format.


<style>
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-subject, .contact-form-country {
max-width: 300px;
width: 100%;
font-weight:bold;
}
.contact-form-name {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 10px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;
}
.contact-form-email {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;
}
.contact-form-subject {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;
}
.contact-form-country {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;
}
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 15px 15px 15px 5px;
}
 .contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A1A1A1;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
vertical-align: top;
max-width: 500px!important;
height: 120px;
border-radius:4px;
}
.contact-form-button {
cursor:pointer;
height: 30px;
line-height: 30px;
font-weight:bold;
border:none;
}
.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 10px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(1,1,1,.3);
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
-webkit-box-shadow: 0 1px 2px rgba(1,1,1,.3);
-moz-box-shadow: 0 1px 2px rgba(1,1,1,.3);
box-shadow: 0 1px 2px rgba(1,1,1,.3);
}
.contact-form-button:hover {
text-decoration: none!important;
border: none!important;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
</style>
<div class="form">
<form name="contact-form">
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Subject&quot;;}' onfocus='if (this.value == &quot;Subject&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<input class='contact-form-country' id='ContactForm1_contact-form-email' name='Country' value="Country"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Country&quot;;}' onfocus='if (this.value == &quot;Country&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' type='reset' value='Clear'/>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 500px; text-align: center; width: 100%;">
<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>

Conclusion:

 Now you are done..!! You can Now available your best Ever customized Contact Form.
Kindly drop your view on this technique.

Best Related Plugin For Blogger Blogs and WordPress Blogs

In the Earlier Post about problem creating by Bounce Rate and how it can be easily detected can be explained for you .If You are not aware this Please Have a Look This before you install this plugins.


Basically,we have already discussed in the previous posts.However,I already said in that,Post which shows Image Plugins will only tackle the mind of readers rather installing colored type CSS/JQUERY style format by editing and pasting inside your blogger templates.




Problems In Installing in These Plugins are :
  • Plugin Will Vanishes,If we Installs inside templates design.
  • It will slows Down Your Website Speed.Hence visitors will not make a visit over,by his problems.
  • Due to lack of traffic Adsense Revenue comes down.
So,I'm offering you the basic related plugin,that always fits your website,even when you changes your website template in future period.

Basic 2 Important Plugin For Blogger Blog and Blogs Like Wordpress, and more..

1. OutBrain.


  Click Here to Access widget.











2. LinkWithin

Click Here to access Widget.





There is no need to sign up necessary in LinkWithin and Outbrain need one minute sign up to get easy access widget your blogs/website.

After You  enter your details over this.You get easily access a direct installation plugin for Website for which platform you were hosted in.



Conclusion:


Don't be get cheated by other plugins,that decreases your traffic range and protect you from yours by installing this small suggestion from me and allowed your mindful comments over here.Hence we are not blaming other plugins.,But reminding you that i slows your traffic that's all...!!!

www.CodeNirvana.in

Copyright © Best Blog Tricks