Add Stylish Email Subscription Box In Header With Social Icons

Till yet , we have been sharing many cool, stylish and popular widgets in blogger which are world widely used by famous bloggers and are the demands of many newbies. Today, we are going to share another awesome widget with you which is Stylish Email Subscription Box In Header With Social Icons. This is the best widget to make your visitors your loyal subscribers within no time. Its place is Header so, every visitor's eye can catch it easily and they will subscribe to your blog. You can also see the same widget on our blog in the header, so we always loyal content with you :).

• Also Read : Facebook Pop-up Like Scrolling Widget For Blogger

What's Special In It ?

This is the stylish and clean header email subscription widget in which social buttons or icons are also available for increasing social followers. This widget is divided into two sections. Left portion of this widget is having subscription form where Name and Email field are implement along with the subscribe button. Heading and a little spam message is also available in that area. While right portion of this widget is having the social buttons which are Facebook, Twitter, Google+, Feed burner and Pinterest. This widget will surely rock because it will be located at the header area and that's the most prominent place of catching visitors attention.

• Don't Miss : Google Search Engine Optimization eBook 2013

How To Add This Widget ?

Well, I have told you some of the quality aspects of this widget now its turn to add it to your blog. Following is the method to add it

• Go to Blogger >> Layout >> Add a gadget (In the header area)
• Chose HTML/JavaScript and paste the following code in content area

<style>
 #byard-topsubsbox {background:#fff; width:940px!important; height:90px!important;margin-top:20px; padding:10px;box-shadow:5px 5px 5px #ccc; border:1px solid #ddd;overflow:hidden;}  #subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 168);padding-right: 56px;margin-top: -10px;padding-top:9px;}  .subsbox-heading {font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}  .topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMEiXnBK5Xrl1k_bcoAD2IjP_M9kgznv_aNHBuJWFUs8eMXScV9gmYvP3HRkxvUg1sPHjOKfsmdoSVOjwUK7D9GBKFO26ebagS3TAff1vJ1BbXmGLqD6TY3e81Cs4uDRqCFCViscnKZg/s320/name.png) no-repeat 7px 8px;border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px; margin-top:10px; height:24px; padding:5px 15px 5px 28px; vertical-align:top; display:inline-block;margin-left:15px;}  .topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdrKtD4_hYWYOaIdgmxWqSmKfi_P0YRcEZwHTCZ35NQsi1935Z4tNX0Owk-e6JfTAgGTDodZ_A04Xrq8jFzBjJLsmcjS8uwHjhaA6j_o8j8d7puWxNroqs2TbsCORiZBCwEJHEHVyw6E/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-left:5px; margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; display:inline-block;}.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00B3FF&#39;, endColorstr=&#39;#349ECB&#39;);background-color:#00B3FF;  margin-top:12px;  margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;padding:6px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#349ECB&#39;, endColorstr=&#39;#00B3FF&#39;);background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;}  #socialsection {float:left;margin-top:20px;}  .socialheading{font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:right;margin-right:20px;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}  .socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}.socialicons li:nth-child(6) {padding: 0;}.socialicons li a img{height:49px;width:49px}</style>
<!-- Top Subsbox By Www.ProBloggersCafe.Com Start --><div id='byard-topsubsbox'><div id='subscriptionsection'><div class='subsbox-heading'>Subscribe For Free Updates!</div> <form action='http://feedburner.google.com/fb/a/mailverify?uri=ProBloggersCafe' class='byard-subsbox-form' method='post' target='_new'>  <input class='topsubsboxname' name='name' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Your Name&apos;;}' onfocus='if (this.value == &apos;Your Name&apos;) {this.value = &apos;&apos;;}' value='Your Name'/>  <input class='topsubsboxemail' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Your Email Address&apos;;}' onfocus='if (this.value == &apos;Your Email Address&apos;) {this.value = &apos;&apos;;}' value='Your Email Address'/>  <input class='topsubsboxbutton' type='submit' value='Sign Up!'/> </form>  <p style='margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>We&#39;ll not spam mate! We promise.</p>
  </div><div class='socialicons'>  <div class='socialheading'>Become Our Fan on Social Sites!</div>
<ul><li><a href='https://www.facebook.com/ProBloggersCafe'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MdGnZsFP18Fh6lcDvUcIkXuChyphenhyphenoE9vHgZyqhpNlUrsEczf5YJXdkTD9SelzOBwmul03n9bpGesVKXZlSc4D3n_DWQ3UEkReAVpuIA3fdWanFVo7_dIxOS54rGdc-7O9nXFifKC7j7k0S/s1600/facebook_64.png' title='Facebook'/></a></li><li><a href='https://twitter.com/ammarkn98'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIp5DT4aqVsnpyG-GbrF5sSCmIX_VRG3fzIGZXPBM2NHvkLBJYZKHzCYnc-l3SHWTKxzAGDDrbDBuGOLdefGTpNUq7NmOuF_dZ_OZRJAs-0MKWs1vAYFfIQEW1J66P2_H2lVGSEePSWGi1/s1600/twitter_64.png' title='Twitter'/></a></li><li><a href='https://plus.google.com/101996924620264617682/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuOmes4_PXobHaqsfwvSYTLd1SKSnRTQ5oxLe47oGm2XcJj1W9czZJl7obqLWaC8KF5MmBERWzYu1mhyphenhyphenjgQ38u6oqNocwDeX9WVHntEqLs8P8Pnb6jFNGIzUVgZKV-akwBkg012jagS-ix/s1600/google-plus_64.png' title='Google +'/></a></li><li><a href='http://feeds.feedburner.com/ProBloggerscafe'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_YtbY4t7XkbPQmQsp6S1I4Nyj_dgPDBOvLuHB7D7JMRBpkvJtfBNgb3VQ6ozX5GFpCctudWDy2asZlkdEBMGZa30Z3I_RgctmI4hbJDLcirE84srPj3YLOgYljAefKUR6UMOXp_40-w0/s1600/rss_64.png' title='Rss'/></a></li><li><a href='http://pinterest.com/yaqoobhisbani/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlzfH0LCag80HKxHuFGOQbayJKhclVr11OPL0CIZtVXRsyUiH9SWeR9Uh-eJxosyA5i4YbSuYY7o71-lD_N52NNW3kg0owih_s71RTGt4-s6wz6odI6AEOJuwdabOnelBUyS4Lsoy_m8dE/s1600/pinterest_64.png' title='Pinterest'/></a></li></ul>  </div>    </div><!-- Top Subsbox By Www.ProBloggersCafe.Com End -->

• Replace the highlighted URL's with yours
• Click "Save" and you are done !

 Your Turn :

Today ! we have shared a worth using widget for you. Now, its your turn share thoughts and views about this widget with us. Comment below if you have any problems or queries regarding this widget and let us know if you have some better ideas or widgets of this type. Till Then Happy Blogging ........ Roger And Out !

Read More

Facebook Pop-up Like Scrolling Widget For Blogger

In the world of blogging widgets have always got a high priority and infact they are considered the top source to bring traffic to your blog. Widgets are very important as they allow people to like your content and share it easily with other people. We, have always shared quality and useful widgets with you and once again today following out tradition we are going to share a nice widget with you which is name as Facebook Pop-up Like Scrolling Widget.

Something Special In This Widget

As social media is the top source for getting free and targeted traffic so today's widget allows your readers to show your content on Facebook with other people and surely it brings more traffic to your blog.

Some Functions Of It :

• It has scrolling feature that lets it to Round UP and DOWN with the movement of Mouse Pointer.
• It loads Faster and appears in seconds within the page opening.
• It has an attractive style which catches the visitors attention to Like
• It doesn't get bored any visitor because of its hiding feature that is found at the Top Right corner of the pop-up
• The most important thing in this is the close-up to the number of your page likes (If you've more than 1000 likes, you've more chances to get Likes)

How To Add This Widget On Your Blog ?

1. Sign in to your blogger account and the select the blog for which you want to add this widget in.
2. Go to Layout >> Add A Gadget.
3. Select Html/Java Script from the Pop-up tab that appears after clicking on Add A Gadget. Another Pop-up window will open.
4. Paste the below code in the new pop-up window
   

<style type='text/css'>#KBTricksFBpop {position:fixed !important;position:absolute;top:-1000px;left:50%;margin:0px 0px 0px -182px;width:300px;height:auto;padding:16px;background:#FEFEFE;font:normal Dosis, Georgia, Serif;color:#111;border:2px solid #333;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#KBTricksFBpop a.kbtricksclose {position:absolute;top:-10px;right:-10px;background:#fff;font:bold 16px Arial, Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#000000;border:2px solid #333;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:25px;cursor:pointer;}</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type='text/javascript'>$(window).bind("load", function() {// Animate Top$('#KBTricksFBpop').animate({top:"50px"}, 1000);// Widget by www.kbtricks.com$('a.kbtricksclose').click(function() {$(this).parent().fadeOut();return false;});});</script><div id='KBTricksFBpop'><!-- Widget by www.probloggerscafe.blogspot.com Start --><center><b><a class="KBTricks">Don't Forget To Join With Our Community</a></b></center><center><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FProBloggersCafe&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center><!-- Widget by www.probloggerscafe.blogspot.com End --><a class='kbtricksclose' href='#'>×</a><center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="www.probloggerscafe.blogspot.com/2013/07/Facebook-Scrolling-Like-Box-Widget.html">Pro Bloggers Cafe</a></center></div> 

Note : Change ProBloggersCafe According to your Facebook Fan Page username.

Your Turn :

We shared an immense widget for you today. Please give it a try and we hope it will really amaze you. Now, please let us know about your thoughts and reviews about this gadget via the below comment section. Till Then Happy Blogging .... Roger And Out! 

Read More

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is 

Features of this Widget

• Flat UI colors used (it will attract users attention)
• Automatic Post Numbering
• CSS3 Hover Animation 

How To Add This Widget ?

Sign in to your blogger account and add Popular Post Widget

First Add Popular post Widget to Blogger

• Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
• Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save 
• Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>

Copy the following code and Paste just above it

<!-- Popular posts multi colored UI theme -->#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}#PopularPosts1 img{-moz-border-radius: 130px;-webkit-border-radius: 130px;border-radius: 130px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;padding:4px;border:1px solid #fff !important;}#PopularPosts1 img:hover {border-radius: 0 0 0 0;-moz-transform: scale(1.2) rotate(-711deg) ;-webkit-transform: scale(1.2) rotate(-711deg) ;-o-transform: scale(1.2) rotate(-711deg) ;-ms-transform: scale(1.2) rotate(-711deg) ;transform: scale(1.2) rotate(-711deg) ;}<!-- popular posts multicolored UI theme -->

• Click on Preview Template (You can see the template without saving)
• Save the Template. 

View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.If any problems with this trick don't hesitate to ask, do comment here...

Read More

How to Add an Animated Ramadan Lantern Widget in Blogger

Have you ever thought about decorating your Blogger Blog with something especial on the glorious occasion of Ramadan? The ninth month of the Muslim year, in which strict fasting is practiced from sunrise to sunset.Today in this article, we will show you how to add an Animated Ramadan Lantern in Your Blogger Blog.

How It Works ?

If you are curious to know how this widget looks like, then scroll back to the header of “ProBloggersCafe” and you would notice a Lantern spinning in both directions up to 180 Degree in a motion with a glowing Ramadan Kareem text written in Arabic. Below we have attached an image preview just in case if we make a decision to remove it in the future.

Note: This Animated Ramadan Lantern is built with Adobe flash so if anyone who is running a browser without Flash would remain unable to see it working. However, nowadays, everyone is running on Smartphones and reliable operating systems like Windows 7 that has built-in Flash Installed, so it would certainly not create any big issue of compatibility. 

Since, you are adding it through Iframe so it would not consume a lot of memory of your site. In other words, it is pretty light-weight and hardly effects the speed of your website.

How to Add Animated Ramadan Lantern in Blogger?

The First thing you need to do to is go to Blogger.com and login into your Google Account. After logging in, you will be redirected to Blogger Dashboard. Now go to Your Blog >> Template >> Edit HTML and search for the ending </body> Tag. On finding the tag, just above it paste the following piece of code.

<!--  Ramadan Lantern By Probloggerscafe.blogspot.com --><div align="center"><table border="0" width="900" cellspacing="0" cellpadding="0"><tr>
<td width="900" height="0"><div style="float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="192" height="144"><param name="movie" value="http://mybloggerlab.com/Scripts/stardima.swf"/><param name="quality" value="High"/><param name="wmode" value="transparent"/><embed src="http://mybloggerlab.com/Scripts/stardima.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="192" height="144" quality="High" wmode="transparent"></embed></object>   </div>  </td> </tr> </table></div>

Congratulations: Once everything is done, simply press the “Save” button and Animated Ramadan Lantern is ready, and good to be live on your website. Now go and check your website to see the Animated Ramadan Lantern in your Blogger blog.
We hope this widget would help you in decorating your blog with something new in this Ramadan. Please, test it on your blog or websites and let us know what do you think about it? Let us know about your thoughts by leaving a comment below. Lastly, do not forget to help us out by spreading the word.
Remember: This gadget is not only for Blogger users. Any platform that supports HTML and Flash could easily implement this on their websites including WordPress and etc.
Happy Blogging ... Roger Out !

Read More

Add Facebook Activity Feed Plugin Widget To Blogger

Few days ago we shared the Facebook Floating Like Box Widget in Blogger which was well appreciated by our loyal readers. So , I decided to carry on the series and today I am going to share worth another Facebook Plugin Activity Widget. This Facebook Plugin appears on the right side of the blog along with all of the recent activites. By using this widget , you will see a dramatic increase in your blog page views and it will also enhance your blogg's readership. The biggest advantage of this gadget is that it shows all the recommended posts on your blog. So , in this tutorial we will tell you how to add Facebook Activity Feed Plugin Widget To Blogger. Its very simple and easy

Read More

All Social Sharing Buttons Floating Widget For Blogger

Blogging becomes interesting when people share your content on different social media sites and other websites with friends. In order to share your content on social media sites by visitors; you need to add some beautiful and smashing social sharing widgets. If your widget is looking attractive and catches people’s attention then your content might get shared by visitors. For this purpose, there has been a huge number of Blogger widgets and plugins by different designers. Today, I would like to share a floating social sharing widget with you which scrolls down automatically when visitors scroll down the page. You can see this widget on my blog. The same widget I’m sharing with you.

Read More

Add Facebook Floating Like Box In Blogger

Hey Guys ! Today I will share with you how to add a cool facebook floating like box in blogger so , that your visitors also get connected to your facebook page as it will be good for them and as well as for you.

Facebook floating like box is very easy to use. You might also have seen it on various blogs/websites and you may have wondered adding it to your own blog. So today , I will be fulfilling your dream. Adding this widget to your blog gives it a more beautiful and professional look , and infact makes it easy for your visitors to stay connected with your blog via Facebook.

Read More

How To Really Write Killer Blog Posts To Attract More Visitors

While having a catchy headline results in getting more people to click on your link in search engine result pages and social media feeds, but having a good title only cannot do anything alone.

You need to feed your readers as much as you at the best quality possible. Hence, its must for you to write killer posts for moving up at the ladder of success. Writing killer posts is not as hard as it may seem and for doing so, here are few simple steps to be followed that are unfolded below.

Read More