Add Flying Letters below Mouse Pointer Animation

How to setup flying letters below mouse pointer.This a simple article that Spice your Blog.After inserting this Code,When you move mouse over your Blog, you will see that Letters you SET in the below code will flying like a Animation.

VIEW DEMO

Install Flying Letters Below Mouse Widget

Make sure you had Backed up your Template(How To BackUp Template?)

• Sign In to your Blogger Account
• Go to Design->Edit HTML
• Find </body> (Find Easily Using Ctrl+F) and Copy and Paste the below Code

<script type="text/javascript">
var text=&#39; ENTER YOUR FLYING TEXT HERE &#39;;
</script>
<script src="http://netoopscodes.googlecode.com/svn/branches/Js%20files/mousetail.js" type="text/javascript">
</script>

• Save it,its all.....you are almost done.

Read More

Facebook Static Pop Out Like Box with jQuery Effect for Blogger

 Here is a Tutorial about how to add a static Pop out Like Box with Cool jQuery hover effect.This a Awesome Blogger Blog Widget that adds a little beauty to your blog.

After installing this Widget a Facebook Logo will appear on the right side of your Blog.When you Mouse over that Logo it Pop out with Smooth jQuery Effect.

Follow the instructions for installing this Widget.
 

View Demo

If you don't interested in Editing HTML,you can use our WIDGET GENERATOR.

Install Facebook Pop Out Like Box Widget

• Go to Design-> Page Elements
• Click on Add Gadget

• Select HTML/Javascript from it
• Leave title as blank ,Copy and Paste the below code into the content section.

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.noopslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz7jqGByVKXMqfB7q1fdm4fISGIBByjMGhk13eDWU66NQsDGQymVLcQYeywrRfQkFHRbrf1S0oqnTGpJdpFhju2fhVoWBEJLhVEowTHfoLclquzfhetKnmmMDOj3PPA-l_uvt7EPKunm8/s1600/fb_static+button.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 999;position:fixed;right:-250px;top:20%;}
.noopslikebox div{border:none;position:relative;display:block;}
.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}
.noopslikebox span a{color: gray;text-decoration:none;}
.noopslikebox span a:hover{text-decoration:underline;}
</style>
<div class="noopslikebox">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/NetOops-Blog/159796530791611&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
    </div>
</div>

• Replace the RED highlighted text with your Facebook page URL.

I hope you'd liked this Article,if so please share, like this. 

Read More

Blogger Stylish Static animated Flash Clock

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.

Read More

Dynamic Views Button with jquery Effect for Blogger Blog

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.

View Demo

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/AVvXsEg-YVUmvlqrgykO0psdn1lz4OGke284RqRteRLCPS3SBKEmWNzRI47up3owrclQL4gf2TfE82wi4E5PERETjstw2-30iAqDydh2sVi5_a4u4npZflRs5ySxTD7dDsK909MtgDAQMzSBHgw/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.

Read More