So in this post I will show in easy steps how to add the subscribe widget to your blog.What is unique about this widget ? I like the icon design with the 'Speech bubble' type style, we also have the name of each service below and finally an opacity hover effect.
OK, for those that can transfer the code you can check out the jsFiddle page here, this can also serve as a demo.Some of the things I added to this were unique Email feed and Pinterest icons, as I just quickly created the images they are not transparent and so wont look great on a dark background.
Lets look at the tutorial.
Add The subscribe Icons Gadget To Blogger
Step 1) In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The Code below :
<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFaYTUr_N6ZsmEaD0pTGm3amxv7zfPNQuslFjQoJRVde8LkozHPHac1qyH3DhIHTHRladvX2Ra5urxfT6lDRAj2suF3NcJcmNmTKeJJDaKzz4QsZkhY1I6hwQ-HocYSppqMejYJDypal4/")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJy6RKlQSOftyyc2oAtSCjgaqTqQmucLSMUhCBB-Bln6weLH-sXPUJ-GKCQ7_omTN419Z84TUuql_cAaUei-pU51asZ-lOTA2nvxfJ33h7u6UxhCBy5M8ulBjPYY2bEmpKr-AfAjbisI3/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2Yj855euj7oHNqzElSHOH8SJFD64dwxUH5pKhYcQISPB4L27NDZfFUrrZWctsJacPUTZ0vreQcUOEMCEanb7ORELdJGaU0gZzocbeGcUhZFHXNcrMLDXoVZSc-EGjG0aiwZ2HBG23VBI/")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DcpS1ekvQ0v7nYQj8I7uBqU3wDkN8EJpweMG-EmyxjLSA1lF-NbXrabMkqHKyQlmdBn52eyQHEPH1_yx-B-6OGCXrrUyCHIbzuxVJWAMk_CAiXRKmWKbyCOXZ3QG4XHAS5CVW53-m5RQ/")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZtfk4bsF1kgBGgdeFwhF5zDzGsZDEYGP94dPIGKqxkkwnDqWLaDKDfZkRhchrHbdf4Ows5i8_GiBhlKOX80EMLBfaxRgWYCb2u1H9cmMMinmHqu56yH_MBIEYEAJGS2JCCz2ONrxynEK1/")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpMtqyZRO6uS4x5xWTrTgzFktB4I44fmpa0PE4LQgAriW3Qt_FNwBZKqO6FoIBzbac4tKdk6I3rYH732yUcVJsZjvzXtW5Tr5ijGyhYjD4RA7t_tDBMJcfMrX63hNSoG3iR7QBusYBT8K/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.spiceupyourblog.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/createtheblogger' rel='nofollow' target='_blank'>RSS</a></li>
<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=CreateTheBlogger&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href=' http://twitter.com/createtheblogger ' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' http://www.facebook.com/pages/Help-for-bloggers/356213321125194 ' rel='nofollow' target='_blank'>Facebook</a></li>
<li><a class='social-pinterest' href='http://pinterest.com/createtheblogger' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/b/108200902911276741668/108200902911276741668/posts'>Google+</a></li>
</ul><small><a href=" http://createtheblogger.blogspot.com/ ">Blogger & Wordpress Widget</a></small>
Important Notes : The social and feed links are highlighted in yellow, you need to change these to your own.
For the Email Rss you only need to add your feedburner ID, as you can see above mine is 'SpiceUpYourBlog'.Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/myblog with myblog being the ID.
1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code:For the Email Rss you only need to add your feedburner ID, as you can see above mine is 'SpiceUpYourBlog'.Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/myblog with myblog being the ID.
Add The subscribe Icons Gadget To Wordpress
<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFaYTUr_N6ZsmEaD0pTGm3amxv7zfPNQuslFjQoJRVde8LkozHPHac1qyH3DhIHTHRladvX2Ra5urxfT6lDRAj2suF3NcJcmNmTKeJJDaKzz4QsZkhY1I6hwQ-HocYSppqMejYJDypal4/")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJy6RKlQSOftyyc2oAtSCjgaqTqQmucLSMUhCBB-Bln6weLH-sXPUJ-GKCQ7_omTN419Z84TUuql_cAaUei-pU51asZ-lOTA2nvxfJ33h7u6UxhCBy5M8ulBjPYY2bEmpKr-AfAjbisI3/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2Yj855euj7oHNqzElSHOH8SJFD64dwxUH5pKhYcQISPB4L27NDZfFUrrZWctsJacPUTZ0vreQcUOEMCEanb7ORELdJGaU0gZzocbeGcUhZFHXNcrMLDXoVZSc-EGjG0aiwZ2HBG23VBI/")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DcpS1ekvQ0v7nYQj8I7uBqU3wDkN8EJpweMG-EmyxjLSA1lF-NbXrabMkqHKyQlmdBn52eyQHEPH1_yx-B-6OGCXrrUyCHIbzuxVJWAMk_CAiXRKmWKbyCOXZ3QG4XHAS5CVW53-m5RQ/")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZtfk4bsF1kgBGgdeFwhF5zDzGsZDEYGP94dPIGKqxkkwnDqWLaDKDfZkRhchrHbdf4Ows5i8_GiBhlKOX80EMLBfaxRgWYCb2u1H9cmMMinmHqu56yH_MBIEYEAJGS2JCCz2ONrxynEK1/")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpMtqyZRO6uS4x5xWTrTgzFktB4I44fmpa0PE4LQgAriW3Qt_FNwBZKqO6FoIBzbac4tKdk6I3rYH732yUcVJsZjvzXtW5Tr5ijGyhYjD4RA7t_tDBMJcfMrX63hNSoG3iR7QBusYBT8K/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.spiceupyourblog.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/createtheblogger' rel='nofollow' target='_blank'>RSS</a></li>
<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri= CreateTheBlogger &loc=en_US'
rel='nofollow' target='_blank'>Email</a></li><li><a class='social-twitter' href=' http://twitter.com/createtheblogger' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook'http://www.facebook.com/pages/Help-for-bloggers/356213321125194' rel='nofollow' target='_blank'>Facebook</a></li>
<li><a class='social-pinterest' href='http://pinterest.com/createtheblogger' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/b/108200902911276741668/108200902911276741668/posts'>Google+</a></li>
</ul>
<small><a href=" http://createtheblogger.blogspot.com/ ">Blogger & Wordpress Widget</a></small>
Important Notes : The social and feed links are highlighted in yellow, you need to change these to your own.
For the Email Rss you only need to add your feedburner ID, as you can see above mine is 'SpiceUpYourBlog'.Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/myblog with myblog being the ID.
That's it hopefully this widget will get you some more new subscribers !
No comments:
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =)) Grab Smily Gadget
Post a Comment