Connect with Me Widget
Like my Connect with me Widget? It's based on the one found at TopProducer.com. I modified it a bit to add a Goodreads and Google+ badge - as well as the email button.
To use: Copy and paste the html below into a text editor window - find all of the text surrounded by brackets ([]) - here they are highlighted with red text - and replace with the applicable information. You can also add and remove stuff, change text and styling and so on. Then paste the update html into a HTML widget on blogger.
Note about Google+ - Go generate a badge widget - you will need both links provided there.
<!-- START SMW (http://www.topproducer.com/campus/websites/design-request/social-media-widget-creator/) -->
<!-- IMPROVED by KRISTA WAYMENT (www.kristawayment.com) -->
<link href="[Google Plus Link 1]" rel="publisher" />
<ul id="socialbar">
<li id="feed">
<a target="_blank" href="[Feed Link]"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/feed.png"></a>
</li>
<li id="twitter">
<a target="_blank" href="[Twitter Link]"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png"></a>
</li>
<li id="goodreads">
<a target="_blank" href="[Goodreads Link]"><IMG src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRaB4ZsqvZwr3_IZ4soPOV5K33Smfqzv7O_TnOP4gvbIlvg_cu6Zg"></a>
</li>
<li id="facebook">
<a target="_blank" href="[Facebook Link]"><IMG src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png"></a>
</li>
<li id="googleplus">
<a target="_blank" href="[Google Plus Link 2]"><IMG src="https://ssl.gstatic.com/images/icons/gplus-32.png"/></a>
</li>
</ul>
<form><div style="text-align:center"><input type="button" value="Send an Email" onclick="location.href="mailto:[Your Email Address]"/></div></form>
<div style="text-align:center;"><a href="http://itakethepen.blogspot.com/p/connect-with-me-widget.html">Get this Widget</a></div>
<style>
#socialbar img {border:0px;}
#socialbar li img {width:32px; height:32px;}
#socialbar li a:hover {position:relative;top:2px;}
#socialbar{padding:0px;list-style: none outside none; margin:0px; position: static;}
#socialbar li {display:inline;padding-right:0.5px;padding-left:0.5px}
#socialbar{width:200px;text-align:center;}
</style>
<!-- END SMW -->
Subscribe to:
Posts (Atom)
Awesome! I'm a newbie blogger and this worked perfectly for me! Check out my blog if you get a chance: http://momonthegrind.blogspot.com. Thanks again for the great instructions!
ReplyDeleteThanks Charlotte - I am glad it was helpful :)
ReplyDeleteI really love this widget. I'm a novice blogger myself, but I'm going to try to learn some html code on the fly eventually to spice my blog up further, and I have one question:
ReplyDeleteHow would I go about adding additional services? For instance, many blogs now have a Pinterest link. I may experiment with this on my own time over the next few days, but any help you could offer would be most appreciated, and thanks so much for sharing this widget with us!
Mike - I actually added the Google plus link to the widget myself.
ReplyDeleteBasically what I did was use google plus's link generator to get the link for the button. Pinterest should have something similar. Then I found an image for a google plus button that I could access through the web and was the right look and size. Then I copied one of the other services and replaced the image and the link.
So that is where I would start. If I have time I will play around with it and get back without if I find a pinterest specific implementation.
I've been playing with it myself, and once I recognized the patterns in the html code, I was able to add an icon and link for Pinterest as well.
DeleteI appreciate the very quick reply, and wanted to let you know that you don't need to spend the time, assuming you have plenty of other projects to work on.
Thanks again for this great widget!
You should try amispace custom Google Plus Profile widget creator to generate Google Plus widget code for your blog or website according to your own style. It generates a custom google plus profile badge which also includes +1 button and follow button.
ReplyDeletehttp://amispace.com/create-custom-google-plus-profile-widget/
Thanks for your widget -- wonderful. I do have one small problem. The image for the goodreads is coming through as broken. The link itself works - just not the image button. :(
ReplyDeleteThis happens every now and then. I often have to go in search of a new image. Here is a link to one I found. I've also updated the widget: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRaB4ZsqvZwr3_IZ4soPOV5K33Smfqzv7O_TnOP4gvbIlvg_cu6Zg
Delete