1. Log in to blogger account and Click drop down.
2. Now select "Layout" Like Below.
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.
<style>Replace Tutorialhax with your Feedburner ID
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" 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="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/Tutorialhax" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpINbg7Vm8Ata9SvPDqxDiym2ECiXO_BXFr_YcE5oBGoCvlYYMYvPZN_XQWIRnE9A168kOz13iwSUarKirhJMPR0ur2fmSJg61zBxIYPH206ISWyEyESo_xKiT-OVe1CaYAjtCucz9B3U/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/Tutorialhax" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGdq8PhmKy34EEvyqCjMRdEzE6MUqstyKImI1x1zaNGJvkC3yHvhVdkJDcU4kCK_QzXvaS9x_cD5iprVwWsxwba2XicF_f9JJ4dCHoWMgwARw8M6hPSOlmlFmwqaIjcgpMExc31-KpN4/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/UserId" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXXNFWeS6YWXUqNTupWM0lIIw3l_-LwuGl8YmkMX6XVYHf4DeXlp2QrIDzZqi6INc0B_1SVnnts-spV5kMA1vOWLTTe_F73Kp_dFdEpNED1omjHb7kZXad_DOclk-JkxWjNl8_SfpA6w/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/Tutorialhax" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-O0gX5XlfBsWS1K_URPT4ji_E3pbsvLxLhVIUvYTK0eOoP-6VQRtb0m4-EN2fhelLTczIn_9lomgM-ImO5Mn1U9GRbywr3d7K3KtTY6k9qBmDfR-p3xyXHVbeQic3bBOlusA_B8RCp7g/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/Tutorialhax" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYQUzs2V6IN1EgeMLYip_Rfm1v5l1uIPyzIvK2BUjBY3VB3CXVUNXi32Y_C117bgbZUotySDdFkAbFnfzQRdROdPDWRZ3EHxGagY_m3L5fEzieQ598bGPThYn26EcwZHTyqq1RVSspuQ/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/bloggertrix"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/bloggertrix?bg=FF9900&fg=444444&anim=1" style="border: 0;" width="88" /></a></div>
</div>
Replace Tutorialhax with your Facebook username
Replace Tutorialhax with your Twitter Username
Replace Tutorialhax with your Pinterest Username
Replace UserId with your Twitter Username
5. Now save your HTML/Javascript'.You are done.
This is unique Social Media widget. Hope this helpful to you.
Post A Comment: