Ads 468x60px

Παρασκευή, 26 Φεβρουαρίου 2016

Multicolor Popular Post widget

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να
αλλάξουμε την εμφάνιση του widget που προβάλει τις δημοφιλείς αναρτήσεις
στην σελίδα μας!Είναι ένα πολύ χρήσιμο widget που μας προσφέρει ο blogger
απλά αντί να το έχουμε στην απλή του μορφή, εδώ θα το δούμε σε μία ωραία
χρωματιστή του παραλλαγή!






ΕΓΚΑΤΆΣΤΑΣΗ:


Για αρχή εγκαθιστούμε από τον πανόπτη μας το widget  

Δημοφιλείς Αναρτήσεις!

Βάζουμε τις ρυθμίσεις όπως βλέπετε στην εικόνα: Προσέξτε το αυτό, ξεκλικάρετε
από το Εμφάνιση τα πάντα:


Στην συνέχεια κάντε  BACK UP TO TEMPLATE ΣΑΣ και κατόπιν

αντιγράψτε τον ακόλουθο κώδικα:
.................................................................................................................................................................
/*---. www.bloggerspice.com  POPULAR WIDGET STYLE STARTS HERE---*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/*---www.bloggerspice.com POPULAR WIDGET STYLE ENDS HERE---*/
..................................................................................................................................................................
και...

Πηγαίνετε blogger-->Πρότυπο


 Επεξεργασία HTML

κάνετε click μέσα στο template

και πατώντας Ctrl  + F  ψάχνεται

να βρείτε το: ]]></b:skin>

Μόλις το βρείτε επικολλήστε τον κώδικα

ακριβώς από ΠΑΝΩ ΤΟΥ!


Πατήστε Αποθήκευση Προτύπου!




Αυτό ήταν! 



Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to http://www.bloggerspice.com



 Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog