If you like the social media widget I have at the top of my sidebar here, which, incidentally, is filled with Cozy Little House code because I'm taking this one over there, then here is the code I used. You will need to erase where I've highlighted in yellow and put your own information.
First go to Layout>Add A Gadget>Add HTML
In the HTML box, copy what is below. Remember, you will have to take my info out and put yours in. It will be highlighted in yellow.
This is assuming you use Feedburner.
Copy below, then paste into a HTML Gadget. Then click Save. Then go back in and change my information to your information. Then Save again.
<style>
.btrixsocial_box-email{
background:Fff no-repeat 0px 12px ; width:270px;float:center;font-size:1.4em;font-weight:bold;margin:2px 20px 0px 10px;color:#686B6C;
}
.btrixsocial_box-emailsubmit{
background:#0084CE;cursor:pointer; color:#fff; border:none;padding:3px;margin:0 0 0px 0;text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; font:12px sans-serif;
}
.btrixsocial_box-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px; margin:0px 2px 0px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px; width:200px; height:20px;color:#666;}
#socialboxbt
{
text-align:center;font-weight:bold;padding:5px;border:1px solid black;width:300px;
-moz-box-shadow: 0px 0px 8px #000000;-webkit-box-shadow: 0px 0px 8px #000000;box-shadow: 0px 0px 8px #000000;}
</style>
<br />
<div id="socialboxbt">
<a href="http://feeds.feedburner.com/blogspot/KxqG" imageanchor="1" rel="nofollow" style="float: center; margin-left: .5em; margin-right: 1em;" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZpF1hI9mdLGNrGVq53vovY4fD4LpL0s7TlyD5mp7WSXPpxm_35loIU-MXT6yhvdbpW7mETBnTnhtmb4g4qItcRHlRQ2kZ9pxls-6fg9JCqGIiocEyPowsvQJjYYdssZ7paGuBAA-uUHY/s1600/rss.png" /></a>
Submit your Email Address to Get Free latest Articles Directly to your Inbox
<br />
<div class="btrixsocial_box-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=cozylittlehouse', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="textarea" gtbfieldid="3" name="email" onblur="if undefinedthis.value == "") {this.value = "Enter email address here";}" onfocus="if undefinedthis.value == "Enter email address here") {this.value = "";}" type="text" value="Enter email address here..." />
<input name="uri" type="hidden" value="cozylittlehouse" /><input name="loc" type="hidden" value="en_US" />
<input class="cozylittlehouse_box-emailsubmit" type="submit" value="Submit" />
</form>
</div>
<style class="text/css">
table
{border-bottom: 0px solid #E6E6E6;float: center;width: 300px;margin:-8px 0 0 0px;}
.subicons
{border-right: 0px solid #E6E6E6;}
.Fadeout {filter:alphaundefinedopacity=100);opacity: 1.0;border:0;
}
.Fadeout:hover{filter:alphaundefinedopacity=80);opacity: 0.8;border:0;
}
</style>
<br /><div class="table"><table>
<tbody><tr>
<td><div class="subicons">
<a class="Fadeout" href="http://www.facebook.com/acozylittlehouse" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdsOG5jBbj-YBEdMgRsEp4oytXd-bXrsOQ8sgVnemi56i93vMAc15lLlib0kcLwf35qRo0RP7qNo0t9YYLVmY2TZH_8xMEBwB5sHFpimEbCYn5yoCfvoFT3lsXtw0xrDuAMuhOPWeOPo/s1600/btrix-facebook-icon.png" /></a></div>
</td><td><div class="subicons">
<a class="Fadeout" href="http://twitter.com/cozylittlehouse" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhse6dLM2wyGXfqjdBEw1uHCVQUjnOVfI01fBq_fceAbcLL8Dph16d-GdqrSq7CsyutYSrkasOGnSCiw59nkZ_M69a5ERRPxRVQylnjkUPQTIS8GdNBgSh9p7Avx6TQVsQVbvbM2_6c9h0/s1600/btrix-twitter-icon.png" /></a></div>
</td>
<td><div class="subicons">
<a class="Fadeout" href="http://feeds.feedburner.com/blogspot/KxqG" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AN7_Tf9s4FBXj5WLe6rW-gqGLjLeosg0S3z2cFd4BXY9CI7KOQLHsfUF31h8pb0Y8wZ1WlCzLV6SrO1WFqDTbqS5c-yCnf2x4o6BnERoMNuuElygMuv_HDfmLHyiYw7qO6NCx5q6B0E/s1600/btrix-rss-icon.png" /></a></div>
</td>
<td><a class="Fadeout" href="https://pinterest.com/brendak" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6z8gAoTigcgn-kIney2BkdPQu3Xq2q3CnOCPqYAn7gAgm7-OWP-sHH53TCROpA3vV4dl7lxX5S1aFuJYV6pAY6n4sfqP7WbuYD0LtoVmR1cvLhavSxJxxYJwgmrVTgZOQi59s5uAEHm4/s1600/btrix-Pinterest-icon.png" /></a></td>
</tr></tbody></table></div></div>
.btrixsocial_box-email{
background:Fff no-repeat 0px 12px ; width:270px;float:center;font-size:1.4em;font-weight:bold;margin:2px 20px 0px 10px;color:#686B6C;
}
.btrixsocial_box-emailsubmit{
background:#0084CE;cursor:pointer; color:#fff; border:none;padding:3px;margin:0 0 0px 0;text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; font:12px sans-serif;
}
.btrixsocial_box-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px; margin:0px 2px 0px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px; width:200px; height:20px;color:#666;}
#socialboxbt
{
text-align:center;font-weight:bold;padding:5px;border:1px solid black;width:300px;
-moz-box-shadow: 0px 0px 8px #000000;-webkit-box-shadow: 0px 0px 8px #000000;box-shadow: 0px 0px 8px #000000;}
</style>
<br />
<div id="socialboxbt">
<a href="http://feeds.feedburner.com/blogspot/KxqG" imageanchor="1" rel="nofollow" style="float: center; margin-left: .5em; margin-right: 1em;" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKZpF1hI9mdLGNrGVq53vovY4fD4LpL0s7TlyD5mp7WSXPpxm_35loIU-MXT6yhvdbpW7mETBnTnhtmb4g4qItcRHlRQ2kZ9pxls-6fg9JCqGIiocEyPowsvQJjYYdssZ7paGuBAA-uUHY/s1600/rss.png" /></a>
Submit your Email Address to Get Free latest Articles Directly to your Inbox
<br />
<div class="btrixsocial_box-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=cozylittlehouse', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="textarea" gtbfieldid="3" name="email" onblur="if undefinedthis.value == "") {this.value = "Enter email address here";}" onfocus="if undefinedthis.value == "Enter email address here") {this.value = "";}" type="text" value="Enter email address here..." />
<input name="uri" type="hidden" value="cozylittlehouse" /><input name="loc" type="hidden" value="en_US" />
<input class="cozylittlehouse_box-emailsubmit" type="submit" value="Submit" />
</form>
</div>
<style class="text/css">
table
{border-bottom: 0px solid #E6E6E6;float: center;width: 300px;margin:-8px 0 0 0px;}
.subicons
{border-right: 0px solid #E6E6E6;}
.Fadeout {filter:alphaundefinedopacity=100);opacity: 1.0;border:0;
}
.Fadeout:hover{filter:alphaundefinedopacity=80);opacity: 0.8;border:0;
}
</style>
<br /><div class="table"><table>
<tbody><tr>
<td><div class="subicons">
<a class="Fadeout" href="http://www.facebook.com/acozylittlehouse" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBdsOG5jBbj-YBEdMgRsEp4oytXd-bXrsOQ8sgVnemi56i93vMAc15lLlib0kcLwf35qRo0RP7qNo0t9YYLVmY2TZH_8xMEBwB5sHFpimEbCYn5yoCfvoFT3lsXtw0xrDuAMuhOPWeOPo/s1600/btrix-facebook-icon.png" /></a></div>
</td><td><div class="subicons">
<a class="Fadeout" href="http://twitter.com/cozylittlehouse" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhse6dLM2wyGXfqjdBEw1uHCVQUjnOVfI01fBq_fceAbcLL8Dph16d-GdqrSq7CsyutYSrkasOGnSCiw59nkZ_M69a5ERRPxRVQylnjkUPQTIS8GdNBgSh9p7Avx6TQVsQVbvbM2_6c9h0/s1600/btrix-twitter-icon.png" /></a></div>
</td>
<td><div class="subicons">
<a class="Fadeout" href="http://feeds.feedburner.com/blogspot/KxqG" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AN7_Tf9s4FBXj5WLe6rW-gqGLjLeosg0S3z2cFd4BXY9CI7KOQLHsfUF31h8pb0Y8wZ1WlCzLV6SrO1WFqDTbqS5c-yCnf2x4o6BnERoMNuuElygMuv_HDfmLHyiYw7qO6NCx5q6B0E/s1600/btrix-rss-icon.png" /></a></div>
</td>
<td><a class="Fadeout" href="https://pinterest.com/brendak" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6z8gAoTigcgn-kIney2BkdPQu3Xq2q3CnOCPqYAn7gAgm7-OWP-sHH53TCROpA3vV4dl7lxX5S1aFuJYV6pAY6n4sfqP7WbuYD0LtoVmR1cvLhavSxJxxYJwgmrVTgZOQi59s5uAEHm4/s1600/btrix-Pinterest-icon.png" /></a></td>
</tr></tbody></table></div></div>
I'm pretty certain I caught all of my code, but after looking at it for so long, you kind of get cross-eyed!
I redid the info I got from Blogger Trix.
Below is the specific link to the tutorial. So if you have trouble with mine, you might go over and read theirs to see if it is simpler or more clear to you.
http://www.bloggertrix.com/2012/06/add-social-media-share-widget-with.html
That's it!
{NOTE: When I come across something to add to this blog, I have to rework it and often it ends up not working with the current Blogger code. It is hit and miss. Yesterday I tried six different kinds of tutorials to put here, and the one above was the only one I got to work. Please remember I might not have a tip on here every single day. Because I won't put it on here until I have gotten it to work on my own blog.}
Below is the specific link to the tutorial. So if you have trouble with mine, you might go over and read theirs to see if it is simpler or more clear to you.
http://www.bloggertrix.com/2012/06/add-social-media-share-widget-with.html
That's it!
{NOTE: When I come across something to add to this blog, I have to rework it and often it ends up not working with the current Blogger code. It is hit and miss. Yesterday I tried six different kinds of tutorials to put here, and the one above was the only one I got to work. Please remember I might not have a tip on here every single day. Because I won't put it on here until I have gotten it to work on my own blog.}
Want To Get Each New Post Emailed To Your Inbox?
Brenda, thank you for starting this blog. I am new to blogging, using blogspot. When I started I didn't know any thing, I learned by making mistakes and having to redo several times. I am still learning what the names, references mean. I may attempt my first css or html soon, but first I feel I need to understand what that means??? thanks jackie over at www.gr8tfull.blogspot.com
ReplyDeleteHi Brenda,
ReplyDeleteI love this blog. I will be adding the media feature soon and I hope you will keep writing this blog for folks like me...I love to blog as a hobby, but I will be signing up to BlogHer on Monday if they will have me. Thanks again. Betty @ My Cozy Corner