Every 1 Posts | Best All Techonolgy : writing tips

How to Create an HTML Sitemap in WordPress?

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
<a href="http://www.bestbloggercafe.com/wp-content/uploads/2014/02/wordpress-sitemap.png" style="color: #349ecb; text-decoration: none;"><img alt="wordpress sitemap" class="size-medium wp-image-195 alignleft" height="178" src="http://www.bestbloggercafe.com/wp-content/uploads/2014/02/wordpress-sitemap-300x178.png" style="border: none; display: inline; float: left; height: auto; margin: 0px 20px 10px 0px; max-width: 100%;" width="300" /></a>HTML sitemap makes it easier for users as well as Search Engine Bot to find content on your site.There are many plugins to create HTML sitemaps in WordPress. But I will suggest you to create your HTML Sitemap Manually, You can do it with a bit of php code, you can create an HTML sitemap in WordPress yourself and have more control over the output So that you will got more places in Search Engine Results.</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;">
<span id="more-9"></span><a href="https://www.blogger.com/null" name="more" style="color: #349ecb;"></a></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;">
Creating HTML Sitemap for WordPress</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;">
Here are Steps to follow to create sitemap for WordPress..</div>
<ul style="margin: 0px; padding: 0px 0px 20px;"><ul style="margin: 0px; padding: 0px;">
<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;">Login to Your Hosting Where You Host Your 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;">Open File Manager and Find functions.php in your directory</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;">Open <b><i>functions.php</i></b> for editing</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;">Paste below code right after opening <?php <b> </b><b>tag</b></li>
</ul>
</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;">
function spp_html_sitemap() {</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap = '';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$published_posts = wp_count_posts('post');</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<h4 id="sitemap-posts-h4">Here is a list of of my '.$published_posts->publish.' published posts</h4>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$args = array(</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'exclude' => '', /* ID of categories to be excluded, separated by comma */</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'post_type' => 'post',</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'post_status' => 'publish'</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
);</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$cats = get_categories($args);</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
foreach ($cats as $cat) :</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<div>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<h3>Category: <a href="'.get_category_link( $cat->term_id ).'">'.$cat->cat_name.'</a></h3>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<ul>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
query_posts('posts_per_page=-1&cat='.$cat->cat_ID);</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
while(have_posts()) {</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
the_post();</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$category = get_the_category();</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
/* Only display a post link once, even if it's in multiple categories */</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
if ($category[0]->cat_ID == $cat->cat_ID) {</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<li class="cat-list"><a href="'.get_permalink().'" rel="bookmark">'.get_the_title().'</a></li>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
}</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
}</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '</ul>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '</div>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
endforeach;</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$pages_args = array(</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'exclude' => '', /* ID of pages to be excluded, separated by comma */</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'post_type' => 'page',</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'post_status' => 'publish'</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
);</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<h3>Pages</h3>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<ul>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$pages = get_pages($pages_args);</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
foreach ( $pages as $page ) :</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<li class="pages-list"><a href="'.get_page_link( $page->ID ).'" rel="bookmark">'.$page->post_title.'</a></li>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
endforeach;</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<ul>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
return $spp_sitemap;</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
}</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
add_shortcode( 'spp-sitemap','spp_html_sitemap' );</div>
</blockquote>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px; text-align: justify;">
Above code will list all of your pages and posts into your sitemap and sort out all posts category wise. A single post  will be displayed once no matter if the post published under multiple categories.</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;">
<span style="font-family: Georgia, 'Times New Roman', serif;">How to Remove Pages from WordPress Sitemap? </span></h3>
<div>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<span style="font-family: Georgia, 'Times New Roman', serif;">If you want to exclude pages from your WordPress sitemap simply remove following lines from the above given code</span></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;">
$pages_args = array(</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'exclude' => '', /* ID of pages to be excluded, separated by comma */</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'post_type' => 'page',</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
'post_status' => 'publish'</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
);</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<h3>Pages</h3>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<ul>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$pages = get_pages($pages_args);</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
foreach ( $pages as $page ) :</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<li class="pages-list"><a href="'.get_page_link( $page->ID ).'" rel="bookmark">'.$page->post_title.'</a></li>';</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
endforeach;</div>
<div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
$spp_sitemap .= '<ul>';</div>
</blockquote>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<span style="font-family: Georgia, 'Times New Roman', serif;">You can also exclude certain pages and categories by entering their ID(mentioned in comments of above code).</span></div>
<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="font-family: Georgia, 'Times New Roman', serif;">Note:</span></h4>
<div>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
<span style="font-family: Georgia, 'Times New Roman', serif;"><i><span style="color: red;">Dear Readers if you have any query/question feel free to ask me via comment box given below. Also Follow us on social media site and share that post with your friends.</span></i></span></div>
</div>
</div>
</div>

How to Create an HTML Sitemap in WordPress?

HTML sitemap makes it easier for users as well as Search Engine Bot to find content on your site.There are many plugins to create HTML site...

How to Insert Read More Link Inside Blogger Posts?

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<a href="http://www.bestbloggercafe.com/wp-content/uploads/2012/11/read-more.jpg" style="color: #349ecb; text-decoration: none;"><img alt="read-more" class="size-full wp-image-601 alignleft" height="250" src="http://www.bestbloggercafe.com/wp-content/uploads/2012/11/read-more.jpg" style="border: none; display: inline; float: left; height: auto; margin: 0px 20px 10px 0px; max-width: 100%;" width="250" /></a>In blogger we've given dozens of tools by Blogger itself, to design each part of our blog. We just need to discover them. The blogger custom designer is a great tool which can do anything for you in designing your blog easily. However, today we'll talk about how to add a read more link or button in every post in blogger. But this practice is only used for home page of the blog, single posts don't have this link. When visitors visit your home page, so you can show them many posts with <b>Read More</b>link or button, so they'll decide whether to read the post or not. Here is an example image of this.<span id="more-133"></span></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4t9IDIKSXYjGfHT3bREUGiC8Mdr7lZRGH5mjiO1WjddqpapCVWGfkz7DXCci3go4Qg8X2wGhAYZYnBVAWJ_x_UvsgGE5or1UyfIrU5WEJ5MoJTbhqIjou3u0eBH4-V8YyAN3oiWgsDk/s1600/read-more-link-in-blogger.jpg" style="color: #349ecb; text-decoration: none;"><img alt="" border="0" class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4t9IDIKSXYjGfHT3bREUGiC8Mdr7lZRGH5mjiO1WjddqpapCVWGfkz7DXCci3go4Qg8X2wGhAYZYnBVAWJ_x_UvsgGE5or1UyfIrU5WEJ5MoJTbhqIjou3u0eBH4-V8YyAN3oiWgsDk/s1600/read-more-link-in-blogger.jpg" style="border: none; display: block; height: auto; margin: 0px auto 20px; max-width: 100%;" width="520" /></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;">
You can see the home page of this blog, where each post has a <b>read more</b> link. This link can easily be added to your blog posts. And you can latter on customize it.</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 Read More Link in Posts?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
Now let's start the tutorial about adding Read More link inside each of your blog's posts. There are many custom templates in which <b>Read More</b> link is already added to the posts and also designed with CSS. But if you're using a simpler blogger default template then you can add this link to every post.</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;">When you're writing the post for your blog in the post editor you'll find an option called Jump Break</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 find that and keep the mouse courser on the place where you want to break the page and insert <b>Read Mor</b>e link. For clear understanding just see the screen shot below:</li>
</ul>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH4ZE2EwW_wFU6J-sGYYPCKB7uQq-yLJGgZC7zPuBhdtJ-sdkXydNzbQMqFWrsmXv_o0h2gddlJ1mrcLKoEqmagTlhT_0upvfGIxyc9-ITLngl6vlkOTDLvn2bXiZL9dXaCmCmf8rIz0/s1600/jump-break-in-blogger.jpg" style="color: #349ecb; text-decoration: none;"><img alt="" border="0" class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjH4ZE2EwW_wFU6J-sGYYPCKB7uQq-yLJGgZC7zPuBhdtJ-sdkXydNzbQMqFWrsmXv_o0h2gddlJ1mrcLKoEqmagTlhT_0upvfGIxyc9-ITLngl6vlkOTDLvn2bXiZL9dXaCmCmf8rIz0/s1600/jump-break-in-blogger.jpg" style="border: none; display: block; height: auto; margin: 0px auto 20px; max-width: 100%;" width="520" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
In above image you can see the option <b>Jump Break</b> which has been mentioned with red color. So that is the option you can use to break the page and insert jump break on home page. I've inserted the jump break after the first paragraph.</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;">
<span style="color: red;"><b>Remember: </b></span>whenever you write a new post for your blog, just insert that jump break where you want to break the page and insert Read More Link. Also you can change the Read More text to your own text by going to <b>Blogger >> Layout >> Blog Posts >> Edit</b>and on the top you'll find a text saying Read More, just change that to any text you like and save the setting.</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;">
Now it was the basic method to include just read more link inside your blog posts for home page. I'll come up with another tutorial in which we'll create our own Read More stylized buttons and links. Till that enjoy your life and stay peaceful everywhere <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>

How to Insert Read More Link Inside Blogger Posts?

In blogger we've given dozens of tools by Blogger itself, to design each part of our blog. We just need to discover them. The blogger c...

How to Disable Right Click on Your blog?

How to Disable Right Click on Your blog?

Today I would like to let you know about disabling right click on your blog. This practice is used to prevent people from copying your spec...

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;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYtvZUiu0MxxcS24wgUryI8I7gPi8Q13M_1ShzDOz4un2ucOJJpSxSHUZoQEJ4kLMF3tAgi3BmLONSIV_gKBEuD4nG7hX_t25FrCHI_SL5bzBzf7ePgsmN9-8_eLp095opf339VsOfnsA/s1600/blogger-label-widget.jpg" style="color: #349ecb; text-decoration: none;"><img alt="" border="0" class=" alignleft" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYtvZUiu0MxxcS24wgUryI8I7gPi8Q13M_1ShzDOz4un2ucOJJpSxSHUZoQEJ4kLMF3tAgi3BmLONSIV_gKBEuD4nG7hX_t25FrCHI_SL5bzBzf7ePgsmN9-8_eLp095opf339VsOfnsA/s1600/blogger-label-widget.jpg" style="border: none; display: inline; float: left; height: auto; margin: 0px 20px 10px 0px; max-width: 100%;" /></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 template...

How to Enable Mobile & Email Posting in Blogger?

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S0_zGrJEd1Ouv4SpD9Hyto6457lfjErFV3QWduy3IofEhSjLFhwOPUV79uc356mISBc9mR0l4-TbqgEF67e0rhB6kosRmKhtd-qCIVczVV8As4MD3G36I9ra2zl9-8FfAKDax1LH5rI/s1600/posting-via-email-mobile.jpg" style="color: #349ecb; text-decoration: none;"><img alt="" border="0" class=" alignleft" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S0_zGrJEd1Ouv4SpD9Hyto6457lfjErFV3QWduy3IofEhSjLFhwOPUV79uc356mISBc9mR0l4-TbqgEF67e0rhB6kosRmKhtd-qCIVczVV8As4MD3G36I9ra2zl9-8FfAKDax1LH5rI/s200/posting-via-email-mobile.jpg" style="border: none; display: inline; float: left; height: auto; margin: 0px 20px 10px 0px; max-width: 100%;" width="200" /></a>While working with blogger.com, there are a lot of features you can use freely. You can use ultimate blogger features once you find them. Blogger itself has provided  countless number of tools, widgets and other resources to its users. You just need to find them. In our today's post we will discuss about enabling posting via mobile and email in blogger. This feature is used when you're away from your computer and want to post the articles and content directly from your mobile or via email.</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;">
Sometimes you just capture a picture with mobile camera and want it to publish instantly on your blog, so in this case you can set up mobile posting in your blog. Also if you want to post via email then you are allowed to do so. Now let's see how can we do this in blogger.</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-127"></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;">
1 - Setting up Mobile Posting in Blogger</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;">
First we'll discuss how to set up mobile posting in our blogger blog, for enabling mobile posting in blogger just follow given tips below:</div>
<ol 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="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Go to Blogger Dashboard</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Setting >> Mobile & Email</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">You'll find a page as showing in below picture</li>
</ol>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlArXTSKDZM_CZT9mC06guzWnLn-dvmoPuHlAy1nDCACbZz3-W_3xyBRTmhFop6YqDtztAzmmGnvoZLMPUverWBwjPNIL4DBOxMM1nGKj2UnuN3XwPvmpqD3dUZghk474njzkxCWkpJYs/s1600/mobile-posting.png" style="color: #349ecb; text-decoration: none;"><img alt="" border="0" class=" aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlArXTSKDZM_CZT9mC06guzWnLn-dvmoPuHlAy1nDCACbZz3-W_3xyBRTmhFop6YqDtztAzmmGnvoZLMPUverWBwjPNIL4DBOxMM1nGKj2UnuN3XwPvmpqD3dUZghk474njzkxCWkpJYs/s1600/mobile-posting.png" style="border: none; display: block; height: auto; margin: 0px auto 20px; max-width: 100%;" width="500" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
In this page you can clearly see the setting for mobile posting and email posting. So the colored box is the link which you can click to add your mobile phone. You can post from your mobile phone by using two ways: By MMS or by SMS. So just click the link which says "Add Mobile Device" and you'll find this box:</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUL0UBDDbK29oAOL6C2GTLiI2ePl4uqFHJb8UvKz0h7h1J6FntrtZGotkRsPn36oNd0lNYp1mbsx_0aQdPeNr4l4SMmoqtyG8-rk29S6wclCM3ggihy3TrFN1RwS0uRXtaZXFzxw4DZPw/s1600/mobile-posting1.png" style="color: #349ecb; text-decoration: none;"><img alt="" border="0" class=" aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUL0UBDDbK29oAOL6C2GTLiI2ePl4uqFHJb8UvKz0h7h1J6FntrtZGotkRsPn36oNd0lNYp1mbsx_0aQdPeNr4l4SMmoqtyG8-rk29S6wclCM3ggihy3TrFN1RwS0uRXtaZXFzxw4DZPw/s1600/mobile-posting1.png" style="border: none; display: block; height: auto; margin: 0px auto 20px; max-width: 100%;" width="500" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<div style="text-align: justify;">
In above box you can see a unique <b>verification code</b> which is only for your this blog. So you'll send this code either by <b>MMS or by SMS</b> to blogger.com, If you want to post pictures or you are out of the US then you'll send the code via MMS to<b>go@blogger.com</b>, however, if your phone doesn't support MMS then simply send this code to <b>256447</b>. This is the number of Blogger for accepting posts via mobile. That's all for setting up your mobile phone. By using mobile your posts will be automatically published on your blog.</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 enable email posting in Blogger?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
Now the second part is setting up email posting in blogger. See below image for understanding what you need to do for email posting:</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUVzO8ffSxROa2rP7Bb91-zeeAZG8djSCdZ_d9EiNZ-kitEIXl8CAjA_OKgwIZbDmWq9Hv2DIp7MjIpRFb2T62Z_RQjidhpAJyrx-U85PdwwFxIB0i5-wHdoMcQOaIlRjRQdJj-KJ1GyI/s1600/mobile-posting.png" style="color: #349ecb; text-decoration: none;"><img alt="" border="0" class=" aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUVzO8ffSxROa2rP7Bb91-zeeAZG8djSCdZ_d9EiNZ-kitEIXl8CAjA_OKgwIZbDmWq9Hv2DIp7MjIpRFb2T62Z_RQjidhpAJyrx-U85PdwwFxIB0i5-wHdoMcQOaIlRjRQdJj-KJ1GyI/s1600/mobile-posting.png" style="border: none; display: block; height: auto; margin: 0px auto 20px; max-width: 100%;" width="500" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
In above snap shoot you can see the pink color area and words "SecretWords". So this is the point where you'll create a new email address only for your blogger.com's account. this email will be used when you'll be sending an email to blogger.</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;">
<b>For Example:</b> You'll be probably having an email address i.e abc@gmail.com orxyz@yahoo.com. So when you'll compose an email in the email body, you'll have to send that email to this address which you're creating right here in above page as showing in the image.</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;">
<b>Didn't get? Let me further explain:</b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
awpareshan. is my blogger user name, so the <b>secretWords</b> for this email maybe anything like: abc, xyz, 123 or whatsoever. So my blogger.com email will be looking like:awpareshan.abc@blogger.com, so whenever I'll send posts from my email, I'll send them to this <b>[awpareshan.abc@blogger.com]</b> email.</div>
<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;">
<b>There are three more radio buttons:</b></h4>
<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;"><b>Publish Email Immediately:</b> If you checked it, the email you send will be automatically publish on your blog.</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;"><b>Save emails as draft post:</b> The sent emails will be saved as draft posts and you'll later on post them.</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;"><b>Disabled</b>: This feature is currently disabled, so you must click between above two options in order to send posts via email.</li>
</ul>
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Hope you have got all the steps I provided in this posts. However, if you're still having difficulty then let me know by commenting below the post. <b>Stay around!</b></div>

How to Enable Mobile & Email Posting in Blogger?

While working with blogger.com, there are a lot of features you can use freely. You can use ultimate blogger features once you find them. B...

How to Add Google+Plus Comments to Blogger?

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zBhaBBGFWYlvcIcLHz4q8EAdpp5qvQ-bUkhWGQlYACI2ItfzCYuO50o_ecoJ0_cYLzMfTF_bXNkDEYPqTSKYETBUdSM4DVg6lmVy5v6xoQ86r3wUS_NKW19wa1olUgMODMjX-OGwB2E/s1600/google+-comments-to-blogger.jpg" style="clear: left; color: #349ecb; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img alt="Google+ comments in blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zBhaBBGFWYlvcIcLHz4q8EAdpp5qvQ-bUkhWGQlYACI2ItfzCYuO50o_ecoJ0_cYLzMfTF_bXNkDEYPqTSKYETBUdSM4DVg6lmVy5v6xoQ86r3wUS_NKW19wa1olUgMODMjX-OGwB2E/s1600/google+-comments-to-blogger.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a>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/AVvXsEhgJ3FeXskHSls30Az5L0Vegm3qr-VMKR0e3ZFdA5v2NDP2kw-VNrNtZL8PTZ4e0zbq31KCpjHfundqqAjn0PABdzG2QkFWGhJv4DrhGvI0CELxj6nb73Y9Eo3TQCZwZRIJDQu1_qGr6M4/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/AVvXsEhgJ3FeXskHSls30Az5L0Vegm3qr-VMKR0e3ZFdA5v2NDP2kw-VNrNtZL8PTZ4e0zbq31KCpjHfundqqAjn0PABdzG2QkFWGhJv4DrhGvI0CELxj6nb73Y9Eo3TQCZwZRIJDQu1_qGr6M4/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/AVvXsEg1erQtmjl15hu2XzcYp1UFLI_pqsRR8bm0AjyeFNzYhnqY4CfZA6Iy_lcusNr6HdQulDxDYjynGNuKGt15goUDT0wT8If3zdCh7HT4h62FkGNayPQ08-LO50u10dZmha7wrPo7b678j0o/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/AVvXsEg1erQtmjl15hu2XzcYp1UFLI_pqsRR8bm0AjyeFNzYhnqY4CfZA6Iy_lcusNr6HdQulDxDYjynGNuKGt15goUDT0wT8If3zdCh7HT4h62FkGNayPQ08-LO50u10dZmha7wrPo7b678j0o/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/AVvXsEjB7Xw-w-fqoQ1M15yjZp1WaWdKmUTbotF_3sFGuFA2ETBIeBpl035ePqx_S0oNiiAcBwOwV3PdhNpAvhaeiYo02rVn5JB8oKonejWoo-5DiNNXvP21fE9dgDYoKOWESgpjfAtrqGvzWm4/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/AVvXsEjB7Xw-w-fqoQ1M15yjZp1WaWdKmUTbotF_3sFGuFA2ETBIeBpl035ePqx_S0oNiiAcBwOwV3PdhNpAvhaeiYo02rVn5JB8oKonejWoo-5DiNNXvP21fE9dgDYoKOWESgpjfAtrqGvzWm4/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. T...

How to Create a Mobile Friendly Version of Your Blogger 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/AVvXsEg_WEpinKxoIQvjKnosKXNSVTrM7G6nrBem1pgnIQLkVNkwngae9yeaR1tqh9rIGNlGQK6d1GR83L8RP7HSwfRkXzJonlkOur__Vmm6GJYIbyOy2jDcx_haj3K2BL_ujxIjE8HzdoiFCFQ/s1600/convert-blog-to-mobile.jpg" style="clear: left; color: #349ecb; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_WEpinKxoIQvjKnosKXNSVTrM7G6nrBem1pgnIQLkVNkwngae9yeaR1tqh9rIGNlGQK6d1GR83L8RP7HSwfRkXzJonlkOur__Vmm6GJYIbyOy2jDcx_haj3K2BL_ujxIjE8HzdoiFCFQ/s320/convert-blog-to-mobile.jpg" style="border: none; height: auto; max-width: 100%;" width="320" /></a></div>
<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
We recently shared some tools for testing your website/blog on different mobile devices online. Now after checking your site/blog, you might be interested to create a user-friendly mobile version of your blog with very less efforts. A recent Google report says, Mobile searches have increased  up to 400% in 2011 and it will increase more in coming years. Google has declared 2013 as a turning point for mobile devices. Also, Google says, mobile users will dominate the desktop users onwards from 2015. So these figures show, how important mobile users are for webmasters or bloggers. Therefore, Today I would like to tell you about creating a user friendly and customized copy of your blogger blog for mobiles. Mobile users usually browse the internet with Apple, Windows Live Phones, BlackBerry, Nokia and IPADs etc. So we will create a blog that will be easily accessible on mobile devices and will also be more beautiful than normal one. The steps are straightforward.<br /><span id="more-59"></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;">
What are the Benefits of Mobile friendly blog?</h3>
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
The benefits of a Mobile friendly blog are more then your expectations. The first benefit is that you will present your content with an appropriate & suitable design to the mobile users. Mobile users will smoothly browse your content. Also you can make your blog more stunning by making few changes. And the last and most important benefit is <b>"You can insert Google Adsense ads inside your mobile blog"</b>. Usually, Adsense ads are not displayed on mobile devices, but using this tool, you can easily add Adsense ads to your Mobile site.</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 Create a Mobile version of my blog?</h3>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
This tutorial will be straightforward and it shouldn't take more than 20 minutes to create a mobile friendly version of blogger blogs. Just follow the steps below:</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: <a href="http://www.dudamobile.com/" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">www.dudamobile.com</a></li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Scroll down and click where it says: <b>Create Your Mobile Site Now</b></li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">A screen like below picture will appear, just enter your site/blog address there</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheT7wlOC0iN2DkCxiv4AuC5Z_CR7qHWasyjWf2wJKowmMewgUtEbHzTwFxxGrsc-miEhpof1ME3UNwJbOyXivp7eu-fGYb2zCPFQKHXqfos8KRm9eZHn1NjI0zfAy5jZDSdGeLaEt7IXY/s1600/mobile-friendly-blog.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheT7wlOC0iN2DkCxiv4AuC5Z_CR7qHWasyjWf2wJKowmMewgUtEbHzTwFxxGrsc-miEhpof1ME3UNwJbOyXivp7eu-fGYb2zCPFQKHXqfos8KRm9eZHn1NjI0zfAy5jZDSdGeLaEt7IXY/s400/mobile-friendly-blog.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Now just the click the button "<b>Make My Site Mobile</b>", A new window like below picture will open, where the website will be detected. There will be some beautiful templates for mobiles and also you can further customize your blog easily. If your blog is hosted on blogger, it will show you a message saying; We've identified your site as a blog. So you will click the "<b>Yes, Keep the Blog</b>" link. See below picture.<div style="line-height: 1.5625; 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;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XTvJ55_0rtLMl4y6KCgJm11mNjKksqDkcIZRlxsoi12kHcfjaypI3yiWgpHUemm75WdwCQiwPsKPK_u0fFkudJq0C_-DiyWAXvKz221pO8ufmt18mFS_e5sJ10xK9oW1-ENSdgWzMeI/s1600/mobile-friendly-blog1.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XTvJ55_0rtLMl4y6KCgJm11mNjKksqDkcIZRlxsoi12kHcfjaypI3yiWgpHUemm75WdwCQiwPsKPK_u0fFkudJq0C_-DiyWAXvKz221pO8ufmt18mFS_e5sJ10xK9oW1-ENSdgWzMeI/s400/mobile-friendly-blog1.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div>
</div>
</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 class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
Now you can select any template from the gallery, you should select a good one for your blog. Just click the template you like and it will automatically change in that mobile at left side. After selecting a desired template just click the next button in blue color. the next screen will be 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/AVvXsEiMXRjGZg04YFjR-r3NMGfahX7NcElOANIQX1DF1GU6YjT5-xupSJlNxQ6A7r11GcEX3fFBERgiCGnRVCTmLpxUrH10lqHfEJMoiVch2cAcSO7pCuzwK8gx-DIohw9tbaqAtGafQKF-RAQ/s1600/mobile-friendly-blog2.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXRjGZg04YFjR-r3NMGfahX7NcElOANIQX1DF1GU6YjT5-xupSJlNxQ6A7r11GcEX3fFBERgiCGnRVCTmLpxUrH10lqHfEJMoiVch2cAcSO7pCuzwK8gx-DIohw9tbaqAtGafQKF-RAQ/s400/mobile-friendly-blog2.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></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 class="separator" style="clear: both; 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;">
From here you can customize your blog's design all together.</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;"><b>The # 1 option:</b> is for changing the Header and Logo for your blog's mobile version.</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;"><b>The # 2 Option:</b> is for changing your blog's home page, I mean, home page color on mobiles, home page text, home page background etc.</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;"><b>The # 3 Option:</b> is for changing the blog posts, the blog posts means, when a single post is being viewed, so you can change its colors, background, fonts, sizes etc very easily.</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;"><b>The # 4 Option:</b> is for changing comments' setting. You can change the background for the comments area, or the comments authors' names etc.</li>
</ul>
<div>
Also, if you notice these are just the basic options, if you observe above these 4 options there are two links one says "<b>Basic</b>" and the another says "<b>Full</b>". If you click Full link then you will see a lot of more features for your mobile blog to customize. You can insert Google Adsense ads to your blog's mobile version by using a feature from the full list. See the picture below where the Adsense ads option is also there.<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3GbRoL6LQwn-EfntfNLnuE1XlnlxvvrvutNKnti6uBe92U4zpHqn0teAFXYeKQERFzKmdh9QFb19rD-i9dgSwyDdP2njnMFTVLqZAUYfNf9QAmc9PVFV2dC8BJ-QvaeBXx4X9k2Sq88/s1600/mobile-friendly-blog3.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3GbRoL6LQwn-EfntfNLnuE1XlnlxvvrvutNKnti6uBe92U4zpHqn0teAFXYeKQERFzKmdh9QFb19rD-i9dgSwyDdP2njnMFTVLqZAUYfNf9QAmc9PVFV2dC8BJ-QvaeBXx4X9k2Sq88/s400/mobile-friendly-blog3.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div>
</div>
</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;">
In above picture I've clicked the full button, so you can see all features which can be further customized. So if you want to insert Adsense ads inside your blog's mobile version then simply click that option. You will see just two available ad unit sizes there, the one is 300*250 and 468*90. So you can add up to two ad units inside your mobile blog's design. By doing so, you will earn more money through adsense.</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;">
After customizing your blog and adding each and everything, just click the next button and you will see a screen like below picture:<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzu3gmz13xow80PURvbgXMr1yLU1CyMOCDcaE9L68z8NJmG52OGaTpLLmI27DrG_juLL-65YDqABJJeQVBu6Md5SFME16rpAUmGIQODZJXTAL5AXgp31wfwIcSDKjL_gog7JC_j9gkByI/s1600/mobile-friendly-blog4.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzu3gmz13xow80PURvbgXMr1yLU1CyMOCDcaE9L68z8NJmG52OGaTpLLmI27DrG_juLL-65YDqABJJeQVBu6Md5SFME16rpAUmGIQODZJXTAL5AXgp31wfwIcSDKjL_gog7JC_j9gkByI/s400/mobile-friendly-blog4.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div>
</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;">
Now here it says save your site, so just create an account by entering your email and password and your account will be created. Just click the next button. Now you will see the final screen like below image:<div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4UMQlH_lgwTG-zzbxo33rU0rIYJ_L7rTZCg2jPZhAXOwzgVJZvjRpxMc9tk_IJDjc4V02eLEuiaNw1idfbqTF3pemq5lX5tP2lDgAEhyy60-Q0DjLh6sQEedA_KgN0rgCSvEIyNolc0/s1600/mobile-friendly-blog5.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4UMQlH_lgwTG-zzbxo33rU0rIYJ_L7rTZCg2jPZhAXOwzgVJZvjRpxMc9tk_IJDjc4V02eLEuiaNw1idfbqTF3pemq5lX5tP2lDgAEhyy60-Q0DjLh6sQEedA_KgN0rgCSvEIyNolc0/s400/mobile-friendly-blog5.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div>
</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;">
<b>Congratulation</b>! You've just created a beautiful mobile version of your blog. Just click the <b>"Setup My Mobile Website Redirect"</b> link and you will find a piece of JavaScript code, which you will have to insert inside your blog's template, just copy that code.</div>
<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;">
How to insert the code into Blogger?</h4>
<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;">First copy the JavaScript code</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Go to Blogger Dashboard</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Template >> Edit HTML</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Find <b><head></b> tag and just after <b><head></b> paste that code which you copied earlier</li>
<li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Save Your Template and all done...</li>
</ol>
<div>
<b>Conclusion</b></div>
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;">
The JavaScript will redirect the mobile user to the customized version of your blog. Because, the default blogger template for mobile versions is very simple and unattractive. So it will do everything for you. Also, the same tips can be used for creating a mobile friendly WordPress site or any other type of 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;">
<b>Have a Nice Day!</b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;">
I'll particularly publish a new post soon for creating a mobile friendly copy of your WordPress website. So stay tuned for that and do comment if you have questions.</div>

How to Create a Mobile Friendly Version of Your Blogger blog?

We recently shared some tools for testing your website/blog on different mobile devices online. Now after checking your site/blog, you m...

15 Most Popular Blogger Widgets for Every Blog

<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; text-align: justify;">
<a href="http://www.bestbloggercafe.com/wp-content/uploads/2013/07/blogger-popular-widgets.jpg" style="color: #349ecb; text-decoration: none;"><img alt="blogger popular widgets" class="size-medium wp-image-412 alignleft" height="201" src="http://www.bestbloggercafe.com/wp-content/uploads/2013/07/blogger-popular-widgets-300x201.jpg" style="border: none; display: inline; float: left; height: auto; margin: 0px 20px 10px 0px; max-width: 100%;" width="300" /></a>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>
</h1>
<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;">
15 Blogger Widgets to have in 2013</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; text-align: justify;">
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>
</h1>
<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;">
#1. Flipped Style Social Media Widget</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwtbAasBNsmYCz7MZvAsFLZUFNE6KW7-WX-vN3IMQJEI3iq8ecxK5AbNsZKFkyDi21nQnsVgJCf_TdcoUIk-yAoPmpCEwOKu0EbUZxXSf6aNX-mBH8ScOhXXu3N9R2aZX-o-CLoDyLaOw/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/AVvXsEhwtbAasBNsmYCz7MZvAsFLZUFNE6KW7-WX-vN3IMQJEI3iq8ecxK5AbNsZKFkyDi21nQnsVgJCf_TdcoUIk-yAoPmpCEwOKu0EbUZxXSf6aNX-mBH8ScOhXXu3N9R2aZX-o-CLoDyLaOw/s301/Social+media+cute+widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; margin-bottom: 14px; padding: 0px;">
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>
</h1>
<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;">
#2. Professional Subscribe Now Widget</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_6gPDYbPOQZL5QdqN2iIZ7-6xHmKYMZIzc5zI8TWr50NSmhLyjf1laHyoG_WZgaj7UvLoVyWMprFMdnSbVrh4ils60LLaMx_xkCkh4n1ARvK_JnqX0Q_3faB1GLOZKh4yoV9lFeVgve8/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/AVvXsEh_6gPDYbPOQZL5QdqN2iIZ7-6xHmKYMZIzc5zI8TWr50NSmhLyjf1laHyoG_WZgaj7UvLoVyWMprFMdnSbVrh4ils60LLaMx_xkCkh4n1ARvK_JnqX0Q_3faB1GLOZKh4yoV9lFeVgve8/s310/subscribe+now+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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>
</h1>
<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;">
#3. Social media & RSS subscription widget</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2yJW_ze47u-hIs68Z_TcfzSQTn8msG4c7_rfFXFmzAIyjdXO5uGdJmAKkWB5zQvcFoUMTxiDUaa4kBxXHhOGXYvow6TjToGzKjEWz3kxLYmbAN7Ava0i5Ukl-Q88XsbMa0SUJndtSwZs/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/AVvXsEh2yJW_ze47u-hIs68Z_TcfzSQTn8msG4c7_rfFXFmzAIyjdXO5uGdJmAKkWB5zQvcFoUMTxiDUaa4kBxXHhOGXYvow6TjToGzKjEWz3kxLYmbAN7Ava0i5Ukl-Q88XsbMa0SUJndtSwZs/s320/social+subscription+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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>
</h1>
<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;">
#4. Social Media Sharing Widget Below Posts</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPqAUXO3fFkw3e_wRM-Srg7L5NvpWsWCgzpfY0cOfG_AAh-uS31C5rdelxxpWRZGH4OEcP_2RH7KB3blngCL1htRifEiQ2P3z0CVZm3M_OWU5QNxT56a-zqgBopKyu8Fhk0Zi-NuC3pI/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/AVvXsEjZPqAUXO3fFkw3e_wRM-Srg7L5NvpWsWCgzpfY0cOfG_AAh-uS31C5rdelxxpWRZGH4OEcP_2RH7KB3blngCL1htRifEiQ2P3z0CVZm3M_OWU5QNxT56a-zqgBopKyu8Fhk0Zi-NuC3pI/s1600/social+sharing+widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; margin-bottom: 14px; padding: 0px;">
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>
</h1>
<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;">
#5. Black Color Beautiful Buttons Styles for Labels</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC93dgY9c0mKRTXoxfS1QFsbM0obRFHDkDJqzdJvt8Z3LMyl9ztMNV3m8QoKEyWWSyO69Z5XFjhwAFSAbhutV7OHqVRwxJEHPnUBOXeyNwFaOW33OVNdm2grjEbcWQFRzJKAVqB13ZZuc/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/AVvXsEgC93dgY9c0mKRTXoxfS1QFsbM0obRFHDkDJqzdJvt8Z3LMyl9ztMNV3m8QoKEyWWSyO69Z5XFjhwAFSAbhutV7OHqVRwxJEHPnUBOXeyNwFaOW33OVNdm2grjEbcWQFRzJKAVqB13ZZuc/s1600/blogger+label+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; margin-bottom: 14px; padding: 0px;">
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>
</h1>
<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;">
#6. Curved Glossy Horizontal Menu for Blogger</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTgCwUAyYgJxNgluCao8yxz1YnOC9V436l-Ulyd8lTyq1mUj2bYhx44EYtHEEtDrw9HUBQOAyaTweFD34eMpu3lXRXv1EE5v-1Q4o4YmxG0k6tJS7YaBmx0JmS1dJoj149FCuHsJhwT_U/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/AVvXsEgTgCwUAyYgJxNgluCao8yxz1YnOC9V436l-Ulyd8lTyq1mUj2bYhx44EYtHEEtDrw9HUBQOAyaTweFD34eMpu3lXRXv1EE5v-1Q4o4YmxG0k6tJS7YaBmx0JmS1dJoj149FCuHsJhwT_U/s300/beautiful+menu+for+blogger.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; margin-bottom: 14px; padding: 0px;">
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>
</h1>
<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;">
#7. Popular Posts Numbering Widget with colors</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSJbCfeArfAoht_v01DLgbSlXoEE4kpwCslToqvVHzR6Vl5RMC-xTirPvu3k9TLtFPfcBeVzDXC3__DLU4Yn8NIbT4hw3AlkFzvcNc9aH7hPvWtqn21uoDQxbrzdV5CMsVMjpIWKqKzw/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/AVvXsEirSJbCfeArfAoht_v01DLgbSlXoEE4kpwCslToqvVHzR6Vl5RMC-xTirPvu3k9TLtFPfcBeVzDXC3__DLU4Yn8NIbT4hw3AlkFzvcNc9aH7hPvWtqn21uoDQxbrzdV5CMsVMjpIWKqKzw/s1600/popular-posts-widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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://www.bestbloggercafe.com/2013/06/beautiful-popular-posts-numbering.html" style="color: #349ecb; text-decoration: none;" target="_blank">Grab the customized version of this widget</a>.</div>
</h1>
<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;">
#8. Social Media Floating Widget</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWeoDK8oEpCyY-5NmIeFLrbbsobtxz5QlN36C3KY0-zqFQB-nPXflN01iGQP1Uf9Z4J-iU9SiWMlb0-jlXut8Ju1-hElCNiYt0AZKga8rfXaRjqex7C2EAnULIMKb65TnOQts5s7V5TAw/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/AVvXsEiWeoDK8oEpCyY-5NmIeFLrbbsobtxz5QlN36C3KY0-zqFQB-nPXflN01iGQP1Uf9Z4J-iU9SiWMlb0-jlXut8Ju1-hElCNiYt0AZKga8rfXaRjqex7C2EAnULIMKb65TnOQts5s7V5TAw/s1600/blogger-floating-widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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/" style="color: #349ecb; text-decoration: none;" target="_blank">Grab it from here</a>.</div>
</h1>
<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;">
#9. Social Media Share Buttons Below Post Titles</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIldPQoDcMkefLNdHmyK3gA81m_bZqaOAdtaj23mF7ONS72NPEL13LUGzPgnvlqXrE-ZMe56H8hdhnxKR3Ejs5Yf-obZ0fPDHFzpJm-9MQhYcoDLk7_Bu-nZ8TJqc0MSDaptbEy4xAeA/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/AVvXsEhcIldPQoDcMkefLNdHmyK3gA81m_bZqaOAdtaj23mF7ONS72NPEL13LUGzPgnvlqXrE-ZMe56H8hdhnxKR3Ejs5Yf-obZ0fPDHFzpJm-9MQhYcoDLk7_Bu-nZ8TJqc0MSDaptbEy4xAeA/s1600/social-sharing-widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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>
</h1>
<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;">
#10. jQuery Facebook Pop Up Like Box</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWnGa9j1cm2ajw7w8cb5ICNsCsLrbl8VkzjmW-wVe_dNxvc4Zh9ed40WUQAB7d7rcUEaHn9BHIAgQ0OTZU_YlK0o12GkJCrV38426U7prfh7sqFby8Xdd4Dvhgk28-c6H9foiA7mUH4b4/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/AVvXsEgWnGa9j1cm2ajw7w8cb5ICNsCsLrbl8VkzjmW-wVe_dNxvc4Zh9ed40WUQAB7d7rcUEaHn9BHIAgQ0OTZU_YlK0o12GkJCrV38426U7prfh7sqFby8Xdd4Dvhgk28-c6H9foiA7mUH4b4/s320/facebook-like-box.jpg" style="border: none; height: auto; max-width: 100%;" title="" width="294" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; margin-bottom: 14px; padding: 0px;">
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>
</h1>
<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;">
#11. Related Posts Widget by Linkwithin</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ2maUrLd4-b7tcgliObdGS0TdDyon2ASarj3fntPosawioOUF-hSfaN0XF2wtEX4uagVE8W6exOaLtgeHUHiz8GaV7407moFsubYLIVr92FGCne2CN-wCELWmJpar9yx8OabZsjpatFU/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/AVvXsEiZ2maUrLd4-b7tcgliObdGS0TdDyon2ASarj3fntPosawioOUF-hSfaN0XF2wtEX4uagVE8W6exOaLtgeHUHiz8GaV7407moFsubYLIVr92FGCne2CN-wCELWmJpar9yx8OabZsjpatFU/s1600/related+posts+widget.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; margin-bottom: 14px; padding: 0px;">
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>
</h1>
<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;">
#12. Black Color Drop Down Menu for Blogger</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBsTdwQS31hghEHatGAuQPtnB0obO8vnYk6Cbb4QmgS_xtGO2CJb8cj7JOzdygzHaiQuze-qmUS85Axee8SbbVcb-tDV9XXy2L_7ZvoUORxN_04QzbQtPjvXLbQb7i_EW7b_Io66xcT50/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/AVvXsEiBsTdwQS31hghEHatGAuQPtnB0obO8vnYk6Cbb4QmgS_xtGO2CJb8cj7JOzdygzHaiQuze-qmUS85Axee8SbbVcb-tDV9XXy2L_7ZvoUORxN_04QzbQtPjvXLbQb7i_EW7b_Io66xcT50/s320/drop+down+menu+for+blogger.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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>
</h1>
<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;">
#13. Three Column Black Footer Widget for Blogger</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtit0C4kNWSngEiue1XRyfEyVqnuhwCPdUFp0hStUKmtIxjpCmyHM29whxwzNVBZDHLCry3VopT8_dIFTuAcWYpZ6ljizI2Q5mFu02_Nf4QtmRrpKS7j4Abp_6SkPIEDJ5iaNGWvwCDQQ/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/AVvXsEhtit0C4kNWSngEiue1XRyfEyVqnuhwCPdUFp0hStUKmtIxjpCmyHM29whxwzNVBZDHLCry3VopT8_dIFTuAcWYpZ6ljizI2Q5mFu02_Nf4QtmRrpKS7j4Abp_6SkPIEDJ5iaNGWvwCDQQ/s315/three-column-footer-widget.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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>
</h1>
<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;">
#14. Bouncing jQuery Menu for Blogger</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1bubClCfVndKjQIoGZtU8oqIAjgHo0vyBAtm8F8Un_Dm9SmSeeNMUxo7xxHVyg62E3SSd_OeHaPVY-94p4_sRFWIqC1gatk2y4pOAjE3eEIEpKw_kMfsfW5KmcU3_pTvntfTRnKwzlw/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/AVvXsEjP1bubClCfVndKjQIoGZtU8oqIAjgHo0vyBAtm8F8Un_Dm9SmSeeNMUxo7xxHVyg62E3SSd_OeHaPVY-94p4_sRFWIqC1gatk2y4pOAjE3eEIEpKw_kMfsfW5KmcU3_pTvntfTRnKwzlw/s320/bouncing+jQuery+menu+for+blogger.jpg" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px; margin-bottom: 14px; padding: 0px;">
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>
</h1>
<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;">
#15. Social Media Recommendation Bar for Blogger</h3>
<h1 class="entry-title" 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: 35px; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;">
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdFhKI1g9QRnCn-L_6YCMMf7O68dfAeBbsSiMAEfVFm9XkxZwrB-J7Zf5ijQJrFan7brZnoRZMz1JUy1mQr5OO_yI7LJozleXY5uwM4ts_mRJYRPAjipLkC7I70VSYSXB-4bMXoAIuwj0/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/AVvXsEhdFhKI1g9QRnCn-L_6YCMMf7O68dfAeBbsSiMAEfVFm9XkxZwrB-J7Zf5ijQJrFan7brZnoRZMz1JUy1mQr5OO_yI7LJozleXY5uwM4ts_mRJYRPAjipLkC7I70VSYSXB-4bMXoAIuwj0/s320/social+recommendation+bar.png" style="border: none; height: auto; max-width: 100%;" title="" /></a></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
<b>Other Widgets & tutorials we Recommend: </b></div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
You can also have a look at below widgets/tuts which we've already shared on this blog:</div>
<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
</div>
<ul style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; 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;">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="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; font-weight: normal; line-height: 25px;">
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>
</h1>

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 thousand...