Unordered List

Thursday, March 7, 2013

Stylish Email Subscription Widget For Your Blogger

Now i share a stylish big email subscription widget for your blogger. This widget attract peoples and increase your subscription rate. You can add this widget simply in to your blogger. Follow this post and instructions and add it in to your blog.
Stylish email subscriptionwidget for your blogger(techtoones.blogspot.com)

Log in to your blogger account.
  • Select Layout option.

  • Click on Add gadgets

  • Select HTML/JavaScript from list.

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


<style>
#feature_box{background:#f0f4f4;
border-bottom: 1px solid #D4D4D4;
padding:10px 15px 0px;}
#sleek-subscribe{display: block;
margin:0 auto; }
.newsheadline {
color:#222;
font-size:16px;
line-height:50px;
float:left;
font-weight:bold;
}
.newsheadline span{font-size:38px;
color:#444;
line-height:14px;
font-family: "Droid Sans",arial,sans-serif;
font-weight:normal;
}
.newsheadline cite{font-style:normal;
color:#f00;
}
.signform{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAuuq8Fujnyur4y56ztIcU3osXaOhyiAkODOLpp54IyW-l9FZd4SZwxmFFs5yDtrRBiRRZn9Xj8a0BpjNazKNv8cOyheoZOJKldQZA4E_-ucZ6QIACpVkidOk6eQrhOsRXnG_fprIcmHE/s1600/arrow.jpg') no-repeat;
padding:0 0 10px 100px;
float:right;
}
.txt2, .txt2:focus{
width:140px;
font-size:15px;
background:#f7f7f7;
color:#004B80;
border:1px solid #E36B0A;
margin:0 5px;
float:left;
padding:10px;
width:160px;
border-radius: 10px;
}
.btn2, .btn2:focus {
background:#E36B0A;
margin:0 5px;
padding:8px 10px 9px;
border:1px solid #AD5513;
color:#fff;
font-size:15px;
border-radius:10px;
}
.btn2:hover{
background:#6689b0;
}
</style>
<div id="feature_box">
<div id="sleek-subscribe">
<div class="newsheadline"><span>Sign up</span> for <cite>FREE</cite> daily Updates.</div>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-USERNAME" class="signform" method="post" target="_new">
<input class="txt2" name="name" onblur="if (this.value == '') {this.value = 'your name...';}" onfocus="if (this.value == 'your name...') {this.value = '';}" value="your name...">
<input class="txt2" name="email" onblur="if (this.value == '') {this.value = 'your email address...';}" onfocus="if (this.value == 'your email address...') {this.value = '';}" value="your email address...">
<input class="btn2" value="subscribe me!" type="submit">
</form>
<div class="clear"></div>
</div>
</div>
</div>

Change highlighted RED color with your Feedburner username/ID


  • Save it.



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

Retro Style Social Sharing Widget With Email Subscription box For Your Blogger

Friends ,Now i share a beautiful widget for your blogger. It is very nice to install in in to your blogger.It make a shining effect. This widget contain not only  social sharing widget also include a email subscription widget. It look like a retro model widget. you can add this on your widget. Keep read this post and install it.

retro model social sharing widget with email subscription box(techtoones.blogspot.com)

Log in to your blogger account.
  • Select Layout option.

  • Click on Add gadgets

  • Select HTML/JavaScript from list.

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


<style>
#socialbox{border:2px solid black;
width:270px;padding: 5px 5px 5px 5px;  }
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/AVvXsEgfnPzcwue5KsNk4OZ0WjHofoB8ontdhCckGUbhvxdUpmmXvhjlSy3rhP35_AF7hmYUmhhdy4crd4X2UzD_nLOwThwNmsDPYji-N2SF04WjPHFiQbCt5XiQRUWUaq4PqY84UjdPRlNwxBY/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: 120px;
}
.ebutton {
    background: #D55959;
    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>
<br />
<div id="socialbox">
<table align="" cellpadding="1px" cellspacing="0px" style="width: 290pxpx;"><tbody>
<tr><td>
<a href="http://facebook.com/YOUR-FACEBOOK-USERNAME" rel="nofollow" target="_blank"> <img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSrIfj2Iv-l5Rbr0CuxHhCzJi8t2HCTclSZkXJxcpMXa7TIykBPH6NvWvyzxPk5fb3mHKH6-M3TqNDYldNhDG0Rf_jXoWtFfPFTig8BhoM-Al9NPpsCG8Wjk66xURQpoSouqziT1vq9Aw/s1600/bloggertrix-facebook-icon.png" /></a></td><td>
<a href="http://twitter.com/YOUR-TWITTER-USERNAME" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK91D5liOJzzZxoYUp5eV-e057HJKZmsp_RuxgUUUquZHBIRdoUjvdPKJUHnudV4dh7fxb9HqCXWODjBji9Rm1hP-wZks7LTIN4BxyrO4zHiKAiqKVtg8GYb9mdiOopk981BB_YZYxSQM/s1600/bloggertrix-twitter-icon.png" /></a></td><td>
<a href="http://pinterest.com/YOUR-PINTEREST-USER-ID" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXyFJq_0Uk_miR3gxjvR8Fams1upA3V7Ag1_BpTf8wV3ExTro29BxtIbBDc1JoD4XEupn1ikUCz7e9WAPsd9-iIsJqJolnsi1ZRK_yClSKrumIKw8Hk11wat3MCn1FFiv1NF64lVlhV_4/s1600/bloggertrix-pinterest-icon.png" /></a></td><td>
<a href="https://plus.google.com/YOUR-GOOGLEPLUS-USER-ID" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgENOHhDPKy8dpKACkjcUZInTt7783FDZ-vJjgE5jClLDxhXzd4LH19Tf7LzURxwZNdcCeB2CjSXwt4qYiNrFkXoapjQA52dJlukByqHn8mBGMoufNvjklRfWHF9jlpl_44P1tjEmc94b8/s1600/bloggertrix-google-icon.png" /></a></td><td>
<a href="http://feeds.feedburner.com/YOUR-FEEDBURNER-USERNAME" rel="nofollow" target="_blank"><img class="beintouch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGVtQJZ79Pk9CoM1hw40Tn_t158ilzVb3HDWBKhuXXNO1Mo266ribg-BYxoek4w7PR8pCSUVj6Kl8GHdMg45FQKOKD2H6WPJXsm007NtHzE0_81vLA-INBlxYAx1q1-ghIzVsJwSlYFDY/s1600/bloggertrix-rss-feed-icon.png" /></a><a href="http://marks-mbs.blogspot.com/"></a></td></tr>
</tbody></table>
<div>
<center>
<b>Get Latest Articles By EMAILS </b></center></div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-USERNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="YOUR-FEEDBURNER-USERNAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="emailtext" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="ebutton" title="" type="submit" value="Subscribe" />
</form>
</div>

 


Change highlighted RED color with your social media username/ID



  • Save it.




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

Attractive CSS Social Media Sharing Widget (With Mouse Hover Effect) For Blogger

Friends, This is a special widget to your blogger, It work with CSS code with mouse hover effect. This is a stylish widget, buttons are arranged vertically. You can add this widget without effort .Keep read this post and add this widget into your blogger.
Attractive CSS cosial sharing widget with mouse hover effect for your blogger(techtoones.blogspot.com)

Log in to your blogger account.
  • Select Layout option.

  • Click on Add gadgets

  • Select HTML/Javascript from list.

  • Copy below code and paste in HTML/Javascript box.


<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxm3JRv46ljuB9Hp6l88kEK-sCOgVulXggDvlRW6refwoy3fArQkCZP7Ks67GQZkxf84cGlhaCRlv4jt7d766NF38ekz-hWn6a1Q-p2Wq4mpjoAZLfCEN3mfeDYfBu_n2Nz4c7JPneHYc/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/YOUR-FACEBOOK-USERNAME">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/YOUR-TWITTER-USERNAME">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/YOUR-GOOGLEPLUS-USER-ID">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon rss" href="http://www.feedburner.com/YOUR-FEEDBURNER-USERNAME">Subscribe via RSS</a>Subscribe via RSS </li>
</ul>

Change highlighted RED color with your social media username/ID

  • Save it.



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

Add Beautiful Square Social Sharing Widget to Your Blogger

  Hi, friends Do you want to see a stylish social sharing widget. Friend, Now i share a simple and beautiful social sharing widget for your blogger. It  make a good feel and it make with simple gradients. If you want to add this on your blogger. Follow this post and  make it..
beautiful square social sharing widget for blogger(techtoones.blogspot.com)

Log in to your blogger account.
  • Select Layout option.

  • Click on Add gadgets

  • Select HTML/Javascript from list.

  • Copy below code and paste in HTML/Javascript box.


<style>
/* Social Icons
----------------------------------------------- */
a.social-icons {
margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}
a.social-icons:hover {
opacity: .7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>
<a class="social-icons" href="https://facebook.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/facebook_zps17e8a317.png" /></a>
<a class="social-icons" href="https://twitter.com/"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/twitter_zpsad21acd1.png" /></a>
<a class="social-icons" href="https://stumbleupon.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/stumbleupon_zpsb5c9fe2f.png" /></a>
<a class="social-icons" href="http://www.feedburner.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/rss_zps237db27e.png" /></a>
<a class="social-icons" href="http://flicker.com"><img src="http://i1356.photobucket.com/albums/q728/marklin44/Social%20Media%20Gray%20Icons/flickr_zps538aca1b.png" /></a>

  • Save it.


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

How To Add Four Different Mouse Hover Effect For Images In To Your Blogger

   Friends ,This is a useful post about how to apply different mouse hover effect to your picture in blogger. Now i show four effect to your blogger. This effect works with CSS3 script you can add this four effect on your Blogger. Follow this instructions carefully and add it in to your blog…

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 image link )

EFFECT -1



CSS code


.efecto-rotate-uno {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-uno:hover {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}

 

HTML - code

<img class="efecto-rotate-uno" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/h120/tump-03.png" />
 
 Replace highlighted RED color with your image link

EFFECT –2



CSS code


.efecto-rotate-dos {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-dos:hover {
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}

 

HTML - code

<img class="efecto-rotate-dos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/h120/tump-03.png" />
 
Replace highlighted RED color with your image link

EFFECT - 3



CSS code


.efecto-rotate-tres {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-tres {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}
.efecto-rotate-tres:hover {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}

 

HTML - code

<img class="efecto-rotate-tres" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/h120/tump-03.png" />
 
Replace highlighted RED color with your image link

EFFECT – 4



CSS code


.efecto-rotate-cuatro {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-cuatro:hover {
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
}

 

HTML - code

<img class="efecto-rotate-cuatro" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/h120/tump-03.png" />

 Replace highlighted RED color with your image link




Are you happy.???/…… Leave a commnet if it is not working on your blogger…

Add To Blogger Button Generator - Online Tool


Form generator for "Add to Blogger" button By Master Hacks

Add to Blogger Button Generator By Master Hacks

Settings



Copyright © 2013 All Rights Reserved @ techtoones

Tuesday, March 5, 2013

How To Add Rotating Popular Posts Widget (With Slide Effect) To Your Blogger

 Friends, Now i share a beautiful popular post widget to your blogger. It make your blog more professional and also attract  visitors. This widget created by Abu Farhan. You can easy to add this widget on your site. Please follow this post and install it on your blog. Try it and enjoy…  
Rotating popular post widget with sliding effect for your blogger(techtoones.blogspot.com)
Go to Blogger account.
  • Hit on Layout.

  • Click Add a gadget option.

  • Select Popular Posts Widget (provided by blogger) from given list.

  • Keep post number greater than 4.

  • Save your widget.

  • Again click Add a gadget option

  • Now select an HTML/Javascript option from given list

  • Paste the following code inside it.


<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}
#PopularPosts1 ul {
width:310px; overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
width:290px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDhGAyUXL5mHdKK3FLc7Rt9gX5TtlJQI7Fhe47KyZ6NgeqabSNqOD4dmLBxhaJuqy9ecFmj3ldoITCA_78iLY9wEsXg0qb6u_Vhf3StnnQRZ5qeJ63gBANZ-apTk6Ot2pBhUrOK88xBL4/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
    font-size:1em;
    margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4;
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color: #289728;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}
#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}
a img {
    border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js"type="text/javascript"></script>

You can customize this widget.  Change highlighted RED color with your taste. ( If you don’t want any change in this widget, Copy this code without any change.)




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

Saturday, March 2, 2013

Page Load Timer Script For Blogger

Hi, This post contain a script to find your Blogger loading time. This is a real widget .Feel it now.


web page load timer code



  • Go to templates, click on Edit HTML option and Proceed.

  • Find (Ctrl+F) <head> tag.

  • Paste the below  code after <head> tag.

<!-- page load timer -->

<script type='text/javascript'>

var d = new Date();

var starttime = d.getTime(); //Get the start time

</script>






  • Now find (CTRL+F) </body> tag  in the template.

  • Paste the below  code before </body> tag and save the template.


<!-- page load timer start -->

<script type='text/javascript'>

var d2 = new Date();

var endtime = d2.getTime(); //Get the end time

//Find the difference between the start and end times

var totaltime = (endtime - starttime)/1000;

//Round 2 decimal places

var result = Math.round(totaltime*100)/100;

//Output results to a &quot;P&quot; element

document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;;

</script>

<!-- page load timer end -->


  • Save template. 

  • After that go to Layout.

  • click on “ADD A GAGDET".

  • Select HTML/Java Scripts

  • Copy and paste below code.

<!-- Widget portion -->


<p id="loadtime">Write your custom message here</p>


  • Save It and click preview.






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








Saturday, February 23, 2013

How To Add Stylish Social Media sharing Widget With Email Subscription Box To Your Blogger

  today  i share a smart widget for you. This widget make with social sharing buttons and special email subscription box. You can add this widget simply in your blogger. It also have a mouse hover effect in outline. You can add this widget simply in your blogger. Do you want to add this widget into your blogger. Follow this post ….

Stylish social media sharing widget with email subcription box for blogger(techtoones.blogspot.com)

Log in to your Blogger account
  • Select  Layout option

  • Click on Add a Gadget

  • Select HTML/JavaScript from the given list

  • Copy and Paste the following code in HTML/Javascript box.


<div class='widget-content'>
<style type='text/css'>
.social a{padding: 6pt 6pt 6pt 5px;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{
background: #fff;
width: 270px;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.emailform{margin:30px 0 0; display:block; clear:both;}
.emailtext{margin:20px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqOWYhDKEjLNyEQqa5wSZPQ0hrjr9ls4qWxq60Yzt5-7c-2ogfhDfu3t5NdLvPx2qgHIz8EPaPMNYPn0_Rfg22Hfr6dSfeuIQ-R4q1aeJOalh7Kvy2AC8n9Cmb0S1CzFMYBgpaX9IzbI/s1600/email.png) no-repeat scroll 0px center;padding:5px 5px 4px 30px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:170px;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:6px 8px; border:1px solid #666;cursor:pointer;background:#ff748c}
.sub-button:hover{color:#eee;border-color: #999;background:#ffa7b6}
</style>
<div class='sub-box'>
<center><div class="social">
<table><tbody><tr><td>
<a href='YOUR-FACEBOOK-PAGE-LINK-HERE ' target='_blank'><img alt='Facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpkampfBmL31QLsgBjobnv5cID0ZIFjiUQ7k5kg926TFW2q72bIypwWUfp1mpV1N_v-AhAyZovaIaf3EZvv4tBFY8rUD8iScpkGfCeXiicEOsnVpPqHLvdnRJYn4E-5yDdUwiojO9ajiU/s1600/facebook.png" border="0" title='Follow Us On Facebook'/></a> </td>
<td> <a href='YOUR-TWITTER-LINK-HERE ' target='_blank'><img alt='Twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTggJrWWglnS3wvz9K5MLi-bGDfNTmmpsfkRLpUbZ3EnBLX_a6p4OI01o39c9Zb9NL1Oi0kDTFZf-IituFUv_OOgfnnQnFMnplF0gDuI9MlW16byd0VGNIW6gIAFyZ9nPrGdcdSahpQ1M/s1600/twitter.png" border="0" title='Follow Us On Twitter'/></a> </td>
<td> <a href=' YOUR-GOOGLE-PLUS-LINK-HERE ' target='_blank'><img alt='Google Plus' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_S3o-edRrpwumAt4UkM0qYfq9FwPpLbmpzBnYAWzooEax9H-VdJ_S5TNRea04wbFjy3WYf7EK9LAyEK3MVWd18PKjBKAa4K3rfO_d7I-Ld1CQJa-zkMlZYpGaSoVRhDZStCpJvKr94qw/s1600/googleplus.png"  border="0" title='Follow Us On Google Plus'/></a> </td>
<td> <a href='http://www.pinterest.com/' target='_blank'><img alt='Pinterest' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqayfoAQRIJmxY1XH17K_RreYwC46CNd2Z6wUt6w-ZHm1RpMTxON608p8db_5_z4olSHWz8wdfBWUBXdtsph-63fiqVfWiuIgEtiRr-hOyDfwt_lKPQnWy27lZUZ4BwfWxzwBA-Xlv4ZA/s1600/pinterest.png"  border="0" title='Follow Us On Pinterest'/></a> </td>
<td> <a href='YOUR-STUMBLE UPON-LINK-HERE ' target='_blank'><img alt='Stumble Upon' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhopEgwZy0bGeoREZYOxUarYau569Q34nelhc-f6B0jwDHqPvP6Uri1oE8HpuzP_jBjFMMPVLU7140oRuVs8GXDIdQeMEXSMQfMKwk-tPAuL4fSFhvJtrNze-V1fIMf2TeEyUs9wW82OgU/s1600/stumbleupon.png"  border="0" title='Follow Us On Stumble Upon'/></a>
</td></tr></tbody></table> </div></center>
<center>
</center>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:17px;font-weight:bold;">Enter Your Email Below And Subscribe To Our Daily Newsletter !!</h8>
<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-RSS-LINK-NAME-HERE ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="YOUR-RSS-NAME-HERE " name="uri"/>
<input type="hidden" name="loc" value="en_EN" />
<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div><small> PS : We Hate Spamming Too ! You Are Safe With Us.</small></div></div>

Change all RED color with your  Social media links.

  • Save It.



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

Add Social Media Slide out widget to Your blogger

 Today  i sharng a good social media widget to your blogger. it is a hidden widget.  When visitors mouse over on this widget  it slide out from side. If we move mouse from this widget, It automatic hide in blogger body. If you want to install in your blogger. Follow  this post….
 Social Network J-Query Slide Out Widget For Your Blogger techtoones.blogspot

Log in to Blogger account
  • Select Templates

  • Click on Edit HTML

  • Tick On  Expand Widget Templates.

  • Find (Ctrl + F)   ]]></b:skin>

  • Copy  the code shown below and paste Before/Above it.


#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 353px;position: fixed;right: -250px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10001;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 106px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

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

  • Now Copy below code and paste before It.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -203}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
});
</script>

  • Save Templates.

  • Then go to Layout

  • Now Click On Add Gadget Button.

  • Select HTML/Javascript option from given list.

  • Copy below code and paste it .


<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirlOCx52t8JHNKcUP01OYYFHngkN_okCJxjrNhb2Rb75rVdu-nf6tcOK9MfKnSzRhp3N0tVnnXPrZQhm0hfFBFZucqC1yXtL2D6geNBzbUymLO67Ku5zPhCAzPLuG60mpJjmTg-AMF9w/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOUR-FACEBOOK-FANPAGE-LINK-HERE&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right"style="top:25%;"><div id="twitter_div"><img id="twitter_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Lq9cvTTOpZlIBJwrS0Od_EgcbsVbkm9-g22lWWbnFNNB7bXjRPLvVOBDxsRdlbUmiqNH3a0FdiUfTCvZjBJ3mA3prnk7lTgT_JXBMjxqQKoacNHXibjWlU9LV9wrd7eHiNawsps50g/s1600/Twitter.png"/><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version:2,type:'profile',rpp:4,interval:1000,width:246,height:265,theme:{shell:{background:'#63BEFD',color:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('YOUR-TWITTER-ID-HERE').start();</script></div></div></div><div id="on"><div id="google_plus_right"style="top:42%;"><div id="google_plus_div"><img id="google_plus_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWd6LmN7QGwMyEaS3VBXe7W7Th_QZSrxMrK0p4dKWLKLLcSjke3UeR82SPR3qS8E3Ul8u1eePgZpf-xRYCN0DLgonv28KjSit94uD-iBLXkuxyE1LRh9xifBc-Lv-Jr1Es-yx7hLt1Q/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;<h4 style="color:#F66303;">You Can Also Receive Free E-Mail Updates:</h4><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-FEEDBURNER-ID-HERE','popupwindow','scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10"class="enteryouremail"name="email"value="Enter Your E-Mail Here..."onblur="if (this.value == &#39;&#39;){this.value = &#39;Enter Your E-Mail Here...&#39;}"onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;){this.value = &#39;&#39;}"type="text"/><input value="FEEDNAME-HERE"name="uri"type="hidden"/><input value="Submit"class="submitbutton"type="submit"/></form></center><img id="feedburner_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8KrMgEczQgOr6Yj0MgWwyqR59w1-s0whE7HKNdABU80LLE-gTptIe7yy0cujtGvb11BXFYyfFpY6AB_ayQTrcRjjizVtIRgMiC9iqyifnExZ2BMVFVq7pHEP62J7g2xt2v3ZpvCrHcA/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3vcd3ps5kc0-w6nQVrNXX2SpIoYfc3BpdpTh0seSvvU7SaFOigUprrkTj_mFxPEdBaYn2xPaXlfrpYRJTn1JJ-4kIHKfndCm-T4wWJuklH1Y2sYma-VDtRjBoIrHygRVw7ZCxlLxJg/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=YOUTUBE-ID-HERE ="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe>
</div></div></div>
</div>


  • Save it.



Are you happy?….. Do you like this blog ….. comment below………………..

Friday, February 22, 2013

Ice Cube 3D Social Media Sharing Widget (With Mouse Hover Effect) To Your Blogger

  Do you like Ice cubes?  Friends Now i share a useful social media widget  to you. Its look like an ice cube.  It fresh your viewers mind  and also attract people. If you want to add it in your blogger just read this post  carefully and enjoy…. 

Stylish icecube sharing widget with mouse hover effect for blogger(techtoones.blogspot.com)

Log in to your Blogger account
  • Select  Layout option

  • Click on Add a Gadget

  • Select HTML/JavaScript from the given list

  • Copy and Paste the following code in HTML/Javascript box.


<style>
<!--Blogging Industries Social 3D Ice Cubez Strat -->
#bi a:hover {background-color: transparent;opacity:0.7;}
#bi img
{ -moz-transition: all 0.8s ease-in-out; -webkit-
transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
#bi img:hover
{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>
<div id="bi">
<!--Start Blogging Industries Facebook Icon-->
<a title="Witness Our FB Social" href="YOUR-FACEBOOK-PAGE-LINK-HERE" target="_blank">
<img border="0" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Facebook.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Blogging Industries Facebook Icon -->
<!--Start Blogging Industries Twitter Icon-->
<a rel="nofollow" title="Follow Us On Twitter" href="YOUR-TWITTER-PROFILE-LINK-HERE" target="_blank">
<img border="0" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Twitter.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Blogging Industries Twitter Icon-->
<!--Start Blogging Industries Google+ Icon-->
<a title="Add Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-LINK-HERE" target="_blank">
<img style="margin-right:1px;" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Googleplus.png"/></a>
<!--End Blogging Industries Google+ Icon-->
<!--Start Blogging Industries LinkedIn Icon-->
<a title="Follow Our Links" rel="nofollow" href="YOUR-LINKDIN-PROFILE-LINK-HERE" target="_blank">
<img style="margin-right:1px;" src="https://bloggingindustries.googlecode.com/svn/trunk/BI%20Linkedin.png" alt="Follow Me on Linkedin" /></a> <!--End Blogging Industries LinkedIn Icon-->
<!--Start Blogging Industries Technorati Icon-->
<a title="Follow Our Links" rel="nofollow" href="YOUR-TECHNORATI-LINK-HERE" target="_blank">
<img style="margin-right:1px;" src="https://bloggingindustries.googlecode.com/svn/trunk/BI Technorati.png" /></a>
<!--End Blogging Industries LinkedIn Icon-->
<!--For First time Social 3D Icecubez by Blogging Industries-->
</div>
<br/>
<!--Blogging Industries Social 3D Ice Cubez End -->
</center>

Change all RED color with your  Social media links.

  • Save It.



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