Black Beauty - Social Subscription widget
6:06 π.μ.
I had previously shared the BT style social subscription widgetuniquely created by Me. So far i didn't got time to create further widgets for blogger. Today i have come up with another eye catchingsocial subscription widget for blogger blogs which can definitely attract each and every bloggers. This widget is uniquely created by Me and the credit of the 3D icons used in this goes toPaul Crowe. As you can notice, I have implemented a smooth and sleekEmail subscribing box and spinning 3D social icons in this widget that made me to get love on this widget. Black Beauty social subscription widget takes a single step to get it placed on your blog within seconds.
1. Go to blogger dashboard --> Layout --> Add a Gadget ( Html / JavaScriptgadget).
2. Paste the following peace of code inside it.
Black Beauty widget code
<style>
#BTsub{
width:280px;
padding:70px 10px 25px 10px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN69pvd5tuJF_7nTfKpwWG1Lw747IjEB2KkMe2ynCzG9pzR_InJ9l9DkCULEgwI2a_PRKuYikpvqz2ZOUAXfR05AJQTbhh9SCxtHkTQY7VDuwDK3T7smr5iprJzhN22COp-kO5TUskIe8/s1600/bloggertricksdotbizemailbg.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
p#BT_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#BT_socialicons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
BTform.emailout{
margin:20px;
display:block;
clear:both;
padding:20px;
float:right;
}
.BTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLj9OuOWWURVZnKhyphenhyphen59tR-QLIHRicOGrHEAphrzp08PQjBn7K65kWnDj41d42FThMlJYjnG2PCAAupNgWuvfU-ZrbtAlyIhchDQeKWbVLzN1zn_42ag6tyYvqfnVMF0-qr1L-tECRHS9E/s1600/BTMAIL.png) 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:130px;
height:20px;
}
.BTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
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>
<div id="BTsub">
<center><p id="BT_socialicons">
<a href="http://www.facebook.com/bloggertricksdotbiz">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66EQcckF8xgtE66bYJNHwjhyphenhyphen1vK3lEmMum4hb0teS0HoorvVb5zGLI5-FbvLXMt15ZSuRR0pK1c4Hb3tLsCjKKlJsGhH-QlVki7JgXXbuhCWmzX6W0QoyVkcYIj9blOp76bWQYcF6ef4/s1600/bloggertricksdotbizFB.png " /></a>
<a href="https://plus.google.com/110100302012846213219">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrf3jrTefKy9JlFuKfTA9NN8HjmveZ26uli79YaVJ81d8hZRqaHiEEserg3csSGMKbKfDWemfuQylnWrzoC9eF4-mvYmxUBEM-XjHBq82wEy3Gt3eM4ZLODlMQWqbGRqCG0WInWqIQQXY/s1600/bloggertricksdotbizGP.png " /></a>
<a href="http://www.twitter.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcL8LGooFT09bXfQ8eFN3bQx-wTxmN-VLPBay0Lrt4qwtgprEyXCdQHxhqKhEG_ehbkE0kx2CNYiwhGPcqABWjbzGfyj3zXyyBQOhdKjeFz0mKemCugpYf6R-pWyUf_gE9ldWjLFrrxE/s1600/bloggertricksdotbizTW.png " /></a>
<a href="http://pinterest.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MFcZ9MKYwtZC86osMP0cTp77Uzo374t5jLo1ZLHplmGCIwl1ScZTQDpemkUVH52dfzm-oZVEe5CtDikFimTHe45AIpTMboJDiFIwbEtKZNGMWwzrqNnd2a0mMzQB738iq_mX02diERU/s1600/bloggertricksdotbizPT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Enter your Email To Receive Quality Updates Directly Into Your Inbox FREE!!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertricks/BTVJ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Bloggertricks/BTVJ'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='BTtextbox' name='email' onblur='if (this.value == "") {this.value = "Enter your Email";}' onfocus='if (this.value == "Enter your Email") {this.value = ""}' type='text' value='Enter your Email'/>
<input alt='' class='BTbutton' title='' type='submit' value='Submit'/>
</form>
<p style='float:right; color:#000; font-size:10px;'><a href="http://www.bloggertricks.biz/2012/08/black-beauty-social-widget.html" target="_blank">|Grab This|</a></p>
</div>
Customize
- Replace the social links highlighted with your corresponding social profile links.
- Replace Bloggertricks/BTVJ with your Feedburner Id.
3. Save the gadget.
4. Save Your Layout.
