Multi- Colored Social Sharing Widget (With Mouse Hover Effect) For Blogger,wordpress

   Hi, Today i writing about  a useful and beautiful social sharing widget. This widget is fully worked with CSS code. Also attractive because of highlighted color combination, You can easily add this widget on your blogger. It make a good impression in visitors. Follow steps and install it.




















Log in to your Blogger account.

• Select Layout.

• Click on “Add a Gadget” option.

• Choose “Html/Javascript” option from given list.

• Copy below code and paste it into “Html/Javascript” box.

<style type="text/css">
.btnt-chronicl-social {  width: 320px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social 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; }
.btnt-chronicl-social 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;}
.btnt-chronicl-social 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; }
.btnt-chronicl-social 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; }
.btnt-chronicl-social 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; }
</style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="YOUR-FEED-BURNER-LINK">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="YOUR-TWITTER-LINK">Follow me on Twitter</a></li>
<li><a class="facebook" href="YOUR-FACEBOOK-PAGE-LINK">Find me on Facebook</a></li>
<li><a class="google" href="YOUR-GOOGLE-PLUS-LINK">Join me on Google+</a></li>
<li><a class="linkedin" href="YOUR-LINKEDIN-LINK">Connect with me on LinkedIn</a></li>
</ul>
</div>

Replace highlighted RED color with your social media links.

• Save your layout and go to preview

Leave a comment …………………if you like this widget……………..

Read More

Related Post Widget For Blogger With Mouse Hover Effect

    Today  i share a  valuable and very useful information for bloggers about  related post widget. It made with blue color theme with mouse hover effect. Related posts help to attract peoples and it increase peoples visiting time. So it is very useful to all bloggers. You can simply add this widget on your blog. If you want to add this widget to your blog, follow instructions..

please comment..............below




Log in your Blogger account.

• Select Layout option

• Click on Edit HTML button

• Select “Expand Widget Templates”.

• Find (CTRL+F) </head> tag.

• Copy and paste below code before </head> tag.

<!--MHRelated Posts Scripts and Styles Start—>
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:8px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 18px;
font-weight: normal;
color: black;
font-family: Arial;
margin-bottom: 0.50em;
padding-top: 0.25em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:3px;
}
#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--MHRelated Posts Scripts and Styles End-->

• Again Find (CTRL+F)  <div class='post-footer'> tag.

• Copy and paste below code after  <div class='post-footer'> tag.

<!-- Related Posts Code Start-->
<!--Remove-->
<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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

• Save your Templates.

Leave a comment…….. If this widget is not working……………………..

Read More

Stylish 3d Blue Color Email Subscription Widget For Blogger

Friends, This is stylish Email subscription widget . It  make a 3D feel because of its color theme.Blue is highlighted color and it make with web gradient color code. It is very simple to use,You can add this widget to your blogger easily.  Just follow steps and add it.


Log in to your Blogger account.

• Go to Layout.

• Click on “Add A Gadget”.

• Select “HTML/JavaScript” from given list.

• Copy and paste below code in “HTML/JavaScript” box.

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEED-ID ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login">
<h1>Subscribe To Us</h1>
<input type="hidden" value="YOUR-FEED-ID" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit">
<p class="login-help"><a href="http://masterhacksindia.blogspot.com?src=fbform" rel="nofollow">MH</a></p>
</form>
<style>
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:-moz-placeholder {
  color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
  color: #bcc0c8;
}
:-ms-input-placeholder {
  color: #bcc0c8 !important;
}
.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}
.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login {
  padding: 18px 20px;
  width: 200px;  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}
.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}
</style>

Change highlighted RED color with Your Feed ID and change 200px to adjust width.

• Save it

Leave a comment…. if this stylish widget is not working…………………….

Read More

HTML to CB Code Generator - Online Tool

---

 »Please Follow Steps:

1. Insert Your HTML Codes in Below Text Area
2. Click on Conert Button.
3. Copy that Converted Code and Paste in the Comment Box

---

Copyright© 2013 Customized HTML to CB Code Generator By techtoones

Read More

Round Text Generator - Online Tool

  Hi friends,This is a very useful tool to create  letter's and number's in circle like copyright ⓒ. Try it and send your feedback via comment.

Type Here



Copy  And Use



Design By Techtoones

Leave your comments below................ 

Read More

Top 15 Free Online File Storage Sites

Following our coverage of online file storage Box.net which just became a little more social, here are 15 more free online storage sites which you can use for storing, sharing and backing up your important files.
 

• 4shared - Offers 5GB of free storage for document files (doc, txt, pdf, rtf, xls), music file (mp3, ogg, wav, mid), video file (avi, mpg, mpeg), image file (jpg, gif, bmp, png)

 

• Snapdrive - Offiers up to 5GB of file storage

 

• Dropboks - Allows you to store files online securely and offers 1GB of storage space. Uploading/Downloading of files is limited to 50MB.

 

• Humyo - It’s a file management in the cloud as you can access your file anywhere, using any PC or even your mobile phone. It also allows you to share files with your friends and family.

 

• ADrive - ADrive is a feature-rich online storage solution offering up to 50GB free storage for a 14-day trial.

• Freedrive - Offers 1GB of free online storage.

• FileQube - Allows you to upload up to 150MB of file per upload. Upgrade features lets you upload 500MB.

• Flipdrive - Offers a free 30-day trial for up to 30GB storage.

 

• Fileden - Offers both free and paid account for storing your files. The free Fileden account gives you 1GB of storage space, 50MB maximum file size limit, 50GB of monthly bandwith, and hotlinking of files.

 

• Skydrive - Offers 25GB of free storage, access anywhere and secure password protection features. It ties up with other Windows Live services as well.

 

• LiveDrive - It offers unlimited storage for free, works like a normal PC hard drive minus the hardware, synchronizes files on your PC, access your files on your mobile phone, PDA and other devices, and share your files.

 

• FileGenie - A web-based file storage system that offers 20MB free account. If you need more storage, you have to upgrade to a paid account.

 

• Orbitfiles - Offers 6GB of free online storage.

 

• MyOtherDrive - Offers tools for managing and sharing your data online. Allows private sharing of files to select group of people. Its privacy security prevents sharing your files to other people that you don’t share the files with. The site also lets you create photo albums as well as hotlinking to your social networking profiles.

 

• Box.net - The last online storage site on our list is of course, Box.net which we just covered recently.

 
 
 
 
Leave a comment……………………..

Read More

Stylish JQuery Text Resize Buttons For Your Blogger

   This is a special effect for your blogger. It can increase your blog text size when we are clicking on increase button.  After add this widget your blog shows three button plus, minus and resize. Green plus button to increase your text size and Red minus button to decrease your text size. You can resize your text with 3rd option.This is  useful program. If you want to add in your blogger. Follow this post..


Log In to your Blogger dashboard.

• Go to Template Option.

• Click on Edit HTML .

• Tick Expand Widget Template option above

• Find (CTRL+F)  </head> tag.

• Copy and paste below code above </head> tag.

<!-- Start Text re size gadget by www.techtoones.blogspot.com -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){
//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(&#39;span&#39;,&#39;.section2&#39;);
section = section.join(&#39;,&#39;);
// Reset Font Size
var originalFontSize = $(section).css(&#39;font-size&#39;); 
$(&quot;.resetFont&quot;).click(function(){
$(section).css(&#39;font-size&#39;, originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
});
</script>
<!-- End Text re size gadget by www.techtoones.blogspot.com –>

• Then Find(CTRL+F)  <div class='post-header-line-1'/> tag.

• Copy below code and paste it directly below  <div class='post-header-line-1'/> tag.

<!-- Start Text re size gadget by www.techtoones.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt61aahXXzoRq35FzM8YrVBroZHdpHWrHnEmyRBloXgL6nB-zfIebLCt0o3oQZr8TuGNdiDS1VsUyw5-yRLAVmEOAf7yLNCMuIqCy5YK3uoADYZiKiwi5LpUUP_zfurH_CXwSHJvSMfYg/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6g-lnR6rK2OAku2A3PEdLnwDASMu2M3GCcnF2g52516_M-nD_-qOtWOgkDm4XVtoAsN17Nn8Z1ZBWAQF9hF464c-Uf5DNQv-lLgbEjR7W37djD7ErxE-tb8wsjfInVEy1YUK3AJdGM8/s1600/bigger-font+-+Copy.png'/></a> 
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMtS3uoPJL1TR4FZY-9qqkZ7KCRFymOtPIg2yMf6cYfS3b-1KP0MR_mUWEb76wNhDml4fgCoesGa8BzVggPwPQV17bM3Z2qDGNX_fahyphenhyphenLFvU6lLa5P7R3YluQPvr1DdNSeGuOtejpce9I/s1600/smaller-font.png' style='cursor: hand;'/></a> 
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLJyH-P34BrovJcNYg4BLghebn5Dsb4B1NMOTGd6WxljHnGsZh7jOXR1ZoZECk3T_1-UO-bab6Ca8lBk7UwfK0GV0ta6lYvjVV6GPLDcGnd1kG5FYBRQOVK1qzvVyAXCW36DaNq5f7G0/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- End Text re size gadget by www.techtoones.blogspot.com –>

• Again Find(CTRL+F) <data:post.body/> and it replace with below code.

<span><data:post.body/></span>

• Save your template.

Leave a comment …….. If links are not working………………….

Read More

Simple Related Post Widget (With Mouse Hover Effect) For Your Blogger

Friends, Now i share a simple Related post widget for your blogger. It has a simple mouse hover effect. When mouse move over  to link , blue color changes into red color. You can also customize heading size and mouse hover effect. This is a simple vertical aligned Widget. After install it,You can see this below all posts. If you want to add it on your blog. Please read instruction carefully.


Log In to your Blogger dashboard.

• Go to Template Option.

• Click on Edit HTML .

• Tick Expand Widget Template option above

• Find (CTRL+F)  </head> tag.

• Copy and paste below code above </head> tag.

<!--Related Posts Scripts and Styles Start (techtoones)-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:30px; padding:0;}
#related-posts .widget{padding-left:6px;margin:10px 0 0 0;}
#related-posts .widget h2 {font-size: 17px;font-weight: normal;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts h2{font-size: 17px;font-weight: normal; color:#580000; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding: 2px 0 2px 0;border-top:1px #ddd dashed;border-bottom:1px #ddd dashed;}
#related-posts a{color:#0C9FE7;text-decoration: none;}
#related-posts a:hover{color:#ff0000;text-decoration: none;}
#related-posts ul{list-style:none; padding:0px !important;}
#related-posts ul li{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZ0Tzzc-sSjOWSVWptn5lzCiK3dEvOCa1I5_J5Ib0vgBYRGbslmd5hKcSFseVuakDg13JsN-oI0WJ03rp3W0KvDYJGt9GhPeIfXg4fDT9vfr7iGPJhDsaJqEBBB-GF3OnLNz3AKgVQfo/s1600/a.png) no-repeat 6px 4px;display:block;list-style-type:none;margin: 0.3em 0 !important; padding: 0 0 0.8em 20px;line-height : 1.3em;text-decoration: none;}
#related-posts ul  li:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzp4GpVcIeoDxfH7kKkwVyNP_8uoc5XM9qjYssbtHoUw0V3ZIPKGDg9Tkb47AYAFdfxcTgqHY7411rM7x3dnamt4tjLzbRWE73RCYis_CF1yyMmzJ-dSrMVrux1EePW5Q6oyhuDznTTw/s1600/b.png) no-repeat 6px 4px !important;display:block;list-style-type: none;margin: 0.3em 0 !important; padding: 0 0 0.8em 20px;line-height: 1.3em;text-decoration:none;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts:&quot;;
</script>
<script src='http://yourjavascript.com/25243611113/relatedpost.js' type='text/javascript'/>
  </b:if>
<!--Related Posts Scripts and Styles End (Techtoones)—>

• Then Find (CTRL+F)  post-footer-line post-footer-line-1 OR post-footer-line post-footer-line-2 OR post-footer-line post-footer-line-3 OR <data:post.body/>  and copy given below code and paste after one of above code.

<!-- Related Posts Code Start (Master Hacks)—>

<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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> </b:if>

<!-- Related Posts Code End (Master Hacks)—>

• Save your Template.

Leave a comment….. if this related post widget is not working………………….

Read More

Stylish Popular Post Widget With Round Thumbnail For Your Blogger

 This post about how to customize your popular post widget more attractive with round thumbnail. This widget is more beautiful than other. when mouse hover, it shows a thin solid blue border. It fully customized with CSS code. If you like this widget,and  you can add it in your blogger. Just follow below instruction, and add it . 


Now Go to Blogger Dashboard

• Go to Layout option

• Click on Add a Gadget

• Add Popular Posts Widget from given list.

• Select "display up to 5 posts" and check image thumbnail and snippet.
  
  

• Now Save the widget

• Then Go to Template Option.

• Click on Edit HTML .

• Find (CTRL+F)  ]]></b:skin> tag.

• Copy and paste below CSS code above ]]></b:skin> tag.

/*--- Customize Popular Posts Widget Design By www.techtoones.blogspot.com --- */


.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-8V9smqs4PQsVKC54nwUmYIX-eMhUKbPbQqHefstQ7ORF_8oM5n6WUygmEhkzxYtFJ7J4tG-TZ2DVjcxFKVUH2N0LnmuAD3n_SPZx5PXuIIxkfHJlt6ktsMRy49eyjqec0qaEYvyguM/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

• Save your Template. Click on Preview.

Are you happy?………………Leave a comment ….below..

Read More

Facebook Status Generator - Online Tool

---

© 2012 Facebook Status Generator Customized By techtoones

Read More

Difference Between Bitmap Images And Vector Graphics

 It’s almost impossible to discuss graphics software without first establishing an understanding of the difference between the two major 2D graphics types. Computer graphics fall into two main categories Bitmap and Vector. You can  work with both type of graphics in Photoshop;moreover, a Photoshop file can contain both Bitmap and Vector data. Understanding the difference between the two categories helps you create, edit and import artwork.

About Bitmap Images

Bitmap images technically called Raster Images are made up of a grid of dot known as pixels. Pixels are picture element; tiny dots of individual color that make up what you see on your screen. All there tiny dots of color come together to form the image you see. the typical computer monitor has 72 or96 pixel per inch,depending on your monitor and screen setting. When working with Bitmap images, you edit pixels rather than object or shapes. Bitmap images are the  most common electronic medium for continuous-tone image such as Photographs or Digital painting,because the can represent subtle gradations of shades and color.
Bitmap images can lose detail when scaled on screen because they are resolution dependent,they contain a fixed number of pixels,and each pixel is assigned a specific location and color value.Bitmap images can look jagged if they’re printed at too low a resolution because the size of each pixel is increased.
Example: Adobe Photoshop, MS Paint

About Vector Graphics

Vector graphics are made up of mathematically defined lines and curves called vector.This means that you can move, resize, or change the color of a line without losing the quality of graphics. Vector graphics are resolution independent that is, they can be scaled to any size and printed at any resolution without losing detail or clarity . As a result, vector graphics are the best choice representing bold graphics that must retain crisp lines when scaled to various size (logos,for example).
Vector graphics have many advantages, but the primary disadvantage is that they’re unsuitable for producing photo-realistic imaginary.Vector graphics are usually made up of solid areas of color or gradients,but they cannot depict the continuous subtle tone of a photograph. That’s why most of the vector graphics you see tend to have a cartoon like appearance.
Example:Adobe Illustrator,



Leave your comments below………………………

Read More

Beautiful Big and Small CSS Buttons With Hover Effect

 Friends now i share some beautiful buttons with mouse hover effect. This is customized with  CSS and HTML  parts . Both part are important. CSS contain their properties like color mouse hover effect etc, Also HTML part is only for apply CSS effect in blogger. you can add this beautiful buttons in your blogger keep read this post.

Log in to your Blogger account

• Select on Template Option.

• Click on Edit HTML .

• Find (CTRL+F)  ]]></b:skin> tag.

• Copy and paste CSS code above ]]></b:skin> tag.

• Copy and paste HTML code, where you want to see your image. ( Replace highlighted RED color with your Link and Text )

CSS Code

.awesome, .awesome:visited {
background: #222 url(http://2.bp.blogspot.com/-Rugz3Sx02dI/UAr7ubzYL2I/AAAAAAAACT0/4g24oIDf0r8/s1600/overlayy.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}
.awesome:hover                            { background-color: #111; color: #fff; }
.awesome:active                            { top: 1px; }
.small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }

.green.awesome, .green.awesome:visited        { background-color: #91bd09; }
.green.awesome:hover                        { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
.blue.awesome:hover                            { background-color: #007d9a; }
.red.awesome, .red.awesome:visited            { background-color: #e33100; }
.red.awesome:hover                            { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
.magenta.awesome:hover                            { background-color: #630030; }
.orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
.orange.awesome:hover                            { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
.yellow.awesome:hover                            { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
.pink.awesome:hover                            { background-color: #c81e82; }

HTML Codes

Big Buttons

Black

Live Demo

<a href="YOUR-LINK-HERE" class="large awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Blue

Live Demo

<a href="YOUR-LINK-HERE" class="large blue awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Magenta

Live Demo

<a href="YOUR-LINK-HERE" class="large magenta awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Green

Live Demo

<a href="YOUR-LINK-HERE" class="large green awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Red

Live Demo

<a href="YOUR-LINK-HERE" class="large red awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Orange

Live Demo

<a href="YOUR-LINK-HERE" class="large orange awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Yellow

Live Demo

<a href="YOUR-LINK-HERE" class="large yellow awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Pink

Live Demo

<a href="YOUR-LINK-HERE" class="large pink awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text

Small Buttons

Black

Live Demo

<a href="YOUR-LINK-HERE" class="small awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Blue

Live Demo

<a href="YOUR-LINK-HERE" class="small blue awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Magenta

Live Demo

<a href="YOUR-LINK-HERE" class="small magenta awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Green

Live Demo

<a href="YOUR-LINK-HERE" class="small green awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Red

Live Demo

<a href="YOUR-LINK-HERE" class="large red awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Orange

Live Demo

<a href="YOUR-LINK-HERE" class="small orange awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Yellow

Live Demo

<a href="YOUR-LINK-HERE" class="small yellow awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Pink

Live Demo

<a href="YOUR-LINK-HERE" class="small pink awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text

• Save it…

Are you happy with this post… leave a comment below………..

Read More

ADD Awesome Multi-Tab Widget For Your Blogger

   Now i share a awesome multi-tab widget. Its very easy to customize with  your blogger layout. It look like a  and professional. You can add three different contents in one widget .When ever you click on any tab on right side then it will open like this way that a curtain comes from bottom and exhibits the content. Double click on a same tab will drop up/down the tab automatically. You can add this stylish widget to your blogger. Just follow this post to add this widget in to your blog.
 

Now Go to Blogger Dashboard

• Go to Layout option

• Click on Add a Gadget

• Select HTML/JavaScript option from given list.

• Copy below code and paste it in HTML/JavaScript box.

<style>
#tabbed_box_1 {
 margin: 0px auto 0px auto;
 width:300px;
}
.tabbed_area {
 border:1px solid #494e52;
 background-color:#636d76;
 padding:8px; 
}

ul.tabs {
 margin:0px; padding:0px;
 margin-top:5px;
 margin-bottom:6px;
}
ul.tabs li {
 list-style:none;
 display:inline;
}
ul.tabs li a {
 background-color:#464c54;
 color:#ffebb5;
 padding:8px 14px 8px 14px;
 text-decoration:none;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-weight:bold;
 text-transform:uppercase;
 border:1px solid #464c54;
 background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UiVQqd2-i8QeR8KfeAogEoNDtN_m-bFkzAP9KByNnYwOybhpxZr72WbQnwDSZ271dMBVlbq3-iev9OMg2VtA5HwR6zTFENl5VAIWFp8A141KUcpq0aCl6AJHEO_nfgmYrj8LtU2Mum8f/s1600/tab_off.jpg);
 background-repeat:repeat-x;  
 background-position:bottom;
}
ul.tabs li a:hover {
 background-color:#2f343a;
 border-color:#2f343a;
cursor:pointer;
}
ul.tabs li a.active {
 background-color:#ffffff;
 color:#282e32;
 border:1px solid #464c54; 
 border-bottom: 1px solid #ffffff;
 background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8V1A-M2dXh1hY0rQ5hBbGmJQ9M0ODpqCrw1IhH7nelGU6jW4UVQl5QRf6lYGN5mg7_893fVRSgx39YPu480j4RcrKEd1ms6gJFqbgpiiQ_dNQ4pNry5nxnG0yLUrwKqueAvKHQ2EKbmE5/s1600/tab_on.jpg);
 background-repeat:repeat-x;
 background-position:top; 
}
.content {
 background-color:#ffffff;
 padding:10px;
 border:1px solid #464c54;  
 font-family:Arial, Helvetica, sans-serif;
 background-image:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPC-3qBIHk9YqOaMgmFcCIvzKZ-vfeq8w5Dy5sXqddkEQzvPj51QateWJ6ItFE-u9_IlgYyD2JpPMuZxV8ZrACagb6GQ9y_KAHt_hvAP3RL42qsuc-oMwtCgUgETrFj34wealRMPd87gjo/s1600/content_bottom.jpg);
 background-repeat:repeat-x;  
 background-position:bottom; 
}
#content_2, #content_3 { display:none; }

.content ul {
 margin:0px;
 padding:0px 20px 0px 20px;
}
.content ul li {
 list-style:none;
 border-bottom:1px solid #d6dde0;
 padding-top:15px;
 padding-bottom:15px;
 font-size:13px;
}
.content ul li:last-child {
 border-bottom:none;
}
.content ul li a {
 text-decoration:none;
 color:#3e4346;
}
.content ul li a small {
 color:#8b959c;
 font-size:9px;
 text-transform:uppercase;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 position:relative;
 left:4px;
 top:0px;
}
.content ul li a:hover {
 color:#a59c83;
}
.content ul li a:hover small {
 color:#baae8e;
}
</style>
    
    <script src="http://nettuts.s3.amazonaws.com/001_Tabbed/site/scripts/jquery-1.2.3.min.js"></script>
    <script>
 
   // When the document loads do everything inside here ...
   $undefineddocument).readyundefinedfunctionundefined){
  
  // When a link is clicked
  $undefined"a.tab").clickundefinedfunction undefined) {
   
   
   // switch all tabs off
   $undefined".active").removeClassundefined"active");
   
   // switch this tab on
   $undefinedthis).addClassundefined"active");
  
   // slide all content up
   $undefined".content").slideUpundefined);
   
   // slide this content up
   var content_show = $undefinedthis).attrundefined"title");
   $undefined"#"+content_show).slideDownundefined);
  });
   });
  </script>

<div id="tabbed_box_1" class="tabbed_box">
    <div class="tabbed_area">
    
        <ul class="tabs">
            <li><a  title="content_1" class="tab active">TAB1-NAME</a></li>
            <li><a  title="content_2" class="tab">TAB2-NAME</a></li>
            <li><a  title="content_3" class="tab">TAB3-NAME</a></li>
        </ul>
        
        <div id="content_1" class="content">
<p>Tab one content goes here</p>
        </div>
        <div id="content_2" class="content">
<p>Tab one content goes here</p>
        </div>
        <div id="content_3" class="content">
<p>Tab one content goes here</p>
        </div>
    </div>
</div>

Change highlighted RED color with Your Tab Name and Contents

• Save it.

Leave a comment …… If you like this widget………………..

Read More

Multi-Colored Stylish Popular Post Widget For Blogger

 Now i share a new beautiful popular post widget for your blogger. Its very special and attractive. Some time people watched a content more than other in our blog ,that’s our popular post. Blogger find that page from count of page preview.  You can also add that widget from Add gadget option in Layout. But it is not a stylish widget, we can modify it now.If you want to add to your blogger.Follow this post….


Now Go to Blogger Dashboard

• Go to Layout option

• Click on Add a Gadget

• Add Popular Posts Widget from given list.

• Select "display up to 9 posts" and uncheck image thumbnail and snippet.

• Now Save the widget

• Then Go to Template Option.

• Click on Edit HTML .

• Find (CTRL+F)  ]]></b:skin> tag.

• Copy and paste below CSS code above ]]></b:skin> tag.

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

• Save your Template. Click on Preview.

Are you happy?………………Leave a comment ….below..

Read More