2015/09/10

Stylowy widżet Popularne Posty dla Bloggera

W wielu moich szablonach dla Bloggera możecie znaleźć stylowy widżet Popularnych Postów, składający się z dużych miniatur oraz tytułów pod zdjęciami. Wielu z was pytało o kod, tak więc na waszą prośbę, umieszczam instrukcję instalacji tego gadżetu. Szerokość zdjęć automatycznie dostosowuje się do szerokości paska bocznego na blogu.

1. Arkusz stylu

Poniższy arkusz stylu nada widżetowi stylowy wygląd. Opis poszczególnych deklaracji w kodzie znajdziecie tuż obok nich.

Nad ]]></b:skin> wklej:
.widget .popular-posts ul {
list-style: none;
margin: 0;
padding: 0;
}

.PopularPosts .item-thumbnail {
float: none;
margin: 0;
}

.PopularPosts .item-title {
font: 12px Arial, sans-serif; /* Wielkość i rodzaj fontu tytułu */
letter-spacing: 1px; /* Wartość odstępów między literami tytułu */
padding-bottom: 0.2em; /* Wartość odstępu pod tytułem */
text-transform: uppercase; /* Wielkie litery tytułu */
text-align: center; /* Wyśrodkowanie tytułu */
}

.PopularPosts .item-title a {
color: #222; /* Kolor tytułu linku */

}

.PopularPosts img {
width: 100%; /* Szerokość zdjęcia */
height: auto; /* Wysokość zdjęcia */
transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
}

.PopularPosts img:hover {
opacity: .7; /* Stopień przezroczystości zdjęcia po najechaniu myszą */
}

.PopularPosts .item-snippet {
display: none; /* Brak wyświetlania fragmentu tekstu */
}

2. Skrypt poprawiający rozdzielczość powiększonych zdjęć

Poniższy skrypt sprawi, że powiększone miniatury zdjęć nie będą "rozmazane".

Nad </body> wklej:
 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.mobile-index-thumbnail img').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});
$('.mobile .post-body img').attr('src', function(i, src) {return src.replace( 's280', 's500' );});
$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});
$('.post-body').fitVids();
$('.post-body img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
//]]>
</script>
Na koniec Zapisz szablon.

3. Dostosowywanie widżetu Popularne Posty

W menu Układ => Dodaj gadżet = > Popularne Posty. Odznacz Fragment i Zapisz.
To wszystko! I jak? Udało się wam wstawić widżet, czy jednak wolicie gotowy szablon?

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.