10 Most Popular cute & attractive wordpress | blogger widgets 2020 free ( HTML/ Css )
be unique and eye-catching and that they will stand out from the many other pages on the Internet . You will also have to grab the attention of your market , encourage them to browse through your blog and become your loyal readers.
Fortunately,there are many ways to customize your blog Blogger ,an done and one of itis to personalize your gadget" Posts Popular ". What have not yet installed? Don't worry, you can install it easily.
Read also: Popular Posts widget Blogger
Just click on your blog title , access the Layout menu , click “ Add Gadget ” and choose “ Popular Posts .”
A window will appear asking you to configure the widget by choosing the posts you want displayed ( by example, those that were most viewed in the last 7 days or 30 days or from the start of your blog ) .
You will also be prompted to choose how many messages you want displayed in your section Posts Popular and select if you want to display the title of the article only, or with the picture and / or the
extract .
( Remember that each style of widget has different requirements , so follow the instructions carefully as to whether you will need the snippet and thumbnail image or not ) .
Add the Popular Posts gadget to Blogger
Once you've followed these instructions, you 'll have a chance to see the base version of the Popular Posts Gadget for Blogger in your blog -
Popular Messages Style 1 - box in a box
This is an interesting gadget style because it uses your snippet and thumbnail image in a unique way .
Your snippet is written in opaque text and placed in a small transparent box . This, in turn , is placed in a larger rectangular box , in which your thumbnail image is used as a background .
Choosing this style Popular Posts Widget for Blogger can be a good option if you want to liven up your blog and grab the attention of readers with your colorful photos .
popular posts widget for blogger
CSS code :
<style type = 'text / css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none! important;
padding: 0! important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px & # 39; Oswald & # 39 ;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba (0, 0, 0, 0.35);
border-top: 6px solid rgba (0, 0, 0, 0.1);
border-bottom: 6px solid rgba (0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px & quot; Times New Roman & quot;, Times, FreeSerif, serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>
Popular Posts Style 2 - Large thumbnails with titles and small description below
This uses the same code basis of Gadgets posts popular blogger with some modifications .
Popularized by well-known blogs , this style is eye-catching , as it focuses on images , which not only summarize the content of the posts but also add dramatic visuals to the entire page.
This is especially useful for blogs that focus on clothing , makeup, art, and other topics. which depend heavily on visual presentation to better express ideas or product .
Popular Posts Style 2
Large thumbnails with titles and small description below
CSS code :
<style type = 'text / css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none! important;
padding: 0! important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail :: before {
background: rgba (0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: & quot; & quot ;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail: after {
color: # 000;
content: counter (popularcount, decimal);
counter-increment: popularcount;
font: 13px & quot; Times New Roman & quot;, Times, FreeSerif, serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px & # 39; Oswald & # 39 ;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid # 000;
}
.sidebar .PopularPosts .item-title a {
color: # 000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px & quot; Times New Roman & quot;, Times, FreeSerif, serif;
text-align: center;
}
</style>
Popular Posts Style 3 -
colored boxes If your blog needs a splash of color , this is the right choice for you . This gadget style presents your popular posts in multiple boxes which feature a thumbnail image ,
Tones catchy as light green, ocher yellow and bright orange . Each box has a different color , and you can add up to four boxes .
Popular Posts Style 3 - Colorful Blogger Boxes
CSS code :
<style type = 'text / css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px! important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li: first-child {
background: # D9EDF7;
}
.sidebar .PopularPosts ul li: first-child + li {
background: # F2DEDE;
}
.sidebar .PopularPosts ul li: first-child + li + li {
background: # DFF0D8;
}
.sidebar .PopularPosts ul li: first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li: first-child + li + li + li + li {
background: # E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px & # 39; Oswald & # 39 ;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: # 000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px & quot; Times New Roman & quot;, Times, FreeSerif, serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px! important;
}
</style>
Popular Posts Style 4 - Grid
Just like the style gadget 1, the configuration of the grid is a great option if you want to enhance your pictures or if your blog depends on visual information .
However , the title of your articles will not be included in the layout , so readers will be happy to pass their mouse over the images to read the titles .
Popular Posts Style 4 - Blogger Grid
CSS code :
<style type = 'text / css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li: first-child {
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li: nth-child (even) {
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px! important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow: hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li: hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding: 0;
}
.sidebar .PopularPosts .item-content: hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only: hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba (0, 0, 0, 0) linear-gradient (to bottom, rgba (0, 0, 0, 0) 0%, rgba (0, 0, 0, 0.93) 100%, rgba (0, 0 , 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px & # 39; Oswald & # 39 ;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>
Popular Posts Style 5 -
Articles numbered If you like numbered lists , or if you want the more organized your blog, this can bethe perfect option.
Using the code for this style of widget, your popularposts will be automaticallynumbered , the gadget include your snippet and thumbnail image .
Popular Posts Style 5 - Numbered Articles For Blogger
CSS code :
<style type = 'text / css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail :: after {
color: rgba (255,255,255, 0.63);
content: counter (popularcount, decimal);
counter-increment: popularcount;
font: 70px & # 39; Oswald & # 39 ;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail :: before {
background: rgba (0, 0, 0, 0.3);
bottom: 0px;
content: & quot; & quot ;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px! important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail: hover: before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px! important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px & # 39; Oswald & # 39 ;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: # 000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px & quot; Times New Roman & quot;, Times, FreeSerif, serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px! important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>
These are the styles of gadget that you can choose from. When you have chosen a style you want , be sure to copy the CSS code .
Once you do this , go to your blog , click on " Template " on the left side and select " Edit HTML Code " under the template preview. One of the above codes should be pasted above
"</head>" or "</body>", in order to check the instruction to know exactly where you need to put the code .
Add CSS code
With the Template Editor open, click anywhere inside the code box and press CTRL + F or Command F to find the following tag :
</head>
Just above of </ head> tag Copy and paste the CSS code of one of the styles above .
5 New Designs For The Popular Posts Gadget For Blogger
Important : If the Popular Posts gadget is located in your blog footer , remove the .sidebar class found in the CSS code to make it work .
Once you have added all the codes in the correct place , press the " Save template " button to save the changes . today are all great solutions for adding a message section
One of the most popular Widgets used by bloggers on Blogger. The official "Popular Message" Widget.So I decided to modify the gadget,And give it a different style:
And yes you can display the "Popular Message" Gadget picture
So here are the steps to make your Popular Posts gadget as an Image Grid
Gadget Image Grid
1. Go to the Layout page and add the Popular Posts gadget , if you haven't added it already.
2. Change gadget settings so that it displays thumbnails and not snippet.
3. Now go to Template / Design> Edit HTML .
DO NOT Click Expand Template Gadget. Leave it unchecked, and look for: PopularPosts1 (Do a Ctrl + F to find it in your model) and you will get a line like this
<b: widget id = 'PopularPosts1' locked = 'false' title = 'Popular Posts' type = 'PopularPosts' />
4. Modify this line
<b: widget id = 'PopularPosts1' locked = 'false' title = 'Popular Posts' type = 'PopularPosts'>
<b: includable id = 'main'>
<b: if cond = 'data: title'> <h2 > <data: title /> </h2> </ b: if>
<div class = 'widget-content popular-posts'>
<ul>
<b: loop values = 'data: posts' var = 'post'>
<li>
<b: if cond = 'data: showThumbnails == "false"'>
<b: if cond = 'data: showSnippets == "false"'>
<! - (1) No snippet / thumbnail - >
<a expr:href='data:post.href'> <data: post.title /> </a>
<b: else />
<! - (2) Show only snippets ->
<div class = 'item-title'> <a expr:href='data:post.href'> <data: post.title /> </a> </div>
<div class = 'item-snippet'> <data:post.snippet/> </div>
</ b: if>
<b: else />
<b: if cond = 'data: showSnippets == "false"'>
<! - (3) Show only thumbnails ->
<div class = 'item-thumbnail-only'>
<div class = 'item-thumbnail '>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b: if cond =' data: post.thumbnail '>
<img alt =' 'border =' 0 'expr: height =' data: thumbnailSize 'expr: src =' data: post.thumbnail 'expr: width =' data: thumbnailSize '/>
<b: else />
<img alt =' 'border =' 0 ' expr: height = 'data: thumbnailSize' src = 'http: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5YusuptefxzZ1R8Q8Uakyt6ATJoui_uTklz3pgt9fEnI4FkyRRyWe92mHUwLx0451DqA6znRDMJXwc_jES7MdWncuwKB_1AUGFCApf1mZf2zeBqsdN-p1vCo3uNy6WSNnRvdGZnDvfk/s72-c/default.png' expr: width = 'data: thumbnailSize' />
</ b:if>
</a>
</div>
</div>
<b: else />
<! - (4) Show snippets and thumbnails ->
<div class = 'item-content'>
<b: if cond = 'data: post.thumbnail'>
<div class = 'item-thumbnail'>
<a expr: href = 'data: post.href' target = ' _blank '>
<img alt =' 'border =' 0 'expr: height =' data: thumbnailSize 'expr: src =' data: post.thumbnail 'expr: width =' data: thumbnailSize '/>
</a>
< / div>
</ b: if>
<div class = 'item-title'> <a expr:href='data:post.href'> <data: post.title /> </a> </div>
< div class = 'item-snippet'> <data: post.snippet /> </div>
</div>
<div style = 'clear: both;' />
</ b: if>
</ b: if>
</li>
</ b: loop>
</ul>
<b: include name = 'quickedit' />
</div>
</ b: includable>
</ b: widget>
5. Save your template
6. Now go to Template Designer> Advanced> Add CSS and paste the following CSS code there, and apply to your Blog
.popular-posts .item-thumbnail {float: left;}
.popular-posts ul {padding-left: 0px;}
.popular-posts ul li {list-style-image: none; list-style-type: none; display: inline;}
The present image url in the widget code is the default thumbnail that will be displayed if the article does not have an image associated with it.
You can change it to get a custom thumbnail by default.
Going Back To Old
If you are not happy with the way it looks, then go back.
Here are the steps:
Just remove the Popular Posts Widget from the Page Layout.If you need the original version then add it again
Remove the CSS which you added at Designer Template> Advanced> Add CSS
C 'is all.
Horizontal Popular Message Gadget Widget
The popular Message gadget is the best Blogger Widget (in my opinion) and allows you to view the articles you read from your Blogger blog but we can go further with this new Blogger tips or rather a new Blogger Widget design :
Some explanations for post it on your blog in horizontal version.
The popular Message gadget is Blogger's best (in my opinion). Some explanations for posting it on your blog in horizontal version.
This script very easy to install, just put the script for the new HTML gadget
Login to Blogger dashboard and go to Design - Page Elements
Click " Add Gadget " and choose " Popular Posts " ( If you already have this gadget skip this step)
After you have Popular Message Gadget " Add a gadget " and select " HTML / Javascript "
The popular Message gadget is Blogger's best (in my opinion). Some explanations for posting it on your blog in horizontal version.
copy the script below into the new " HTML / Javascript Gadget " gadget
If you already have jQuery in your template please delete the script
Make your popular post now with animation
<style>
#slider ol, # slider ul, # slider li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.popular-posts img {
margin: 0! important;
padding: 0! important;
width: 150px;
height: 120px;
}
ol, ul {
list-style: none;
}
.wrapper {
width: 720px;
margin: 0 auto;
position: relative;
}
.clear {
clear: both;
}
.display-none {
display: none;
}
#slider {
position: relative;
top: -2px;
z-index: 1;
}
#slider .prev {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url (http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
top: 150px;
left: -51px;
}
#slider .next {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url (http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
top: 150px;
right: -51px;
}
#slider # slider-wrapper {
width: 720px;
height: 300px;
padding-top: 40px;
overflow: hidden;
z-index: 999;
position: relative;
}
#slider # slider-inner {
width: 9780px;
height: 300px;
position: absolute;
}
#slider .article {
width: 150px;
height: 300px;
float: left;
margin-right: 30px;
}
#slider .article img {
margin-bottom: 25px;
box-shadow: 1px 1px 1px rgba (0, 0, 0, .15);
-moz-box-shadow: 1px 1px 1px rgba (0, 0, 0, .15);
-webkit-box-shadow: 1px 1px 1px rgba (0, 0, 0, .15);
}
#slider .article h2 {
margin-bottom: 15px;
line-height: 18px;
}
#slider .article h2 a {
font-size: 18px;
color: # 404040;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
line-height: 23px;
}
#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
#slider .article .item-snippet {
margin-left: 15px;
}
#slider .widget-item-control {display: none}
</style>
<script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/ jquery.min.js "> </script>
<script type =" text / javascript "src =" http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js "> </script>
Show Popular Posts Widget for Blogger with 3D Cube Animation
Popular Posts Gadget / Widget for Blogger with 3D Cube Animation : New way to present your Most Viewed Posts with 3D Cube animation .
Popular Posts Gadget / Widget for Blogger with 3D Cube Animation: New way to present your Most Viewed Posts with 3D Cube animation.
3D Cube Animation
Now you can view your Popular Posts for Blogger with 3D Cube Animation .
This widget displays the images of posts on Blogger as a cube.
You can see the result like the picture above, Watch HERE
The script is very easy to install, just put the script in a new HTML gadget :
Log in to Blogger and navigate to Overview - Page Elements
Click “ Add Gadget ” and choose “Most Posts viewed "( If you already have this gadget skip this step )
After having Gadget Posts Most viewed " Add the gadget "and select" HTML / Javascript "
Copy the script to the gadget just below.
The Script to copy CSS :<style type = "text / css">
.cube {width: 200px; height: 200px;}
a img {border: none; }
#linksCube img {width: 100%; height: 100%; }
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type = "text / javascript"> </script>
<script type = "text / javascript" src = "http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"> </script>
<script type = "text / javascript" charset = "utf -8 ">
$ (function () {
$ ('. Popular-posts ul'). Abupopularcube ();
});
</script>
<script type = "text / javascript" src = "http: //accordion-for-blogger.googlecode.
WordPress Popular Posts: display popular blog posts
Showcase your successful articles!
Today, I am offering you a tutorial on how to easily display popular articles on your blog , thanks to the WordPress Popular Posts plugin.
Why post popular articles on my blog?
This is one way among many to "capture" the passing visitor , who comes to your blog for the first time. This Internet user is going to read the article that attracted him to you ... but after? Will he leave immediately or decide to continue his visit and subscribe to your newsletter?
Your goal is to retain them and the best way to do this is to offer them links to other relevant content on your site : either in the articles themselves; either by offering similar articles ... or a list of the most popular articles.
Popular articles play on the principle of social proof in psychology: "If everyone does something, it must be good / useful / true".
This principle is widely used in marketing: for example, if several bloggers present a product as the "must-have", it is very likely that people will buy it. If there is a line to see a movie, it must be good. If there are more people in restaurant A than in restaurant B, it is because the food must be better ...
And, in the case of your blog, "if everyone is reading these posts, they must be exciting." This is what posting popular articles is for!
Showcase your successful articles!
The WordPress Popular Posts plugin
Install this plugin by going to the menu Extensions> Add WordPress, do not forget to activate it then.
Install WordPress Popular Posts
The plugin creates a new sub-menu in Settings> WordPress Popular Posts where you have many setting options ... but to start, let's go to the Appearance> Widgets section to define how to display popular posts.
Display popular articles in a sidebar widget
Start by adding the WordPress Popular Posts widget to the location of your choice.
Show popular articles in the sidebar
WordPress Popular Posts determines which posts are the most popular from the moment it is installed .
It identifies the number of views and comments for each post and, based on that data, establishes a ranking.
Start by defining the title of your widget and the number of popular articles to display. Then, choose the ranking mode : it corresponds to your definition of the popularity of an article because you can establish the ranking according to the total number of views ("Sort posts by total views"), the number of comments ("Sort posts by comments ”) or the average number of views per day (“ Sort posts by avg. daily views ”).
Popular WordPress Articles Widget
Popular post filters and settings
You then have several filters to refine the display.
The period taken into account - You can view the most popular posts from the last 24 hours, the past week, the past month, or your entire blog history.
The type of post taken into account in the ranking - Indicate only "post" to include only articles, "post, page" to include both articles and static pages of your WordPress blog.
Posts to exclude - If you do not want certain articles, categories or authors to appear in the ranking, simply enter their identifier in the appropriate box.
Include / exclude taxonomies: WordPress offers plenty of ways to classify content (by category, keyword, author, etc.).
Here, you can restrict the display of popular articles to certain specific types of content or on the contrary, exclude certain categories or tags from the list (by simply adding a minus sign in front of their encrypted identifier).
You can also choose to display posts by a specific author (an option that can be useful if your blog has multiple contributors).
Decorative line
A little further down, the widget offers other options:
Posts settings - You can check different boxes if you want to shorten the post title if it is too long (Shorten title), display an excerpt in addition to the title (Display post excerpt) and display the thumbnail associated with the article (Display post thumbnail).
Stats Tag settings - You can choose which statistics and information to display: number of comments, views, author name, date, related taxonomy.
HTML Markup settings - This option allows you to choose the type of HTML markup applied to your list of popular articles.
If you are a beginner, you probably won't touch it, but more experienced users can for example choose between an ordered list, a simple list or even a div.
For my part, I advise you not to overload your widget too much because if it loses in readability, there is a chance that it will also reduce the click-through rate on the articles.
Popular WordPress Articles Widget
A few words on a particular option
You have a check box in the widget relating to the publication date ("Display only posts published within the selected Time Range").
This is a very interesting setting because it allows you to rank only articles published during a given period.
If, like me, you receive a lot of traffic from search engines, you will quickly find that the most read articles on your blog are almost always the same: they are the ones that are very well referenced and that correspond to the topics highly sought after .
Unfortunately, it tends to "drown" the more recent content ... By checking the box proposed by WordPress Popular Posts, the plugin will only take into account the articles published during the chosen period.
Choose the posting period
In addition to this widget, WordPress Popular Posts offers other options in the Settings> WordPress Popular Posts menu. I'll tell you two words about it!
The "Stats" part
This part allows you to consult your statistics in a very visual presentation, by acting on certain parameters common with the widget. This is a useful section if you want to get an overview of the ranking of popular articles before uploading your widget.
WordPress Popular Posts Stats Tab
The "Tools" part
If you go to the "Tools" section via the menu at the top of the page, you can first choose the display settings for the image that accompanies each article (if you display a thumbnail of course!):
Set a default image.
Choose the source of this thumbnail - By default, the plugin retrieves the image from the front page of your articles but you can also choose to display the first image that appears in the post, an image appearing in a custom field, etc.
If you make any changes, you can click on the "Empty image cache" button to "reset the display" taking into account the new options chosen.
Show thumbnails of popular articles
You then have advanced options which concern in particular the management of the data stored by the plugin.
Which views are recorded (Log views from) - By default, the plugin establishes its ranking by taking into account all visitors ("Everyone") but it can also be limited to unregistered visitors ... or to visitors who have created an account on your blog.
The storage limit (Log limit) - By default, the plugin records the actions of visitors in an unlimited way. Here you can limit this recording in time.
Add Ajax to Your Widget - This computer language offers aesthetic visual effects but it will prevent popular posts from being cached if you are using a cache plugin.
Activate or not the plugin cache . Enabling it can be useful on a high traffic site to limit the risk of slowing down page loading.
Enable or not sample sampling - By default, the plugin ranks popular posts by taking into account ALL the visits you receive. On a site with very high traffic, this can pose a problem because the mass of stored data quickly becomes enormous. By activating sampling, WordPress Popular Posts will then rely only on a portion of the traffic representative of the whole.
Finally, you have two additional options:
How links open - You can either open them in the same window (“Current window”), which is the plugin's default behavior… or open them in a new tab (“New tab”).
The stylesheet - The plugin provides default formatting. If you don't want to use it and write your own CSS code to customize the display instead, you can turn off the default stylesheet here.
The "Parameters" part
For those who know how to develop, this tab summarizes all the parameters and codes that you can use to integrate WordPress Popular Posts according to your own requirements.
Keep in mind that the plugin does not take effect until it is installed, regardless of your blog's entire history. So it will take a little time for it to provide really reliable data!
Hope this tutorial gives you some ideas to keep visitors on your blog. Highlighting popular articles is a great way to give instant insight into the topics that rock your community !
For my part, I stopped using the plugin because my sidebar is already loaded ... which does not prevent me from finding it very interesting !
Conclusion
That's all! The five messages gadget styles popular for Blogger presented popular on your blog .
They all have an appearance different to determine what makes a message gadget popular, but the end result is the same: The visitors are always a click away from your best content . Try out some of these styles , find your favorite , and see how it affects the performance of your blog.
Comments
Post a Comment
Dont abuse .