5 nouveaux design pour Widget gadget messages populaires pour Blogger

Si vous utilisez Blogger comme plate-forme pour votre blog personnel ou d'affaires, vous êtes probablement à la recherche de façons de personnaliser et rendre votre blog plus pro. De plus, vous cherchez que vos pages Web soit unique et accrocheur et qu'ils vont se démarquent des nombreux autres pages sur Internet. Vous aurez également d'attirer l'attention de votre marché, les encourager à parcourir à travers votre blog et devenir vos fidèles lecteurs .

Heureusement, il y a beaucoup de façons de personnaliser votre blog Blogger, et l'un d'elle est de personnaliser votre gadget "Messages populaires". Ce qui ne l'ont pas encore installé ? Ne vous inquiétez pas, vous pouvez l'installer facilement.

Ajouter le gadget Messages populaires pour Blogger

Il suffit de cliquer sur le titre de votre blog, accéder au menu Mise en page, cliquez sur «Ajouter Gadget" et choisissez "Messages populaires".  

Une fenêtre apparaîtra vous demandant de configurer le widget en choisissant les messages que vous voulez affichés (par exemple, ceux qui ont été les plus vus dans les 7 derniers jours ou 30 jours ou dès le début de votre blog). Vous serez également invité à choisir combien de messages vous voulez affichés dans votre section Messages populaires et sélectionnez si vous voulez afficher le titre de l'article uniquement ou avec l'image et / ou l'extrait. (Rappelez-vous que chaque style de widget a des exigences différentes, afin de suivre attentivement les instructions pour savoir si vous aurez besoin de l'extrait et l'image miniature ou non).

Une fois que vous avez suivi ces instructions, vous aurez la chance de voir la version de base du Gadget Messages populaires pour Blogger dans votre blog - voir le blog de démonstration:

Demo blog

Messages populaires Style 1 - boîte dans une boîte

Ceci est un style de gadget intéressant car il utilise votre extrait et l'image miniature d'une manière unique. Votre extrait est écrit dans le texte opaque et placé dans une petite boîte transparente. Ceci, à son tour, est placé dans une boîte rectangulaire plus grand, dans lequel votre image miniature est utilisé comme un fond. Le choix de ce style Messages populaires Widget pour Blogger peut être une bonne option si vous voulez égayer votre blog et attirer l'attention des lecteurs avec vos photos colorées.

code CSS :

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

Messages populaires Style 2 - Grandes vignettes avec des titres et petit descriptif dessous

Celui-ci utilise le même code de base des Gadgets messages populaire Blogger  avec quelques modifications. Popularisé par les blogs bien connus, ce style est accrocheur, car il se concentre sur les images, qui ne résument pas seulement le contenu des messages mais aussi ajoute un visuel dramatique pour toute la page. Ceci est particulièrement utile pour les blogs qui mettent l'accent sur les vêtements, le maquillage, l'art et d'autres sujets qui dépendent fortement de la présentation visuelle pour mieux exprimer les idées ou produit.

Code CSS :

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

Messages populaires Style 3 - boîtes colorées

Si votre blog a besoin d'une touche de couleur, voilà le bon choix pour vous. Ce style de gadget présente vos messages populaires dans plusieurs boîtes qui disposent d'une image miniature, des tons accrocheurs comme vert clair, ocre jaune et orange vif. Chaque boîte a une couleur différente, et vous pouvez ajouter jusqu'à quatre boîtes.

Code CSS:

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

Messages populaires Style 4 - Grille

Tout comme le style 1 de gadget, la configuration de la grille est une excellente option si vous voulez mettre en valeur vos photos ou si votre blog dépend de l'information visuelle. Toutefois, le titre de vos articles ne sera pas inclus dans la mise en page, afin que les lecteurs auront le plaisir de faire passer leurs souris sur les images pour lire les titres.

Code CSS :

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

Messages populaires style 5 - Articles numérotés

Si vous aimez les listes numérotées, ou si vous souhaitez plus organisé votre blog , cela peut être l'option parfaite. En utilisant le code pour ce style de widget, vos messages populaires seront automatiquement numérotés, le gadget comprennent votre extrait et l'image miniature.

Code CSS:

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

Ce sont les styles de gadget que vous pouvez choisir. Lorsque vous avez choisi un style que vous voulez, assurez-vous de copier le code CSS. Une fois que vous faites cela, allez sur votre blog, cliquez sur "Modèle" sur le côté gauche et sélectionnez "Modifier le code HTML" sous l'aperçu du modèle.

L'un des codes ci-dessus doivent être collé au-dessus de "</head>" ou "</body>", afin de vérifier l'instruction de savoir exactement où vous avez besoin de mettre le code.

• Ajouter le code CSS

Lorsque l'éditeur de modèle est ouvert, cliquez n'importe où à l'intérieur de la zone de code et appuyez sur CTRL + F ou Commande F pour rechercher la balise suivante:

</head>

Juste au-dessus de </head> tag, Copiez-collez le code CSS de l'un des styles ci-dessus.

Important: Si le gadget Messages populaires est situé dans le pied de page de votre blog, retirez la classe .sidebar trouvé dans le code CSS pour le faire fonctionner.
Une fois que vous avez ajouté tous les codes à la bonne place, appuyez sur le bouton "Enregistrer modèle" pour enregistrer les modifications.

C'est tout!

Les cinq styles de gadget messages populaires pour Blogger présentés aujourd'hui sont tous d'excellentes solutions pour l'ajout d'une section de message populaire sur votre blog. 

Ils ont tous une apparence différente pour déterminer ce qui fait un gadget message populaire, mais le résultat final est le même : Les visiteurs sont toujours à un clic de votre meilleur contenu. Essayez quelques-unes de ces styles, trouver votre favori, et de voir comment elle influe sur la performance de votre blog.