Δημοφιλεις αναρτησεις αλλαξτε τους στυλ

Οι Δημοφιλεις αναρτησεις στο blog μας ειναι απαραιτητες γιατι δειχνουν στον επισκεπτη τα καλυτερα αρθρα μας και δεν τον αφηνουν να φυγει.

Ομως το πρεπιλεγμενο στυλ του blogger δεν ειναι και οτι καλυτερο και ομορφο.
Γιαυτο εδω σας εχω  στυλακια απο τα οποια διαλεγετε οποιο σας ταιριαζει και το βαζετε στο blog σας.

Πρωτη κινηση που πρεπει να κανουμε ειναι να τις ενεργοποιησουμε μεσα απο τη διαταξη.
Οποτε μπαινουμε διαταξη - προσθηκη gadget και επιλεγουμε δημοφιλεις αναρτησεις.

επιλεγουμε με εικονα  να δειχνει κειμενο και πανω απο 7 αναρτησεις

παταμε αποθηκευση.

Τωρα παμε να τις κανουμε ομορφες.

Ολοι οι κωδικοι που γραφω πιο κατω μπαινουν πανω απο το ]]></b:skin>
οποτε παμε προτυπο επεξεργασια και με control+f ψαχνουμε και το βρισκουμε

1ο στυλ

κωδικος

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzA0rGPPvQy6f4ms8jCkOfkWdzrMSWLvEoMA-X6Yu1DGDe1h4DY_oVPE3kduD5JwhIm3Dvdbee8PJpXFQs3nBAh6hJqzRJswC4FcWmF1Z-Mf0M8qzks-9J8tWB-nv_F91ZPrAlrvaOBQo/s1600/1.gif)  no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #ddd;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

.popular-posts ul

li:hover {

border:1px solid #6BB5FF;

}

.popular-posts ul

li a:hover {

text-decoration:none;

}

.popular-posts .item-thumbnail img {

webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

} 

2ο στυλ

κωδικος

.popular-posts ul

{

padding-left:0px;

padding-top:10px;

}

.popular-posts ul li

{

margin:10px 0;

border: 1px solid #000;

border-radius: 100px;

}

.popular-posts .item-thumbnail img {

border-radius: 50px;

-moz-border-radius: 50px;

-ms-border-radius: 50px;

-o-border-radius: 50px;

-webkit-border-radius: 50px;

box-shadow: 0 3px 3px rgba(0,0,0,1);

-moz-box-shadow: 0 3px 3px rgba(0,0,0,1);

-webkit-box-shadow: 0 3px 3px rgba(0,0,0,1);

-ms-box-shadow: 0 3px 3px rgba(0,0,0,1);

-o-box-shadow: 0 3px 3px rgba(0,0,0,1);

border: 4px solid #e6e6e6;

}

.popular-posts .item-thumbnail img:hover

{

transform:rotate(10deg);

-moz-transform:rotate(10deg);

-ms-transform:rotate(10deg);

-o-transform:rotate(10deg);

-webkit-transform:rotate(10deg);

}

.popular-posts a {

text-decoration: none;

}

.popular-posts ul

li a:hover {

text-decoration:none;

} 

3ο στυλ

κωδικος

.PopularPosts .widget-content ul li{padding:0;position:relative}

.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}

.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}

.PopularPosts img{width:50px;height:50px}

.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}

4o στυλ

κωδικος

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(https://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #dddddd;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

.popular-posts ul li:hover {

border:1px solid #6BB5FF;

}

.popular-posts ul li a:hover {

text-decoration:none;

}