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

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

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

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

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

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

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

1ο στυλ
Δημοφιλεις αναρτησεις
κωδικος

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/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(http://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;
}

1 comments so far

θέλω στο blog μου στη κυρία σελίδα να εμφανίζονται όλες η αναρτήσεις έχω ρύθμιση στης αναρτήσεις ιστολόγιου πχ 40 αλλά έχω κάνει αναρτήσεις 25 και μου εμφανίζετε στη αρχική σελίδα παλαιότερες αναρτήσεις τι πρέπει να Κάνο
Έλενα σας ευχαριστώ