Widgets Computer IT Help 86 | Best Urdu & Hindi Tutorials

Cute Flying Bird Twitter Widget for Blogger

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px; text-align: justify;">
<a href="http://www.bestbloggercafe.com/wp-content/uploads/2014/04/twitter-bird-widget.png" style="color: #349ecb; text-decoration: none;"><img alt="Cute Flying Bird Twitter Widget for Blogger" class="size-full wp-image-524 alignleft" height="200" src="http://www.bestbloggercafe.com/wp-content/uploads/2014/04/twitter-bird-widget-e1396594462586.png" style="border: none; display: inline; float: left; height: auto; margin: 0px 20px 10px 0px; max-width: 100%;" title="Cute Flying Bird Twitter Widget for Blogger" width="200" /></a> As you know guys blogger blogs look really cool when you add some beautiful widget to it. Specially social media widgets are now liked by everyone. They make a difference in blog design. And blogger blogs are entirely easy to customize. You can add any widget in minutes. Twitter is also a popular social media website, which's widgets are awesome in design. There is a widget in which a cute bird is flying which flies all the time when a visitor scrolls down or up the page. This widget has the sharing link as well as the follow link in it. Now lets start adding this beautiful widget to your blogger blog. <span id="more-522"></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
But before adding this widget to your blog, just have a look at it's demo. Because you should clearly know what we are trying to add: SEE DEMO</div>
</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
How to add Twitter Flying bird Widget to Blog?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
Now tips are straight forward and won't take less than 2 minutes to add it to your blog. Follow few steps below to add this widget to your blog:</div>
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<ul style="margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Go to Blogger Dashboard</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Template >> HTML >> Proceed</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Search for this tag </body></li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Just before/above </body> paste below code</li>
</ul>
<blockquote style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;">
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'></script></div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<script type='text/javascript'></div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
var twitterAccount = &quot;<b><span style="color: #3366ff;">computerithelp</span></b>&quot;;</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
var tweetThisText = &quot; <data:blog.pageTitle/> : <data:blog.url/> &quot;;</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
tripleflapInit();</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
</script></div>
</blockquote>
<h4 style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #3c3c3c; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 30px; font-weight: normal; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<span style="color: red;">Customization: </span></h4>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
The only customization is: changec omputerithelp to your twitter user name.<b>computerithelp</b> is my twitter user name so therefore you should change it to yours.</div>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
This is very easy to add widget and you shouldn't face difficulties while adding it to blog. However, if you face difficulties then just let me know by commenting below this post.</div>
</div>

Cute Flying Bird Twitter Widget for Blogger

As you know guys blogger blogs look really cool when you add some beautiful widget to it. Specially social media widgets are now liked by ...

Top 10 Security Plugins for WordPress Blogs

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sjtwaPa25uBUlgjTiPud1yjwzH-o86xy_ky3ZKFMYG4VflJNjBXhfCfoM1KNqEQCeWhsnTALvUcmubl0OeO_A3rzspeBqCzY2hS_2xelnjX5sJbmph8TcQy133mvvXO3SuZMeFytT90/s1600/Top+10+Security+Plugins+for+WordPress+Blogs.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sjtwaPa25uBUlgjTiPud1yjwzH-o86xy_ky3ZKFMYG4VflJNjBXhfCfoM1KNqEQCeWhsnTALvUcmubl0OeO_A3rzspeBqCzY2hS_2xelnjX5sJbmph8TcQy133mvvXO3SuZMeFytT90/s1600/Top+10+Security+Plugins+for+WordPress+Blogs.jpg" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Online security is vital for every WordPress blog these days. The increasing security threats are the major problems with the bloggers and the websites. WordPress is the most exercised blogging platform on the internet and most of the bloggers prefer it for blogging.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
So it is better to keep the security vigilant on your webpage or blog to avoid any mishap later. Here are top 10 security plugins that can protect your WP blog from hackers and other security threats. You may use some of these plugins to protect your blog. We are just giving you ideas to share all of these top security WP plugins with you. <span id="more-39"></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px; text-align: justify;">
<a href="https://www.blogger.com/null" name="more" style="color: #349ecb;"></a></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
Top 10 WordPress Security Plugins</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#1. Bullet Proof Security Pro:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
The bullet proof security offers security against all the viral software that are XSS, SQL Injection, Base64 and CSRF etc. This plugin also offers to show the website maintenance page while the  website is under construction. So you can have many protection features while using this plugin.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#2. The AntiVirus:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Protect your webpage from malware and spyware that will scan the website for the viruses. It is easy to use plug-in and has got easy features with light bytes. It also lets you know when it finds virus in your website.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#3. Ask Apache:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
The plug-in gives you complete support to your website on WP, and save it from being attacked from the malware and viruses to occupy the website. It gets updated automatically and helps in stopping malfunctions to disorder the website. Moreover, it protects your Password from being hacked by hackers.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#4. The Exploit Scanner:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
As it says, it scans all the files and data present on the website. It also scans the comments and posts by the external users. It identifies the suspicious activity at once and lets you know about them.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#5. Defensio:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
It is the latest filtering plugin that filters all the files and features going on at the site. It posses features like elaborated statistics, RSS feeds etc.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#6. The Limit Login Attempts:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
This security plug-in refrains the external source to reach to the site after a number of attempts. It blocks that IP address who is involved with the attempting to login to your site. It seems like the most important plug-in for the safety of your LOGIN details.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#7. Sucuri Security:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
This security plugin checks your webpage or blog from every possible present virus. It checks all the spam, malware etc, to strike the website system. It doesn't allow any virus to come over your site.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#8. The WordFence:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
The WordFence protects the website from every corner and with great efficiency. It is the free security plug in that offers firewall, authentication, scanning, DNS security etc. It is indeed the best one of the WordPress. One of the best security plugins which can take overall responsibility of your WP website, I use it myself and it is recommended to you too.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#9. Verelo Blog Monitoring:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
This plugin gives you power to monitor your blog from bad attacks of viruses and other things. It gives attractive features along with SMS notification and email. It saves the blog from malware attacks.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<b><span style="text-decoration: underline;">#10. Security Ninja Plug-in:</span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
This plug in is making sure about taking actions while getting attacked by some spam or virus. It performs 30+ security tests for the blog or web page. It helps effectively in saving you from facing the hacking problem.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
By keeping your WordPress blogs equipped with these plugins, you can surely avoid the hacking and malfunctioned activities. Millions of the people are ensuring their security this way.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<b>For You these helpful WordPress posts are also recommended:</b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<ul style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Make a Mobile Friendly version of your WordPress site </li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Floating Social Media bar for WordPress</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Add custom fonts to your WordPress site</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">How to Protect your WordPress site content</li>
</ul>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Let us know which of these plugins are you currently use? and what more plugins do you want to use for better security of your WordPress websites? Do comment if you got questions.</div>

Top 10 Security Plugins for WordPress Blogs

Online security is vital for every WordPress blog these days. The increasing security threats are the major problems with the bloggers an...

How to Customize Label Widget in Blogger with CSS?

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRaXRzLjXKq3g2dMpn5iA3KyUNdmksDwS6_KmgZvr0fX0LHtnXY_pkyy3FBYp3p9ceOCHtCNFmN2TyMDVv7AWYhIImZ8iSwq5_gPG73VhzFZp-TF4xIKx8IMZ6OTxTB9pWPVR9eipSPk/s1600/How+to+Customize+Label+Widget+in+Blogger+with+CSS.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How to Customize Label Widget in Blogger with CSS?" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRaXRzLjXKq3g2dMpn5iA3KyUNdmksDwS6_KmgZvr0fX0LHtnXY_pkyy3FBYp3p9ceOCHtCNFmN2TyMDVv7AWYhIImZ8iSwq5_gPG73VhzFZp-TF4xIKx8IMZ6OTxTB9pWPVR9eipSPk/s1600/How+to+Customize+Label+Widget+in+Blogger+with+CSS.jpg" title="How to Customize Label Widget in Blogger with CSS?" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<a href="http://www.blogger.com/" style="color: #349ecb; text-decoration: none;" target="_blank">In blogger</a> you can change or customize any widget you want. The labels widget in blogger is by default very simple in almostall templates including custom ones. But, we can change the label widget to a fancy one respectively. As blogger labels are the categories for the entire blog's posts, so they should be looking more attractive and beautiful. And for this purpose today I have a trick to share with you. The trick is some CSS3 codes which will change your default labels widget to a fancy one.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<b>Remember</b>, this trick will only bring best results if you keep the type of labels as cloud labels. Cloud shows all the label links in a box. So this trick will make them buttons. Now let's start adding the widget and the trick.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<span id="more-130"></span></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
How to add a label widget to blog?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
To apply today's trick you'll first have to add a label widget into your blog. follow given steps to add labels cloud widget in blogger:</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<ol style="margin: 0px; padding: 0px 0px 20px;">
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Blogger Dashboard</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Layout >> Add a Gadget >> Scroll Down and Select the Labels Widget</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Add it and select the cloud where it says "<b>Display</b>" also uncheck the box which says "<b>Show number of labels</b>"</li>
</ol>
<div>
Now when you've added the label widget successfully, you can implement this trick on labels. But if you've already added the label widget then you just need to change it to the setting I mentioned at <b>step 3</b>.</div>
</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
How to customize Label widget with CSS3?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
Now the actual part is here, in order to make your label widget fancy and attractive follow below steps and do it instantly:</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<ol style="margin: 0px; padding: 0px 0px 20px;">
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Go to Blogger</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Template >> HTML >> Proceed</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Find <b>]]></b> and just above/before it paste the following code:</li>
</ol>
<div>
<blockquote style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;">
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
.label-size {<br />
float: left;<br />
margin: 0 0 7px 20px;<br />
position: relative;<br />
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;<br />
font-size: 0.75em;<br />
font-weight: bold;<br />
text-decoration: none;<br />
color: #996633;<br />
text-shadow: 0px 1px 0px rgba(255,255,255,.4);<br />
padding: 0.417em 0.417em 0.417em 0.917em;<br />
border-top: 1px solid #d99d38;<br />
border-right: 1px solid #d99d38;<br />
border-bottom: 1px solid #d99d38;<br />
-webkit-border-radius: 0 0.25em 0.25em 0;<br />
-moz-border-radius: 0 0.25em 0.25em 0;<br />
border-radius: 0 0.25em 0.25em 0;<br />
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');<br />
-webkit-box-shadow: inset 0 1px 0 #faeaba,<br />
0 1px 1px rgba(0,0,0,.1);<br />
-moz-box-shadow: inset 0 1px 0 #faeaba,<br />
0 1px 1px rgba(0,0,0,.1);<br />
box-shadow: inset 0 1px 0 #faeaba,<br />
0 1px 1px rgba(0,0,0,.1);<br />
z-index: 1;<br />
}.label-size:before {<br />
content: '';<br />
width: 1.30em;<br />
height: 1.39em;<br />
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');<br />
position: absolute;<br />
left: -0.69em;<br />
top: .2em;<br />
-webkit-transform: rotate(45deg);<br />
-moz-transform: rotate(45deg);<br />
-o-transform: rotate(45deg);<br />
transform: rotate(45deg);<br />
border-left: 1px solid #d99d38;<br />
border-bottom: 1px solid #d99d38;<br />
-webkit-border-radius: 0 0 0 0.25em;<br />
-moz-border-radius: 0 0 0 0.25em;<br />
border-radius: 0 0 0 0.25em;<br />
z-index: 1;<br />
}</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
.label-size:after {<br />
content: '';<br />
width: 0.5em;<br />
height: 0.5em;<br />
background: #fff;<br />
-webkit-border-radius: 4.167em;<br />
-moz-border-radius: 4.167em;<br />
border-radius: 4.167em;<br />
border: 1px solid #d99d38;<br />
-webkit-box-shadow: 0 1px 0 #faeaba;<br />
-moz-box-shadow: 0 1px 0 #faeaba;<br />
box-shadow: 0 1px 0 #faeaba;<br />
position: absolute;<br />
top: 0.667em;<br />
left: -0.083em;<br />
z-index: 9999;<br />
}<br />
#Label1 {<br />
height: 210px;<br />
}<br />
.label-size:hover {<br />
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');<br />
border-color: #e1b160;<br />
}<br />
.label-size:hover:before {<br />
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');<br />
border-color: #e1b160;<br />
}</div>
</blockquote>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
Save your template and view your blog for the changes. You'll find a new stylish labels' widget on your blog.</div>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
Enjoy it and stay peaceful in your country <img alt=":)" class="wp-smiley" src="http://www.bestbloggercafe.com/wp-includes/images/smilies/icon_smile.gif" style="border: none; float: none; height: auto; max-width: 100%;" /></div>
</div>
</div>

How to Customize Label Widget in Blogger with CSS?

In blogger you can change or customize any widget you want. The labels widget in blogger is by default very simple in almostall templa...

How to Add Google+Plus Comments to Blogger?

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhweo1OoIMhhI8qNm-JfqUbT484topLazmy4TY9s9qeSDJ1vO9gSN_0K98dXTOVCKFUxZ7VS8RH05wTpb1jGWQ60FGM5l08b3TitrHaxum0NQDdYiNYe38IpkI3HGMu4FWxWDG33yWMxjo/s1600/How+to+Add+Google%252BPlus+Comments+to+Blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How to Add Google+Plus Comments to Blogger?" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhweo1OoIMhhI8qNm-JfqUbT484topLazmy4TY9s9qeSDJ1vO9gSN_0K98dXTOVCKFUxZ7VS8RH05wTpb1jGWQ60FGM5l08b3TitrHaxum0NQDdYiNYe38IpkI3HGMu4FWxWDG33yWMxjo/s1600/How+to+Add+Google%252BPlus+Comments+to+Blogger.jpg" title="How to Add Google+Plus Comments to Blogger?" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Google has rolled out a new improvement toBlogger commenting system by allowing blogger users to integrate Google+ comments with blogger. This is a major improvement by G+ team and will definitely help blogger users. Now you can have all comments in one place. This is one more indication from Google towards its social network's future, now you can have more comments on your posts after embedding G+ comments to your blog. Enabling G+ comments on blogger is super easy and you don't need to go anywhere or install any extra script. All you can do it straight from your blogger dashboard. But I'm here with snap shoots, which will help you quickly integrate G+ comments with Blogger comments. This comment feature has many benefits which we'll later on discuss on this post, but first we need to learn how to easily embed G+ comments in Blogger. Let's start it.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<span id="more-87"></span></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
How to Bring Google+ Comments to Blog?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
In order to display Google+ comments along with blogger comments, you first need to connect your Google+ profile with blogger, however, this job is done by almost everyone. Now you are seeing a separate G+ link to each of your blog and you need to just click that link as showing in below picture:</div>
<div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
</div>
<div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Zm7MGyB3CQsH35D1_-Y-aS9hn4soKkGiEUcp29STpIde8YQXyXR1B51-PA5N3F0PV2FOrLOOAIBSqjw7txF5gELM-DEn_OpAGSXtHsuBT6fTqXQs43LbbjbecnOmjyDWX6c3sn3g8io/s1600/Google+-comments-for-blogger.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Zm7MGyB3CQsH35D1_-Y-aS9hn4soKkGiEUcp29STpIde8YQXyXR1B51-PA5N3F0PV2FOrLOOAIBSqjw7txF5gELM-DEn_OpAGSXtHsuBT6fTqXQs43LbbjbecnOmjyDWX6c3sn3g8io/s1600/Google+-comments-for-blogger.jpg" style="border: none; height: auto; max-width: 100%;" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
After clicking the "<b>Google+</b>" link which is available in each of your blog, you should be here on below page:</div>
<div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinRBCnDMT-tQbLVZI_2t-lCgTfAVqix01GnbWvSnFDwV1fNci8InpZ3m0DT4ucqpQPUpe4tWmIFpuKdPm_74c6sCbpM83FQkQZsBOMPS8LxPOVtVp0TaRZ_k4OhIlq1NToc4oDbW-HUM/s1600/google%252B-comments-for-blogger1.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinRBCnDMT-tQbLVZI_2t-lCgTfAVqix01GnbWvSnFDwV1fNci8InpZ3m0DT4ucqpQPUpe4tWmIFpuKdPm_74c6sCbpM83FQkQZsBOMPS8LxPOVtVp0TaRZ_k4OhIlq1NToc4oDbW-HUM/s1600/google%252B-comments-for-blogger1.jpg" style="border: none; height: auto; max-width: 100%;" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
Now in above page you can see the "<b>Use Google+ Comments on this Blog"</b> line where you need to just thick the check box as I've highlighted it with red color, Having checked that, Google+ comments will be automatically added to blogger comments. And now your blog will be having two commenting systems like below image:</div>
<div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSrM71U0t5gXlvawYNiZ_2KoHY3pAsTZC9DI0tZTP6QjFSXJGNsfFHffEO7fvpi3SS3AVCPDDr__iMa-Fjca764oMu_ppICuqVEN1uUaQ_be-T3Q8-lREa_4WI9G5ErZ3uzmQXKX_I7rc/s1600/Google%252B-comments-on-blogger2.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSrM71U0t5gXlvawYNiZ_2KoHY3pAsTZC9DI0tZTP6QjFSXJGNsfFHffEO7fvpi3SS3AVCPDDr__iMa-Fjca764oMu_ppICuqVEN1uUaQ_be-T3Q8-lREa_4WI9G5ErZ3uzmQXKX_I7rc/s1600/Google%252B-comments-on-blogger2.jpg" style="border: none; height: auto; max-width: 100%;" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
In screen shoot above you can observe that the blogger comments are showing up below and the Google+ new comment form is also showing above. So people with Google+ profile will be able to comment on your blog directly from their G+ profiles, and they will also be able to share these comments with their circles on G+. This is very interesting contest now.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
Benefits of having these features together?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
There are many benefits of these two commenting systems such as:</div>
<ul style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Visitors will be able to comment from G+ profile and also share their comments on G+</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Visitors can take the discussion to G+ and discuss there with their circles</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">If a post is shared on G+ and that gets comments on G+, these comments will also appear in blogger</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">More people will see your blog posts on G+ and you'll get more traffic</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Google+ and Blogger users will be more closely engaged</li>
</ul>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<b><span style="font-size: medium;">Some Warnings: </span></b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
If you are planning to change your blog's address, for example if you want to switch to custom domain then don't install/integrate G+, you need to first change the address and then use this feature.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<div style="text-align: justify;">
Also, this feature only works properly in Blogger default templates or templates which are having blogger threaded commenting system, in third party or custom templates which don't have threaded system, this feature doesn't work.</div>
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
If this feature doesn't work on your blog then kindly just un-check the box and everything will be back to the default setting.</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
Kindly let me know by commenting on this post that how did you find this new improvement? and have you installed it yet or not? <b>Have a nice day!</b></div>

How to Add Google+Plus Comments to Blogger?

Google has rolled out a new improvement toBlogger commenting system by allowing blogger users to integrate Google+ comments with blogger....

15 Most Popular Blogger Widgets for Every Blog

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_5uVLQjK-7Xran49UmxdF4hnr7vfKX8hSToj1MlCvjQt1cLpMTGIaNdw_QKW2jo4uzq6xMzeHS4F3RcS-zzGqZBaDkkC071l58ROMO0zXmI8Y8-gQxWo7BavbkBpoZe518prNZxu9BvU/s1600/15+Most+Popular+Blogger+Widgets+for+Every+Blog.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="15 Most Popular Blogger Widgets for Every Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_5uVLQjK-7Xran49UmxdF4hnr7vfKX8hSToj1MlCvjQt1cLpMTGIaNdw_QKW2jo4uzq6xMzeHS4F3RcS-zzGqZBaDkkC071l58ROMO0zXmI8Y8-gQxWo7BavbkBpoZe518prNZxu9BvU/s1600/15+Most+Popular+Blogger+Widgets+for+Every+Blog.jpg" title="15 Most Popular Blogger Widgets for Every Blog" /></a></div>
<div>
Blogger.com is an online content management system which is very easy to create a free blog with and start work on. And there are thousands of designers out there who work to make blogger blogs more better and stunning. So I'll be sharing some great stuff with you on this page regarding blogger. I'll share 15 selected blogger widgets which are actually created by different designers, but I'll just point you to the widgets pages and you'll be able to have any of these widgets. This is actually to encourage those bloggers who have shared these great resources with the community. So let's start have a look at these fantastic widgets.<span id="more-54"></span></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
15 Blogger Widgets to have in 2013</h3>
<div>
These widgets will play a major role in your blogging success, because these widgets are mostly used to attract more visitors towards your blog. The list includes social media widgets, subscription widgets, drop down & horizontal menus, Pop up widgets, designing widgets, optimization widgets and more. Now let's grab the widgets one by one.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#1. Flipped Style Social Media Widget</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgr76F7X0NGqwErlMG0RcnlPNuOc4dZTHOo1Q709bUmf9etOnp2Uzmj3RKk2JXXX0AVBlqEeTN1FJPtnzBzjSlBpgIjCTmDUdmPoNixZ8QjXjfEYmguY8ELwAajXfIQSVu4YvyMzEBlA/s301/Social+media+cute+widget.png" style="color: #349ecb; text-decoration: none;"><img alt="social following widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgr76F7X0NGqwErlMG0RcnlPNuOc4dZTHOo1Q709bUmf9etOnp2Uzmj3RKk2JXXX0AVBlqEeTN1FJPtnzBzjSlBpgIjCTmDUdmPoNixZ8QjXjfEYmguY8ELwAajXfIQSVu4YvyMzEBlA/s301/Social+media+cute+widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: start;">
This widget is something really amazing in design, you can decorate your blog with this cute widget which is having major social following buttons and also searching box on your blog. <a href="http://www.bloggertrix.com/2013/06/flipboard-style-social-media-widget-for.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#2. Professional Subscribe Now Widget</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrVQyohyr6JsjO9oowQ5grnBZHieHWpceC2WA7CEAQbytRV_5fuVRFbR9tNZVJDKYy1gQlNET8zNTzMNAYePVq4xw4l1a_r12g6r-2qcek9P0o5pcTvS-85v2UwkHkOMU4oFZ6ErClOAo/s310/subscribe+now+widget.jpg" style="color: #349ecb; text-decoration: none;"><img alt="professional subscription widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrVQyohyr6JsjO9oowQ5grnBZHieHWpceC2WA7CEAQbytRV_5fuVRFbR9tNZVJDKYy1gQlNET8zNTzMNAYePVq4xw4l1a_r12g6r-2qcek9P0o5pcTvS-85v2UwkHkOMU4oFZ6ErClOAo/s310/subscribe+now+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
This widget is used by this blog (BBC) and this widget is one of the most professional subscription widgets which is looking stunning on your blog. This widget has Facebook, Twitter & Google+ following links and also a great email subscription box.<a href="http://www.onlineustaad.com/subscribe-to-us-social-widget-for-blogger/" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#3. Social media & RSS subscription widget</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEc9b13jqgdUD3Wxpd9SgKTFux8Bsynft49FD3rt898jnVf6BgGgnGPH0Z5JEHyb-e01l3AvSpbTdFZoDn1oIdXShKR4fB4GHxGoBgkyUSLLsXmaTYg3MnbOFPpTHImSuV3vRVGuFEuI/s320/social+subscription+widget.jpg" style="color: #349ecb; text-decoration: none;"><img alt="social subscription widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEc9b13jqgdUD3Wxpd9SgKTFux8Bsynft49FD3rt898jnVf6BgGgnGPH0Z5JEHyb-e01l3AvSpbTdFZoDn1oIdXShKR4fB4GHxGoBgkyUSLLsXmaTYg3MnbOFPpTHImSuV3vRVGuFEuI/s320/social+subscription+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
This is another great widget which is having the same subscription and following buttons, but with more beautiful styles. You can have this widget if you want your blog to look more attractive. <a href="http://www.bloggertrix.com/2013/05/social-media-and-rss-subscribe-widget.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab this widget from here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#4. Social Media Sharing Widget Below Posts</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblRG-cntiAMbQjdLNybYUlsfanrqbLCh23b2fWcFEee56KETv_B86LQijP0WvfY4MLwX_ABFYG-hCthiJ6fP1xwXrooPIiqCiLEp9qEuZdCt54eT_RwVD6xek6ALx15BMetG6quk7mvg/s410/social+sharing+widget.png" style="color: #349ecb; text-decoration: none;"><img alt="social sharing widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblRG-cntiAMbQjdLNybYUlsfanrqbLCh23b2fWcFEee56KETv_B86LQijP0WvfY4MLwX_ABFYG-hCthiJ6fP1xwXrooPIiqCiLEp9qEuZdCt54eT_RwVD6xek6ALx15BMetG6quk7mvg/s1600/social+sharing+widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: start;">
This widget is worth having by your blog, because it displays beautiful mirror type social sharing buttons after your every blog post, you can insert this widget below the posts in your blog, <a href="http://www.mybloggertricks.com/2011/08/add-1-and-delicious-sharing-count.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from her</a>e.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#5. Black Color Beautiful Buttons Styles for Labels</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMCf55Cv6J97bFVIQ-wAQUoB1lJPKUVMq8ML0EQR0toGOhmkzzSysai3y2L1oBrWfvd4wqqPmzJosYEvUU8yyAyCaArN080S5aGg8xVrrZxL0B8h5Fp3rNzNImdC5Ms627E-a0AUq6Cs/s451/blogger+label+widget.jpg" style="color: #349ecb; text-decoration: none;"><img alt="blogger labels " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMCf55Cv6J97bFVIQ-wAQUoB1lJPKUVMq8ML0EQR0toGOhmkzzSysai3y2L1oBrWfvd4wqqPmzJosYEvUU8yyAyCaArN080S5aGg8xVrrZxL0B8h5Fp3rNzNImdC5Ms627E-a0AUq6Cs/s1600/blogger+label+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: start;">
This widget is used by us and looks very beautiful and speedy. You can just make your blogger labels more stunning by using this widget. This basically not a widget but styles for blogger label links. <a href="http://www.bestbloggercafe.com/2013/06/blogger-labels-cute-widget.html" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#6. Curved Glossy Horizontal Menu for Blogger</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnI_QOC6goQnOZVfMIlnwNYO9oqkXEagolJVdYddJSURFmeY82yEbeb47O0wzpCjN19BFb0yPtYN3BdjB_uRdPWePJ1NCgSD_MJ49FotV9qqeIM6irk_O9TmYVLhGLTv9iclQB52ailw/s300/beautiful+menu+for+blogger.png" style="color: #349ecb; text-decoration: none;"><img alt="beautiful menu for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYnI_QOC6goQnOZVfMIlnwNYO9oqkXEagolJVdYddJSURFmeY82yEbeb47O0wzpCjN19BFb0yPtYN3BdjB_uRdPWePJ1NCgSD_MJ49FotV9qqeIM6irk_O9TmYVLhGLTv9iclQB52ailw/s300/beautiful+menu+for+blogger.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: start;">
I loved this menu when I saw it for the first time, this menu is purely designed for blogger blogs and you can easily integrate it on your blog. This is one of the stylish menus for blogger yet, <a href="http://www.bloggertrix.com/2013/05/curved-glossy-navigation-bar-for-blogger.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#7. Popular Posts Numbering Widget with colors</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUjFCrsURX6ACCMbE4pkDgSNyg5WLpxBUSggjmKCghTSsyB7l-Az4MQM5ndqkG9Kp1arg5VzQDEjumg9lncYm5ENJtNTIgzV8umumaQrX07EnBmvypGoZ-6nQFc3wqvYNOdoYdjLNQlI/s435/popular-posts-widget.jpg" style="color: #349ecb; text-decoration: none;"><img alt="popular posts widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUjFCrsURX6ACCMbE4pkDgSNyg5WLpxBUSggjmKCghTSsyB7l-Az4MQM5ndqkG9Kp1arg5VzQDEjumg9lncYm5ENJtNTIgzV8umumaQrX07EnBmvypGoZ-6nQFc3wqvYNOdoYdjLNQlI/s1600/popular-posts-widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
If you want your blog more fancy then must use this widget too, this widget is totally built in with CSS3 and very faster to load on any browser. This actually removes the default styles of your "Popular Posts" and adds a beautiful colorized style to it, <a href="http://computerithelp86.blogspot.com/2015/06/customize-popular-posts-widget-in.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab the customized version of this widget</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#8. Social Media Floating Widget</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggazew8N-pkkU7RxuG4bbYms8yP2macFIoHgh5BUhZ_KsN6_bvN4PgaMhxxTpi0C3Yh0uHP7UQB65piOVOcvdbEspCehQ0wC7C9fabjpHtacjsWdrXI99z5BZs1zW0mn-O_OEAnv0u7q4/s451/blogger-floating-widget.png" style="color: #349ecb; text-decoration: none;"><img alt="social media floating widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggazew8N-pkkU7RxuG4bbYms8yP2macFIoHgh5BUhZ_KsN6_bvN4PgaMhxxTpi0C3Yh0uHP7UQB65piOVOcvdbEspCehQ0wC7C9fabjpHtacjsWdrXI99z5BZs1zW0mn-O_OEAnv0u7q4/s1600/blogger-floating-widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
This is social media sharing floating widget with all popular social networks and the social buttons also have counters to count the number of shares on social media. So you can easily insert it on blogger, it is indeed a great widget, <a href="http://www.onlineustaad.com/social-media-floating-widget-for-blogger/" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#9. Social Media Share Buttons Below Post Titles</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv1EsHJVCthZ67Qksh2Ii9cfrr5C7hUkiiRVHAKxpGnhB_Zvc2gsFKok5_Mg59GWRwKiOQ3Tur3BsI4-JXcPqC0NZYK56MNASuERRPaNF6uc6P9Vsti3bX7e4jWHOpAkU0nNKPsL3FqFc/s574/social-sharing-widget.png" style="color: #349ecb; text-decoration: none;"><img alt="social sharing buttons" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv1EsHJVCthZ67Qksh2Ii9cfrr5C7hUkiiRVHAKxpGnhB_Zvc2gsFKok5_Mg59GWRwKiOQ3Tur3BsI4-JXcPqC0NZYK56MNASuERRPaNF6uc6P9Vsti3bX7e4jWHOpAkU0nNKPsL3FqFc/s1600/social-sharing-widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
This is also a social media sharing widget which is having social buttons along with counters, so visitors can easily share your content on social media using this widget, and this widget is mostly inserted after post titles in blogger for better result. <a href="http://www.mybloggertricks.com/2011/06/add-1-button-and-other-share-buttons.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab This widget here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#10. jQuery Facebook Pop Up Like Box</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1tmr94HCPjxUtBEy5ycYLbkCwwT0En4YyAsZkQ0V6qp2h4BaUmug-VcHEWJTL2awpVICUb7lwuLA-S4tKxhIuZHoEX1yjUH-nwN8lMxrwMhyphenhyphenSDNM8-ZLe1zv_lGMZFj9yJV9wOQJZass/s434/facebook-like-box.jpg" style="color: #349ecb; text-decoration: none;"><img alt="Facebook pop up like box" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1tmr94HCPjxUtBEy5ycYLbkCwwT0En4YyAsZkQ0V6qp2h4BaUmug-VcHEWJTL2awpVICUb7lwuLA-S4tKxhIuZHoEX1yjUH-nwN8lMxrwMhyphenhyphenSDNM8-ZLe1zv_lGMZFj9yJV9wOQJZass/s320/facebook-like-box.jpg" style="border: none; height: auto; max-width: 100%;" title="" width="294" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: start;">
If you want to increase your facebook fans/likes then this widget is specially designed for you, it will pop up when the visitor is visiting your site and will be showing your facebook page in a pop up like box, this is easy and superb. <a href="http://www.mybloggertricks.com/2012/01/jquery-popup-for-facebook-likebox.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#11. Related Posts Widget by Linkwithin</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcM6Y5FHrjLt1yb_m_0w2lMJuyhQ12kUKhGgdcNTPMPAcMb-8A8rzzuP0lpVvCQQ-4jslR0s403P4E1Hitxbj5dgmam4AHioJtBsTbxfl39blBRfhQub026SCM3ct1oRLIpBfEvzLajxQ/s465/related+posts+widget.jpg" style="color: #349ecb; text-decoration: none;"><img alt="linkwithin widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcM6Y5FHrjLt1yb_m_0w2lMJuyhQ12kUKhGgdcNTPMPAcMb-8A8rzzuP0lpVvCQQ-4jslR0s403P4E1Hitxbj5dgmam4AHioJtBsTbxfl39blBRfhQub026SCM3ct1oRLIpBfEvzLajxQ/s1600/related+posts+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: start;">
Without using this widget your blog might be incomplete, this widget displays the most related posts/stories below every post in your blogger blog, must use it to get more page views. <a href="http://www.linkwithin.com/learn" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#12. Black Color Drop Down Menu for Blogger</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDS31mY-zZ5di7uUXx6emryuo97XSdmssWz67AB-K50K-YGDcfnBV-9JGglmnQ3vAWfQ1MljHZOtdk7CWv_3lxfEeFYQ-ng7roaVmo51W5e9DoPWCuL26UjNyKaGpnDSdk9FbXF9iPaf8/s320/drop+down+menu+for+blogger.png" style="color: #349ecb; text-decoration: none;"><img alt="drop down menu for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDS31mY-zZ5di7uUXx6emryuo97XSdmssWz67AB-K50K-YGDcfnBV-9JGglmnQ3vAWfQ1MljHZOtdk7CWv_3lxfEeFYQ-ng7roaVmo51W5e9DoPWCuL26UjNyKaGpnDSdk9FbXF9iPaf8/s320/drop+down+menu+for+blogger.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
This is a simple CSS3 built in drop down menu for blogger blogs, you can super easily add it to your blogger blogs. If you want to use a drop down menu on your blog and the color scheme is matching with this menu then must give it a try. <a href="http://www.bloggertrix.com/2013/03/simple-css3-drop-down-navigation-bar.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#13. Three Column Black Footer Widget for Blogger</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0A2TC8QTBLaMfhdXcMfMjrU3yGX969Ufd-rum2U5EwL-F8m1I5n9_ybMTu4lJCiqddfAbLCNXQBjnHbGgUh8AS9USxhtFnerdTsW8HvMomURmbDD14V_uUePFPQCBkxbfnPVmqWGKEs/s315/three-column-footer-widget.png" style="color: #349ecb; text-decoration: none;"><img alt="three column footer widget " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0A2TC8QTBLaMfhdXcMfMjrU3yGX969Ufd-rum2U5EwL-F8m1I5n9_ybMTu4lJCiqddfAbLCNXQBjnHbGgUh8AS9USxhtFnerdTsW8HvMomURmbDD14V_uUePFPQCBkxbfnPVmqWGKEs/s315/three-column-footer-widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
This widget is a very nice widget for your blog's footer, if you want to add a three column new widget below your blog main body then must try this one on your blog, it will add more beauty to your blog and you'll have a more professional looking blog by using this widget. <a href="http://www.probloggertricks.com/2013/06/multi-column-footer-widget.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here.</a></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#14. Bouncing jQuery Menu for Blogger</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHxHkzncS8iqinIW5iFC9H5CSIz3HlT10ZLM7VzN8NSqDqc0ox4lt_B5hv2HJ5ndznh_bEPgdtVAHi_iqf7wk9kPjuJYnpTclAwCo61JNMLa8ebskfItYqlQWxaMLZyurUDguXxfpsTM/s320/bouncing+jQuery+menu+for+blogger.jpg" style="color: #349ecb; text-decoration: none;"><img alt="jQuery bouncing menu for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHxHkzncS8iqinIW5iFC9H5CSIz3HlT10ZLM7VzN8NSqDqc0ox4lt_B5hv2HJ5ndznh_bEPgdtVAHi_iqf7wk9kPjuJYnpTclAwCo61JNMLa8ebskfItYqlQWxaMLZyurUDguXxfpsTM/s320/bouncing+jQuery+menu+for+blogger.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: start;">
Another great looking menu for blogger blogs, this menu is having different color for each link and also get bounced when a visitor hovers mouse on it. <a href="http://www.bloggertrix.com/2013/03/beautiful-bouncing-jquery-menu-bar-for.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-align: start; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
#15. Social Media Recommendation Bar for Blogger</h3>
<div style="text-align: start;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOuxw5oubgzncs7DqfiwcpLb9yB7-0W31LQpF5Bwd-VjR-lMmssgrYmxzT86nwaeAO1h0S3h-p7heYoGlw0lJOvauBiF9d3hZ-v8jIj7DgyfkKgWKYN5hsQzBwu5xYxQ_La7wdN1ThUcA/s320/social+recommendation+bar.png" style="color: #349ecb; text-decoration: none;"><img alt="social recommendation bar " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOuxw5oubgzncs7DqfiwcpLb9yB7-0W31LQpF5Bwd-VjR-lMmssgrYmxzT86nwaeAO1h0S3h-p7heYoGlw0lJOvauBiF9d3hZ-v8jIj7DgyfkKgWKYN5hsQzBwu5xYxQ_La7wdN1ThUcA/s320/social+recommendation+bar.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="text-align: start;">
If you want to recommend your social media following links to the visitors on every scroll then must use this widget which is a customized widget and looking great in terms of design. <a href="http://www.bloggertrix.com/2013/04/customized-recommendation-social-widget.html" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
<div style="text-align: start;">
</div>
<div style="text-align: start;">
<b>Other Widgets & tutorials we Recommend: </b></div>
<div style="text-align: start;">
You can also have a look at below widgets/tuts which we've already shared on this blog:</div>
<div style="text-align: start;">
</div>
<ul style="margin: 0px; padding: 0px 0px 20px; text-align: start;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Create a full page in Blogger</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Add contact form in blogger</li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Installing Disqus commenting system on blogger </li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Unique style social subscription widget </li>
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;">Beautiful scrolling recent posts widget</li>
</ul>
<div style="text-align: start;">
So the above were the most popular widgets that you can use on your blogger blogs easily, however, I'll share more specific widgets list in the future, so you'll be able to find more designing resources to make your blog looking like a tree of all fruits. <b>Have a Good Day</b>!</div>
</div>

15 Most Popular Blogger Widgets for Every Blog

Blogger.com is an online content management system which is very easy to create a free blog with and start work on. And there are thousa...

Customize Popular Posts Widget in Blogger with CSS

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZivGBjMddZ9E19HcL5C0Rg9PA2kyGOf5rG3B4fOUu-u_SU8DGNHr_Xr51ze3wqM1dHelYmiyVfv4W3eYP3nSoUBWhD7UST6fI-zCPMjO6roUPw64g9so_yHDP6GU1NdglZB1QxcZnFAI/s1600/Customize+Popular+Posts+Widget+in+Blogger+with+CSS.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Customize Popular Posts Widget in Blogger with CSS" border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZivGBjMddZ9E19HcL5C0Rg9PA2kyGOf5rG3B4fOUu-u_SU8DGNHr_Xr51ze3wqM1dHelYmiyVfv4W3eYP3nSoUBWhD7UST6fI-zCPMjO6roUPw64g9so_yHDP6GU1NdglZB1QxcZnFAI/s320/Customize+Popular+Posts+Widget+in+Blogger+with+CSS.jpg" title="Customize Popular Posts Widget in Blogger with CSS" width="320" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px; text-align: justify;">
Blogger blog each element is to change what with CSS and JavaScript. There are many needs in the blogger may want to customize or make them more beautiful. This theme is a popular flash messages on the blogger. Even today is very simple and something popular blogger on the allocation of widgets. This piece comes by default in every blogger and custom forms. In the beginning, it is simple and has no attraction. But, using the trick today, you can make it more attractive and appealing.<span id="more-492"></span></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
<span style="color: #00c6ff;">Tip No,01.How to Change Popular Posts widget in Blogger Blog,s By Saftain Azmat?</span></h3>
<div style="margin-bottom: 14px; padding: 0px;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">We will begin to do things in this tutorial. Follow these simple steps to change the flash popular blogger posts your:</span></span></div>
<div style="margin-bottom: 14px; padding: 0px;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;"><br /></span></span></div>
<div style="margin-bottom: 14px; padding: 0px;">
</div>
<ol>
<li><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Log in to Blogger dashboard</span></li>
<li><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Go to the page template blog</span></li>
<li><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;"> Click HTML >></span><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Click Continue</span></li>
<li><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Now find this code:]]> use CTRL + F</span></li>
<li><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Just above / before]]> paste the code below</span></li>
</ol>
<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;">
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
.popular-posts ul{padding-left:0px;}<br />
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZSfpiGujzyJNxcKHtWqG3abAKLEi7CxXQQ2wGLwW7tBpSbUYK4Cr79u12fwQW9GGYoKbmAug9xzjxersfkwWjEfXDP551aGNkrGgvQUJPHQ1MXwlusR0yqStbXmTfZHzllEaMZhXfG4/s1600/1.gif) no-repeat scroll 5px 10px;<br />
list-style-type: none;<br />
margin:0 0 5px 0px;<br />
padding:5px 5px 5px 20px !important;<br />
border: 1px solid #ddd;<br />
border-radius:10px;<br />
-moz-border-radius:10px;<br />
-webkit-border-radius:10px;<br />
}<br />
.popular-posts ul<br />
li:hover {<br />
border:1px solid #6BB5FF;<br />
}<br />
.popular-posts ul<br />
li a:hover {<br />
text-decoration:none;<br />
}<br />
.popular-posts .item-thumbnail img {<br />
webkit-border-radius: 100px;<br />
-moz-border-radius: 100px;<br />
border-radius: 100px;<br />
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);<br />
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);<br />
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);<br />
}</div>
</blockquote>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
Save your blogger template and you're done By Saftain Azmat!</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
<span style="color: #00c6ff;">Tip No,02.How to add a popular widget in Blogger Blog,s By Saftain Azmat?</span></h3>
<div style="margin-bottom: 14px; padding: 0px;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">In addition, popular blogger functions in the segment just go planning >> addition to segment and add the People's Posts List Widget widget and make the required modifications. See the picture below, for example:</span></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px; text-align: center;">
<a href="http://www.bestbloggercafe.com/wp-content/uploads/2014/03/blogger-popular-posts.jpg" style="color: #349ecb; text-decoration: none;"><img alt="Customize Popular Posts Widget in Blogger with CSS" class=" wp-image-496 aligncenter" src="http://www.bestbloggercafe.com/wp-content/uploads/2014/03/blogger-popular-posts.jpg" style="border: none; display: block; height: auto; margin: 0px auto 20px; max-width: 100%;" title="Customize Popular Posts Widget in Blogger with CSS" /></a></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">To view the first line of the following your messages popular, and verification of fragments image boxes and a thumbnail of another display, select the number of messages that you want to display at the item and you can specify the time period to view the messages as popular as ever in the last 30 days and 7 days. After you add a widget you can drag anywhere on your blog, but if you're still in the bar next door, will look attractive.</span></span></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;"><br /></span></span></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">Your thoughts:</span></span></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">Only a simple piece to add, and can also be customized. If you have any questions on this piece will let me know through a comment below this post.</span></span></div>

Customize Popular Posts Widget in Blogger with CSS

Blogger blog each element is to change what with CSS and JavaScript. There are many needs in the blogger may want to customize or make th...

How to Add a Simple Facebook Like Box in Blogger?

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nwycA9LCn9RhPUQT8n-9gwa9iLKBUssf-4ZnizYv20RIe7VZVY6VFSdVu_euw5zAoKcEtqhlsRODQEvsuom9WwfUlpFFismBooiNt2SBtWTmlu13YmqGAjRTd2x9LQG9bSlZpXN0xOk/s1600/How+to+Add+a+Simple+Facebook+Like+Box+in+Blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How to Add a Simple Facebook Like Box in Blogger?" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nwycA9LCn9RhPUQT8n-9gwa9iLKBUssf-4ZnizYv20RIe7VZVY6VFSdVu_euw5zAoKcEtqhlsRODQEvsuom9WwfUlpFFismBooiNt2SBtWTmlu13YmqGAjRTd2x9LQG9bSlZpXN0xOk/s400/How+to+Add+a+Simple+Facebook+Like+Box+in+Blogger.jpg" title="How to Add a Simple Facebook Like Box in Blogger?" width="400" /></a></div>
<div style="text-align: justify;">
Facebook is one of the most popular social networks where people share means all his free time. Therefore, it has become very important for bloggers and SEO. As you know, if you have a decent amount of Facebook likes on your blog or Web site, then you can get additional benefits from them. But especially in the blogger you did not install all things begin. We do many things ourselves to our blog blogger. So if you want to increase your Facebook likes and reputation in social media, then you need to add Facebook like box to your blog. We'll show you a simple example of how to add Facebook box on your blog like very quickly. This is just a simple step in the future, I want to show you how to design your Facebook box such as how to create brilliant. So today we will begin to integrate a simple case of Facebook.</div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
<span style="color: #00c6ff;">How to Embed Facebook Like box to Blogger Blog Widget By Saftain Azmat?</span></h3>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">Before adding a Facebook Like Box should have a fan page of our blog or website in Facebook, so if you do not have, create a new page of your blog that can be created easily and integrated this page a box on your blog, just follow these steps:</span></span></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;"><br /></span></span></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">Go to your Facebook Account 2 setups below</span></span></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">Go to the page you created your blog that appears in the left sidebar BY Saftain Azmat</span></span></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">Now & See the picture below, for example By Saftain Azmat</span></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4fLOdFd0vIti7_z2iSMDnYG7pPxlS6jpyWxHpGZyrUxMvyXESMY9fzysM_WIJp9raEuB4VpMk5A7sXm7YSXNjCLL8rzb1pbgTOEXY_GBe9ajE7bvLmBJDeH90CgY9fna507emQY5F94/s1600/2015-06-03_082750.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add a Simple Facebook Like Box in Blogger?" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4fLOdFd0vIti7_z2iSMDnYG7pPxlS6jpyWxHpGZyrUxMvyXESMY9fzysM_WIJp9raEuB4VpMk5A7sXm7YSXNjCLL8rzb1pbgTOEXY_GBe9ajE7bvLmBJDeH90CgY9fna507emQY5F94/s640/2015-06-03_082750.jpg" title="How to Add a Simple Facebook Like Box in Blogger?" width="612" /></a></div>
<ul style="margin: 0px; padding: 0px 0px 20px;">
<li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px; text-align: justify;"><span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">In the picture above you you can see that I have a lot of pages in Facebook, so if you want to include this box on the page, then you should click on this page. Even in this tutorial will click on the link ComputerITHelp86.Blogspot.Com you can see in the picture. When you click the link, you are redirected to the page. Here is a picture, for example:</span></span></li>
</ul>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL0fg9DE34IZdHr1c8TTpkOzoFijMLlf0OUXj66jeMYMjchnZaNRkosHW2tUqS6N9rUJBVhjWvdP2OhUgmVMJKdYp2etwZnYVYQnGPPncQDMPXW4cLP3kWvdLJa22kzzlPXz3gyq0uLQk/s1600/facebook-like-box1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add a Simple Facebook Like Box in Blogger?" border="0" height="428" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL0fg9DE34IZdHr1c8TTpkOzoFijMLlf0OUXj66jeMYMjchnZaNRkosHW2tUqS6N9rUJBVhjWvdP2OhUgmVMJKdYp2etwZnYVYQnGPPncQDMPXW4cLP3kWvdLJa22kzzlPXz3gyq0uLQk/s640/facebook-like-box1.jpg" title="How to Add a Simple Facebook Like Box in Blogger?" width="640" /></a></div>
<br /></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">I was on the page to have your own blog, and the top of the page, you can see the button [Edit Page], and you must click on the drop-down menu, click update and information on the page then click on the resources link on the left. See the example below the image:</span></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg567vtBaRCFZkanRgrVvVV1tLyVI2KL4vrWI1HcKtSx_zDa0BfsW0NKDpqbSr3Wt2lLw42tk6RM1V5VQWEub5P1Qfvj5XyLf7r9YZnybT53ZEg9U_7xU8kO_5PVTWzKXP-43P9kzC6o90/s1600/2015-06-03_083256.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add a Simple Facebook Like Box in Blogger?" border="0" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg567vtBaRCFZkanRgrVvVV1tLyVI2KL4vrWI1HcKtSx_zDa0BfsW0NKDpqbSr3Wt2lLw42tk6RM1V5VQWEub5P1Qfvj5XyLf7r9YZnybT53ZEg9U_7xU8kO_5PVTWzKXP-43P9kzC6o90/s640/2015-06-03_083256.jpg" title="How to Add a Simple Facebook Like Box in Blogger?" width="640" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<br /></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">After clicking on the resources will be another page where you can see a lot of resources from Facebook, just click on through social plugins] after clicking on the use of social plugins you will find a page where you can use all the add-ons for your blog. There are many additions or, as the case, such as buttons, recommendation box, box, etc. so you must click on the box. See also the picture below:</span></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxP5pLJ2VGOGK5gs95YrOn1ISmc5fCw7OpXY3SwQP_Y4JPkWJl6U4Hj6-798bHTOicQjhC5AsXbk6iS-u0_LBXpbOT_ypp8dXZ2AeNvbBYA8ATR3NYbmhjU-hmepr6klcIk_5XRQ7Wi4/s1600/facebook-like-box3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add a Simple Facebook Like Box in Blogger?" border="0" height="506" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxP5pLJ2VGOGK5gs95YrOn1ISmc5fCw7OpXY3SwQP_Y4JPkWJl6U4Hj6-798bHTOicQjhC5AsXbk6iS-u0_LBXpbOT_ypp8dXZ2AeNvbBYA8ATR3NYbmhjU-hmepr6klcIk_5XRQ7Wi4/s640/facebook-like-box3.jpg" title="How to Add a Simple Facebook Like Box in Blogger?" width="640" /></a></div>
<br /></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">In the picture above you can see the square, so just click on it, you will find a new page where you can customize your little box, see below for example:</span></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2stN79-r6NiV5jXxGVtmD2ESfg6iQqcNBObAQO6Wa4Jy5oxS6JwupZMKcOHr9TqFdXnZB3MI5DBvTzbjhFSy52TqaQTCx3jpfPvSh5U45aKl876vvQ3trj2yF1FEYnw-yq1CV3cyqTac/s1600/facebook-like-box4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add a Simple Facebook Like Box in Blogger?" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2stN79-r6NiV5jXxGVtmD2ESfg6iQqcNBObAQO6Wa4Jy5oxS6JwupZMKcOHr9TqFdXnZB3MI5DBvTzbjhFSy52TqaQTCx3jpfPvSh5U45aKl876vvQ3trj2yF1FEYnw-yq1CV3cyqTac/s640/facebook-like-box4.jpg" title="How to Add a Simple Facebook Like Box in Blogger?" width="618" /></a></div>
<br /></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px; text-align: justify;">
On the page like the picture, the box as shown by default as a platform, if you need to change your URL of the page, as shown with the reading area, and also other important factors you can do to your case such as display, the color of the border and color, and the flow of the show, the head , etc. You can do customize according to your needs and after the settings, click the button to get the code. Now you'll see a pop-up box below the picture</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5YiHksfeL3ftlPdyzeQCGLqPgTulbx0Ei438zmP_mZysv6xJN2W2GRj9B_Oe9wColEPs1ze_GDDmfj9XhlGnlSqWPPrQYyjec0KFzt7I2vmPqtPh-3BwzlppU7dqrRd2IDoG0Rp9MlDg/s1600/facebook-like-box5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add a Simple Facebook Like Box in Blogger?" border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5YiHksfeL3ftlPdyzeQCGLqPgTulbx0Ei438zmP_mZysv6xJN2W2GRj9B_Oe9wColEPs1ze_GDDmfj9XhlGnlSqWPPrQYyjec0KFzt7I2vmPqtPh-3BwzlppU7dqrRd2IDoG0Rp9MlDg/s640/facebook-like-box5.jpg" title="How to Add a Simple Facebook Like Box in Blogger?" width="640" /></a></div>
<br /></div>
<div style="margin-bottom: 14px; padding: 0px; text-align: justify;">
<span style="color: #333333; font-family: Lora, Georgia, Times New Roman, Times;"><span style="line-height: 25px;">In the box above four options for the inclusion of this picture as a blogger on your blog or site on the blog blogger, you can easily integrate this framework with IFRAME style. Then click on the IFRAME code, copy CTRL + C or right click and copy. Now let's insert this code in the blog.</span></span></div>
<h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;">
<span style="color: #00c6ff;">How to insert the embedded code into blogger Blog Widget By Saftain Azmat?</span></h3>
<ul>
<li style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Go to blogger >> >> design tool to add and choose HTML / JavaScript</li>
<li><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Now paste the code that copies of Facebook</span></li>
<li><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Savings and already is, just watch your blog and watch box.</span></li>
</ul>
<ol style="margin: 0px; padding: 0px 0px 20px;"></ol>
<h2>
<span style="line-height: 25px;"><span style="color: red; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; font-size: large;">Note:</span></span></h2>
<span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Most people use the box as in the sidebar on Blogger, but you can use it anywhere you want.</span><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">To do this, all the steps correctly, you will be able to integrate with Facebook box on your blog like blogger the same as what we have in the blog.</span><span style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; line-height: 25px;">Take good care of your family and loved and best wishes for your future. Comments are answered as soon as time permits</span>

How to Add a Simple Facebook Like Box in Blogger?

Facebook is one of the most popular social networks where people share means all his free time. Therefore, it has become very important f...

Professional Social Subscribe Now Widget For Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_NvWRraSj5sffYStlH-NbCw7VLiCngs9BocbJ66rMr23Io4K39fNUqbw4amzct-8B63zLM9nQ2wf5s4UJuD2Y8EolR0jMj1ceNzSbZzbJMeqomDH6LUutFRGwp4qMW373Bc4huDpNTs/s1600/Professional+Social+Subscribe+Now+Widget+For+Blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="274" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_NvWRraSj5sffYStlH-NbCw7VLiCngs9BocbJ66rMr23Io4K39fNUqbw4amzct-8B63zLM9nQ2wf5s4UJuD2Y8EolR0jMj1ceNzSbZzbJMeqomDH6LUutFRGwp4qMW373Bc4huDpNTs/s320/Professional+Social+Subscribe+Now+Widget+For+Blogger.jpg" width="320" /></a></div>
In blogger.com, and people are still trying to decorate a blog with beautiful custom widgets created by different designers that. Thus, a blogger blog can easily be customized and stylized. But I advise you to keep your blog as simple as possible, but very nice. Because the design is very important in terms of the number of visitors and money. You should be given a crucial time in the design of your blog. And make sure you also add widgets and professionals is essential, such as popular posts widget, Facebook box like widgets and Assistant Subscribe now. So in this tutorial I have a great look for the piece you have registered you can easily add to your Blogger blog. It is beautiful piece.This piece is created using CSS3 properties only restores faster charging on the browser. Subscribe now to the piece will have some features such as link Facebook square buttons subscription e-mail tracking Google+ Twitter is still up, but what is important in this mini design. Then this design is certainly large and attractive design. Now let's add widget blogger.<br />
<h2 style="background-color: white; border: 0px none; box-sizing: border-box; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: 0px; padding: 0px;">
<span style="color: #00c6ff;">How to add Subscribe now Widget in Blogger?</span></h2>
<div>
Add this widget your own Friends is something very, very easy, just follow some of the steps below to add this piece quickly on your blog:</div>
<div>
<br /></div>
<div>
<ul>
<li>Sign in To Your Blogger Website</li>
<li>Blogger>>Layout</li>
<li>Click On Add A Gadget>>Add An HTML Java <span style="font-family: Palatino Linotype, Book Antiqua, Palatino, serif;"><span style="background-color: white; line-height: 22px;">Script Widget on Blogger</span></span></li>
<li><span style="font-family: Palatino Linotype, Book Antiqua, Palatino, serif;"><span style="background-color: white; line-height: 22px;">So Download The Subscribe Widget Code Blew Download The Code</span></span></li>
<li><span style="font-family: Palatino Linotype, Book Antiqua, Palatino, serif;"><span style="background-color: white; line-height: 22px;">Now Download after code copy and paste the html java script widget on blogger</span></span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPoqZNjhHDgDqB6uyqz4znkTwh4StSlpAFEFD4q1JVKct1u5SotW90zQkyFzL97PAwFg9XUZdEhNj2YJxmKoFZDOhMlNtjz_DnxUZVBm4aXejaj_lqXz15jjZBK_mKPCVCPOeF2M-1us/s1600/download.gif" /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Palatino Linotype, Book Antiqua, Palatino, serif;"><span style="line-height: 22px;">Just keeping the user interface element, keeping the death and see your blog, keep widget in the sidebar, because it uses the widget in the sidebar. Vision blog about the new widget.</span></span></div>
<h2 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: 0px; padding: 0px;">
Customization Blogger Replace Name Your Website By Saftain Azmat</h2>
<div>
Some customization is usually necessary to make this part works perfectly for you. You just have to change links with yours, for example:</div>
<div>
<div>
<ul>
<li>Change the Blue color ComputerITHElp to your Facebook Page name</li>
<li>Change the Green Color saftain_azmat to your twitter user name</li>
<li>Change The Orange color Google+ link (https://plus.google.com/u/0/+SaftainAzmat) to your own</li>
<li>Change all three Red Color computerithelp86 to your Feedburner name</li>
</ul>
<div>
<div>
That's it, but the user interface element, and enjoy the great widget on your blog.</div>
<div>
<br /></div>
<div>
If you have a problem, this piece added to your blog, then please leave your comment without another with the problem you get, if you can help more. Take care.</div>
</div>
</div>
</div>
<div style="text-align: center;">
<span style="font-family: Palatino Linotype, Book Antiqua, Palatino, serif;"><span style="line-height: 22px;"><br /></span></span></div>
</div>

Professional Social Subscribe Now Widget For Blogger

In blogger.com, and people are still trying to decorate a blog with beautiful custom widgets created by different designers that. Thus, a ...

How to Add Next & Previous Pagination Widget to Blogger?

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22-o6L_sHEoDeUKtmqTPPe1L18MgShaikiiMTMJROFfACATHsQVDD6QFeMi2tW6px3GBbxbT3M19BzXVyoqQLu_dkZGYBJLZMfjWx2bElc9PTP7IBj_QwD6oxwKiZ8JntAU_CTrod3PM/s1600/How+to+Add+Next+%2526+Previous+Pagination+Widget+to+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Add Next & Previous Pagination Widget to Blogger?" border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22-o6L_sHEoDeUKtmqTPPe1L18MgShaikiiMTMJROFfACATHsQVDD6QFeMi2tW6px3GBbxbT3M19BzXVyoqQLu_dkZGYBJLZMfjWx2bElc9PTP7IBj_QwD6oxwKiZ8JntAU_CTrod3PM/s640/How+to+Add+Next+%2526+Previous+Pagination+Widget+to+Blogger.jpg" title="How to Add Next & Previous Pagination Widget to Blogger?" width="640" /></a></div>
<br />
<br />
Previous piece or the following pages and numbering blog blogger hardly be a way to circumvent large. You can easily add to your blog and just a few steps. Like many bloggers look at how this page stuff your blog using the fastest and easiest way. Deportation is a good way to engage visitors in your blog. So if you want to include past and future buttons, and page numbers, you are here to do.<br />
<br />
Widget is designed with CSS JavaScript function. So you only need to add that in some of your blog template; it seems, you can add this piece using the page of your design blog and add / HTML and JavaScript right piece paste the following code [This] in this context. The piece will not affect your download speed of your blog because of using JavaScript code. Yet, follow these steps to add this piece to your blog page.<br />
<h2 style="background-color: white; border: 0px none; box-sizing: border-box; color: #333333; font-family: Helvetica; font-size: 30px; font-weight: normal; line-height: 1em; list-style: none; margin: 25px 0px 10px; outline: 0px; padding: 0px;">
How to add Pagination widget to Blog By Saftain Azmat Below?</h2>
<div>
The following steps are simple for you to add this piece cool to have a blogger blog. Even follow-up and enjoy the piece.</div>
<div>
<br /></div>
<div>
<ul>
<li>Login In To Your Blogger Website</li>
<li>Go To Menu Layout</li>
<li>Click On Add A Gadget>> Add A HTML Java Script On Widget</li>
<li>To download the code and click on the button below to download the code to copy the code according to the instructions above paste it into your website.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.mediafire.com/download/xp9xw737h85dsj1/How+to+Add+Next+%26+Previous+Pagination+Widget+to+Blogger.txt" rel="nofollow" target="_blank"><img alt="How to Add Next & Previous Pagination Widget to Blogger?" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPoqZNjhHDgDqB6uyqz4znkTwh4StSlpAFEFD4q1JVKct1u5SotW90zQkyFzL97PAwFg9XUZdEhNj2YJxmKoFZDOhMlNtjz_DnxUZVBm4aXejaj_lqXz15jjZBK_mKPCVCPOeF2M-1us/s1600/download.gif" title="How to Add Next & Previous Pagination Widget to Blogger?" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Remember piece and see him Blog Widget direct call to number pages and next / previous.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Customization</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
In the boldest above codes, you can change the number of pages to show numshowpage = 3 to the value you want, you can also change the text above and in accordance with any desired value.</div>
<div style="text-align: center;">
<br /></div>
</div>

How to Add Next & Previous Pagination Widget to Blogger?

Previous piece or the following pages and numbering blog blogger hardly be a way to circumvent large. You can easily add to your blog an...

Computer IT Help 86 | Best Urdu & Hindi Tutorials

Ads