Bloggerdaddy - A guide for new blogger

List of top 10 best responsive website / blog checkers online

<div dir="ltr" style="text-align: left;" trbidi="on">
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">I am been hearing so many things about responsive <a href="http://www.shipmethis.com/2014/04/checkwebsitehacked.html" target="_blank">website checkers </a>which
 check whether your website or blog is responsive with popular devices 
including tablets, mobile phones, laptops, televisions etc. You can use <a href="http://www.shipmethis.com/2014/04/responsiveadsplacement.html" target="_blank">responsive ads</a>
 for your responsive websites. Unfortunately I couldn't find good list 
of best responsive website / blog checkers online available to check 
shipmethis.com. Here I am listing some of the top responsive website / <a href="http://www.shipmethis.com/2013/05/top-7-best-and-popular-seo-online-tools.html" target="_blank">blog checkers</a> that are online.<br />
<br />
</span></span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F7OVpgOXiyj94m8hUq9_9aOja5kCZ6IKL5PRnQAt4-c0E2kzBhOQXiv4kbvtWZxjyDopR5uw6ZSbDtRpdHskYKO5lsLDuY2x7nqRUE0HAd2_jbBK2EHbTPPI1ChNAZBYwAvhBJPxUtM/s1600/Capture.PNG" imageanchor="1"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F7OVpgOXiyj94m8hUq9_9aOja5kCZ6IKL5PRnQAt4-c0E2kzBhOQXiv4kbvtWZxjyDopR5uw6ZSbDtRpdHskYKO5lsLDuY2x7nqRUE0HAd2_jbBK2EHbTPPI1ChNAZBYwAvhBJPxUtM/s320/Capture.PNG" width="320" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<span itemscope="" itemtype="http://schema.org/Blog">responsive</span></div>
<span itemscope="" itemtype="http://schema.org/Blog">

<a href="https://www.blogger.com/null" name="more"></a><br />
1.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://www.responsinator.com/?url=http%3A%2F%2Fwww.shipmethis.com" rel="" target="_blank">Responsinator.com</a>
 – Responsinator show your website in different devices including iPhone
 3+4 portrait with a width of 320px, 480px, iphone 5, 568px, Crappy 
Android portrait with a width of 240px, 320px, Andriod Nexus portrait of
 384px, 600px and so on. These show the website only and not the version
 of mobile hosted on blogger.<br />
<br />
2.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://mattkersley.com/responsive" rel="" target="_blank">Mattkersley.com</a>
 - in this site you can select either devices only or width sizes. You 
cannot navigate the website shown in the frames. This site shows 240px, 
320px, 480px, and 768px frames.<br />
<br />
3.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://www.studiopress.com/responsive/" target="_blank">Studiopress.com</a>
 - This website is also like mattkersley.com which checks 240px, 320px, 
480px, and 768px frames. This website is made by Matt kersley itself. 
Now you know the similarity.<br />
<br />
4.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://responsivedesignchecker.com/www.shipmethis.com" target="_blank">Responsive design checker</a>
 - This site offers sizes such as 27 inch monitor, 17 inch workstation, 
15 inch macbook pro, 11 inch macbook air, ipad landscape, nexus, and 
iphone. These are divided into desktops and laptops and tablets and 
phones. You can click through each icon and know how your appears in 
these devices.<br />
<br />
5.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://responsivetest.net/" target="_blank">Responsive test</a>
 - This site offers scales which we can access the width of our website.
 You have to press enter to load your website after typing your website.
 You can change the width of devices by changing the numbers.<br />
<br />
6.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://responsive.is/shipmethis.com" target="_blank">Responsive.is</a>
 - This website offers devices such as desktops, tablet landscapes, 
tablet portrait, smartphone landscapes and smart phone portrait. This is
 created by TypeCast.<br />
<br />
7.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://designmodo.com/responsive-test" target="_blank">Designmodo.com</a> - This is a simple responsive checker where new bloggers can access and study.<br />
<br />
8. <a href="http://www.dimensionstoolkit.com/a/#url=http://www.shipmethis.com&w=1024&h=480" target="_blank">Dimensionstoolkit</a> -
 Dimension tool kit is one of the newest response checker in town. This 
allows websites to view in devices like phone, wide phone, tablet and 
wide tablet. This also allows users to check the website's 
responsiveness in different widths up to 2450px.  Users can click on the
 scale to check the responsiveness.<br />
<br />
9.<span class="Apple-tab-span" style="white-space: pre;"> </span><a href="http://quirktools.com/screenfly/#u=http%3A//www.shipmethis.com/2014/04/online-free-converter-gadget-from-html.html&w=1024&h=600" target="_blank">Quirktools.com</a>
 - I think this is a good website for checking your website. This 
website has scales to check width, many landscapes and portraits, There 
is option for rotating, allow scrolling button, use of proxy server etc.
 This one is the best in store today.<br />
<br />
10. <a href="http://ami.responsivedesign.is/" target="_blank">ami.responsivedesign.is</a> -
 This is website that show website's responsiveness in laptop, 
television, tablet and mobile. The advantage of this is that you can see
 the website version in mobile of rather than the blogger mobile 
version.<br />
<br />
Hope you liked the list. You can suggest other good responsive checkers 
on the comment section. If you like this post, kindly share it and don’t
 forget to subscribe us.</span><br />
<span itemscope="" itemtype="http://schema.org/Blog"><a href="http://blogerdaddy.blogspot.com/2016/01/create-alexa-rank-widget-for-your.html"><br /></a></span>
<span itemscope="" itemtype="http://schema.org/Blog"><a href="http://blogerdaddy.blogspot.com/2016/01/create-alexa-rank-widget-for-your.html">Create Alexa Rank Widget for your Website / Blog with JAVA Code</a></span><br />
<span itemscope="" itemtype="http://schema.org/Blog"><br /></span>
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">Click here for SEO tools</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Tips" target="_blank">Click here for more Tips</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Template" target="_blank">Click for blogger templates</a></span><br />
<a href="http://blogerdaddy.blogspot.in/search/label/Tools" style="font-family: 'times new roman'; font-size: x-large;">Click here for blogger tools</a><br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<span itemscope="" itemtype="http://schema.org/Blog"></span></div>
<div>
<br /></div>
</div>

Blogger Template Tips Tools List of top 10 best responsive website / blog checkers online

I am been hearing so many things about responsive website checkers which check whether your website or blog is responsive with popular dev...

Create Alexa Rank Widget for your Website / Blog with JAVA Code

11:53:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span itemscope="" itemtype="http://schema.org/Blog">Alexa
 is one of the top ranking companies that rank websites and blogs. Alexa
 rank is very important for the websites which gives them more push 
towards the Google page rank. If you add the gadget to your blog, then 
you will have more increase in the ranking for sure.<br />
<a href="https://www.blogger.com/null" name="more"></a><br />
<br />
As you know Alexa is having new design and they have changed some pages 
and users are unable to find the gadget page from the website.</span><br />
<span itemscope="" itemtype="http://schema.org/Blog"><br /></span>
<br />
<div style="text-align: center;">
<span itemscope="" itemtype="http://schema.org/Blog"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgth5-HlDlcIwMsvNZCT9I7pXdB2ilRm1JpopEJcF1nFxhdrR0I4IbGiO2gxWDLAL8uX_AvPIulp2qYdjglHSfXpNIN0nvpU7h6sWJN5AnNenLTR08yunfygjWhIh1H2XigD9RLBYNhzSM/s1600/20160106113926171.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgth5-HlDlcIwMsvNZCT9I7pXdB2ilRm1JpopEJcF1nFxhdrR0I4IbGiO2gxWDLAL8uX_AvPIulp2qYdjglHSfXpNIN0nvpU7h6sWJN5AnNenLTR08yunfygjWhIh1H2XigD9RLBYNhzSM/s400/20160106113926171.png" /></a></span></div>
<div style="text-align: center;">
<span itemscope="" itemtype="http://schema.org/Blog"><span style="color: #073763;">Alexa rank</span></span></div>
<div style="text-align: center;">
<span itemscope="" itemtype="http://schema.org/Blog"><br /></span></div>
<span itemscope="" itemtype="http://schema.org/Blog">The
 Alexa widgets are free and easy to install. These gadgets can be 
embedded in the website by adding a code to the HTML space. The one i am
 sharing will automatically update your website's rank and the date of 
when it was ranked last. The model is displayed above.<br />
<br />
So i am providing a simple code for your website. Just copy and paste 
this code to your HTML gadget. Edit the red code and replace <span style="color: red;"><a href="http://blogerdaddy.blogspot.in/" target="_blank">bogerdaddy.blogspot.in </a></span>to your website address.<br />
<br />
</span><br />
<blockquote class="tr_bq">
<span itemscope="" itemtype="http://schema.org/Blog"><div class="textwidget"><div style="text-align:center;margin-top:10px;"><script type='text/javascript' language='JavaScript' src='http://xslt.alexa.com/site_stats/js/t/b?url=<span style="color: red;">bogerdaddy.blogspot.in</span>'></script></div></div></span></blockquote>
<span itemscope="" itemtype="http://schema.org/Blog">If you want to check the how your webpage looks like in different browsers after adding the code, read my new post; "<a href="http://blogerdaddy.blogspot.com/2016/01/best-free-tools-and-tutorials-for.html" target="_blank">Best Free Tools and Tutorials for making websites / blogs responsive</a>"</span><br />
<br />
<br />
<br />
<br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">Click here for SEO tools</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Tips" target="_blank">Click here for more Tips</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Template" target="_blank">Click for blogger templates</a></span><br />
<span itemscope="" itemtype="http://schema.org/Blog"></span><br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<a href="http://blogerdaddy.blogspot.in/search/label/Tools" style="font-size: x-large;">Click here for blogger tools</a><span itemscope="" itemtype="http://schema.org/Blog"></span></div>
<blockquote class="tr_bq">
</blockquote>
</div>

Widgets Create Alexa Rank Widget for your Website / Blog with JAVA Code

Alexa is one of the top ranking companies that rank websites and blogs. Alexa rank is very important for the websites which gives them mo...

Best Free Tools and Tutorials for making websites / blogs responsive

11:45:00 AM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span itemscope="" itemtype="http://schema.org/Blog">Responsive design was a term coined by Ethan Marcotte. He have a blog which is the unstoppablerobotninja.com .
 As you know in he coming years of internet, mobile users are going to 
govern the revenue rates of publishers. The number of mobile phones in 
developing countries are going in high rate and the number of laptop 
rates are going down. You can read the economic times review about "Number of mobile handsets sold in India to reach 251 million units next year: Gartner"
 by Indu Nandakumar, ET Bureau at Oct 11, 2012. The article says that 
the number of Samsung mobile phones expected to sell in the 2013 is 251 
million units.</span><br />
<span itemscope="" itemtype="http://schema.org/Blog"><br /></span>
<span itemscope="" itemtype="http://schema.org/Blog">Responsive
 design is always an added bonus to your website. Responsiveness 
increases click rate, reduces bounce rate and make your site attractive 
to visitors from different devices. How one can create a responsive 
design? It is not easy to create a responsive design yourself, if you 
are not a pro in it.<br />
</span><br />
<div style="text-align: center;">
<span itemscope="" itemtype="http://schema.org/Blog"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGpKKQfDnywKb7BxT2yEquo8YkNloztRXe01wfQaDYDFAzKi0iR-cAou4DrwNaRmPsDL8pH_9kf6TwFMHqFGABAZkZualySopcJiv1DemgAltmv-ytOXd4EkUmtMg1-rctU7-Lr92Bk0/s1600/mm.jpg" imageanchor="1"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGpKKQfDnywKb7BxT2yEquo8YkNloztRXe01wfQaDYDFAzKi0iR-cAou4DrwNaRmPsDL8pH_9kf6TwFMHqFGABAZkZualySopcJiv1DemgAltmv-ytOXd4EkUmtMg1-rctU7-Lr92Bk0/s200/mm.jpg" width="200" /></a></span></div>
<div style="text-align: center;">
<span itemscope="" itemtype="http://schema.org/Blog">on pc</span></div>
<span itemscope="" itemtype="http://schema.org/Blog"><br />
May be you have seen some codes like this;</span><br />
<blockquote class="tr_bq">
<br />
/* Default styles first then media queries */<br />
@media screen and (min-width: 400px)  {...}<br />
@media screen and (min-width: 600px)  {...}<br />
@media screen and (min-width: 1000px) {...}<br />
@media screen and (min-width: 1400px) {...}</blockquote>
or like this<br />
<br />
<blockquote class="tr_bq">
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1400px)" </blockquote>
<span itemscope="" itemtype="http://schema.org/Blog">These codes push the website to perform different layouts in different pixels.<br />
<br />
I can share you some good article written about making your website responsive and some tools.</span><br />
<span itemscope="" itemtype="http://schema.org/Blog"><br /></span>
<br />
<div style="text-align: center;">
<span itemscope="" itemtype="http://schema.org/Blog"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQN3i00chhv8puPP_Fq9wAnEjmdO2TDbYEL5QbZsIaDCalPY5VODB4I1WNGz7AWgto9ZbF0wPNQ7_012H7jcmXmAA5LBeYOOwWO0TBR23XPiKhIG5WDi-yQe9Urfx4bj5C2Mq7kdP0z9M/s1600/on+mobile.PNG" imageanchor="1"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQN3i00chhv8puPP_Fq9wAnEjmdO2TDbYEL5QbZsIaDCalPY5VODB4I1WNGz7AWgto9ZbF0wPNQ7_012H7jcmXmAA5LBeYOOwWO0TBR23XPiKhIG5WDi-yQe9Urfx4bj5C2Mq7kdP0z9M/s320/on+mobile.PNG" width="176" /></a></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td class="tr-caption">on Mobile</td></tr>
</tbody></table>
<span itemscope="" itemtype="http://schema.org/Blog">
</span>First to some good articles about responsiveness.<br />
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text"></span></span><br />
<h4>
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text" style="background-color: yellow;">
 Tutorial 1</span></span></h4>
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">
</span></span>
<br />
<div>
</div>
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">
</span></span>
<br />
<div>
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">In http://learn.shayhowe.com/ i have seen article about RESPONSIVE DESIGN. I really like it because of the simplicity in the article. The article share a responsive website called the <a href="http://foodsense.is/" target="_blank">food sense</a> and
 its performance. It also talk about Flexible Embedded Media, Combining 
Viewport Values, , Viewport Resolution, Viewport Scale, Viewport Height 
& Width, Mobile First, Media Query Browser Support, Orientation 
Media Feature, Aspect Ratio Media Features, Pixel Ratio Media 
Features,Resolution Media Feature,Logical Operators in Media Queries</span></span></div>
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">
</span></span>
<div>
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">Flexible Grid and fixed grid.</span></span></div>
<span itemscope="" itemtype="http://schema.org/Blog"><span itemprop="text">
<div>
</div>
<div>
</div>
<div>
<h4>
<span style="background-color: yellow;">
Tutorial 2</span></h4>
</div>
<div>
This article is found in http://alistapart.com and it had about 103 
comments.This article discusses asic things like what is media query 
etc. You can view it here, <a href="http://alistapart.com/article/responsive-web-design" target="_blank">MOBILE TO WEBSITE AND VICE VERSA</a></div>
<div>
</div>
<h4>
<span style="background-color: yellow;">
Other Tutorials</span></h4>
<div>
1. <a href="http://css-tricks.com/css-media-queries/">http://css-tricks.com/css-media-queries/</a></div>
<div>
</div>
<div>
2. <a href="http://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/">http://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/</a></div>
<div>
</div>
<div>
3. <a href="http://www.lukew.com/presos/preso.asp?26">http://www.lukew.com/presos/preso.asp?26</a></div>
<div>
</div>
<div>
4. <a href="http://dev.w3.org/csswg/css-values/#viewport-relative-lengths">http://dev.w3.org/csswg/css-values/#viewport-relative-lengths</a></div>
<div>
</div>
<h3 style="text-align: center;">
<span style="background-color: #6aa84f;">
TOOLS FOR RESPONSIVENESS</span></h3>
<div>
</div>
<div>
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">You
 need check the responsiveness of your website. For that you have to use
 free responsive checkers available in the internet. For making your 
work easy, i have collected the best free ones and made a list which you
 can access here. </span><br />
<h4 style="background-color: white; border: 0px; clear: both; color: #402f33; font-family: Prociono, Arial, sans-serif !important; margin: 0px 0px 5px; outline: 0px; padding: 10px 0px 0px; position: relative; text-align: center; text-transform: capitalize; vertical-align: baseline;">
<a href="http://blogerdaddy.blogspot.com/2016/01/list-of-top-10-best-responsive-website.html" target="_blank">List Of Top 9 Best Responsive Website / Blog Checkers Online</a></h4>
<div>
Hope you got a clear image about the template and layout of the website. </div>
</div>
<div>
</div>
<div>
The you can get how your website speed distribute in pc as well as mobile by going to this link.</div>
<div>
<h4 style="background-color: white; border: 0px; clear: both; color: #402f33; font-family: Prociono, Arial, sans-serif !important; margin: 0px 0px 5px; outline: 0px; padding: 10px 0px 0px; position: relative; text-align: center; text-transform: capitalize; vertical-align: baseline;">
<a href="http://blogerdaddy.blogspot.com/2016/01/free-online-website-webpage-speed-test.html" target="_blank">Free Online Website / Webpage Speed Test Tool From Google, Yahoo</a></h4>
</div>
</span></span>Hope this helps. Subscribing ship me this for cool posts like this. You can also follow us on fb, twitter and Google plus.<br />
<span itemscope="" itemtype="http://schema.org/Blog"></span><br />
<div>
<a href="http://blogerdaddy.blogspot.com/2016/01/popular-posts-with-automatic-numbering.html"><br /></a>
<a href="http://blogerdaddy.blogspot.com/2016/01/popular-posts-with-automatic-numbering.html">Popular Posts With Automatic Numbering - Bubbles!-Widget</a><br />
<br /></div>
<div>
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">Click here for SEO tools</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Tips" target="_blank">Click here for more Tips</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Template" target="_blank">Click for blogger templates</a></span><br />
<a href="http://blogerdaddy.blogspot.in/search/label/Tools" style="font-size: x-large;">Click here for blogger tools</a><span itemscope="" itemtype="http://schema.org/Blog"></span><br />
<div>
<br /></div>
<div>
</div>
</div>
</div>

Tips Tools Best Free Tools and Tutorials for making websites / blogs responsive

Responsive design was a term coined by Ethan Marcotte. He have a blog which is the unstoppablerobotninja.com . As you know in he coming ye...

Popular Posts With Automatic Numbering - Bubbles!-Widget

4:05:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="post-title entry-title" itemprop="headline">
<span style="font-size: small;">When blogger released Popular Posts widget back in 
2011, we leaked out its stylesheet so that you can customize it to blend
 it perfectly to your BlogSpot templates. Today we will learn how to 
display the list of popular posts using CSS3 auto increment property. 
You can style the numbers in variety of shapes, we styled them in 
square/rectangular and circular shape. you guys were the first to 
display threaded comments with Comment Counts
 and today you will again learn something more interesting. You can see a
 practical demo of this implementation on our sidebar. Lets add this 
effect to blogger in fairly easy steps using pure styles with no use of 
JavaScript.</span></h1>
<a href="https://www.blogger.com/null" name="more"></a>  <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5A5Ds4I9kx80pRXS6_2z0sPjJ_jLjorsmfLQeb3ZqEocg0tdIzpiUPHPIViUhk0ZWG__0tWAu0TannHyLjimcCQK4mkYA7SjPHkOaXU0VQlNPTo9D2E2NIedTyblsIvzNa1UtH8BpZM/s1600/image%255B10%255D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5A5Ds4I9kx80pRXS6_2z0sPjJ_jLjorsmfLQeb3ZqEocg0tdIzpiUPHPIViUhk0ZWG__0tWAu0TannHyLjimcCQK4mkYA7SjPHkOaXU0VQlNPTo9D2E2NIedTyblsIvzNa1UtH8BpZM/s320/image%255B10%255D.png" width="320" /></a></div>
<h1 class="post-title entry-title" itemprop="headline">
<span style="font-size: small;"><h1 class="post-title entry-title" itemprop="headline">
<span style="font-size: small;">Popular posts widget is an 
effective tool to increase your blog pageviews and engage readers more 
on your blog. It fetches and ranks posts based on most visited pages 
using your Google analytics data. </span></h1>
</span></h1>
<div>
<h3>
<span style="background-color: cyan; color: red;">Add Popular Posts Widget</span></h3>
<ol>
<li>Go to Blogger > Layout </li>
<li>Click "Add a Gadget" </li>
<li>Choose "<strong>Popular Posts</strong>"  from the list </li>
<li>You will need to configure its settings as shown in the image below: uncheck "<strong>image thumbnail</strong>" and also "<strong>snippet</strong>"   Its better that you display at most 7-9 posts. Less is good and clean. </li>
</ol>
<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKaV6fh7Q-TfcvCgiIq0gWAJOoyB4-pssY1lt8R_TQuzHoGeaJhRqPUyY3kFJdGrHyOdFn7h7kojs4T6cNqQ04jHYLqsM6uwfyezIT2_W-kve2R0CO5zS95VLcVsvY7IzcMg6XJPMVkM/s1600/image%255B18%255D.png" imageanchor="1"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaKaV6fh7Q-TfcvCgiIq0gWAJOoyB4-pssY1lt8R_TQuzHoGeaJhRqPUyY3kFJdGrHyOdFn7h7kojs4T6cNqQ04jHYLqsM6uwfyezIT2_W-kve2R0CO5zS95VLcVsvY7IzcMg6XJPMVkM/s320/image%255B18%255D.png" width="320" /></a></div>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
  5.  Save it <br />
<br />
<h3>
Customize Popular Posts Plugin</h3>
Now you need to change the default styles and change its look to our desired design using Custom styles.<br />
<ol>
<li>Go To Blogger > Template </li>
<li>Backup your Template </li>
<li>Click <strong>Edit HTML</strong> </li>
<li>Search for <strong></b:skin>.</strong>  Click the black arrow to expand the code.</li>
</ol>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJos8Qk3eY5NiaoKUTp__sJZM8sp5GzvHUqLIX5s_3F0R-aPx1MMMJUHZaYgr99V3-Mep5rKOb0nFdlNDPVcKSMIBCCjFYhjxC5ha_a9tJlk092w8GJq3_PKtqF9dyuZgX_pQA33mobVk/s1600/image%255B27%255D.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJos8Qk3eY5NiaoKUTp__sJZM8sp5GzvHUqLIX5s_3F0R-aPx1MMMJUHZaYgr99V3-Mep5rKOb0nFdlNDPVcKSMIBCCjFYhjxC5ha_a9tJlk092w8GJq3_PKtqF9dyuZgX_pQA33mobVk/s400/image%255B27%255D.png" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
5.  Paste the following Styles just above </b:skin><br />
<blockquote class="tr_bq">
/*---Blogerdaddy Popular Posts --- */<br />
.popular-posts ul {<br />
padding-left: 0px;<br />
counter-reset: popcount;<br />
}<br />
.popular-posts ul li:before {<br />
list-style-type: none;<br />
margin-right: 15px;<br />
padding: 0.3em 0.6em;<br />
counter-increment: popcount;<br />
content: counter(popcount);<br />
font-size: 16px;<br />
background: <span style="background-color: #f79646;">#292D30</span>;<br />
color: <span style="background-color: yellow;">#ffffff</span>;<br />
position: relative;<br />
font-weight: bold;<br />
font-family: georgia;<br />
float: left;<br />
border: 2px solid #dddddd;<br />
<span style="background-color: #dd8484;">box-shadow: 1px 2px 9px #666666;</span> }<br />
.popular-posts ul li {<br />
border-bottom: 1px dashed #dddddd;<br />
}<br />
.popular-posts ul li:hover {<br />
border-bottom: 1px dashed #696969;<br />
}<br />
.popular-posts ul li a {<br />
text-decoration:none; color:#5A5F63;<br />
}<br />
<br />
.popular-posts ul li a:hover {<br />
text-decoration:none;<br />
}</blockquote>
<strong><u>Customization:</u></strong><br />
<ul>
<li>To change the background color of the Square bubble edit <span style="background-color: #f79646;">#292D30</span> </li>
<li>To change the text color of the bubble edit <span style="background-color: yellow;">#ffffff</span> </li>
<li><span style="background-color: yellow;"></span>By default the shape of the bubble is <strong>Square</strong>. To change it to <strong>Circle </strong>simply add the following code just after <span style="background-color: #dd8484;">box-shadow: 1px 2px 9px #666666;</span> </li>
</ul>
<blockquote class="tr_bq">
border-radius:15px;</blockquote>
 6. Save your template and you are all done!<br />
Visit your blog to see it working just perfectly.<br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.com/2016/01/learn-search-engine-principles.html"><br /></a></span>
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.com/2016/01/learn-search-engine-principles.html">Learn search engine principles</a></span><br />
<br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">Click here for SEO tools</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Tips" target="_blank">Click here for more Tips</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Template" target="_blank">Click for blogger templates</a></span><br />
<a href="http://blogerdaddy.blogspot.in/search/label/Tools" style="font-size: x-large;">Click here for blogger tools</a><br />
<div>
<br /></div>
</div>
</div>

Widgets Popular Posts With Automatic Numbering - Bubbles!-Widget

When blogger released Popular Posts widget back in 2011, we leaked out its stylesheet so that you can customize it to blend it perfectly...

Learn search engine principles

8:29:00 PM Bloggerdaddy 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<img alt="Image result for search engine" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR_91D9hv4fK2Yb-wn6WCub967QMhfC6YQUl8nYBjPqKHJdyEZXkg" /></div>
<br />
To understand <a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">SEO</a> you need to be aware of the architecture of search engines. 
They all contain the following main components:<br />
<br />
   <i>Spider</i> - a 
browser-like program that downloads web pages.<br />
<br />
   <i>Crawler</i> – a 
program that automatically follows all of the links on each web 
page.<br />
<br />
   <i>Indexer</i> - a program that analyzes web pages downloaded by 
the spider and the crawler. <br />
<h4>
<br /></h4>
   <i>Database</i>– storage for downloaded 
and processed pages.<br />
<br />
   <i>Results engine </i>– extracts search results 
from the database. <br />
<br />
   <i>Web server</i> – a server that is responsible 
for interaction between the user and other search engine components. 
<br />
<br />
   Specific implementations of search mechanisms may differ. For 
example, the Spider+Crawler+Indexer component group might be implemented as a 
single program that downloads web pages, analyzes them and then uses their links 
to find new resources. However, the components listed are inherent to all search 
engines and the seo principles are the same. <br />
<br />
   <b>Spider.</b> This 
program downloads web pages just like a web browser. The difference is that a 
browser displays the information presented on each page (text, graphics, etc.) 
while a spider does not have any visual components and works directly with the 
underlying HTML code of the page. You may already know that there is an option 
in standard web browsers to view source HTML code. <br />
<br />
   <b>Crawler.</b> 
This program finds all links on each page. Its task is to determine where the 
spider should go either by evaluating the links or according to a predefined 
list of addresses. The crawler follows these links and tries to find documents 
not already known to the search engine. <br />
<br />
   <b>Indexer.</b> This 
component parses each page and analyzes the various elements, such as text, 
headers, structural or stylistic features, special HTML tags, 
etc.<br />
<br />
   <b>Database.</b> This is the storage area for the data that the 
search engine downloads and analyzes. Sometimes it is called the index of the 
search engine.<br />
<br />
   <b>Results Engine.</b> The results engine <i>ranks</i> 
pages. It determines which pages best match a user's query and in what order the 
pages should be listed. This is done according to the ranking algorithms of the 
search engine. It follows that page rank is a valuable and interesting property 
and any seo specialist is most interested in it when trying to improve his site 
search results. In this article, we will discuss the seo factors that influence 
page rank in some detail. <br />
<br />
   <b>Web server.</b> The search engine web 
server usually contains a HTML page with an input field where the user can 
specify the search query he or she is interested in. The web server is also 
responsible for displaying search results to the user in the form of an HTML 
page.<br />
<br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.com/2015/12/how-to-add-e-mail-subscription-in-blog.html"><br /></a></span>
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.com/2015/12/how-to-add-e-mail-subscription-in-blog.html">How to add E-mail subscription in blog ?</a></span><br />
<br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/SEO%20tools" target="_blank">Click here for SEO tools</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Tips" target="_blank">Click here for more Tips</a></span><br />
<span style="font-size: large;"><a href="http://blogerdaddy.blogspot.in/search/label/Template" target="_blank">Click for blogger templates</a></span><br />
<a href="http://blogerdaddy.blogspot.in/search/label/Tools" style="font-size: x-large;">Click here for blogger tools</a><br />
<br /></div>

Tips Learn search engine principles

To understand SEO you need to be aware of the architecture of search engines. They all contain the following main components: Sp...

List of top 10 best responsive website / blog checkers online

Create Alexa Rank Widget for your Website / Blog with JAVA Code

Best Free Tools and Tutorials for making websites / blogs responsive

Popular Posts With Automatic Numbering - Bubbles!-Widget

Learn search engine principles

Popular Posts

COMMENT

Blog Archive