Αν έχετε Blog, για προσωπική ή επαγγελματική χρήση, στην πλατφόρμα Blogger πιθανώς να έχετε ψάξει πως να μεταμορφώσετε το gadget που αναφέρεται στις "Δημοφιλείς Αναρτήσεις" (Popular Posts) του ιστολογίου σας. Θα πρέπει να γνωρίζουμε πως τα gadgets της Blogger έχουν ένα default CSS Style το οποίο προφανώς να μη ταιριάζει με το Template που έχετε διαλέξει ή γενικά με τα χρώματα της σελίδας σας, οπότε και χρειάζεται τροποποίηση. Σήμερα θα δούμε πως να τοποθετήσουμε τις "Δημοφιλείς Αναρτήσεις" και στη συνέχεια πως θα τις δώσουμε ένα από τα 5 καλύτερα στιλ που βρήκαμε. Ακολουθήστε λοιπόν τα βήματα:
Βήμα 1: Εισαγωγή Popular Post (Δημοφιλείς Αναρτήσεις) για Blogger
Στο Layout του blog σας πατήστε στο "Add Gadget", διαλέξτε το "Popular Post" από την λίστα. Θα σας εμφανίσει τα settings του gadget όπου μπορείτε να επιλέξετε τον αριθμό των δημοφιλών αναρτήσεων του blog σας που θα θέλατε να εμφανίζονται ή αν θα είναι των τελευταίων ημερών ή από την αρχή της δημιουργίας της σελίδας. Ακόμα υπάρχουν και δυο επιλογές η "image thumbnail" και η "snippet" όπου και οι δυο αναφέρονται στο αν θα εμφανίζεται ο τίτλος της ανάρτησης μαζί η ξεχωριστά από τη φωτογραφία της. Χρησιμοποιείστε αυτές τις δυο επιλογές συνδυαστικά αλλά και μόνες τους. Αποθηκεύστε το gadget, αν θέλετε, όπως φαίνεται στην παρακάτω φωτογραφία, και ας διαλέξουμε το στυλ που θα έχει.
 |
Βήμα 2: Ας διαλέξουμε CSS Style από τα 5 καλύτερα.
Popular post CSS Style 1
Στυλ 1ο, όπως φαίνεται στη Photo 1:
 |
| Photo 1 |
<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 'Oswald', 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 "Times New Roman",Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>
Popular post CSS Style 2
Στυλ 2ο, όπως φαίνεται στη Photo 2:
 |
| Photo 2 |
<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: "";
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 "Times New Roman",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 'Oswald', 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 "Times New Roman",Times,FreeSerif,serif;
text-align: center;
}
</style>
Popular post CSS Style 3
Στυλ 3ο, όπως φαίνεται στη Photo 3:
 |
| Photo 3 |
<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 'Oswald', 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 "Times New Roman",Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>
Popular post CSS Style 4
Στυλ 4ο, όπως φαίνεται στη Photo 4:
 |
| Photo 4 |
<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 'Oswald', sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>
Popular post CSS Style 5
Στυλ 5ο, όπως φαίνεται στη Photo 5:
 |
| Photo 5 |
<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 'Oswald', 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: "";
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 'Oswald', 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 "Times New Roman",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>
Βήμα 3: Εισαγωγή CSS κώδικα
Αφού αποφασίσουμε πιο από τα πιο πάνω στιλ αρμόζει στην σελίδα μας τοποθετούμε τον CSS κώδικα του στο HTML.
Κάνουμε κλικ στο Template και διαλέγουμε την επιλογή Edit Html κλικάρουμε μια φορά μέσα στον κώδικα και πατάμε ctrl+f για να μας εμφανίσει την αναζήτηση. Πληκτρολογούμε </head> στην αναζήτηση και πατάμε enter, για να μας μεταφέρει σε αυτό το κομμάτι κώδικα. Ακριβώς ΠΑΝΩ από το </head> που θα βρούμε, επικολλούμε το CSS Style που έχουμε διαλέξει (Photo 6)
Σημαντικό : Αν οι δημοφιλείς Αναρτήσεις βρίσκονται στο footer της σελίδας σας διαγράψτε από το CSS Style την .sidebar κλάση για να δουλέψει.
Βήμα 3: Εισαγωγή Γραμματοσειράς και Javascript
Τα περισσότερα CSS Styles χρησιμοποιούν ως γραμματοσειρά την Oswald την οποία θα πρέπει να προσθέσετε στον HTML κώδικά σας. Πατήστε ctrl+f, στο box της αναζήτησης πληκτρολογήστε <head> και πατήστε enter. Ακριβώς ΚΑΤΩ από το <head> που θα βρείτε επικολλήστε τον παρακάτω κώδικα:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
Για να δουλέψει σωστά το CSS Style θα πρέπει να προσθέσουμε στον κώδικά μας και το javascript του. Πατήστε ctrl+f και στην αναζήτηση πληκτρολογούμε </body> . Ακριβώς ΠΑΝΩ από το </body> επικολλήστε τον παρακάτω javascript κώδικα:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
Αν έχετε ήδη εισάγει την jquery βιβλιοθήκη παλιότερα διαγράψτε την κόκκινη σειρά του κώδικα.
Αυτό ήταν! Τώρα είμαστε έτοιμοι να πατήσουμε Αποθήκευση (Save Template) και να δούμε το αποτέλεσμα στην σελίδα μας.
0 comments:
Δημοσίευση σχολίου