Multi colored random posts Widget for Blogger EXCLUSIVE.!!!!

Multi colored random posts Widget for Blogger
Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget, Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Its let your users to spend more time in your Blog. Surely it increases your Blog's internal links that lets your blog higher traffic.This is the modified version of the Random posts widget we posted earlier, one of our visitor "Yogesh Gamer" asked me to make this widget like Multi colored Popular posts Widget. So after that I just tried and it got success. Please do check this widget and comment your suggestions...



Check out Related Articles
Awesome Random Posts Widget For Blogger
Awesome Multi-Colored Popular Posts Widget for Blogger

Features of This Widget

  •  Flat UI colors used (it will attract users attention)
  • Automatic Post Numbering

  • Sign In to Blogger Dashboard
  • Go to Layout
  • Click on Add Gadget and look for HTML/Javascript and select it
  • Copy the below code inside it and click save
<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}

</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>


Related Posts Blogger Widget and LinkedWithIn for Blogger

Related Posts Blogger Widget and LinkedWithIn for Blogger
Related posts Widget, as the title says , this Widget will generate the list of related posts. this Widget can be added either in homepage (under each posts) or inside the post. By placing this related posts Widget, there is chance the spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your blog and will keep your visitors from suddenly quit from your blog. Let's see how to add related posts widget to Blogger



Using LinkedWithIn Widget

  • It is very simple to add LinkedWithIn Widget
  • Go to LinkedWithIn website and follow the simple instructions
  • Give e-mail id, blog url, select platform as Blogger and select number of posts should be displayed.

 Add Related Posts Manually to Blogger

  •  Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find </head> 
  • Copy the below code above </head>

<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */
<!--Related Posts with thumbnails Script End-->

Customization

  • RED marked - remove red marked portion to add this Widget to Homepage
  • Brown - place the URL of the image in quotes to display if there is no image in the post.
  • maxresults=5 - change the value to change the number of posts to be displayed.
  • splittercolor="#DDDDDD" - change the color of splitter line between posts. Check here to see color codes selector
  • relatedpoststitle="Related Posts" - Change the Name of title.

 Add to Post Footer

  •  Find <div class='post-footer'> and copy the below code above it
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://netoopsblog.blogspot.com'><img alt='Blogger Widgets' src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a>
</b:if></b:if>
    • Remove Orange marked to add related posts to homepage too.
    • Change RED marked to change the number of posts should be displayed
    I hope this article will help you. If so please like and share our blog. You can check here more Exciting Widgets.

    Awesome Recent Comments Widget for Blogger, Feed Comments

    Awesome Recent Comments Widget for Blogger, Feed Comments
    Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your blog visitors and followers. By default Blogger added commenting System to Blogger blogs. Recent Comments Widget will inspire your blog visitors to post a comment on your Blog. If you don't like to read full about this widget or Are you hurry to add this widget to you blog go to "How to add Recent Comments Widget to Blogger Blog".


    There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System.
    The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment.
    The Recent Comment Widget shows the Commentators name with Profile link followed by the Post name and followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes. This Widget was coded using JavaScript and you can also change the style of Widget according to your template.

    Wish to see Demo?
    Recent Comments Widget

    How to Add Recent Comments Widget?

    • Sign In to Blogger Dashboard
    • Select Layout -> Click on Add a Gadget
    • Take HTML/Javascript from the list
    • Give the Title and Copy the below code to it and Save
    <script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_netoopsblog_min.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://netoopsblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
    <a style="display:none" href=http://netoopsblog.blogspot.com>Recent Comments Widget</a><style type=text/css>
    .rcw-comments a {text-transform: capitalize;}
    .rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}

    </style>

    • Change the RED highlighted with your blog name
    If you want different Styles for this Widget, Please visit again I will post soon.

    Another Way to add Recent Comments Widget

    • Go to Layout -> Click on Add a Gadget
    • Select Feed from the list and give the following URL
    http://netoopsblog.blogspot.com/feeds/comments/default
    • Change the RED marked portion with your Blog URL
    A Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name etc.. Using this method you have only limited options.
    • Click Save
    Congratulations you have done..
    I hope this article will help you and you enjoyed this article if so, Please Like and Share .


    Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

    Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.


    Demo shows in bottom right side 
    Features of this Widget
    • Flat UI colors used (it will attract users attention)
    • Automatic Post Numbering
    • CSS3 Hover Animation 

    Sign in to your Blogger Account and Active Popular Posts Widget


    • First Add Popular post Widget to Blogger
      • Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
      • Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
    • Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
    • Copy the following code and Paste just above it
      <!-- Popular posts multi colored UI theme -->
      #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
      #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
      #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
      #PopularPosts1 ul li:first-child:after{content:"1"}
      #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
      #PopularPosts1 ul li:first-child + li:after{content:"2"}
      #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
      #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
      #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
      #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
      #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
      #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
      #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
      #PopularPosts1 ul li:first-child:after,
      #PopularPosts1 ul li:first-child + li:after,
      #PopularPosts1 ul li:first-child + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
      #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
      #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
      #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
      #PopularPosts1 img{
      -moz-border-radius: 130px;
      -webkit-border-radius: 130px;
      border-radius: 130px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
      padding:4px;
      border:1px solid #fff !important;
      }
      #PopularPosts1 img:hover {
      border-radius: 0 0 0 0;
      -moz-transform: scale(1.2) rotate(-711deg) ;
      -webkit-transform: scale(1.2) rotate(-711deg) ;
      -o-transform: scale(1.2) rotate(-711deg) ;
      -ms-transform: scale(1.2) rotate(-711deg) ;
      transform: scale(1.2) rotate(-711deg) ;
      }
      <!-- popular posts multicolored UI theme -->

      • Click on Preview Template (You can see the template without saving)
      • Save the Template.
      View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.
      If any problems with this trick don't hesitate to ask, do comment here...

      Add Google Official Contact Form Widget to Blogger?

      Add Google Official Contact Form Widget to Blogger
      Contact Form Widget is used to send mails to the Blog owner from the visitors/users. Do your blog looks anything missing?. I think a Contact Form is an important widget that was missed for long time. Are you using Contact From in your blog? If so, it will not Google's Official contact Form. That may be from other hosted providers. Here Google released its brand new Contact Form Widget for Blogger Users. It helps to send e-mails to blog owner without Sign In to Google or any other account. Anyone can send mails by providing a valid e-mail address and Message. This Contact Form can add to any blogger blogs that hosted in Google's Server.


       It have three Fields- Name,e-mail and Message and a Send Button. E-mail and Message field are mandatory. It also have e-mail validation, checks whether the e-mail address provided is valid or not. And a notice or message will appear to show the status of sending e-mail, Shows success message it it delivered to user,otherwise shows error message.  There is no CAPTCHA (Used to prevent Spam) in the Contact Form, but Google implemented its effective Spam detection mechanisms. The problem exist with the Contact Form is it can only use as Widget (in Sidebar or  Footer or Under Posts). In many popular websites/blogs they use a page for Contact Form. By default this Contact Form can used as widget, we introduce a technique to use Google Official contact Form on Blogger Static Pages

      Advantages

      • Send e-mails to Blog owner without Sign In to any Accounts.
      • E-mail validation is provided.
      • Spam detection Mechanism.
      • Show status message of sending.

      Disadvantages

      • Use only as Widget (in Sidebar/ in Footer)
      • No CAPTCHA

      Add Google Contact Form to Blogger

      • Sign In to Blogger Dashboard
      • Select Layout -> Click on Add a Gadget
      •  Select More Gadgets in Left Side and Select Contact Form
      • Give the Title and Click Save


      • You have done please check your blog.
      When visitor drop a message it goes straight to your inbox. One copy of the message will send to each Admin.
      I hope this Contact Form will help your blog to get Suggestions and queries from visitors.

      Add Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

      Ramadan also known as Ramzan is a holy festival of Islam. This spiritual event is celebrated by fasting(every day sunrise to sunset) for a whole month.Ramadan is the month in which was sent down the Qur'an,
      as a guide to mankind, also clear Signs for guidance and judgment between right and wrong. So everyone of you who is present during that month should spend it in fasting. In this time have you ever think about designing / decorating your blog something special. If you have a wish like that don't wait, here I am going to show a tutorial about decorating your blog with Ramadan Lanterns.

       Before revealing this tutorial I would like to thank Syed Faizan Ali of MyBloggerLab.com, he made this animated Ramadan Lantern for blog users. Not only for blogger users but also can use this to Websites or Other blogging platforms(WordPress,Drupal etc) . This animated hanging light created in flash so your browser should support Flash Player,Otherwise you have to install Flash Player. In newer Operating Systems (Windows 7, Windows 8) Flash Player already installed it.Flash Animated Ramadan Lantern in top of our blog,you can see a hanging Lantern spinning to left to right then also back with a glowing Ramadan Kareem in background. This Ramadan Lantern looks very nice in Dark backgrounds,Blue,Orange Backgrounds.
      You can see the demo in top of our Blog

      How to add Animated Ramadan Lantern ?

      • Sign In to Blogger Dashboard
      • Go to Template -> Edit HTML
      • Find (Ctrl+F) </body>
      • Copy the Following code just above it
       <!--  Ramadan Lantern NetOopsblog.blogspot.com -->
      <div align='center'>
      <table border='0' cellpadding='0' cellspacing='0' width='900'>
      <tr>
      <td height='0' width='900'>
      <div style='float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;'><a href="http://www.netoopsblog.blogspot.com"></a><object border='0' classid='clsid:D27CDB6E-AE6D-11CF-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' height='144' id='obj2' width='192'><param name='movie' value='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf'/><param name='quality' value='High'/><param name='wmode' value='transparent'/><embed height='144' name='obj2' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='High' src='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf' type='application/x-shockwave-flash' width='192' wmode='transparent'/></object>
      </div>
      </td>
      </tr>
      </table>
      </div>
      <!--  Ramadan Lantern By NetOopsblog.blogspot.com -->
      Click on  Save. It's done. Check your Blog
      Here I  am posting this article in this holy occasion of Ramadan not only to reveal this trick but also to show respect ,Kindness to the atmosphere filled with spirit of mirth and love of Ramadan. In this holy occasion I heartily wishing you a Happy Ramadan.

      Awesome NetOopsblog Subscription Widget for blogger

      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.




       

      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("http://2.bp.blogspot.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/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="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://3.bp.blogspot.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://2.bp.blogspot.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/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="http://2.bp.blogspot.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://3.bp.blogspot.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://2.bp.blogspot.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/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...

        15+ Smooth Jquery Scroll to Top widget generator for Blogger v.1

        jquery scroll to top widget generator blogger
        Jquery scrolling to top buttons help visitors to jump to top of page with smooth automatic scrolling.So the user/visitor of your blog can go to top of page with a single click.This smooth jquery scrolling makes your blog impressive.
        I created a Blogger widget generator for ease of use.Create your favorite scroll to top Button with a single click.





        To view demo look at right-bottom of this blog or Click on the following link


        I think you liked this generator,Check out our other awesome widget generators here.
        Don't forget to say thanks at least for appreciating us..  Also expect more form us.. thanks..

        I found that some sites copy our code,a notice for those Blog owners: please at-least say thanks or provide our blog link within your post. Thanks

        Spraying animated subscription buttons for blogger v.1

        spraying animated subscription buttons blogger
        Spraying jQuery animated subscription buttons widget is an awesome widget for blogger.This animated subscription buttons created by Redeyeoperations and i modified it by adding some additional features.This widget works best in Mozilla Firefox..
        I created a widget generator for you with some important options.




         
        To view demo of this widget please click on following link

        Features

        • 5 subscription buttons
        • jQuery Animation
        • Effective CSS3 Animation
        • Color Selectable base button
        View Demo
        Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
        • Go to Template->Edit HTML [A dialog box appears click Proceed]
        • Copy and paste the below code <head> and save it
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>



          Google +1 button and Badge for Blogger

          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....

          Facebook jQuery POP OUT likebox widget generator

          facebook likebox widget
          I had developed a Facebook Static popout jquery effect Like box generator for you.This Widget Generator let's you easily generaate your favorite Facebook style Widget and also easily add to your Blogger Blog.In my previous Article (How to Add a Static Facebook jQuery Pop out Widget) I told you about Static Facebook POP OUT Widget installation manually.Use this Widget generator and Enjoy..!





          Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
          • Go to Design->Edit HTML[Template->Edit HTML in new blogger interface]
          • Copy below code inside <head>
          <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
          • Go to Design-> Page Elements
          • Click add gadget and select HTML/javascript
          • Copy and paste the generated code inside it and save it.


          This is my first widget generator,also expect more other awesome widget generators from us.If you enjoyed this widget Generator please please share n like us..

          Stylish Static animated Flash Clock for Blogger

          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.

            Facebook Static Pop Out Like Box with jQuery Effect for Blogger

            facebook pop out likebox
             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.
             






            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
            page elements blogger
            • 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("http://1.bp.blogspot.com/-Tka_Jf2EbuQ/Tz-PU1EH76I/AAAAAAAAAIQ/8FxGt44NHPo/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. 

            Add Flying Letters below Mouse Pointer Animation

            flying letters below mouse
            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.















            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.

            Awesome Rainbow animation Link Widget for Blogger

            This is a simple Blogger Blog Trick,Changing the color of Link when Mouse over it.7 colors are changing like animation when hover the link.
            Follow the simple steps below..












            If you are a beginner in HTML editing,Use our 1 Click Widget Below(Click Add to Blogger Button below)



            Install Rainbow Animation Hover Effect manually.

            Note:Remember that Back up your Template First.(How to Backup Template)

            • Sign In to you Blogger Account.
            • Go to Design->Edit HTML
            • Find <head> section and Place the below code inside it.

            <script type='text/javascript'>
            //<![CDATA[
            var rate = 20;
            if (document.getElementById)
            window.onerror=new Function("return true")
            var objActive;  // The object which event occured in
            var act = 0;    // Flag during the action
            var elmH = 0;   // Hue
            var elmS = 128; // Saturation
            var elmV = 255; // Value
            var clrOrg;     // A color before the change
            var TimerID;    // Timer ID
            if (document.all) {
            document.onmouseover = doRainbowAnchor;
            document.onmouseout = stopRainbowAnchor;
            }
            else if (document.getElementById) {
            document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
            document.onmouseover = Mozilla_doRainbowAnchor;
            document.onmouseout = Mozilla_stopRainbowAnchor;
            }
            function doRainbow(obj)
            {
            if (act == 0) {
            act = 1;
            if (obj)
            objActive = obj;
            else
            objActive = event.srcElement;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
            }
            }
            function stopRainbow()
            {
            if (act) {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
            }
            }
            function doRainbowAnchor()
            {
            if (act == 0) {
            var obj = event.srcElement;
            while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
            break;
            }
            if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
            }
            }
            }
            function stopRainbowAnchor()
            {
            if (act) {
            if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
            }
            }
            }
            function Mozilla_doRainbowAnchor(e)
            {
            if (act == 0) {
            obj = e.target;
            while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
            break;
            }
            if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
            }
            }
            }
            function Mozilla_stopRainbowAnchor(e)
            {
            if (act) {
            if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
            }
            }
            }
            function ChangeColor()
            {
            objActive.style.color = makeColor();
            }
            function makeColor()
            {
            // Don't you think Color Gamut to look like Rainbow?
            // HSVtoRGB
            if (elmS == 0) {
            elmR = elmV;    elmG = elmV;    elmB = elmV;
            }
            else {
            t1 = elmV;
            t2 = (255 - elmS) * elmV / 255;
            t3 = elmH % 60;
            t3 = (t1 - t2) * t3 / 60;
            if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
            }
            else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
            }
            else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
            }
            else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
            }
            else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
            }
            else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
            }
            else {
            elmR = 0;   elmG = 0;   elmB = 0;
            }
            }
            elmR = Math.floor(elmR).toString(16);
            elmG = Math.floor(elmG).toString(16);
            elmB = Math.floor(elmB).toString(16);
            if (elmR.length == 1)    elmR = "0" + elmR;
            if (elmG.length == 1)    elmG = "0" + elmG;
            if (elmB.length == 1)    elmB = "0" + elmB;
            elmH = elmH + rate;
            if (elmH >= 360)
            elmH = 0;
            return '#' + elmR + elmG + elmB;
            }
            //]]>
            </script>

            • Save It and Enjoy. . . !

            I think you enjoyed this post.Surely you will get excited after using this widget.