• Featured

    Windows 8 Could Have Nine Different Backgrounds and Editions

  • Featured

    Don't miss these 10 Things if you are going for Picnic.

  • Articles

    iPhone 6 Will Look Like

  • Articles

    Solar Powered UAVs To Replace Satellites

  • Showing posts with label Tips&Tricks. Show all posts
    Showing posts with label Tips&Tricks. Show all posts

    Sunday, 1 December 2013

    stylish clock blogger
    Here I am saying about How to Add a Stylish Flash Animated Clock to your Blogger Blog.Here is a huge collection of Clock widgets for your taste.Follow the Simple Steps below to make your Blog Stylish,Cool, and Smart looking Blog.






    • First of all SignIn to your Blogger Account 
    • Select Design->Page Elements
    • Click on Add Gadget
    • Select HTML/javascript from it,then copy the code of clock you want.
     

    Step 1: If you want a NON Static Clock Widget,then Just copy and paste the code to HTML/javascript content.

    If you want a cool static clock,then first do the step above and Click HERE

    Add Stylish Flash Clock 1










    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><embed height="140" src="http://www.hitarek.com/clock/clock24-6.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="210"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock 2









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><!-- hitarek.com --><embed width="210" src="http://www.hitarek.com/clock/clock24-2.swf?TimeZone=IST&Place=&" height="140"  type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock 3









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><!-- hitarek.com --><embed width="120" src="http://www.hitarek.com/clock/clock5-1.swf?TimeZone=IST&Place=&" height="230" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock4










    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><embed height="230" src="http://www.hitarek.com/clock/clock5-2.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="120" wmode="transparent"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock4









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><iframe allowtransparency="true" frameborder="0" height="148" hspace="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www.hitarek.com/animation/dolls5.html" vspace="0" width="100"></iframe></center><center><a href="http://netoopsblog.blogspot.com/" style="font-size: 2mm;" target="_blank">FreeWidgets</a></center></div><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>


    Add Stylish Flash Clock5










    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><!-- hitarek.com --><embed width="130" src="http://www.hitarek.com/clock/clock11-4.swf?TimeZone=IST&Place=&" height="130" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock6









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><!-- hitarek.com --><embed width="160" src="http://www.hitarek.com/clock/clock25-9.swf?TimeZone=IST&Place=&" height="160" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>

    </div>

    Add Stylish Flash Clock#









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><!-- hitarek.com --><embed width="140" src="http://www.hitarek.com/clock/clock22-5.swf?TimeZone=IST&Place=&" height="180"  type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>
    </div>

    Add Stylish Flash Clock 7









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>
    </div>

    Add Stylish Flash Clock 8








    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>
    </div>

    Add Stylish Flash Clock 9








    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
    </div>

    Add Stylish Flash Clock 10






    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
    </div>

    Add Stylish Flash Clock@






    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object>
    </div>


    Add a Static Clock

    Step 2:
    • Copy and Paste the CSS code below after the code of clock.
    <style type="text/css">.noop-clock {
    position: fixed;
    right: 0%;
    top: 0%;
    padding: 3px 7px;
    box-shadow: -2px 2px 6px;

    }</style>
    •  Then click on Save.
    With this tutorial you have got a Beautiful Clock.
    If you feel any confusion or doubt then please do comment.

    Stylish Static animated Flash Clock for Blogger

    Posted at  18:07  |  in  Tips&Tricks  |  Read More»

    stylish clock blogger
    Here I am saying about How to Add a Stylish Flash Animated Clock to your Blogger Blog.Here is a huge collection of Clock widgets for your taste.Follow the Simple Steps below to make your Blog Stylish,Cool, and Smart looking Blog.






    • First of all SignIn to your Blogger Account 
    • Select Design->Page Elements
    • Click on Add Gadget
    • Select HTML/javascript from it,then copy the code of clock you want.
     

    Step 1: If you want a NON Static Clock Widget,then Just copy and paste the code to HTML/javascript content.

    If you want a cool static clock,then first do the step above and Click HERE

    Add Stylish Flash Clock 1










    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><embed height="140" src="http://www.hitarek.com/clock/clock24-6.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="210"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock 2









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><!-- hitarek.com --><embed width="210" src="http://www.hitarek.com/clock/clock24-2.swf?TimeZone=IST&Place=&" height="140"  type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock 3









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><!-- hitarek.com --><embed width="120" src="http://www.hitarek.com/clock/clock5-1.swf?TimeZone=IST&Place=&" height="230" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock4










    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock"><center><embed height="230" src="http://www.hitarek.com/clock/clock5-2.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="120" wmode="transparent"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock4









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><iframe allowtransparency="true" frameborder="0" height="148" hspace="0" marginheight="0" marginwidth="0" scrolling="no" src="http://www.hitarek.com/animation/dolls5.html" vspace="0" width="100"></iframe></center><center><a href="http://netoopsblog.blogspot.com/" style="font-size: 2mm;" target="_blank">FreeWidgets</a></center></div><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>


    Add Stylish Flash Clock5










    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><!-- hitarek.com --><embed width="130" src="http://www.hitarek.com/clock/clock11-4.swf?TimeZone=IST&Place=&" height="130" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>

    Add Stylish Flash Clock6









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><!-- hitarek.com --><embed width="160" src="http://www.hitarek.com/clock/clock25-9.swf?TimeZone=IST&Place=&" height="160" wmode="transparent" type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>

    </div>

    Add Stylish Flash Clock#









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <center><!-- hitarek.com --><embed width="140" src="http://www.hitarek.com/clock/clock22-5.swf?TimeZone=IST&Place=&" height="180"  type="application/x-shockwave-flash"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>
    </div>

    Add Stylish Flash Clock 7









    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>
    </div>

    Add Stylish Flash Clock 8








    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>
    </div>

    Add Stylish Flash Clock 9








    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
    </div>

    Add Stylish Flash Clock 10






    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
    </div>

    Add Stylish Flash Clock@






    • If you want to add this Clock,then Copy  and paste the below code
    <div class="noop-clock">
    <object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object>
    </div>


    Add a Static Clock

    Step 2:
    • Copy and Paste the CSS code below after the code of clock.
    <style type="text/css">.noop-clock {
    position: fixed;
    right: 0%;
    top: 0%;
    padding: 3px 7px;
    box-shadow: -2px 2px 6px;

    }</style>
    •  Then click on Save.
    With this tutorial you have got a Beautiful Clock.
    If you feel any confusion or doubt then please do comment.

    Here is a Simple Tip to Set a Button for Changing the Blog View to Dynamic Views.I added Smooth jquery Hover Effect to Button.You can set any template to your Blogger Blog.If you add this Button to your Blog.It lets your Blog visitors to View Blog in Dynamic Views when they Click this Button.








    Add Dynamic Views Button to Blog

    Make sure you had Backed up your Template before editing Template.(How to Backup Template)

    • Go to Design -> Edit HTML
    Step 1.Add jQuery Plugin( If your Blog already have a jQuery plugin ignore this Step ),
    • Go to Design->Edit HTML
    • Copy and Paste Below code inside <head> section
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    Step 2: Add Dynamic view button,
    •  Go to Design-> Page Elements
    • Click on Add Gadget ,Select HTML/Javascript from it
    • Leave Title as blank, Copy the below code inside content section.

    <div class="noopdynamic">
    Click this for change the view to Dynamic views</div>
    <a href="/view">
    <img class="noopdynamicimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6QjO5Htcs0ca4iBgkhiDja0NxRcyoLNIVSnsHsYnzAa3iKlKm2XvmMNzokh9oUypQmdadHPYYyrGdX0EiaJemHCq2Hj4hONnV1qiYs-R7pj6IPlQ9ooOrHx6Ut5KFjJtK9sa_FHMPHIE/s1600/google+dynamic+views.jpg" /></a>
        <style type="text/css">
        .noopdynamicimg{bottom: 2%;
            position: fixed;
            right: 1%;}
            .noopdynamic {background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
            background-color:#ABABAB;
            border: 2px solid;
            border-radius: 6px 6px 6px 6px;
            bottom: 13%;
            padding: 4px;z-index:999;
            position: fixed;
            right: 5%;
            font:18px Arial;
            text-shadow: 1px 1px 0 #FFFFFF;
            width: 21%;
            box-shadow:0 0 5px;
        }

        </style>

    <script type="text/javascript">
    $(function(){
        $(".noopdynamic").hide(0);
    $(".noopdynamicimg").hover(function(){
        $(".noopdynamic").show("slow");
    },function(){$(".noopdynamic").hide("medium");
    });});
    </script>
    • Then Save it.
    • That's all,you are done..
    I hope you enjoyed this article,if so please share n like us.

    Dynamic Views Button with jquery Effect for Blogger Blog

    Posted at  18:04  |  in  Tips&Tricks  |  Read More»

    Here is a Simple Tip to Set a Button for Changing the Blog View to Dynamic Views.I added Smooth jquery Hover Effect to Button.You can set any template to your Blogger Blog.If you add this Button to your Blog.It lets your Blog visitors to View Blog in Dynamic Views when they Click this Button.








    Add Dynamic Views Button to Blog

    Make sure you had Backed up your Template before editing Template.(How to Backup Template)

    • Go to Design -> Edit HTML
    Step 1.Add jQuery Plugin( If your Blog already have a jQuery plugin ignore this Step ),
    • Go to Design->Edit HTML
    • Copy and Paste Below code inside <head> section
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    Step 2: Add Dynamic view button,
    •  Go to Design-> Page Elements
    • Click on Add Gadget ,Select HTML/Javascript from it
    • Leave Title as blank, Copy the below code inside content section.

    <div class="noopdynamic">
    Click this for change the view to Dynamic views</div>
    <a href="/view">
    <img class="noopdynamicimg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6QjO5Htcs0ca4iBgkhiDja0NxRcyoLNIVSnsHsYnzAa3iKlKm2XvmMNzokh9oUypQmdadHPYYyrGdX0EiaJemHCq2Hj4hONnV1qiYs-R7pj6IPlQ9ooOrHx6Ut5KFjJtK9sa_FHMPHIE/s1600/google+dynamic+views.jpg" /></a>
        <style type="text/css">
        .noopdynamicimg{bottom: 2%;
            position: fixed;
            right: 1%;}
            .noopdynamic {background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
            background-color:#ABABAB;
            border: 2px solid;
            border-radius: 6px 6px 6px 6px;
            bottom: 13%;
            padding: 4px;z-index:999;
            position: fixed;
            right: 5%;
            font:18px Arial;
            text-shadow: 1px 1px 0 #FFFFFF;
            width: 21%;
            box-shadow:0 0 5px;
        }

        </style>

    <script type="text/javascript">
    $(function(){
        $(".noopdynamic").hide(0);
    $(".noopdynamicimg").hover(function(){
        $(".noopdynamic").show("slow");
    },function(){$(".noopdynamic").hide("medium");
    });});
    </script>
    • Then Save it.
    • That's all,you are done..
    I hope you enjoyed this article,if so please share n like us.

    add css code easily in blogger blog
    How to Add CSS codes to your blogger Blog easily.
    Sometimes you may want to add CSS codes to your blog for styling blog elements or blog widgets,Many of us adding CSS code by going to Edit HTML and add codes before ]]></b:skin> and save template, Using this method by mistake  if any of the content in it deleted ,it my goes to your Template Crash.So there is a secure and alternate way to add CSS code as follows   .Here is a simple way to add CSS codes.






    •  Go to Design-> Template Designer (as shown in the figure)
    add css codes in blogger easy way
    Update [01/06/2012] : Select Template -> Customise   in New Upgraded Blogger Interface
    • Template Designer will open
    • Select Advanced -> Add CSS
    •  Place the CSS codes in the Text area.
    • Then you can see preview by clicking preview.
    • Save by click on Apply to Blog

    Add CSS codes into your blogger blog easily

    Posted at  18:00  |  in  Tips&Tricks  |  Read More»

    add css code easily in blogger blog
    How to Add CSS codes to your blogger Blog easily.
    Sometimes you may want to add CSS codes to your blog for styling blog elements or blog widgets,Many of us adding CSS code by going to Edit HTML and add codes before ]]></b:skin> and save template, Using this method by mistake  if any of the content in it deleted ,it my goes to your Template Crash.So there is a secure and alternate way to add CSS code as follows   .Here is a simple way to add CSS codes.






    •  Go to Design-> Template Designer (as shown in the figure)
    add css codes in blogger easy way
    Update [01/06/2012] : Select Template -> Customise   in New Upgraded Blogger Interface
    • Template Designer will open
    • Select Advanced -> Add CSS
    •  Place the CSS codes in the Text area.
    • Then you can see preview by clicking preview.
    • Save by click on Apply to Blog

    Change favicon of blogger
    Changing the favicon of your blog is a simple trick.By default blogger puts the blogger orange color logo to favicon.This can change to your blog logo.
    Favicon appears next to the URL or title in the browser.If you have a logo of your blog then you can simply upload to blogger.Else there are many sites providing free favicon generator.See Netoops blog favicon on the top your browser.
    Follow the instructions below.





    • Go to Design->Page Elements
    • You can see a small bar with blogger icon and a link EDIT click it.
    •  Then select your blog's logo by clicking Browse and click on Save.

    Insert Animated Favicon

    You can also insert Animated gif favicon.
    • Go to Favicon Generator
    • Upload your blog's logo and give scrolling text then click Generate favicon

     It will generate your animated favicon,right click on the icon shows there and Save it.Then upload to root of website or upload to free image uploading sites like tinypic you will get the link to image from there.
    • Go to Design->Edit HTML
    • Copy the following inside <head>
    <link href='PLACE YOUR FAVICON LINK HERE' rel='icon' type='image/gif'/>
    • Then click save.
    If any problem with this please inform via comment.Feel free to ask.

    Change Animated favicon to Blogger blog

    Posted at  17:59  |  in  Tips&Tricks  |  Read More»

    Change favicon of blogger
    Changing the favicon of your blog is a simple trick.By default blogger puts the blogger orange color logo to favicon.This can change to your blog logo.
    Favicon appears next to the URL or title in the browser.If you have a logo of your blog then you can simply upload to blogger.Else there are many sites providing free favicon generator.See Netoops blog favicon on the top your browser.
    Follow the instructions below.





    • Go to Design->Page Elements
    • You can see a small bar with blogger icon and a link EDIT click it.
    •  Then select your blog's logo by clicking Browse and click on Save.

    Insert Animated Favicon

    You can also insert Animated gif favicon.
    • Go to Favicon Generator
    • Upload your blog's logo and give scrolling text then click Generate favicon

     It will generate your animated favicon,right click on the icon shows there and Save it.Then upload to root of website or upload to free image uploading sites like tinypic you will get the link to image from there.
    • Go to Design->Edit HTML
    • Copy the following inside <head>
    <link href='PLACE YOUR FAVICON LINK HERE' rel='icon' type='image/gif'/>
    • Then click save.
    If any problem with this please inform via comment.Feel free to ask.

    page peel for blogger
    You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.







    Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
    • Copy the below code inside <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    Add page peel effect to blogger blog 

    Step 2 : 
    • Go to Design->Edit HTML
    • Copy and paste the below code above </head>
    <style type='text/css'>
    img { behavior: url(iepngfix.htc) }
    #pageflip {
    position: absolute;
    right: 0; top: 0;
    float: right;
    }
    #pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
    }
    #pageflip .back-img {
    width: 50px; height: 50px;
    overflow: hidden;
    position: absolute;
    right: 0; top: 0;z-index:98;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC2F2pJZJCxtFQ5NAiPibS1J-1_TjxoFe41xcDKYVquPpwLspa9RDCWizOspmr7poZbOfYwV9tX6a7b7jU975Xaa_PsgrC4QouWLZcPfUu4J0zGNM4nFEcOtz-I81s0nX5jNGwwYoKycs/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
    }
    </style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png'/></a><script type='text/javascript'>
    $(document).ready(function(){
    //Page Flip on hover
    $(&quot;#pageflip&quot;).hover(function() {
    $(&quot;#pageflip img , .back-img&quot;).stop()
        .animate({
        width: &#39;307px&#39;,
        height: &#39;319px&#39;
        }, 500);
        } , function() {
        $(&quot;#pageflip img&quot;).stop()
        .animate({
        width: &#39;50px&#39;,
        height: &#39;52px&#39;
        }, 220);
    $(&quot;.back-img&quot;).stop()
        .animate({
        width: &#39;50px&#39;,
        height: &#39;50px&#39;
        }, 200);
    });
    });
    </script>
    Step 3:
    <div id='pageflip'>
    <a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KkvuWdeSJPo3lFKZvVWNeWN8noKm0ogRT1LWHyQi9M143tQ5wf4J_QF6JCt3ROFzE0EqxPIm0YuCo5lY2OMZXyTyJ61G_qiZAr6iAf1z3RNL2eYYjgotNzpRmJq94bEwXFPq8HjSN88g/s1600/page_flip.png'/></a>
    <div class='back-img'/>
    </div>
    Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
    Change the BLUE highlighted text with your feed URL or place your advertisement
    •  Save the Template
    You are done..! If any problem persists please do comment.

    Add Page Peel effect with jQuery & CSS to Blogger

    Posted at  17:58  |  in  Tips&Tricks  |  Read More»

    page peel for blogger
    You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.







    Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
    • Copy the below code inside <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    Add page peel effect to blogger blog 

    Step 2 : 
    • Go to Design->Edit HTML
    • Copy and paste the below code above </head>
    <style type='text/css'>
    img { behavior: url(iepngfix.htc) }
    #pageflip {
    position: absolute;
    right: 0; top: 0;
    float: right;
    }
    #pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
    }
    #pageflip .back-img {
    width: 50px; height: 50px;
    overflow: hidden;
    position: absolute;
    right: 0; top: 0;z-index:98;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC2F2pJZJCxtFQ5NAiPibS1J-1_TjxoFe41xcDKYVquPpwLspa9RDCWizOspmr7poZbOfYwV9tX6a7b7jU975Xaa_PsgrC4QouWLZcPfUu4J0zGNM4nFEcOtz-I81s0nX5jNGwwYoKycs/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
    }
    </style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png'/></a><script type='text/javascript'>
    $(document).ready(function(){
    //Page Flip on hover
    $(&quot;#pageflip&quot;).hover(function() {
    $(&quot;#pageflip img , .back-img&quot;).stop()
        .animate({
        width: &#39;307px&#39;,
        height: &#39;319px&#39;
        }, 500);
        } , function() {
        $(&quot;#pageflip img&quot;).stop()
        .animate({
        width: &#39;50px&#39;,
        height: &#39;52px&#39;
        }, 220);
    $(&quot;.back-img&quot;).stop()
        .animate({
        width: &#39;50px&#39;,
        height: &#39;50px&#39;
        }, 200);
    });
    });
    </script>
    Step 3:
    <div id='pageflip'>
    <a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KkvuWdeSJPo3lFKZvVWNeWN8noKm0ogRT1LWHyQi9M143tQ5wf4J_QF6JCt3ROFzE0EqxPIm0YuCo5lY2OMZXyTyJ61G_qiZAr6iAf1z3RNL2eYYjgotNzpRmJq94bEwXFPq8HjSN88g/s1600/page_flip.png'/></a>
    <div class='back-img'/>
    </div>
    Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
    Change the BLUE highlighted text with your feed URL or place your advertisement
    •  Save the Template
    You are done..! If any problem persists please do comment.

    change older posts newer posts with titles
    Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This Awesome Blogger Hack lets your blog visitors to Know Newer and Older posts and they can go to that Posts.I got this hack from YABTB blog .This hack is done by MS-potilas of YABTB blog.All credits goes to YABTB.  This awesome trick done using some jquery script.






    Add Jquery script

    • Copy and paste the below code before </body>
    •  
    •  <br />
      <!--Start post title http://netoopsblog.blogspot.com --><br />
      <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png'/></a><br />
      <b:if cond='data:blog.pageType == &quot;item&quot;'><br />
      <script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.title.$t}}}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"><\/script>');function urlToPseudoTitle(a){var b=a.match(/\/([^\/_]+)(_.*)?\.html/);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)}}},500)});/*]]>*/</script><br />
      </b:if><br />
      <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->
    •  
    •  
    •  

      Add CSS code

    • Add the following css code before ]]></b:skin> (Add CSS code another way)
    .blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
    .blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
    #blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
    #blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
    #blog-pager{height:100% !important;}

    Change Older and Newer posts with Post Titles for Blogger

    Posted at  17:56  |  in  Tips&Tricks  |  Read More»

    change older posts newer posts with titles
    Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This Awesome Blogger Hack lets your blog visitors to Know Newer and Older posts and they can go to that Posts.I got this hack from YABTB blog .This hack is done by MS-potilas of YABTB blog.All credits goes to YABTB.  This awesome trick done using some jquery script.






    Add Jquery script

    • Copy and paste the below code before </body>
    •  
    •  <br />
      <!--Start post title http://netoopsblog.blogspot.com --><br />
      <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png'/></a><br />
      <b:if cond='data:blog.pageType == &quot;item&quot;'><br />
      <script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.title.$t}}}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"><\/script>');function urlToPseudoTitle(a){var b=a.match(/\/([^\/_]+)(_.*)?\.html/);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link").html("&lt;&lt; Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link").html("Older Post &gt;&gt;<br />"+b)}}},500)});/*]]>*/</script><br />
      </b:if><br />
      <a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->
    •  
    •  
    •  

      Add CSS code

    • Add the following css code before ]]></b:skin> (Add CSS code another way)
    .blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
    .blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
    #blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
    #blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
    #blog-pager{height:100% !important;}

    disable lightbox in blogger
    Blogger also provides lightbox for viewing images.But if you take one image,it will open and the whole pictures in the page are listed ,Sometimes it may be a good feature also a bad feature.Here is a Simple trick to disable lightbox in blogger.







    • Go to Settings->Formatting (as shown in figure)
    •  You see a Option Showcase images with Lightbox select No.
    • That all.No longer Light box appear in your blog.

    How to Disable lightbox in blogger

    Posted at  17:53  |  in  Tips&Tricks  |  Read More»

    disable lightbox in blogger
    Blogger also provides lightbox for viewing images.But if you take one image,it will open and the whole pictures in the page are listed ,Sometimes it may be a good feature also a bad feature.Here is a Simple trick to disable lightbox in blogger.







    • Go to Settings->Formatting (as shown in figure)
    •  You see a Option Showcase images with Lightbox select No.
    • That all.No longer Light box appear in your blog.

    create google type search engine
    Here is a funny and interesting trick I am going to show you.Create a Google Type search engine with your Google type Logo.It can be done very easily..








    • Go to FunnyLogo
    • Select the logo type (eg: Google type,Yahoo type,Harry potter type)
    Enjoy.......!Have a nice Day...

    Create your own google type search engine

    Posted at  17:52  |  in  Tips&Tricks  |  Read More»

    create google type search engine
    Here is a funny and interesting trick I am going to show you.Create a Google Type search engine with your Google type Logo.It can be done very easily..








    • Go to FunnyLogo
    • Select the logo type (eg: Google type,Yahoo type,Harry potter type)
    Enjoy.......!Have a nice Day...

    css3 sliding menus for blogger blog
    There are many menus available on internet .Here I am saying about some pure css3 menus for your Blogger Blog.Here is a collection of pure css3 sliding animation menus.Let us see how to setup a beautiful menu for your Blogger Blog.



    • Go to Design->Page Elements [Take Layout in new template]
    • Click on Add gadget just below the Header
    •  Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
    • You can change RED highlighted text with your Menu title and GREEN with LINK

    Add Elemic Blue Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujh9nB2ZD8LGMEG97lHQgcf_k6f6NM47kc1ZM638qcPgvb7PfkrP0kV2Z30XvtnDc5lEizeKMhmfvSA5Cret_B9Gu2O-0Ebz0HAY_G9X3jXuoi8OfcRt-ift8er4tdp1S6q4DCL15SI4/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-blue">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>


    Add Green Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VHwVeikBs9Cjk7QIeYWCkHilV6VYziayOgjBzTxOC3FkIFAUItow4SD4bLps5W2KRZByYZwX_gghZTIE47KxGoh7lS1nL4p3jIZoJ65HazX5L-tSgcA8qLoRTz98d8-ACWQKD654Lzk/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important;
    border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-green">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>




    Add Grape Purple Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTS787ULDt4aEW4EitYqpQqEVLrOW0Y_d3qv-2h00M5gPr_uk3vpeh2GzKQnBYXU5P9X6ljWhyphenhyphenBOjr2Bx7i8ezuqesE0tJs29x1s5SfpukJqH0pmv8J99uNlcQCqODLdu8zjjhXRxcyLI/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important;
    border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-purple">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>




    Add Light-Dark SkyBlue Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLLuiWE5eCXhx2R4qeoq1LiPzhCGM-RNuuuArxXYa5YjLaLOPv4j85D2tPQ3GCAiKQZBXsM5bT_HEFbhWuxJXRr4caMUneijKVQXVJMFL5x7r63qLhwUWfhl6M4XtNJ2oVuQP4tHK4nk/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important;
    border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-skyblue">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>




    Add Tree Brown Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZAsh1hyphenhyphenm7ciXPA7wELJuQRXxhlhJPx4tJZ1HKVPtQGvHJSIKeDvab3y0Z_yHqra9Y8UJptzqK6AikFOnMKMFq46OEGLddsy21v54_jK-gzdyjJSj3RSs0GD9KFSW1uz75xgg0xzAyu0/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important;
    border1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-brown">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>


    I hope you enjoyed this Menu and also except more from us.

    Awesome CSS3 animated Menu for blogger Blog

    Posted at  17:48  |  in  Tips&Tricks  |  Read More»

    css3 sliding menus for blogger blog
    There are many menus available on internet .Here I am saying about some pure css3 menus for your Blogger Blog.Here is a collection of pure css3 sliding animation menus.Let us see how to setup a beautiful menu for your Blogger Blog.



    • Go to Design->Page Elements [Take Layout in new template]
    • Click on Add gadget just below the Header
    •  Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
    • You can change RED highlighted text with your Menu title and GREEN with LINK

    Add Elemic Blue Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujh9nB2ZD8LGMEG97lHQgcf_k6f6NM47kc1ZM638qcPgvb7PfkrP0kV2Z30XvtnDc5lEizeKMhmfvSA5Cret_B9Gu2O-0Ebz0HAY_G9X3jXuoi8OfcRt-ift8er4tdp1S6q4DCL15SI4/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-blue">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>


    Add Green Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VHwVeikBs9Cjk7QIeYWCkHilV6VYziayOgjBzTxOC3FkIFAUItow4SD4bLps5W2KRZByYZwX_gghZTIE47KxGoh7lS1nL4p3jIZoJ65HazX5L-tSgcA8qLoRTz98d8-ACWQKD654Lzk/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important;
    border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-green">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>




    Add Grape Purple Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTS787ULDt4aEW4EitYqpQqEVLrOW0Y_d3qv-2h00M5gPr_uk3vpeh2GzKQnBYXU5P9X6ljWhyphenhyphenBOjr2Bx7i8ezuqesE0tJs29x1s5SfpukJqH0pmv8J99uNlcQCqODLdu8zjjhXRxcyLI/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important;
    border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-purple">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>




    Add Light-Dark SkyBlue Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLLuiWE5eCXhx2R4qeoq1LiPzhCGM-RNuuuArxXYa5YjLaLOPv4j85D2tPQ3GCAiKQZBXsM5bT_HEFbhWuxJXRr4caMUneijKVQXVJMFL5x7r63qLhwUWfhl6M4XtNJ2oVuQP4tHK4nk/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important;
    border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-skyblue">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>




    Add Tree Brown Menu


    <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZAsh1hyphenhyphenm7ciXPA7wELJuQRXxhlhJPx4tJZ1HKVPtQGvHJSIKeDvab3y0Z_yHqra9Y8UJptzqK6AikFOnMKMFq46OEGLddsy21v54_jK-gzdyjJSj3RSs0GD9KFSW1uz75xgg0xzAyu0/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important;
    border1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUQ-yUaSNRWYpzKfaZQMbtQxhUhGnMb9bWXBfo2WGKJHbJjztXAerdpyWQZoa4KtY5zTwHM69K0WOFHhIbdM5mRSN82IePGih49oTfNkdnlEvHkG43ujg6vgfyAw3cYAt6LbqAhLjS5Y/s1600/1x1juice.png" /></a>

    <div class="noop-menu-brown">
        <ul class="menu">
            <li><a href="http://netoopsblog.blogspot.com/">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li>
            <li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li>
            <li><a href="#">About</a></li>
        </ul>

    </div>


    I hope you enjoyed this Menu and also except more from us.

    Google +1 button and Badge for blogger
    Google's new GPlus +1 button for blogger,that lets to share your blog with like minded people across the world. Blogger introduces two Google+ gadgets (+1 Button and Google+ Badge) .Google+ button is almost same as Facebook Like button.Unlike the Google+ button appears below the post,the gadget is specific to your blog.Google+ gadget allows your visitors to recommend your blog and able to share on their circles.
    Here i am going to show how to add this gadgets..


    • Sig in to your Blogger
    • Go to Layout and click Add Gadget
     
    Google +1 button and Badge 
    • Take +1 button or Google+ Badge as you need
    • If you take Google+ badge give page ID
    Google +1 button and Badge
    •   Thats all....

    Google +1 button and Badge for Blogger

    Posted at  17:46  |  in  Tips&Tricks  |  Read More»

    Google +1 button and Badge for blogger
    Google's new GPlus +1 button for blogger,that lets to share your blog with like minded people across the world. Blogger introduces two Google+ gadgets (+1 Button and Google+ Badge) .Google+ button is almost same as Facebook Like button.Unlike the Google+ button appears below the post,the gadget is specific to your blog.Google+ gadget allows your visitors to recommend your blog and able to share on their circles.
    Here i am going to show how to add this gadgets..


    • Sig in to your Blogger
    • Go to Layout and click Add Gadget
     
    Google +1 button and Badge 
    • Take +1 button or Google+ Badge as you need
    • If you take Google+ badge give page ID
    Google +1 button and Badge
    •   Thats all....

    Stop copying blog content with css
    Copying blog posts or articles from sites/blogs on internet is a usual thing.Here i am going to share you how to protect your blogger posts/articles form getting Stolen.This is a trick to lock your text and the visitors of your blog can't select the text only they can read the text. If they cracked that method and select the text there is another trick to disable right click menu,so they can't copy text.. Enjoy...








    Copy the Following CSS codes to your Blog

    •  Go to Blogger Dashboard
    • Select Template->Edit HTML click Proceed    [or Use Alternate Way to copy CSS code]
    • Find ]]></b:skin>
    • Copy the following code  and save

    -moz-user-select:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    user-select:none;


    Disable Right Click

    • Copy the following code inside <head>
    <script src='http://netoopscodes.googlecode.com/svn/branches/Js files/disable right click.js' type='text/javascript'/>


    I think this article will surely help you...if you liked this please share...

    Protect Your Blog posts from Copying Blogger Trick

    Posted at  17:37  |  in  Tips&Tricks  |  Read More»

    Stop copying blog content with css
    Copying blog posts or articles from sites/blogs on internet is a usual thing.Here i am going to share you how to protect your blogger posts/articles form getting Stolen.This is a trick to lock your text and the visitors of your blog can't select the text only they can read the text. If they cracked that method and select the text there is another trick to disable right click menu,so they can't copy text.. Enjoy...








    Copy the Following CSS codes to your Blog

    •  Go to Blogger Dashboard
    • Select Template->Edit HTML click Proceed    [or Use Alternate Way to copy CSS code]
    • Find ]]></b:skin>
    • Copy the following code  and save

    -moz-user-select:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    user-select:none;


    Disable Right Click

    • Copy the following code inside <head>
    <script src='http://netoopscodes.googlecode.com/svn/branches/Js files/disable right click.js' type='text/javascript'/>


    I think this article will surely help you...if you liked this please share...

    Increase SEO with h1 tag Blogger hack
    This is an important SEO Blogger trick to increase SEO. Heading tags have a great importance in Search engine results, Heading tags helps Search engines to recognize what is important in your blog.Heading are form H1 to H6 .H1 tags have higher priority.So we are going to hack blogger template by changing H3 tags to H1 tags. By default blogger post title is in H3 tag,here is a trick to change it to H1 tag for more SEO.





    • Go to Blogger Account
    • Select Template -> Edit HTML [click Proceed
    • Find the code like below [Find easily using Crtl+F]
    • Or simply find <H3


    <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
      </h3>
    • and Change it with <H1 [Change all H3 to H1]
    • Change all H3 tags with H1 tag
    • Done ..Wait for few weeks you can find the change in Google SERP.
    • Your Blog pages will show in Google Search Page.

    Update [21.11.2012] : I have noticed that this trick displays error in some webmaster like Bing. If you get error message from the webmaster then change the H1 tags which we changed before to H2.
    Note: Only change the H1 tags you changed earlier.
    Google Webmaster will not show error on this trick.

    I think you enjoyed this ..if so please share...

    Optimize your post title to H1 tags better SEO Blogger Hack

    Posted at  17:36  |  in  Tips&Tricks  |  Read More»

    Increase SEO with h1 tag Blogger hack
    This is an important SEO Blogger trick to increase SEO. Heading tags have a great importance in Search engine results, Heading tags helps Search engines to recognize what is important in your blog.Heading are form H1 to H6 .H1 tags have higher priority.So we are going to hack blogger template by changing H3 tags to H1 tags. By default blogger post title is in H3 tag,here is a trick to change it to H1 tag for more SEO.





    • Go to Blogger Account
    • Select Template -> Edit HTML [click Proceed
    • Find the code like below [Find easily using Crtl+F]
    • Or simply find <H3


    <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
      </h3>
    • and Change it with <H1 [Change all H3 to H1]
    • Change all H3 tags with H1 tag
    • Done ..Wait for few weeks you can find the change in Google SERP.
    • Your Blog pages will show in Google Search Page.

    Update [21.11.2012] : I have noticed that this trick displays error in some webmaster like Bing. If you get error message from the webmaster then change the H1 tags which we changed before to H2.
    Note: Only change the H1 tags you changed earlier.
    Google Webmaster will not show error on this trick.

    I think you enjoyed this ..if so please share...

    Backup restore new Blogger Template easily
    Here i'm saying about an important topic that i had posted early " How to Backup/Restore Blogger Template? ". But i'm going to show you How to Backup/Restore  Blogger Template in New Blogger Template . Now a days Blogger default interface is Upgraded New Blogger Interface. Backup/Restore Template is so important,So don't take this as a silly matter.
    Read Following see How to backup template in New Blogger Interface..



    CHECKOUT OTHER SIMILAR POSTS
    •  How to Backup/Restore Old Blogger Interface

    How to Backup/Restore Template

    • Go to Blogger Account
    • Select Template [as shown in fig.]
    Backup restore new Blogger Template easilyBackup restore new Blogger Template easily
    • Click on the Button Backup/Restore  in Left top .
    •  A box appears [as shown in fig.]

    Backup restore new Blogger Template easily
    • As shown in the above fig. 
    • Click on Download Full Template to download Template.Save it
    • Click on the Browse to Restore the early downloaded Template.
    • That's all ..Enjoy with us...

    How to Backup/Restore template in new blogger interface?

    Posted at  17:34  |  in  Tips&Tricks  |  Read More»

    Backup restore new Blogger Template easily
    Here i'm saying about an important topic that i had posted early " How to Backup/Restore Blogger Template? ". But i'm going to show you How to Backup/Restore  Blogger Template in New Blogger Template . Now a days Blogger default interface is Upgraded New Blogger Interface. Backup/Restore Template is so important,So don't take this as a silly matter.
    Read Following see How to backup template in New Blogger Interface..



    CHECKOUT OTHER SIMILAR POSTS
    •  How to Backup/Restore Old Blogger Interface

    How to Backup/Restore Template

    • Go to Blogger Account
    • Select Template [as shown in fig.]
    Backup restore new Blogger Template easilyBackup restore new Blogger Template easily
    • Click on the Button Backup/Restore  in Left top .
    •  A box appears [as shown in fig.]

    Backup restore new Blogger Template easily
    • As shown in the above fig. 
    • Click on Download Full Template to download Template.Save it
    • Click on the Browse to Restore the early downloaded Template.
    • That's all ..Enjoy with us...

    NetOopsblog Subscription box Blogger
    This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme.




     
    Demo is in the Right of this Blog

    What's inside this article??
    • Subscription Box Widget with Fully Wooden Theme
    • Subscription BoX Widget with Basic Wooden Theme

    Subscription box with Fully Wooden Theme

    • Go to Blogger Dashboard
    • Go to Layout 
    • Select Add a Gadget
    • You can type title any
    • And Copy the following code in the content.
    Demo of Fully Wooden Theme

     Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    .emailtext {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPst0tvfh4eBv5cGSQsv48ICdQG9EMZsNusDrk9pl1q5Mm-X20_xZmUWchPN1wUdCUavxtLkRXlI9OrI5orc9oz282n9ov-Wpuc7VMBl3oN4wwHDLeIZH7DKublpvANJPWnZnEusDT_g0/s1600/mailbox.png") no-repeat scroll 4px center transparent;
        border: 1px solid #7E4E27;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 1px 1px 4px #7E4E27 inset;
        color: #444444;
        font-weight: bold;
        margin-left: 2px;
        padding: 7px 15px 7px 35px;
        text-decoration: none;
        width: 176px;
    }
    .ebutton {
        background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
        border: 1px solid #D3D3D3;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
        margin-left: -18px;
        margin-top: 5px;
        padding: 6px 15px;
        text-decoration: none;
        text-shadow: 1px 1px 0 #000000;
    }
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlEp3bh-AxH91cuXb9FO69nFPgjF02vvgBl7hWWz4U_TRYSS69rE9ukJchnvYiu96HgvEHLfRw3ZgMw9YikvSou9GUA8j_rgUox5ScgSJhNTiWZv3TZd1LQkOFa_OBuY6eUYFQ48fKr4/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxKa9j4FhO1azjlQMMfnlPF-yO9WC5JQbEiJZDX_yrFwRPKDcg-eTlx1le-eWYzHThRhP6SBVG3wdHeNzXrbQunnU-ZwinJc1Cqps4JT2ZjVAqA2EhCOz8VX1AGws4xaw0W8fARTLYJs/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEUdQujZbIo-a6SnpcIMUoy_uBEeA_Z4S0_U18e0T6hMaKbD-CDCF8gpxlQ5RxbRP80gRymibyiCoNvXcmXCWVcH3WdEYpogrbQk-yaHMAzUtIxGM6llEeEs3bnRl4E5h1Hs8U4tgUiQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    Subscription box with Default Basic Wooden theme

    • Go to Layout 
    • Select Add a Gadget
     Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlEp3bh-AxH91cuXb9FO69nFPgjF02vvgBl7hWWz4U_TRYSS69rE9ukJchnvYiu96HgvEHLfRw3ZgMw9YikvSou9GUA8j_rgUox5ScgSJhNTiWZv3TZd1LQkOFa_OBuY6eUYFQ48fKr4/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxKa9j4FhO1azjlQMMfnlPF-yO9WC5JQbEiJZDX_yrFwRPKDcg-eTlx1le-eWYzHThRhP6SBVG3wdHeNzXrbQunnU-ZwinJc1Cqps4JT2ZjVAqA2EhCOz8VX1AGws4xaw0W8fARTLYJs/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEUdQujZbIo-a6SnpcIMUoy_uBEeA_Z4S0_U18e0T6hMaKbD-CDCF8gpxlQ5RxbRP80gRymibyiCoNvXcmXCWVcH3WdEYpogrbQk-yaHMAzUtIxGM6llEeEs3bnRl4E5h1Hs8U4tgUiQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    I think this widget helps you, Please share and like...

    Awesome NetOopsblog Subscription Widget for blogger

    Posted at  17:32  |  in  Tips&Tricks  |  Read More»

    NetOopsblog Subscription box Blogger
    This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme.




     
    Demo is in the Right of this Blog

    What's inside this article??
    • Subscription Box Widget with Fully Wooden Theme
    • Subscription BoX Widget with Basic Wooden Theme

    Subscription box with Fully Wooden Theme

    • Go to Blogger Dashboard
    • Go to Layout 
    • Select Add a Gadget
    • You can type title any
    • And Copy the following code in the content.
    Demo of Fully Wooden Theme

     Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    .emailtext {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPst0tvfh4eBv5cGSQsv48ICdQG9EMZsNusDrk9pl1q5Mm-X20_xZmUWchPN1wUdCUavxtLkRXlI9OrI5orc9oz282n9ov-Wpuc7VMBl3oN4wwHDLeIZH7DKublpvANJPWnZnEusDT_g0/s1600/mailbox.png") no-repeat scroll 4px center transparent;
        border: 1px solid #7E4E27;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 1px 1px 4px #7E4E27 inset;
        color: #444444;
        font-weight: bold;
        margin-left: 2px;
        padding: 7px 15px 7px 35px;
        text-decoration: none;
        width: 176px;
    }
    .ebutton {
        background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
        border: 1px solid #D3D3D3;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
        margin-left: -18px;
        margin-top: 5px;
        padding: 6px 15px;
        text-decoration: none;
        text-shadow: 1px 1px 0 #000000;
    }
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlEp3bh-AxH91cuXb9FO69nFPgjF02vvgBl7hWWz4U_TRYSS69rE9ukJchnvYiu96HgvEHLfRw3ZgMw9YikvSou9GUA8j_rgUox5ScgSJhNTiWZv3TZd1LQkOFa_OBuY6eUYFQ48fKr4/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxKa9j4FhO1azjlQMMfnlPF-yO9WC5JQbEiJZDX_yrFwRPKDcg-eTlx1le-eWYzHThRhP6SBVG3wdHeNzXrbQunnU-ZwinJc1Cqps4JT2ZjVAqA2EhCOz8VX1AGws4xaw0W8fARTLYJs/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEUdQujZbIo-a6SnpcIMUoy_uBEeA_Z4S0_U18e0T6hMaKbD-CDCF8gpxlQ5RxbRP80gRymibyiCoNvXcmXCWVcH3WdEYpogrbQk-yaHMAzUtIxGM6llEeEs3bnRl4E5h1Hs8U4tgUiQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    Subscription box with Default Basic Wooden theme

    • Go to Layout 
    • Select Add a Gadget
     Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlEp3bh-AxH91cuXb9FO69nFPgjF02vvgBl7hWWz4U_TRYSS69rE9ukJchnvYiu96HgvEHLfRw3ZgMw9YikvSou9GUA8j_rgUox5ScgSJhNTiWZv3TZd1LQkOFa_OBuY6eUYFQ48fKr4/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxKa9j4FhO1azjlQMMfnlPF-yO9WC5JQbEiJZDX_yrFwRPKDcg-eTlx1le-eWYzHThRhP6SBVG3wdHeNzXrbQunnU-ZwinJc1Cqps4JT2ZjVAqA2EhCOz8VX1AGws4xaw0W8fARTLYJs/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEUdQujZbIo-a6SnpcIMUoy_uBEeA_Z4S0_U18e0T6hMaKbD-CDCF8gpxlQ5RxbRP80gRymibyiCoNvXcmXCWVcH3WdEYpogrbQk-yaHMAzUtIxGM6llEeEs3bnRl4E5h1Hs8U4tgUiQ/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    I think this widget helps you, Please share and like...

    protect your images blogger trick
    This is an awesome trick to protect your images.You can protect your images from copying with this Simple CSS Blogger Tricks.After applying this trick the person who save the image will get a transparent image instead of the original image.







    Demo
    Try to Save the below image


    Protect your image Trick for all images (UPDATED VERSION)
    What's inside this article
    Protect your image Trick 1 -With overlap image
    Protect your image Trick 2 -With span background image

    Protect your image with CSS overlapping

    • Go to Blogger Account
    • Use the Following trick
    <img src="Place image URL Here" />
    <img border="0" src="http://i.imgur.com/eYKPf7b.png" alt="NetOops protected image" width="200" height="200" style="left: 0px; opacity: 0; position: relative; top: -216px;" />
    •  You can use this code anywhere, if you want to protect an image in your post. Add image and switch to HTML tab and copy the URL of image(eg- http://3.bp.blogspot.com/-xxxxx/xxxxx/s1600/name-of-image.jpg) and paste to that code mentioned above.
    • That's it.

    Protect your image with SPAN background

    • Use the following code
    <span style="background-image: url(Place image URL here)"><img src="http://i.imgur.com/eYKPf7b.png" width="200" height="200" border="0" alt="NetOops protected Image."></span> 

    • You are done..
    If you liked this article please share and like....

    Protect your images Blogger image hack

    Posted at  17:31  |  in  Tips&Tricks  |  Read More»

    protect your images blogger trick
    This is an awesome trick to protect your images.You can protect your images from copying with this Simple CSS Blogger Tricks.After applying this trick the person who save the image will get a transparent image instead of the original image.







    Demo
    Try to Save the below image


    Protect your image Trick for all images (UPDATED VERSION)
    What's inside this article
    Protect your image Trick 1 -With overlap image
    Protect your image Trick 2 -With span background image

    Protect your image with CSS overlapping

    • Go to Blogger Account
    • Use the Following trick
    <img src="Place image URL Here" />
    <img border="0" src="http://i.imgur.com/eYKPf7b.png" alt="NetOops protected image" width="200" height="200" style="left: 0px; opacity: 0; position: relative; top: -216px;" />
    •  You can use this code anywhere, if you want to protect an image in your post. Add image and switch to HTML tab and copy the URL of image(eg- http://3.bp.blogspot.com/-xxxxx/xxxxx/s1600/name-of-image.jpg) and paste to that code mentioned above.
    • That's it.

    Protect your image with SPAN background

    • Use the following code
    <span style="background-image: url(Place image URL here)"><img src="http://i.imgur.com/eYKPf7b.png" width="200" height="200" border="0" alt="NetOops protected Image."></span> 

    • You are done..
    If you liked this article please share and like....

    Style your Comments Block Blogger
    First of all i'm saying sorry to all for the delay of posting.
    This is a tutorial about how to style your comments block with effective designs.
    This is done using Simple css Scripts.
    The demo of a styled comments block is as follows.









    What's inside this article?
    • Comments Style version 1.0
    • Comments Style version 2.0
    • Sign in to the Blogger Account
    • Select Template and click Edit HTML (Click on Proceed)
    • Find ]]></b:skin> (Find using ctrl + F) [Alternate Wayt to copy css code]
    • Copy any of  the type of below css code  just above it.
    • Click on Save

    Comments Style version 1.0


    .comments .comment .comment-actions a {
    background: none repeat scroll 0 0 #FFD99E;
    border: 2px solid #FFB43D;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    font: bold 12px arial;
    margin-right: 14px;
    padding: 3px 9px;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 #FFFFFF;

    }

    .comments .comment-block {

    background: none repeat scroll 0 0 #E2E2E2;
    border: 4px solid #ABABAB;
    border-radius: 3px 3px 3px 3px;
    padding: 3px 10px;

    }

    .continue a {
    background: none repeat scroll 0 0 #FFD99E;
    border: 2px solid #FFB43D;
    border-radius: 3px 3px 3px 3px;
    color: #000000 !important;
    display: inline-block !important;
    margin-top: 7px;
    padding: 3px 8px !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 #FFFFFF;
    }
    .comment-block:hover > .comment-header {
    border-bottom: 2px solid #000;
    -moz-transition: border-color .5s ease;

    }

    .comment-header a {

    color: #000000 !important;

    }

    #comments .avatar-image-container img {
    border: 2px solid #FFFFFF !important;
    border-radius: 50px 50px 50px 50px;
    height: 57px;
    max-width: 57px;

    }

    .comments .avatar-image-container {
    border: 2px solid #FFFFFF;
    border-radius: 34px 34px 34px 34px;
    box-shadow: 1px 1px 3px #ABABAB;
    float: left;
    margin-left: -40px;
    max-height: 60px !important;
    overflow: hidden;
    width: 60px !important;
    }

    Comments Style version 2.0


    .comments .comment-block {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQg6z3601nrkBgXtjQC-dY3CpiHDCx11VO6Tu35gYdbZdlYSoujNLdKD7qFzlkqkAPrK1pbFDco4vpk5AW3aIUyX1ysFWm_8kBM38g-tnwKV-GHBS7eggL68caaIeJNq9F9_RLYpExz9M/s1600/bg.png") repeat scroll 0 0 transparent;
    border: 4px solid #EAEAEA;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 3px 3px 0 #D6D6D6;
    margin-left: 48px;
    padding: 3px 10px;
    position: relative;
    }
    #comments .avatar-image-container img {
    border: 2px solid #FFFFFF !important;
    border-radius: 50px 50px 50px 50px;
    height: 57px;
    max-width: 57px;
    }
    .comments .avatar-image-container {
    border: 2px solid #FFFFFF;
    border-radius: 34px 34px 34px 34px;
    box-shadow: 1px 1px 3px #ABABAB;
    float: left;
    margin-left: -40px;
    max-height: 60px !important;
    overflow: hidden;
    width: 60px !important;
    }
    .comment-header {
    border-bottom: 2px solid #F1F1F1;
    }
    .comment-block:hover > .comment-header {
    -moz-transition: border-color 0.5s ease 0s;
    border-bottom: 2px solid #000000;
    }
    .comments .comment .comment-actions a {
    background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
    border: 2px solid #E0E0E0;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    font: bold 12px arial;
    margin-right: 14px;
    padding: 4px 11px !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 #FFFFFF;
    }

    How to Change comments style on Blogger?

    Posted at  17:29  |  in  Tips&Tricks  |  Read More»

    Style your Comments Block Blogger
    First of all i'm saying sorry to all for the delay of posting.
    This is a tutorial about how to style your comments block with effective designs.
    This is done using Simple css Scripts.
    The demo of a styled comments block is as follows.









    What's inside this article?
    • Comments Style version 1.0
    • Comments Style version 2.0
    • Sign in to the Blogger Account
    • Select Template and click Edit HTML (Click on Proceed)
    • Find ]]></b:skin> (Find using ctrl + F) [Alternate Wayt to copy css code]
    • Copy any of  the type of below css code  just above it.
    • Click on Save

    Comments Style version 1.0


    .comments .comment .comment-actions a {
    background: none repeat scroll 0 0 #FFD99E;
    border: 2px solid #FFB43D;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    font: bold 12px arial;
    margin-right: 14px;
    padding: 3px 9px;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 #FFFFFF;

    }

    .comments .comment-block {

    background: none repeat scroll 0 0 #E2E2E2;
    border: 4px solid #ABABAB;
    border-radius: 3px 3px 3px 3px;
    padding: 3px 10px;

    }

    .continue a {
    background: none repeat scroll 0 0 #FFD99E;
    border: 2px solid #FFB43D;
    border-radius: 3px 3px 3px 3px;
    color: #000000 !important;
    display: inline-block !important;
    margin-top: 7px;
    padding: 3px 8px !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 #FFFFFF;
    }
    .comment-block:hover > .comment-header {
    border-bottom: 2px solid #000;
    -moz-transition: border-color .5s ease;

    }

    .comment-header a {

    color: #000000 !important;

    }

    #comments .avatar-image-container img {
    border: 2px solid #FFFFFF !important;
    border-radius: 50px 50px 50px 50px;
    height: 57px;
    max-width: 57px;

    }

    .comments .avatar-image-container {
    border: 2px solid #FFFFFF;
    border-radius: 34px 34px 34px 34px;
    box-shadow: 1px 1px 3px #ABABAB;
    float: left;
    margin-left: -40px;
    max-height: 60px !important;
    overflow: hidden;
    width: 60px !important;
    }

    Comments Style version 2.0


    .comments .comment-block {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQg6z3601nrkBgXtjQC-dY3CpiHDCx11VO6Tu35gYdbZdlYSoujNLdKD7qFzlkqkAPrK1pbFDco4vpk5AW3aIUyX1ysFWm_8kBM38g-tnwKV-GHBS7eggL68caaIeJNq9F9_RLYpExz9M/s1600/bg.png") repeat scroll 0 0 transparent;
    border: 4px solid #EAEAEA;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 3px 3px 0 #D6D6D6;
    margin-left: 48px;
    padding: 3px 10px;
    position: relative;
    }
    #comments .avatar-image-container img {
    border: 2px solid #FFFFFF !important;
    border-radius: 50px 50px 50px 50px;
    height: 57px;
    max-width: 57px;
    }
    .comments .avatar-image-container {
    border: 2px solid #FFFFFF;
    border-radius: 34px 34px 34px 34px;
    box-shadow: 1px 1px 3px #ABABAB;
    float: left;
    margin-left: -40px;
    max-height: 60px !important;
    overflow: hidden;
    width: 60px !important;
    }
    .comment-header {
    border-bottom: 2px solid #F1F1F1;
    }
    .comment-block:hover > .comment-header {
    -moz-transition: border-color 0.5s ease 0s;
    border-bottom: 2px solid #000000;
    }
    .comments .comment .comment-actions a {
    background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
    border: 2px solid #E0E0E0;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    font: bold 12px arial;
    margin-right: 14px;
    padding: 4px 11px !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 #FFFFFF;
    }

    free recharge amulyam airtel idea bsnl vodafone ultoo embeepay
    Here i am going to say about free recharging sites in internet.Are you wasting money by making recharges,Then here is the time for changing that. There are many sites provides Free Recharge and many of that are fake and some them are good and we can trust.
    One of the site is




    Update [19-06-2013]:  I noticed another site providing FREE Recharge its Laaptu. We can trust this site. It providing QUIZes, REFERALS for earning free recharge. A new feature Laaptu providing is it gives 2Rs. for each referal.
    Update [8-1-2013]: I noticed that I couldn't get any recharge amount from Embeepay and mcent so I have removed it from the following list. The following sites are real and we can trust because I am earning free recharge from these sites.
     There are many other sites for online recharge, some of them that i used are listed follows
    Amulyam gains popularity in India in recent two years and very popular service among Indian mobile users. Amulyam has many ways to get talktime in our wallet. They provides emails of advertisers that sends to us and each opening of the mail will get .25ps in the wallet. They provide 2-3 advertisement mails every day. When the wallet reaches Rs.10 you can make recharge. Another way for increase the earnings in the wallet is to play and create contest or quiz. Playing contest will give .25ps and creating contests make you to earn high. Create a quiz with 10 questions will get you Rs.5. For Approved questions will get 50ps per question.
    Another way is to purchase air tickets and buying things it will offer you Rs. 500 instantly. Also you can refer friends and make money. Each referral will get you Rs. 1.
    Embeepay is a Facebook Application it provides points  and when we sign up it gives 100 points. 30 points will give you 10Rs top up and 150 points will give you 50Rs Recharge.300 points will give you 100Rs
    ULtoo provides free sms and get talktime to your account by sending sms.

    Click here to get Rs.2 on your wallet instantly in amulyam

    Click here to get 100points on Embeepay instantly

    Click here to get Rs.2 on your wallet of ULtoo

    Click here to get Rs.1 on your wallet of Way2sms

    I hope this article will help you better.

    Free Mobile Recharge using Amulyam,Embeepay,Way2sms,ULtoo

    Posted at  17:27  |  in  Tips&Tricks  |  Read More»

    free recharge amulyam airtel idea bsnl vodafone ultoo embeepay
    Here i am going to say about free recharging sites in internet.Are you wasting money by making recharges,Then here is the time for changing that. There are many sites provides Free Recharge and many of that are fake and some them are good and we can trust.
    One of the site is




    Update [19-06-2013]:  I noticed another site providing FREE Recharge its Laaptu. We can trust this site. It providing QUIZes, REFERALS for earning free recharge. A new feature Laaptu providing is it gives 2Rs. for each referal.
    Update [8-1-2013]: I noticed that I couldn't get any recharge amount from Embeepay and mcent so I have removed it from the following list. The following sites are real and we can trust because I am earning free recharge from these sites.
     There are many other sites for online recharge, some of them that i used are listed follows
    Amulyam gains popularity in India in recent two years and very popular service among Indian mobile users. Amulyam has many ways to get talktime in our wallet. They provides emails of advertisers that sends to us and each opening of the mail will get .25ps in the wallet. They provide 2-3 advertisement mails every day. When the wallet reaches Rs.10 you can make recharge. Another way for increase the earnings in the wallet is to play and create contest or quiz. Playing contest will give .25ps and creating contests make you to earn high. Create a quiz with 10 questions will get you Rs.5. For Approved questions will get 50ps per question.
    Another way is to purchase air tickets and buying things it will offer you Rs. 500 instantly. Also you can refer friends and make money. Each referral will get you Rs. 1.
    Embeepay is a Facebook Application it provides points  and when we sign up it gives 100 points. 30 points will give you 10Rs top up and 150 points will give you 50Rs Recharge.300 points will give you 100Rs
    ULtoo provides free sms and get talktime to your account by sending sms.

    Click here to get Rs.2 on your wallet instantly in amulyam

    Click here to get 100points on Embeepay instantly

    Click here to get Rs.2 on your wallet of ULtoo

    Click here to get Rs.1 on your wallet of Way2sms

    I hope this article will help you better.

    Christmas snowfalls with breeze for Blogger 2012
    Christmas is one of the largest festival celebrate all over the world. Christmas is the much awaited festival that knock the door of all Bloggers. And all are thinking about decorating their blog. How to decorate the blog with snowfalls and clouds ? Do you like to decorate your blog with beautiful snowflakes and clouds? Then here there is a article about how to add snowflakes with breeze to your blogger blog.

    If your Blog has a dark interface then this widget serves better.The Snow flakes and the breeze are  in white color so dark background will be better to get a good look.


    If you want to get dark Christmas background ,set the following picture or search darker Christmas backgrounds.
    Do you want to know how this work
    Click below to view the demo

    • Sign in to your Blogger Account
    • Go to Template > Edit HTML
    • Find ]]></b:skin> (Find using ctrl + F)
    • Copy the following CSS code above it [Alternate Way to copy css code]

    /*-- Breeze for Snow flakes --*/
    #mbl_snowflakes {
    position: absolute;
    height: 950px;
    width: 966px;
    overflow: hidden;

    }
    #snowContainer > div
    {
    position: absolute;
    width: auto;
    height: auto;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
    }
    #snowContainer > div > img {
    position: absolute;
    width: auto;
    height: auto;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform-origin: 50% -100%;
    }
    @-webkit-keyframes fade
    {
    0% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
    }

    @-webkit-keyframes drop
    {
    0% { -webkit-transform: translate(0px, -50px); }
    100% { -webkit-transform: translate(0px, 650px); }
    }
    @-webkit-keyframes clockwiseSpin
    {
    0% { -webkit-transform: rotate(-50deg); }
    100% { -webkit-transform: rotate(50deg); }
    }


    @-webkit-keyframes counterclockwiseSpinAndFlip
    {
    0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
    }

    •  Search <body and copy the following below it
    <script charset="utf-8" src="https://netoopscodes.googlecode.com/svn/branches/Js files/snowfall.js" type="text/javascript"></script>

    <div id="mbl_snowflakes">

    <div id="snowContainer">

    </div>

    </div>


    • You are done... Save the Template

    Christmas snowfalls with breeze for Blogger 2012

    Posted at  17:26  |  in  Tips&Tricks  |  Read More»

    Christmas snowfalls with breeze for Blogger 2012
    Christmas is one of the largest festival celebrate all over the world. Christmas is the much awaited festival that knock the door of all Bloggers. And all are thinking about decorating their blog. How to decorate the blog with snowfalls and clouds ? Do you like to decorate your blog with beautiful snowflakes and clouds? Then here there is a article about how to add snowflakes with breeze to your blogger blog.

    If your Blog has a dark interface then this widget serves better.The Snow flakes and the breeze are  in white color so dark background will be better to get a good look.


    If you want to get dark Christmas background ,set the following picture or search darker Christmas backgrounds.
    Do you want to know how this work
    Click below to view the demo

    • Sign in to your Blogger Account
    • Go to Template > Edit HTML
    • Find ]]></b:skin> (Find using ctrl + F)
    • Copy the following CSS code above it [Alternate Way to copy css code]

    /*-- Breeze for Snow flakes --*/
    #mbl_snowflakes {
    position: absolute;
    height: 950px;
    width: 966px;
    overflow: hidden;

    }
    #snowContainer > div
    {
    position: absolute;
    width: auto;
    height: auto;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
    }
    #snowContainer > div > img {
    position: absolute;
    width: auto;
    height: auto;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform-origin: 50% -100%;
    }
    @-webkit-keyframes fade
    {
    0% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
    }

    @-webkit-keyframes drop
    {
    0% { -webkit-transform: translate(0px, -50px); }
    100% { -webkit-transform: translate(0px, 650px); }
    }
    @-webkit-keyframes clockwiseSpin
    {
    0% { -webkit-transform: rotate(-50deg); }
    100% { -webkit-transform: rotate(50deg); }
    }


    @-webkit-keyframes counterclockwiseSpinAndFlip
    {
    0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
    }

    •  Search <body and copy the following below it
    <script charset="utf-8" src="https://netoopscodes.googlecode.com/svn/branches/Js files/snowfall.js" type="text/javascript"></script>

    <div id="mbl_snowflakes">

    <div id="snowContainer">

    </div>

    </div>


    • You are done... Save the Template

    About-Privacy Policy-Contact us
    Copyright © 2013 fulluptodate. Blogger Template by Bloggertheme9
    Proudly Powered by Blogger.
    back to top