Youtube Android,Blogging SEO & Whatsapp Tricks

youtube SEO, tricks for blogger, wordpress tricks for earning money online youtube earning, whatsapp,windows, android & all about new technology.

Showing posts with label Widgets. Show all posts

Beautiful Black with Red Border Subscribe via Email Widget for Blogger


Keep update your blog reader send them new update post via email provide subscribe via Email option in your blog. Add this beautiful e-mail subscribe widget in your blog.
Below demo indicator


Subscribe To Get FREE Updates!


How to Add Subscribe via Email Widget in blogger?

Copy below given code and past this code in your blog via add Html/JavaScript Gadget option
Note:-Replace AllBloggingNewTechnologyZone with your Feedburner ID

Copy and Past Below Code in Your Blog
<style>
#Subscribe-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:2px
solid #FF0000;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#Subscribe-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#Subscribe-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#Subscribe-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#Subscribe-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#Subscribe-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<div id='Subscribe-box'><h1>Subscribe To Get FREE Updates!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AllBloggingNewTechnologyZone&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='AllBloggingNewTechnologyZone'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>


Read More
October 21, 2014

Facebook popup like box widget

Add popup Facebook Like box gadget in Blogger

Facebook like box for website or blog add beautiful facebook page like recommended widget increase your page liker how it work when your webpage open a popup window will appear for recommending like your facebook page. Grow facebook page likes increase blogger blog or website readers.

Specialty of this widget.

 1. this widget appear after 20 second of page load. you can customize time according to you change delay(20000) in below code for change delay time.
2. most important feature of this widget this widget appear only one time this widget will not disturb to visitors  by showing popup box again n again (if viewer delete the cookies and open this page again then popup box again will show for 1st time).

you can see live demo on this page.

Follow Below steps for Add this widget

  1. Go to Blogger
  2. Take Backup of your Blog Template
  3. Search For <head>
  4. Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

    5. Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

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

  5. Now Add Below Given Code in your blog by add a widget option
    6. Below demo indicator
    Copy and Past Below Code in Your Blog

    <!-- Facebook Popup Widget START -->
    <style>
    #vktechzone-back {
    display:none;
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    }
    #vktechzone-exit {
    width:100%;
    height:100%;
    }
    #vktechzone1 {
    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;
    }
    #vktechzone-fb-popup {
    float:right;
    cursor:pointer;
    height:15px;
    padding:20px;
    position:relative;
    padding-right:40px;
    margin-top:-20px;
    margin-right:-22px;
    }
    .vktechzone-fb-like {
    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'){
    $('#vktechzone-back').delay(20000).fadeIn('medium');
    $('#vktechzone-fb-popup, #vktechzone-exit').click(function(){
    $('#vktechzone-back').stop().fadeOut('medium');
    });
    }
    $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
    });
    </script>
    <div id='vktechzone-back'>
    <div id='vktechzone-exit'>
    </div>
    <div id='vktechzone1'>
    <div id='vktechzone-fb-popup'>Close
    </div>
    <div class='vktechzone-fb-like'>
    </div>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
    href=http://www.facebook.com/vktechzone&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.vktechzone.com">Get This Widget</a></span></center>
    </div>
    </div>
    <!-- Facebook Popup Widget END-->

    Note:- Replace vktechzone with your Facebook page ID.

    How to Add Html/Java widget? Follow below steps to add Widget

    1. Go to Blogger
    2. Go to your blog Layout option.
    3. Now Select Add a Gadget option.
    4. Now select Html/Java Script option
    5. Now past the above code in Content area field and press save button.


      6. You may also like to try Facebook Floating Like box


Read More
October 17, 2014

Social Media Follow us Magical Effect Widget for Blogger

Social Media Follow widget

Social follow us gadgets for blogger add this beautiful widget for go to your Facebook, Twitter, Google+, Pinterest pages and RSS feed it’s look so cool when you bring your mouse cursor it will be large and Dark you can see below demo.
Below demo indicator



Add Below Given Code in your blog by add a widget option for social media button in your blog.

Below demo indicator
Copy and Past Below Code in Your Blog

<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/vktechzone"target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/111153762318745795031/posts"target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://www.twitter.com/vktechzone"target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/vktechzone/"target="blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://www.vktechzone.com/feeds/posts/default"target="blank">Subscribe via RSS</a></li>
</ul>
<small><div style="font-size:50%; text-align:right;"><a href="http://www.vktechzone.com/2014/05/social-media-follow-us-magical-effect.html" target="_blank" title="Get This Widgets">Get This Widget</a></div></small>

 Note:-Replace vktechzone with your facebook page ID Replace 111153762318745795031 with your Google+ page ID Replace vktechzone with your Twitter ID Replace vktechzone with your Pinterest ID Replace http://www.vktechzone.com/feeds/posts/default with your Blog RSS URL
How to Add Html/Java widget? Follow below steps to add Widget

  1. Go to Blogger
  2. Go to your blog Layout option.
  3. Now Select Add a Gadget option.
  4. Now select Html/Java Script option
  5. Now past the above code in Content area field and press save button.


    6. You May Also Like-Floating Facebook Like Box 

 You can drag and adjust widget place in blogger layout


Read More
May 09, 2014
Subscribe to: Posts ( Atom )