The widget I'm sharing today is for both WordPress and Blogger. It suits for WordPress blogs as well as Blogger blogs. This widget has all social profiles buttons and following links, also it has an awesome email subscription box. As you know for a new blog, social media counts and email subscribers are the important things in order to get attention from the advertisers and from the search engines. Therefore, I decided to share a cute email subscription box along with all social media profiles/pages including Facebook,Twitter, Google+, Pinterest and RSS. So it is all you needed for your blog. Now people will follow you easily on the social media and also will subscribe to your blog's RSS feeds.
Adding this widget to blogger and WordPress is very very easy with our tips. So I don't want to take your much time for the procedure of adding this widget into your WordPress or blogger blogs. Just follow the given tips below and install the widget on your blogs.
How to add the widget into blogger?
For adding this widget into your blogger blog follow given steps below:- Go to Blogger Dashboard
- Layout >> Add a Gadget >> Select HTML/JavaScript Widget
- Copy below code and paste it inside that widget
<style>
.oubar{width: 100%; float: left;}
.oubar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.oubar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.oubar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.oubar .subicons a{text-decoration: none; color:#333333;}
.oubar .subicons a:hover{text-decoration: underline; color:#333333;}
.oubar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiyK2T1aHlOYY8dE7arMcTppcT2dCmV9xff81DWaN5L_6Jvk4FNJOdHt9qLkv7W_vihQV5Ml9qMcR7XoM4f-iOaRUv2BE3QtgCGVKe3pAtS2Gm-RK9tY5ZT-3dgjmiMC5swNNElDb77Gg/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqFcZmBkKJCb-dbHmhC_IdUkRxxp5mjNUedfFeQimG_Cm4syU6sNdHIEi9gmAYb_89ohudRxJcqCilhzzoMj7E8tPcLOPR8fWO_9_csu4K9XTWjmuAGwq2Iiiiekym6wCZ3LiYwW1qI4/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .picon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbuTIRVpaS0eCYVtXFVcTVHYbTRbeU5YOIux8TXKy4k0Lr_ChQOjQJ72vv4GUgh2Ev5R5wR6Gzn-vJLj2QVen-UKrfqeIaLNlh7kzgzo5mX-oDZSqjYUkh9KwxtuGfFCnWoOSPHubxSwo/s1600/pinterest.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .gicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDrjpRpL11_UzufhFWoJ3VwAndw9B14kZMUJA9JLx-d3qz6QcsAWUwhTX2vNAAieDFUrwtZogal3UNunv4gkn5c4kCLS7aPhV-HhU9eA_xW4m0S1ePN4UpZ5K5CFAXI1RALbkS37gwM4w/s1600/google-plus.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGtj2u6NdMMZJSmtQRNQEbVoabvht7rf8pSBrJM66YRk2gLfbM-Tz0Rx1FaZYcT-anoB7bAuStpaoJGZQHp2tEmgldIOeNHoxPHPxQ4x4B5qI7iQ8UO69KaWFgF4LU1cicTBiL74_q1Bo/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.oubar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.oubar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIUMLE919uhXoH9qgBeUdW_5NnmimLmVlG19SmWQUn27psVJj3ZmZGKzOrvUYs_g1kehwHwBEw7clkwiTcsxPuzaeQFiP9DZ5O_uCh_x1f7VH1xB0XwF6zGstiPsVsCfCE3NsEfAu8Jc/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.oubar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.oubar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.oubar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.oubar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.oubar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="oubar"><div class="count">Join <span class="bigcount">100+</span> People Following BBC</div>
<div class="subicons"><div class="gicon"><a href="https://plus.google.com/u/0/108628318516871549001" target="_blank">Google+</a></div><div class="picon"><a rel="nofollow" href="http://pinterest.com/abdulwali/" target="_blank">Pinterest</a></div></div>
<div class="subicons"><div class="rssicon"><a href="http://www.bestbloggercafe.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/BestBloggersCafe" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/onlineustaad" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == '') {this.value = 'Enter your email...';}" onfocus="if (this.value == 'Enter your email...') {this.value = '';}" type="text" /><input value="BestBloggersCafe" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form>
</div></div></div>
- Save the widget and you're done. Now you'll just have to make some changes.
How to add this widget to WordPress?
The process of adding this widget into WordPress is more easier than blogger. Just follow given steps:- Log-in to your WordPress Dashboard
- Go to appearance >> Widgets >> Select a Text Widget
- Copy above code and paste it inside the text widget
- Save the text widget and all is well
Customization:
Now here are some important customization you must make. I will point you to the necessary changes:- The first orange color text is the text, which you can replace to your own blog's text. I mean how many subscribers and followers you have write them there.
- https://plus.google.com/u/0/108628318516871549001 this is the link of Google+ just replace it with your own by visiting your profile on Google+ and copy the link.
- http://pinterest.com/abdulwali this link belongs to my pinterest profile, so just go to your pinterest profile and copy the link from the browser address bar and replace that with this.
- www.bestbloggercafe.com replace this green color address with your blog.
- http://www.facebook.com/BestBloggersCafe replace this with your Facebook page URL.
- http://twitter.com/onlineustaad this is the URL of Twitter, replace it with yours.
- http://feedburner.google.com/fb/a/mailverify?uri=BestBloggersCafethis should be replaced with your feeds URL. Just go to Feedburner.com and get your feeds address. Or in Blogger simply add a widget called "follow by email" that will create the address automatically for you.
- BestBloggersCafe this will be only replaced with your feeds address name which comes at last of your feeds' address.
Post a Comment