Ads 468x60px

Παρασκευή 27 Δεκεμβρίου 2013

New Comment Theme

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε με έναν νέο τρόπο
πως μπορούμε να αλλάξουμε την εμφάνιση των σχολίων στο blog μας!Είναι ένα
νέο style code CSS που αλλάζει την εμφάνιση των σχολίων που γίνονται στις 
αναρτήσεις του blog μας και προσδίδει άλλο τόνο σε αυτά!! 





Δείτε εδώ το DEMO


Για να το εγκαταστήσετε και εσείς ακολουθήστε τα εξής βήματα..
 

Θα πρέπει πρώτα να εγκαταστήσουμε τον κώδικα  CSS και για να γίνει
αυτό

κάνετε Αντιγραφή τον πάρα κάτω κώδικα: 
..............................................................................................................................................................
 /**Blue Ice Comment Theme http://www.spiceupyourblog.com**/
.comments{clear:both;margin-top:10px;margin-bottom:0;background:#FFF;border:1px solid #DDD;padding:10px 5%}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"Author";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:25px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:"{" counters(trackit,".")"}";position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}
/**Blue Ice Comment Theme http://www.spiceupyourblog.com**/
...............................................................................................................................................................
και για να τον επικολλήσετε 

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

και ακολουθήστε τον εικονογραφημένο οδηγό...









Μόλις σας βγάλει ειδοποίηση ό,τι έγινε η εφαρμογή προτύπου και Αποθηκεύτηκε
είστε έτοιμοι!Αυτό ήταν!!

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


Πηγή κώδικα 
thanks to spiceupyourblog.com




Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog


Giveaway of the Day
Άδεια Creative Commons
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .