Monday, December 31, 2012

Facebook Introduced New POOP Smiley


Last time as we post the New Animated Facebook Smileys and similarly as Facebook again introduced a new smile named as POO like this image and this smile is like shit be'coz when we want to give some thing dirty then we can give that small dirty poop. Facebook updated their smileys for chats now it's very easy to put a animated smileys in chat which is feel like  live emotions without installing any software. It's totally free, like last time you probability used Customize Facebook Smileys for Chat. This Facebook smile is very funny and very interesting be'coz many peoples don't know the meaning of POOP.



How to Use it in Facebook Chat....?

  • Open your Facebook Account
  • Start Chatting with someone
  • Type below code in the Facebook Chat (Like in Animated Image)

:poop:

  • Press Enter and You are done.
  • Enjoy with New and Dirty Smile ;)


 

If Any Problem Comes, Ask in Comments

Sunday, December 30, 2012

Add a Orange Live Demo Button like Making Different


Making Different is very good and creative blog as we all know and the author and owner of that blog also is very creative and great blogger, and i think he love orange color :) be'coz he used orange colored theme in his blog but as he add a Live Demo button in this blog that is very good and my one of the reader ask for that. so today i'm presenting that Blogger Hack. Hope you will all like it.



Add Orange Live Demo Button

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below.

]]></b:skin>

  • Paste below code before ]]></b:skin>

.wg-demobt a {margin-top:0px;margin-right: 10px;-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;/*-www.widgetgenerators.blogspot.com-*/background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9780e), color-stop(1, #f9ead4) );background:-moz-linear-gradient( center top, #f9780e 5%, #f9ead4 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9780e', endColorstr='#f9ead4');/*-www.widgetgenerators.blogspot.com-*/background-color:#f9780e;-moz-border-radius:6px;
-webkit-border-radius:6px;border-radius:6px;border:1px solid #f9780e;display:inline-block;color:#000000;font-family:arial;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}.wg-demobt a:hover{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9ead4), color-stop(1, #f9780e) );background:-moz-linear-gradient( center top, #f9ead4 5%, #f9780e 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9ead4', endColorstr='#f9780e');background-color:#f9ead4;}.wg-demobt a:active {position:relative;top:1px;}

  • Save your template.


How to add it in post....?

  • Go to posting area > HTML
  • Now paste code in it.

<div class="wg-demobt">
<a href="#">Live Demo</a>
</div>




Make Changes....!

  • Replace # with your link.
  • You can replace Live Demo with your own text. (Optional)


If Any Problem Comes, Ask in Comments

Thursday, December 27, 2012

Add a Multi Color Social Bookmarking Widget


We also have an another Social Bookmarking Widget for blogger which has a unique feature with multicolor and black mouse hover effect when we touch widget by mouse pointer this widget is simply made by using the CSS and HTML and some images so this widget will not has any error in the installation and also it works very awesome in your own blog and it will give a unique rainbow effect to your bookmarking experience.This widget is very smooth and easily customizable so you easily use it as the sharing widget for your blog by using the sharing codes but we will publish it soon with same widget. I'll recommend you to add this widget in your blog be'coz it's a pure CSS widget.





Add Multi Color Bookmarking Widget

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.
 <style type='text/css'>
/*WIdget by www.widgetgenerators.blogspot.com*/
.wg-roseicwidget {  width: 300px;  margin: -10px;  text-decoration: none; }
.wg-roseicwidget ul {  margin: 0;  padding: 0;  text-decoration: none;}
.wg-roseicwidget ul li {  list-style:none;   padding: 0; text-transform: none; text-decoration: none;}
.wg-roseicwidget ul li a {   color: #fff;   display:block;  text-decoration: none;}
.wg-roseicwidget ul li a:hover {  color: #c9c9c9;  background-color: #333;  text-decoration: none; }
.wg-roseicwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.wg-roseicwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.wg-roseicwidget ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
/*WIdget by www.widgetgenerators.blogspot.com*/
</style>


<div class="wg-roseicwidget">
<ul>
<li><a class="facebook" href="https://www.facebook.com/WidgetGenerators">Join Us on Facebook</a></li>
<li><a class="rss" href="http://feeds.feedburner.com/WidgetGenerators">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/WidgetGenerator">Follow me on Twitter</a></li>

<li><a class="google" href="https://plus.google.com/101961392825834817673">Join me on Google+</a></li>
<li><a class="linkedin" href="#">Connect With Us on LinkedIn</a></li>

</ul>
</div>

  • Save your widget after below changes.


 Make Changes....!

  • Replace WidgetGenerators with your Facebook page user name.
  • Replace WidgetGenerators with your Feed burner user name.
  • Replace WidgetGenerator with your Twitter user name.
  • Replace 101961392825834817673 with your Google + id.
  • Replace # with your Linkedin user name.




If Any Problem Comes, Ask in Comments

Wednesday, December 26, 2012

Recommended Post Slide Out Widget V2


Recommended slide out widget is a very popular widget and it helps visitors to find more stuff on your blog. This is version 2 of this widget and we posted the last version in our last post but due to some reasons we have to delete that post but after that we are here with version 2, this version includes the social sharing buttons of Facebook, Twitter, Google + with a close button and side in-out button. This Widget is simply made by CSS and JavaScript.






Step- 1 Install Slide Out Widget in Blogger

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below.

<data:post.body/>

  • Paste below code after <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

  • Save your template.


Step2 of Installation

  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.
<style>
#bpslidein{z index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:5px solid #434343;
position:fixed;
right:-430px;
bottom:0;-moz-box-shadow:-5px 0 10px #aaa;
-webkit-box-shadow:-5px 0 10px #aaa;
box-shadow:-5px 0 10px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#434343;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;font-size:17px;
font-weight:700;font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bpslidein .help{right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;width:80px;
}
#bpslidein_title{
width:290px;
}
</style>
<script language="javascript">
document.write( unescape( '%3C%64%69%76%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%22%3E%20%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%68%65%6C%70%22%3E%3F%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%65%78%70%61%6E%64%22%3E%2B%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%63%6C%6F%73%65%22%3E%58%3C%2F%64%69%76%3E%0A%20%3C%70%3E%52%65%63%6F%6D%6D%65%6E%64%65%64%20%66%6F%72%20%79%6F%75%3C%2F%70%3E%0A%20%3C%64%69%76%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%5F%69%6D%61%67%65%22%3E%3C%2F%64%69%76%3E%0A%20%3C%64%69%76%20%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%5F%74%69%74%6C%65%22%3E%3C%69%6D%67%20%62%6F%72%64%65%72%3D%22%30%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%6A%43%46%6A%6D%66%59%68%34%54%6F%2F%55%4E%67%59%61%44%66%64%75%66%49%2F%41%41%41%41%41%41%41%41%47%46%59%2F%52%72%4F%64%79%2D%4A%63%6F%69%77%2F%73%31%36%30%30%2F%4D%44%2D%6C%6F%61%64%69%6E%67%2E%67%69%66%22%20%2F%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%74%6F%6F%6C%62%6F%78%20%61%64%64%74%68%69%73%5F%64%65%66%61%75%6C%74%5F%73%74%79%6C%65%20%27%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%66%61%63%65%62%6F%6F%6B%5F%6C%69%6B%65%27%20%66%62%3A%6C%69%6B%65%3A%6C%61%79%6F%75%74%3D%27%62%75%74%74%6F%6E%5F%63%6F%75%6E%74%27%2F%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%74%77%65%65%74%27%2F%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%67%6F%6F%67%6C%65%5F%70%6C%75%73%6F%6E%65%27%20%67%3A%70%6C%75%73%6F%6E%65%3A%73%69%7A%65%3D%27%6D%65%64%69%75%6D%27%2F%3E%0A%3C%2F%61%3E%3C%2F%61%3E%3C%2F%61%3E%3C%2F%64%69%76%3E%0A%3C%73%63%72%69%70%74%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%73%37%2E%61%64%64%74%68%69%73%2E%63%6F%6D%2F%6A%73%2F%32%35%30%2F%61%64%64%74%68%69%73%5F%77%69%64%67%65%74%2E%6A%73%23%70%75%62%69%64%3D%78%61%2D%34%66%30%38%36%62%63%61%30%35%62%66%36%38%36%31%27%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%2F%3E%0A%3C%73%63%72%69%70%74%3E%0A%21%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%21%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%7B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%70%6C%61%74%66%6F%72%6D%2E%74%77%69%74%74%65%72%2E%63%6F%6D%2F%77%69%64%67%65%74%73%2E%6A%73%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%3B%7D%7D%28%64%6F%63%75%6D%65%6E%74%2C%22%73%63%72%69%70%74%22%2C%22%74%77%69%74%74%65%72%2D%77%6A%73%22%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%2F%64%69%76%3E%20%0A%3C%73%63%72%69%70%74%3E%20%69%66%28%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%73%70%6C%69%74%28%22%2F%22%29%2E%6C%65%6E%67%74%68%3D%3D%36%26%26%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%69%6E%64%65%78%4F%66%28%22%2E%68%74%6D%6C%22%29%21%3D%2D%31%29%7B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%3D%27%75%6E%64%65%66%69%6E%65%64%27%29%76%61%72%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%5B%5D%3B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%3D%27%62%6F%6F%6C%65%61%6E%27%29%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%65%6C%73%65%20%76%61%72%20%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%7B%66%75%6E%63%74%69%6F%6E%20%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%73%72%63%2C%63%61%6C%6C%62%61%63%6B%2C%69%64%29%7B%76%61%72%20%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%27%73%63%72%69%70%74%27%29%3B%73%63%72%69%70%74%2E%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%3B%73%63%72%69%70%74%2E%61%73%79%6E%63%3D%74%72%75%65%3B%73%63%72%69%70%74%2E%73%72%63%3D%73%72%63%3B%73%63%72%69%70%74%2E%69%64%3D%69%64%3B%76%61%72%20%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%6C%6F%61%64%65%64%22%7C%7C%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%63%6F%6D%70%6C%65%74%65%22%29%7B%63%61%6C%6C%62%61%63%6B%28%29%3B%72%65%74%75%72%6E%7D%65%6C%73%65%7B%73%63%72%69%70%74%3D%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%7D%69%66%28%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%21%3D%6E%75%6C%6C%29%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%3D%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%76%61%72%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%26%26%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%29%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%28%29%3B%63%61%6C%6C%62%61%63%6B%28%29%7D%3B%65%6C%73%65%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%63%61%6C%6C%62%61%63%6B%3B%69%66%28%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%29%7B%6E%65%77%63%61%6C%6C%62%61%63%6B%28%29%7D%65%6C%73%65%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%70%75%73%68%28%6E%65%77%63%61%6C%6C%62%61%63%6B%29%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%6E%75%6C%6C%3B%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%6E%75%6C%6C%7D%3B%76%61%72%20%68%65%61%64%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%27%68%65%61%64%27%29%5B%30%5D%3B%69%66%28%21%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%68%65%61%64%2E%61%70%70%65%6E%64%43%68%69%6C%64%28%73%63%72%69%70%74%29%7D%7D%69%66%28%74%79%70%65%6F%66%20%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%66%75%6E%63%74%69%6F%6E%20%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%28%63%61%6C%6C%62%61%63%6B%29%7B%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%74%72%75%65%3B%76%61%72%20%6C%65%6E%3D%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%6C%65%6E%67%74%68%3B%66%6F%72%28%76%61%72%20%69%3D%30%3B%69%3C%6C%65%6E%3B%69%2B%2B%29%7B%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%5B%69%5D%28%29%7D%7D%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%28%29%3B%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%3A%2F%2F%61%6A%61%78%2E%67%6F%6F%67%6C%65%61%70%69%73%2E%63%6F%6D%2F%61%6A%61%78%2F%6C%69%62%73%2F%6A%71%75%65%72%79%2F%31%2E%37%2E%31%2F%6A%71%75%65%72%79%2E%6D%69%6E%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%73%3A%2F%2F%64%6C%2E%64%72%6F%70%62%6F%78%2E%63%6F%6D%2F%75%2F%36%33%39%36%38%38%34%32%2F%72%65%63%6F%6D%6D%61%6E%64%65%64%77%69%64%67%65%74%76%32%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%7D%2C%22%62%70%2D%6F%75%74%2D%73%6C%69%64%65%22%29%7D%2C%22%6A%51%75%65%72%79%6A%73%22%29%7D%20%3C%2F%73%63%72%69%70%74%3E%0A%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%69%64%67%65%74%67%65%6E%65%72%61%74%6F%72%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%32%30%31%32%2F%31%32%2F%72%65%63%6F%6D%6D%65%6E%64%65%64%2D%70%6F%73%74%2D%73%6C%69%64%65%2D%6F%75%74%2D%77%69%64%67%65%74%2D%76%32%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%0A%3C%2F%61%3E' ) );
</script>

  • Now Finally Save your Widget
  • Enjoy a High Quality Widget in Free.
 

Make Changes (Optional)

  • Replace #434343 with your own color code to change the color of top border color.


You Could also Use Generator for this Widget






If Any Problem Comes, Ask in Comments

Tuesday, December 25, 2012

Create A Calculator Using JavaScript CSS HTML



AS we all know that mathematics is very important for us and we can create any calculation using calculator and we can also create and develop calculator by using all of the programming language like C, C++, Java, etc. bt today we willl give the Calculator which is made by HTML CSS and JavaScript.


You can easily use calculator on your Blog/website very easily.This Calculator is made by using JavaScript, CSS, HTML.





Codes of  Calculator 


<style>
/*----- Calculator By www.widgetgenerators.blogspot.com ------ */

.btnLogin
{
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:15px;
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #badff3, #7acbed);
    background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
    border:1px solid #7db0cc !important;
    cursor: pointer;
    padding:11px 16px;
    font:bold 11px/14px Verdana, Tahomma, Geneva;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
    color:#fff;
    -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    margin-center:12px;
    float:center;
    padding:7px 21px;
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#a1d8f0;
    background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
/*----- Calculator By www.widgetgenerators.blogspot.com ------ */
</style>



  <script language='JavaScript'>
  <!--------------------------------------------------------------------
    Memory  = "0";      // initialise memory variable
    Current = "0";      //   and value of Display ("current" value)
    Operation = 0;      // Records code for eg * / etc.
    MAXLENGTH = 30;     // maximum number of digits before decimal!

function AddDigit(dig)          //ADD A DIGIT TO DISPLAY (keep as 'Current')
 { if (Current.indexOf("!") == -1)  //if not already an error
    { if (    (eval(Current) == 0)
              && (Current.indexOf(".") == -1)
         ) { Current = dig;
           } else
           { Current = Current + dig;
           };
      Current = Current.toLowerCase(); //FORCE LOWER CASE
    } else
    { Current = "Hint! Press 'AC'";  //Help out, if error present.
    };
   if (Current.indexOf("e0") != -1)
     { var epos = Current.indexOf("e");
       Current = Current.substring(0,epos+1) + Current.substring(epos+2);
     };
  if (Current.length > MAXLENGTH)
     { Current = "Aargh! Too long"; //don't allow over MAXLENGTH digits before "." ???
     };
   document.Calculator.Display.value = Current;
 }

function Dot()                  //PUT IN "." if appropriate.
 {
  if ( Current.length == 0)     //no leading ".", use "0."
    { Current = "0.";
    } else
    {  if (   ( Current.indexOf(".") == -1)
            &&( Current.indexOf("e") == -1)
          )
         { Current = Current + ".";
    };   };
  document.Calculator.Display.value = Current;
 }

function DoExponent()
 {
  if ( Current.indexOf("e") == -1 )
       { Current = Current + "e0";
         document.Calculator.Display.value = Current;
       };
 }

function PlusMinus()
 {
  if  (Current.indexOf("e") != -1)
    { var epos = Current.indexOf("e-");
      if (epos != -1)
         { Current = Current.substring(0,1+epos) + Current.substring(2+epos); //clip out -ve exponent
         } else
         { epos = Current.indexOf("e");
           Current = Current.substring(0,1+epos) + "-" + Current.substring(1+epos); //insert -ve exponent
         };
    } else
    {  if ( Current.indexOf("-") == 0 )
         { Current = Current.substring(1);
         } else
         { Current = "-" + Current;
         };
       if (    (eval(Current) == 0)
            && (Current.indexOf(".") == -1 )
          ) { Current = "0"; };
    };
  document.Calculator.Display.value = Current;
 }

function Clear()                //CLEAR ENTRY
 { Current = "0";
   document.Calculator.Display.value = Current;
 }

function AllClear()             //Clear ALL entries!
 { Current = "0";
   Operation = 0;                //clear operation
   Memory = "0";                  //clear memory
   document.Calculator.Display.value = Current;
 }

function Operate(op)            //STORE OPERATION e.g. + * / etc.
 {
 if (Operation != 0) { Calculate(); }; //'Press "=" if pending operation!
 // note that design is not good for showing *intermediate* results.

  if (op.indexOf("*") > -1) { Operation = 1; };       //codes for *
  if (op.indexOf("/") > -1) { Operation = 2; };       // slash (divide)
  if (op.indexOf("+") > -1) { Operation = 3; };       // sum
  if (op.indexOf("-") > -1) { Operation = 4; };       // difference

  Memory = Current;                 //store value
  // note how e.g. Current.value gives neither error nor value! ***
  Current = "";
  document.Calculator.Display.value = Current;
 }

function Calculate()            //PERFORM CALCULATION (= button)
 {
  if (Operation == 1) { Current = eval(Memory) * eval(Current); };
  if (Operation == 2)
    { if (eval(Current) != 0)
      { Current = eval(Memory) / eval(Current)
      } else
      { Current = "Aargh! Divide by zero"; //don't allow over MAXLENGTH digits before "." ???
      }
    };
  if (Operation == 3) { Current = eval(Memory) + eval(Current); };
  if (Operation == 4) { Current = eval(Memory) - eval(Current); };
  Operation = 0;                //clear operation
  Memory = "0";                  //clear memory
  Current = Current + "";       //FORCE A STRING!
  if (Current.indexOf("Infinity") != -1)        //eg "1e320" * 1
    { Current = "Aargh! Value too big";
    };
  if (Current.indexOf("NaN") != -1)        //eg "1e320" / "1e320"
    { Current = "Aargh! I don't understand";
    };
  document.Calculator.Display.value = Current;
  // NOTE: if no operation, nothing changes, Current is left the same!
 }

function FixCurrent()
 {
  Current = document.Calculator.Display.value;
  Current = "" + parseFloat(Current);
  if (Current.indexOf("NaN") != -1)
    { Current = "Aargh! I don't understand";
    };
  document.Calculator.Display.value = Current;
 }

  //--------------------------------------------------------------->
  </script>

</head>
<body>

<div align="center"><table width="95%"><tr><td> <!-- OUTER MARGIN -->
<font face="Verdana, Arial, Helvetica">

<div align="center"><table border="0"><tr><td width="15%" align="center"><p>&nbsp;</p>
<div align="center">
<FORM name="Calculator">
<table width="30%" border="4" bgcolor="#809FFE"><tr>      <!--OUTER MARGIN OF CALCULATOR-->
<td colspan="2" align="center">

  <p><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3">Calculator</font></b><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3"><br>
    </font>
          <font face="Courier" size="5">
          <input type="text" maxlength="40" size="25" name="Display" onChange="FixCurrent()">
                  </font></b>    </p>
  </td></tr>
<tr><td width="65%" align="center">                   <!--left panel------>

<br><table><tr>
  <td><input type="button" class="btnLogin" name="seven" value="   7    " OnClick="AddDigit('7') "></td>
  <td><input type="button" class="btnLogin" name="eight" value="   8    " OnClick="AddDigit('8')"></td>
  <td><input type="button" name="nine"  class="btnLogin" value="   9    " OnClick="AddDigit('9')"></td>
</tr><tr>
  <td><input type="button" name="four"  class="btnLogin" value="   4    " OnClick="AddDigit('4')"></td>
  <td><input type="button" name="five"  class="btnLogin" value="   5    " OnClick="AddDigit('5')"></td>
  <td><input type="button" name="six"  class="btnLogin"  value="   6    " OnClick="AddDigit('6')"></td>
</tr><tr>
  <td><input type="button" name="one"  class="btnLogin" value="   1    " OnClick="AddDigit('1')"></td>
  <td><input type="button" name="two"  class="btnLogin" value="   2    " OnClick="AddDigit('2')"></td>
  <td><input type="button" name="three"  class="btnLogin"  value="   3    " OnClick="AddDigit('3')"></td>
</tr><tr>
  <td><input type="button" name="plusmin"  class="btnLogin" value="  +/-  " OnClick="PlusMinus()"></td>
  <td><input type="button" name="one"  class="btnLogin" value="   0    " OnClick="AddDigit('0')"></td>
  <td><input type="button" name="two"  class="btnLogin" value="    .    " OnClick="Dot()"></td>
</tr>
</table><br/>


</td>                                   <!--end left panel-->
<td width="35%" align="center">                     <!--right panel----->

<br><table><tr>
  <td><input type="button" name="clear"  class="btnLogin" value="    C     " OnClick="Clear()"></td>
  <td><input type="button" name="AC"  class="btnLogin" value="   AC    " OnClick="AllClear()"></td>
</tr><tr>
  <td><input type="button" name="mul"  class="btnLogin" value="     *     " OnClick="Operate('*')"></td>
  <td><input type="button" name="div"  class="btnLogin" value="     /      " OnClick="Operate('/')"></td>
</tr><tr>
  <td><input type="button" name="add"  class="btnLogin" value="    +     " OnClick="Operate('+')"></td>
  <td><input type="button" name="sub"  class="btnLogin" value="     -      " OnClick="Operate('-')"></td>
</tr><tr>
  <td><input type="button" name="result"  class="btnLogin" value="     =    " OnClick="Calculate()"></td>
  <td align="right"><input type="button" name="exp"  class="btnLogin" value="  E X P  " OnClick="DoExponent()"></td>
</tr></table><br/>


</td>                                   <!--end right panel-->
</tr></table>                          <!--END OUTER MARGIN CALC------->
</FORM></div>






If Any Problem Comes, Ask in Comments

Sunday, December 23, 2012

Add a Expand-Collapse Sidebar Widget


Expand Collapse System is very awesome be'coz it give a very Professional feel to blog and as MBT first launched their expand collapse widget in the comment bar, so many blog owners use that system in their blog but as using the jQuery and other languages so that doesn't work work in many blogs but this widget will work in all kind of blog be'coz this you have to add this widget  in the HTML/JavaScript Widget so you don't need to make changes in your template editor. This Widget is simply a made by the CSS for designing and using the JavaScript and some other elements to perform this particular task in this widget.

This idea came in my mind by watching the comment box of blogger which perform same task. 



Add Expand-Collapse Widget

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.

 <style>
#sidebar ul {margin-top: -5px;}
#sidebar ul.children {margin: 6px 0 -6px 0;}
#sidebar ul li {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjdeiU6SWJosG7QzVtCbyoRr3zLbzkv7DHstsc4RJsu-QTZGEfvxVRgz-ZrV2Bv38av0E8xJIOhBbeUwFkKfOLJvaMgtV_iJNB5NmhLk8JJmdI24F-H-ZFWS6Hd2Qlp0T6NWtWpgmq60/s1600/ORANGE.GIF") no-repeat scroll 0 5px #FFFFFF;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;}
#sidebar a, #sidebar a:visited {color: #575251;}
#sidebar a:hover {color: #cf4125;text-decoration:bold;}
h2.post-title {margin-bottom: 15px;line-height: 32px;font-size: 28px;font-weight: bold;color: #000000; font-family: Arial; padding-left: 5px;
}
}
</style>

<style>
.post {
    clear: none;
    display: inline;
    float: left;
    height: 550px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    padding: 8px;
    width: 338px;
 border: 1px solid #DCE5EE;
  }
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b-bloggerpagenavi.js' type='text/javascript'></script>

<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'>
<div class='widget-content'>
<div class="msg_list">
<p class="msg_head">Widget 1</p>
<div class="msg_body">
<ul>


<li>
<a href="#">Widget 1.1</a>
</li>


<li>
<a href="#">Widget 1.2</a>
</li>

  </ul>

 
  </div>

<p class="msg_head">Widget 2</p>
<div class="msg_body">
 <ul>

 <li>
<a href="#">Widget 2.1</a>
   </li>


 <li>
<a href="#">Widget 2.2</a>
   </li>




</ul>
</div>


 
<p class="msg_head">Widget 3</p>
<div class="msg_body">
 <ul> <li>
<a href="#">Widget 3.1</a>
   </li>
  
   <li>
<a href="#">Widget 3.2</a>
   </li>
   
  
  
   </ul>
 
</div>
  
<p class="msg_head">Widget 4</p>
<div class="msg_body">
 
  <ul>

 
   
  

   <li>
<a href="#">Widget 4.1</a>
    </li>
 
 

 
   <li>
<a href="#">Widget 4.2</a>
    </li>

 
   </ul>
</div>

<p class="msg_head">Widget 5</p>
<div class="msg_body">

<ul>


<li>
<a href="#">Widget 5.1

</a></li>


</ul></div>

<p class="msg_head">Widget 6</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 6.1</a>
</li>




<li>
<a href="#">Widget 6.2</a>
</li>

</ul>

</div>


<p class="msg_head">Widget 7</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 7.1 </a>
</li>
<ul>

</ul></ul></div>


<p class="msg_head">Widget 8</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 8.1</a>
</li>


<ul>

</ul></ul></div>
<style>
p{
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 320px;
display: block;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#C3A17E;
margin:1px;
color:#FFFFFF;
font-family: Sans-serif,Arial,Helvetica;
font-size: 12px;
font-weight: bold;
}
.msg_body {
padding: 15px 10px 15px;
background-color:#F4F4F8;
}
</style>


<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script></div>
</div></div></div>

  • Save Your Widget.

Note:Don't Try to Change any Other Code. All Codes are highly Sensitive


Make Changes....!

  • Replace Red colored area with widget heading (as you can see in gif image)
  • Replace Orange colored area and made their links
  • Replace Blue colored area with links



If Any Problem Comes, Ask in Comments

Saturday, December 22, 2012

Automatic Read More Hack in Blogger With Thumbnail


When we start our blog and post 2-3 posts and when we see our blog in home page then by default blogger shows the full posts in the home page by we all want to know show that blogger should show half content in the home page and rest is show in the whole post. So, it’s better to give a summary of your posts on your blog’s homepage and then add a ‘read more’ link below that post summary. In this Blogger Tutorial i have a script that automatically converts your posts into read more summary in your blog homepage.


Demo of Read More hack




Installation of Read More Hack

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML > Proceed > Expand Widget Templates
  • Press Ctrl + F and search the code shown below.

</head>

  • Paste below code before </head>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;

</script>

  • Now find below code

<data:post.body/>

  • Replace it with  below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

  • Now Save your template.

 Make Changes....! (Optional)



summary_ noimg= 550; >> Length of the summary if the post does not have a thumbnail.
summary_img = 450; >> Length of the summery if the post have a thumbnail
null_thumb_height = 150; >> Height in pixels of the thumbnail.
null_thumb_width = 200; >> Width in pixels of the thumbnail.



If Any Problem Comes, Ask in Comments

Add a Simple 3D Button in Blogger



3D basic button for Blogger you can easily use it for any kind of purpose like for some special notification in your post OR for live demo OR for new kind of special text OR also can use it for intention. It's simply made by using the HTML codes. 




Importance....!

  • This is specially made by the HTML codes.
  • It can give a very good effect on the appearance of your blog.
  • It seems like a 3D Button.
  • Very Important for the look wise.


    Add 3D Button

    • Login to Blogger > Dashboard
    • Go to Posting > Edit HTML
    • Paste below codes in Edit HTML area where you write your post.

    <center>
    <br/>
    <span style="border-color: rgb(11, 83, 148) rgb(72, 161, 250); border-style: solid; border-width: 10px; padding: 6px;"><b><span style="color: #289728; font-family: Verdana,sans-serif;"><span style="font-size: large;"><span style="color: blue;"><span style="font-size: small;">Write Your Text Here</b></div>
    </center>



    Make Changes....!


    • Replace Write Your Text Here it with your own text.




      This is Live Demo 










      If Any Problem Comes, Ask in Comments

      Friday, December 21, 2012

      Download New Version of Mashable Blogger Template


      Mashable Template is very popular in blogger world be'coz it's a very unique, seo friendly and most important this template has very unique sharing widget related with Mashable Sharing Widget and bookmarking widget beside of post on home page like you can see in demo.



      Live Demo        Download


      Features of New Mashable Template

      • Fast Loading
      • Full Width Template
      • Easy to Serve
      • Adsense Optimized
      • Mega Dropdown Menu
      • Small Navigation Menu
      • Auto read more widget
      • Simple White Background
      • Social Sharing Buttons beside post
      • Colourful menus
      • Two Navigation Menus
      • SEO Optimized
      • Simple Comment Box
      • Showing Comments on Home Page

        Layout of Template




      Credits

      • This template is desined by Nitin Mehta of Making Different 
      • We respect his work that's why we give credit to him and to his work.


      If Any Problem Comes, Ask in Comments

      Thursday, December 20, 2012

      Magical Bulb with Shadow with ON / OFF Switch



      Wednesday, December 19, 2012

      Get Google Santa Tracker | Christmas Gift


      As Google always comes with their doodles according to the festival, similarly Google introduced their another amazing and fabulous page named as Santa Tracker in which you can see a Christmas Countdown Clock with their amazing another animations.



      Animations in Santa Tracker

      • Countdown Clock 
      • Flying Airplane 
      • Running Train 
      • Without Click Horizontal Scrolling
      • Village Scene
      • Horsing Rise in front of Air Fan.
      • and much more....!



      How to Make it for you...?


      <body>

      • Paste below code after <body>

      <iframe src="https://dl.dropbox.com/u/63968842/Google%20Santa%20Tracker%20by%20%28www.widgetgenerators.blogspot.com%29.html" style="border:0px #FFFFFF none;" name="Google Santa Tracker" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="637px" width="100%"></iframe>

      • Save Your Template.
      • Enjoy the Christmas with Google, Widget Generators and with your family.


      How to Play with Santa Tracker...? 

           1)  Make Day in Night after click on SUN (Like in below Image)



          2) Enjoy See Saw with 2 Kids after click in shown image (Like in below Image)



         3) Now Play Santa Collecting Gift Game (Like in Image Below)



      Enjoy this Christmas

      Add 4 in 1 Roseic Wooden Pro Subscription Widget


      Today we want to introduce one of the best and good looking Subscription Widget for blogger in which you can see more interesting features of hover with shadow and very shining effect on the button and social icons and most important this is purely made by the CSS and only four images, so there will not be any kind of error comes in it. I think this widget will give a better interface to your blog and also increase the visitors.





      Add 4 in 1 Roseic Wooden Widget

      • Login to Blogger > Dashboard
      • Click on Drop Down Menu and select Layout
      • Add a HTML/JavaScript Gadget
      • Paste below code in it.

      <style>
      /*---Widget by www.widgetgenerators.blogspot.com---*/
      img.beintouch:hover {
          background: none repeat scroll 0 0 #ffbc99;
          border-radius: 16px 16px 16px 16px;
          box-shadow: 0 0 10px #ffbc12;
      }
      .emailtext {
          background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2XcrzNHdkcbu4NreXxX_YqRC4Mg2vGsXh6i8JOpT-IM6iHDCEcw403C06okWULIL8BvtdeuqdVnUXYOgBclkZC1HzEJuDQ7bXY5ybJFvL_aKzPVSdNrRjEsvTCfJw7Are8nmf_CrfW5I/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: 150px;
      }
      .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;
      }
      /*---Widget by www.widgetgenerators.blogspot.com---*/
      </style>
      <table align="" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/WidgetGenerators"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmJnNJ8vYJzzsn808S90Ymm2hWzxluNqW1X_8QvzXbf3tbaqc_r0H7uEH9j8MW0Mvt01rIouLmxolCS5rN_zlRG0i5zrxx4GEj0C0LtgvS5R4wx6zktde2bN-EEyJ7ycJKFdRYM56jlI/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/WidgetGenerator" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7T6hdIWT2ymETV-82rvvbaXG3DDz2espId6IW-o6a9ZFAOpAZvafgpFXunERFKrcUwnvw894WvSUcO7AM44L1P4zGnesSCplI5JZg7bXyeM1Coq2uKtfR6FRx26l3fEPEbrCYx49SFgQ/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/WidgetGenerators" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2FvNL2cWK-3pXZXToTRusCxMdxSdDo6CPQ9mPj_g14p3Ll04EMaQtgSHFFB2ejGor75MgfjQPSzRPqCEE_tiyuvZDPJQvwcAipKxdMn02e4qq_QPrVRi2FPMQZtJn_BKtfBOP-1O9Ia8/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
      <div><b>Get Daily Fresh Update in Inbox via EMAIL</b></div>
      <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WidgetGenerators', '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="WidgetGenerators" 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>

      • Save your Widget and you are done.


      Make Changes....!

      • Replace WidgetGenerators with your feed burner username. (2 times)


      If any Problem Comes, Ask in Comments

      Monday, December 17, 2012

      Yellow Roseic Pro Twitter Widget with Down Sliding


      Twitter badge is also available for blogs and widget and it also helpful to increase the twitter followers and this badge widget is highly customize with JavaScript for scroll the daily tweets in the down direction and next will automatic comes as you seen in the image of this widget. This widget is create by the Javascript and some CSS and the javascript of very simple and easy so, there will not be any error comes in the smoothness of widget.





      Add Yellow Roseic Twitter Widget

      • Login to Blogger > Dashboard
      • Click on Drop Down Menu and select Layout
      • Add a HTML/JavaScript Gadget
      • Paste below code in it.

      <div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-gLrWJuLPEr4TjDXB1MXINE3oRTRaeYvCcATzn24cvudFlWmiKN-Ui_h6iyGnnSsb-FPN8AfMvHGYHWSBOCp3QqtsGcQk-7El9jnYKMS9RQFbbmaZfzkA7MtR6BxN1shJEF9B4WgYmiA/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">
      <script src="https://dl.dropbox.com/u/63968842/yellow%20roseic%20twitter%20widget%28www.widgetgenerators.blogspot.com%29.js"></script>
      <script>
      new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 10,
      interval: 3000,
      width: 285,
      height: 118,
      theme: {
      shell: {
      background: 'transparent',
      color: '#000000'
      },
      tweets: {
      background: 'transparent',
      color: '#000000',
      links: '#B45F04'
      }
      },
      features: {
      scrollbar: true,
      loop: true,
      live: true,
      hashtags: true,
      timestamp: true,
      avatars: false,
      behavior: 'default'
      }
      }).render().setUser('WidgetGenerator').start();
      </script>
      </div>

      • Save your Widget and you are done.

      Make Changes....!

      • Replace WidgetGenerator with your twitter username.


      If Any Problem Comes, Ask in Comments

      Add Yahoo Music Player in Blog



      Music is very basic thing in today's time because everyone can easily embed the music player in their websites but now you can easily embed a music player and movie player in your blog.



      Yahoo! Music Player Pic Demo





      Yahoo! Movie Player Pic Demo












      Yahoo! Music Player

      • Add trailers, clips and videos related to movies mentioned on your pages and play them directly on your blog/site.
      • Plays mp3, YouTube, and a variety of other video and audio formats like .wap .amv .mp3 etc
      • Turns any page into a playlist which is created by you.
      • Easy to add to your site or blog with one line of code.
      • Give the Live Demo on you own page of real HQ Music.
      • Too easy to embed and easy to use.
      • Totally FREE! FREE! FREE! FREE! FREE! FREE! FREE! FREE! 



      Monday, December 10, 2012

      Social Bookmarking Buttons below on Adsense


      Combination of Adsense and Social Bookmarking Buttons is awesome in blogger OR in any website, this creative trick is based on simple CSS codes and HTML codes. It also looks very creative and gives a proof that admin is very professional and creative person. This widget is also very important in the of earning from adsense be'coz it can increase the CTR of adsense higher and you can earn very good money from this affiliating program be'coz if any one click on the sharing button then accidentally he/she can click on your ads.





      Add Social Buttons below Adsense Unit

      • Login to Blogger > Dashborad
      • Click on Drop Down Menu and select Template
      • Backup your Template before making any changes to your blog
      • Now Click on Edit HTML > Proceed > Expand Widget Templates
      • Press Ctrl + F and search the code shown below.

      ]]></b:skin>

      • Now paste below code before ]]></b:skin>

      .ads{
      margin-bottom:10px;
      border-top:solid 1px #DEDEDE;
      border-bottom:solid 1px #DEDEDE;
      padding-top:10px; font-size:13px;
      }

      • Now find below code by press  Ctrl + F

      <data:post.body/>

      • Paste below code before <data:post.body/>

      &lt;div class=&#039;ads&#039;&gt;
      Paste Your Adsense Codes Here
      &lt;/div&gt;


      &lt;div class=&#039;addthis_toolbox addthis_default_style &#039;&gt;
      &lt;a class=&#039;addthis_button_facebook_like&#039; fb:like:layout=&#039;button_count&#039;&gt;&lt;/a&gt;
      &lt;a class=&#039;addthis_button_tweet&#039;&gt;&lt;/a&gt;
      &lt;a class=&#039;addthis_button_google_plusone&#039; g:plusone:size=&#039;medium&#039;&gt;&lt;/a&gt;
      &lt;a class=&#039;addthis_counter addthis_pill_style&#039;&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;script src=&#039;http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f086bca05bf6861&#039; type=&#039;text/javascript&#039;&gt;&lt;/script&gt;

      • Replace Paste Your Adsense Codes Here from your own adsense code and remember you have to convert adsense codes first in the compatible form.



        • Now finally Save Your Template. and Enjoy your Social Adsense Bookmarking Units :)



        If Any Problem Comes, Ask in Comments