Awesome Social Media Widget with Rss Feed Subscribe box. 3 various styles.

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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,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(&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='bloggertrickstxt' 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='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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,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(&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='bloggertrickstxt' 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='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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,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(&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='bloggertrickstxt' 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='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.

Wednesday, November 14, 2012

Awesome Social Media Widget with Rss Feed Subscribe box. 3 various styles.

Style 01 ( Drink Can Style )

Style 02. (3d Cube)

Style 03. (User Effect)

Code;

0 comments:

Post a Comment

Comments

Labels

Followers

Blog Archive

Find Us On Facebook

Tag

Blog Archive

Text

BLOGROLL

Our Friends

Tag

Contact

Recent Posts

Wednesday, November 14, 2012

Awesome Social Media Widget with Rss Feed Subscribe box. 3 various styles.

Style 01 ( Drink Can Style )

Style 02. (3d Cube)

Style 03. (User Effect)

Code;

0 comments:

Post a Comment

Social Profiles

Comments

Labels

Followers

Blog Archive

Find Us On Facebook

Tag

Blog Archive

Text

BLOGROLL

Our Friends

Tag

Contact

Recent Posts