
Hello readers. In this post I am going to share you an awesome social media widget. This widget has already published on some other blogging resources. But I have made some cool changes and going to share you in few styles.
You can find our other widgets by clicking here.
DEMO
How to add this:
- Login to your Blogger Account.
- Select Layout
- Click 'Add a Gadget/Widget'
- Select HTML/JavaScript.
- Copy and Past any Code of below.
- Make necessary changes. Such as Facebook URL, Twitter username etc..
- Click OK.
Style 01 ( Drink Can Style )
Code;
<style>
#socialnbtricks{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMmQGQoeUYy4ZeuygvGaqiot25jNu_ppBDH57LIk6TCOJm8rN9EPCDhTK-ZsAL9SnoxgnclUY03-N9wyrnZDX1rnoHeU_XUSKAXU4uLCFztKmWo7kZ1iCLHAX9gaMcCDfiF7cQY33guQ/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#socialnbtricksp 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#socialnbtricksp img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);}
bloggertricksform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.bloggertrickstxt{
font-size:16px;
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:240px;
height:30px;
}
.bloggertricksbtn{
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='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<br />
<div id="socialnbtricks">
<center><p id="socialnbtricksp">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaGiB2Y-ZCTvjxpDLCPhDXHexcJ9KhUAudM-ZQt5sj9sQHLPZ5_uvM7M1hTuqIQXnJKujtwUR_92eYHfcNbcgm3K3MgMJqHnFHRfAevX01KgdVBzRcSqmvRI76KzGWfOT0w4YlGfpeXLD4/s1600/1352904711_icontexto-drink-web20-rss.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJIINARgHqB2mdEeZ3Mb9BMLkJsTGVt5ZX6pryNHiIZ_MZzs12WbrgusNPsnbTHqVPn0vcOKGn1nxF0NeRLcf50MXuv-zybl55uqAl3-JuGX9YL8LfKYIrQTBowGmurS2fEDZNEfOBuT7G/s1600/1352904644_icontexto-drink-web20-google.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkQI3epkfKOPiZswdaIqFzM6KOkz2AisE_YoN1NkkhQBI16E7CvYuJHqHYfvsRqcC0XJKh8Q9hj55lwtBq80Ing9Nw7JjFpIBG05rXiXHLn89WTM66Rvv11EtTcT8AemSw7mFaJKhZG8gT/s1600/1352904695_icontexto-drink-web20-twitter.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTYLe2Pm0fKT4sDbbV5jvuH17Mw2tXslbRJSTLavo8UGIT7FyGEKmemx2oBRFhftL9h8m2DikyjPNIwZENvD4NyTtbit_3DS16wu7kc9DQywHtEBBdQ6U-ZTFrSUmPrMUy3FSv0IWGgrz/s1600/1352904680_icontexto-drink-web20-facebook.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Get Quality Updates 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=YOUR FEEDBURNER ID HERE', 'popupwindow', 'scrollbars=yes,width=550,height=550');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='bloggertrickstxt' 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='bloggertricksbtn' title='' type='submit' value='Submit'/>
</form><center>
</div><div><a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://goo.gl/XML9O"> Get This</a></div>
Style 02. (3d Cube)
Code;
<style>#socialnbtricks{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMmQGQoeUYy4ZeuygvGaqiot25jNu_ppBDH57LIk6TCOJm8rN9EPCDhTK-ZsAL9SnoxgnclUY03-N9wyrnZDX1rnoHeU_XUSKAXU4uLCFztKmWo7kZ1iCLHAX9gaMcCDfiF7cQY33guQ/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#socialnbtricksp 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#socialnbtricksp img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);}
bloggertricksform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.bloggertrickstxt{
font-size:16px;
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:240px;
height:30px;
}
.bloggertricksbtn{
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='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<br />
<div id="socialnbtricks">
<center><p id="socialnbtricksp">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-THlmUwLDfsgO2sEcT_6UMZkB2HOlPHeC-2e827GXLsxLQQsyS9y4nGxX8uee2QmlqnrqkZl_kks3LT0e6jCLSWMGJPcGUUE02NpyWYgMh1b3yBIsLkgAg2xEJhFz3avm9NwQhY3C7Ye/s1600/RSS-48x48.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIMjQN4pYLawQjDiw_E5M9NRY5tW8QftslPn_RtypyI51utjj31OMFTYwWG82-wGKH0qhfX5WU1QwgmojY5mqNKtcN_LlTyodwYjrBSK2jEvnhG6S7CJfJ2r_geLwzYr590kRbstukvIU/s1600/TNT.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhRIG2HtUuMqsAkobvQajMMNHup-IU8w-KVY-hdS3MlJV39hRo5DBwYfJJ5-SqYxfikozsSAYQJxUZ9lGpOZFOtyIKa1dbXkHgx4z7zsiMq-GpdqVP3jiVqNIImcf0TgmkePGeW-2R0wE/s1600/TNT.png" /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-io7ObU0RroZfmQJAgee962NEmCRt3vm6tre9FF3fp-pbK2XqO-k9nEyq5IsGvKuIZPYG5BWNXKY8oQEyTopNJPJ63WKf-EIb8hIO-TotDL3f5sa2g87qYKHQnrVBWTfl4yNo3oFmp8/s1600/TNT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Get Quality Updates 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=YOUR FEEDBURNER ID HERE', 'popupwindow', 'scrollbars=yes,width=550,height=550');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='bloggertrickstxt' 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='bloggertricksbtn' title='' type='submit' value='Submit'/>
</form><center>
</div><div><a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://goo.gl/XML9O"> Get This</a></div>
Style 03. (User Effect)
Code;
<style>#socialnbtricks{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMmQGQoeUYy4ZeuygvGaqiot25jNu_ppBDH57LIk6TCOJm8rN9EPCDhTK-ZsAL9SnoxgnclUY03-N9wyrnZDX1rnoHeU_XUSKAXU4uLCFztKmWo7kZ1iCLHAX9gaMcCDfiF7cQY33guQ/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#socialnbtricksp 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#socialnbtricksp img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);}
bloggertricksform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.bloggertrickstxt{
font-size:16px;
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:240px;
height:30px;
}
.bloggertricksbtn{
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='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<br />
<div id="socialnbtricks">
<center><p id="socialnbtricksp">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhidcrcXfck6ZTSdhYUCqWZl2mVdLK7S5XecLqDpSAnWYNYBsqMLTz-qAnasLaUb7eyFEVwvzhV-VzwUbmcxF0BZS1mdIc1PKL6hVfEFiwM2oZkNhmBas8Zlt6tuWMb8kfy7UMcN_t3AnJF/s1600/1352911677_icontexto-user-web20-rss.png" /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPsii-7tuY4CC7IOisJILo3QuBNr7breyWFa-4q9HS2M9WUmHRe92yx-5EsiXOKDemY0wLlKvDTXbTKucuGNTVFgY6fwjPTemFz1Yb-9gEE7sZk3Nh3NSMzhNJLDuIryYgEmk12Dir6ic/s1600/1352911661_icontexto-user-web20-google.png" /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5qWiwwGaGkJypxQ_t2jJbwX_KYItwb-tvkZIEyldpGorEziTF1kG0U6Xv2-5s8cGuDxRvsplR5aa64ZA7WCqMpREu_kEi5xEckcfHEp2Up6rf9m-L-DR1GhdHqVu4CCDazmk9dW9e39A/s1600/1352911630_icontexto-user-web20-twitter.png" /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifdlXfUWlCFNBX_o9lvHQOPEf-BAkih9gXQIIH5D47bdrL2Yc9DXX5YLSsXtL5vfE_N8RkjolYL1Qw4EFXztHVmWUiWmI9enpaIdfk-VDYpc1Pe6cp0JjMlvfPwstgLp4x9ml7iO8f-_Gg/s1600/1352911605_icontexto-user-web20-facebook.png" /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Get Quality Updates 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=YOUR FEEDBURNER ID HERE', 'popupwindow', 'scrollbars=yes,width=550,height=550');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='bloggertrickstxt' 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='bloggertricksbtn' title='' type='submit' value='Submit'/>
</form><center>
</div><div><a style=" font-size:9px; color:#3B78CD; text-decoration:none;"href="http://goo.gl/XML9O"> Get This</a></div>
That's it. If you have any questions, feel free to ask.