Hello friends today I want to share a cool widget with you. This widget is already published on NetinfozBlog but my widget is fully customized. The main important feature of this widget is it's cool background with email subscription option.You know these 3D images are provided by Paul Crowe of spiceupyourblog.com. But I had customized them with a cute and light look. So why are you waiting get this cool widget ? Get this now !

I am providing three styles here. The three styles are :



  • Luster effect
  • Shiny Black
  • Wooden Style

HTML Codes For Each Styles 

Preview : 


 
TIME TO ADD THIS IN BLOGGER


1. Login to your blogger account.
2. Design -> Add a gadget -> And Select HTML/Javascript widget
3. Paste the below code in it and click save.
For example, If I want to use the shiny black, I will paste its style code and the code which I had provided under the heading codes.

Luster effect

HTML CODE


#TNTsub{
width:244px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBh_HWqwi87IjFugOfbh9A8VZ0qxKIyAdmLcq52kk92Jtlz9pntZWMm2JeQnCtWRmNoCB4Fon4RxOhbZ5EJfde7YZRUhUVjuyt-HzQ89tkd6E8sfvU10epwaX6yUBMbwOlzaSseR-R34/s1600/HP-Laptop-Luster.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#TNT_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#TNT_socialicons img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);
}
TNTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.TNTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:145px;
height:20px;
}
.TNTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>


Shiny Black

HTML CODE


#TNTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kfm5YaCBVzF6Pq-M831lINJv4xuBIME5lTSgso8_fQHYAg-i43hVIgXNJEH1Et85zbJ4GVYj74bPGTkDa_bPECclFruuj1ilogiMrLgaFAJ5zIEcezIB_ewWTIGn5UCwm6djcnbJ0_s/s1600/ws_Black_Floor_1440x900.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#TNT_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#TNT_socialicons img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);
}
TNTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.TNTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:145px;
height:20px;
}
.TNTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}


Wooden Style

HTML CODE


#TNTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOUnrsVIikMSJ6bVR4qxKnBXraY_qlOsTR5IWcQqgxQa6f-BGq-T5PHc8Xx5MdgfQh1cHRNE8ZqITkch8bqTvLbLvdZMmrIHMpOWOkXB51SyfjZf58klQHhx1FNOont-CfKg9jwtcJjfU/s1600/4498648030_2e488d4256.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#TNT_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#TNT_socialicons img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);
}
TNTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.TNTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:230px;
height:20px;
}
.TNTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}


CODE


In the above codes, I had provided just the style codes and what you have to do is : 
Copy and Paste Any Style code in the widget column and below that paste the code provided after this line. 
<div id="TNTsub">
<center><p id="TNT_socialicons">
    <a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQpt8IDUfb_iZjx0ZI1_3LEUIvsh9_YGpmqj6RBdQtxLZ0GP0qbiWbMJL0fhwrl-O5fvEvX_GjPayBjQ6PzVSRCKmci_MaMebUIHo60i4E7IQiaz5VcqK1Ht24IUKpiCaT6YvNV-k0sOnS/s1600/RSS-48x48.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBDxH9cRCNwtkb7bApadqASb7gAU6QAclcI5VG1CMQzp5zmpauQqaBqM4UAjWfVqIn4spatQ4TiIh3QGPZJBBpM6wgDcYH3ScQalIoK4ojkLbJawGFgVd2ahVvghR0wVnz_OPt3SQ6Bxs/s1600/TNT.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJxkeIwjHIpPk0fM6QSovWQwVYY1L75PxQIW-nSdmMWml9tnSucGBR5Eqw3wj1aqFdb6m0jy-RYc37HG0yg5ZI2k215arw9K8Xm3i39WkM_bXCmvDsS-7WbzReBStFaFSpZcCM4MhJfU/s1600/TNT.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrSuiQQyicSoHKe-JaEvWyCblxOdxf2EnDgWR1WO6GPmfjtF_cKWkEbrbQ3unpWQJ30zsf14ZHldLcMy5TSvh2mx4NCtq2xnyJWeYyfV9NYF6NrpIW8iDWNjOUsuIW4hqF_muEMfJlXg/s1600/TNT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Enter your Email Below To Get Quality Updates Directly Into Your Inbox FREE !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID HERE&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=550&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR FEEDBURNER URL HERE'/>
<center><input name='loc' type='hidden' value='en_US'/>
<input class='TNTtextbox' 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='TNTbutton' title='' type='submit' value='Submit'/>
</form><center>
<p style='float:upper right; color:#000; font-size:10px;'><a href="http://www.tricksandteach.blogspot.com" target="_blank"> Widget By </a></p>
</div>


  1. YOUR RSS FEED URL HERE -  Replace this with your RSS feed URL.
  2.  YOUR GOOGLE PLUS URL HERE -  - Replace this with your Google+ URL
  3. YOUR TWITTER URL HERE -  Replace this with your twitter URL.
  4. YOUR FACEBOOK URL HERE  - Replace this with your Facebook URL
  5. YOUR FEEDBURNER ID HERE - Replace this with your feed-burner id.
  6. YOUR FEEDBURNER URL HERE - Replace this with your feed URL.

I think you all had liked my post and thanks for reading my post.

2 comments:

  1. certainly like your website however you have to
    take a look at the spelling on quite a few of your posts.
    Several of them are rife with spelling problems
    and I in finding it very troublesome to inform the reality nevertheless I'll surely come again again.
    Feel free to visit my website :: celebrity

    ReplyDelete

 
Top