0 Different Styles For Popular Posts Widget

Blogger gives us opportunity to easily add a “Popular Posts Widget”. Do you wish to change your Blogger’s popular Posts widget to form it additional outstanding and engaging for your visitors? Having a popular Posts widget within the sidebar has countless benefits. It helps new guests to select those articles that are most trending on an internet site. However, Blogger’s inbuilt popular posts widget isn't very much attention-grabbing in terms of planning and displaying. Because the blogger’s default “Popular Posts widget” offers following settings

• 1-      Only the title of posts
• 2-      A thumbnail of the image and post title
• 3-      Post title with a summary
• 4-      Post title with a thumbnail, with a post title and summary

Therefore, if you want to remodel your popular Posts widget into a masterpiece then, by following this "Blogger Tutorial" , you can use any one of the blogger styles given in this post.

Preliminary Steps: Add the Popular posts gadget, if you have not added yet

STEP 1: Add the popular posts widget (if you have not added yet)

• 1-  To work on this "blogger widget" Go to Blogger dashboard, and then go to Layout, in the layout area click on “Add a Gadget” link. Within seconds a window will open there click on Popular Posts.

• 2-   Now we will configure the “Popular Posts gadget” by checking the box, according to our needs as

a)   Image thumbnails

b)   Snippet

• 3-   After configuration, SAVE the widget by clicking on save.

STEP 2: Add the CSS to create different styles of Popular Post

• 1-   Choose any one of the styles given below
• 2-   The copy the CSS code of the style you have selected
• 3-   Open the Template > Customized > Advanced > Add CSS > Paste the CSS code, you have selected before in step 2

• 4-   Once you have pasted the code, click on “Apply to blog” button.

That’s it you have done.

Note:

Some blogger template doesn’t allow the CSS addition.

In that case you have to follow the following steps

Go to Template > Edit HTML > search the code ]]></b:skin>

Now paste the CSS code just above ]]></b:skin>

Now click on SAVE. That’s it.

Styles

Style 1:

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget&#039;s title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: &#039;&#039;;
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none; 
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
} 
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

 Style 2:

 #PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out; 
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute; 
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg); 
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Style 3:

  #PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

 

Style 4:

 #PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

Note:

All the CSS is valid and working.

But the numbering does not supported in Internet explorer 7.

All the properties are not supported in IE8;

In IE8 style 4 shows the square boxes instead of circles.

All other browsers show all the properties.

Add About Author Box in Blogger with social buttons

How to add Contact Us form in blogger

Add Multi-Color bookmarking widget in blogger

Published By:
OperaOrbis
on 07:32

Read More ---

4 Why Google Is Not Indexing Your Blog Posts

Getting high rank on Google isn't simple, as you recognize SEO have necessary role in search queries, if your blog/site not crawled by search engines then you cannot rank higher in search queries. Don’t be fret if you've got a blog/site and your blog/site unlisted on Google then you is on right path. From this topic I am writing, let’s get answer of this downside. However the very first step is to understand why Google Bots aren't Crawling/Indexing your blog Post? If you do not have any idea of, how Google index your blog posts, then you need to keep in mind from this article, because this is often a main issue to understand for your blogging future.

If you are newcomer at blogging/SEO then you must know that “Why Google Is Not Indexing Your Blog Posts”. You should read below for knowing the fundamentals of program creeping/crawling.

Indexing and Crawling?

Google program is just for looking out content on net. If your blog post not good for search then it's going to be avoided by Google bots. This is often not a problem this is often a best answer for content searchers. In whole world, all peoples wish good things therefore on net Google finds best things for indexing. So that they could give the best and good to its users, if you're a blogger then you need to remember from this SEO rule. Generally your blog post not crawled by Google it should be for a few reasons listed below.

Get Listed At Google Within One Day

External Content Duplication

Copying others content isn't sensible destiny. So, please avoid such things and be a professional blogger.

Internal Content Duplication

Also repetition your own content for several articles isn't sensible as you're thinking that. Therefore do not copy others work, build your own original and new content.

Poor and Weak Content

Weak content mean if you provide title "What is SEO" to a post, and you do not have abundant expertise concerning it. then you cannot build a decent post. Because talking about issue before knowing it, isn't an honest work and then you cannot blog on that.

Get High Ranking by Proper Image Optimization

Now Get Indexed Quickly In Google Search

Google can crawl your blog posts consistent with its ratings, Ratings like as back links and change frequency if your blog on very beginning stage. Now take an extended deep breath, wait and see. Google bots can quickly crawl your blog posts for indexing if they go with Google bots searching and rating system.

• 1-     you do not have traced content on your blog
• 2-     so confirm, that you've rich written content on your blog
• 3-     you've got nice back links from high ranking sites
• 4-     For the back linking purpose Make Guest Posts and obtain Back Links.

Admin Closing Words

Dear readers hope, you wish this Post/Article for “Why Google Is Not Indexing Your Blog Posts”, please then leave comments and do sharing…. And additionally subscribe to Us.

Published By:
OperaOrbis
on 06:00

Read More ---

1 How To Optimize Images For Better Search Engine Rankings

Optimizing your pictures will generate lots of traffic from image search engines, like Google’s. Whether or not you wish this traffic or not is up to you to determine. Ranking for pictures is comparable to ranking for pages within the sense that there are clear pointers explaining what you ought to do.

1-  Define Image ALT Text

Perhaps the foremost common best apply for image optimization is shaping your ALT text. After you see an image of beach volleyball, you acknowledge that it's beach volleyball. The SE (search engines), sadly, cannot. You have got to inform it what’s happening within the image, or what the image is concerning about, by the proper use of ALT text. All you must try to do is just add 

alt=”put your alt text here”

Into the image tag. For example:

volly ball :How To Optimize Images For Better Search Engine Rankings

This is created plenty less complicated with content management systems like WordPress, which needs no hypertext markup language (HTML) or cryptographic scripts writing skills. Also, keep in mind that your (human) readers won't be ready to see the ALT text.

Another method to add ALT text

Another way is just after adding image to your blog/website, click on properties here add the ALT text of image.

How To Add ALT text In Blogger/Website

 Choose best Earning Keywords

2-  Optimize Image File Name

Rename your pictures before you transfer them to a descriptive name—usually the keyword that you simply wish then to rank for. Think about it like select your name. Though Google says that keyword within the name don’t have an effect on rankings, we tend to all apprehend that look into some level of influence. Cross-check the file name of the image ranking 1st for the search “beach volleyball”:

3-  Monetize The Image Size

The image size must be as small as possible for the best loading of pages of your blog/website. The time it takes for a page to load affects however high it's ranked. Ensure your pictures aren’t large as a result of it'll create page load times longer. Keep the file sizes as tiny as attainable maintaining quality.

Also, don't let your browser resize pictures for you. After you let height and breadth tags alter the image, the webpage still needs to load the complete size image and resize it once. Ensure the particular file you upload is of the correct size.

The site which are best offering image resizing are YAHOO’S SMUSH and KREKEN.

4-  Must Add Image Caption

Image captions don't influence search engine rankings. However, a bounce off a picture search counts as a bounce off your web site. Having no/poor captions will have an effect on your website’s bounce rate and image captions are scan much more typically than you would possibly suppose. Failing to use them will mean lower time on page, and higher bounce rates. Remember, you're optimizing your image captions for your reader – keep them fascinating and to the purpose.

Get HOSTGATOR 25% Coupon Code Exclusive for My Readers

Another method to add Caption

Another way is just after adding image to your blog/website, click on properties here add the Caption text of image.

How to add Caption to images in blogger/website

My Closing Words

These are four easy tasks you must keep in mind next time you’re posting a picture to your web site. If you’ve hung out writing up an entire post, you would possibly in addition pay one additional minute ensuring your pictures are ranking, too. Stay in touch by commenting below.

Published By:
OperaOrbis
on 14:26

Read More ---