Zmiana rozmiaru miniatur dla Widgetu Popularne Posty

Kiedy dodajesz widget na Bloggerze, miniatury zachowują domyślny rozmiar 72 x 72px, który może nie wyglądać za dobrze, postaramy się je powiększyć przy użyciu CSS. Jednak przy odrobinie JavaScript będziemy mogli zastąpić miniatury z tego samego obrazu w wyższej rozdzielczości i w ten sposób będą większe obrazy i nie będą wyświetlane rozmyte. W tym tutorialu zobaczymy jak możemy zastąpić domyślny rozmiar miniatur widgetu popularnych postów.

Zmiana rozmiaru miniatur dla Widgetu Popularne Posty 

Krok 1. Najpierw dodaj gadżet Popularne posty przechodząc do Układ > kliknij na link Dodaj gadżet i wybierz Popularne Wiadomości z okna popup.

Krok 2. Następnie przejdź do Szablon > kliknij na przycisk Edytuj HTML > kliknij w dowolnym miejscu wewnątrz obszaru kodu i naciśnij klawisze CTRL + F, aby otworzyć okno wyszukiwarki Bloggera.

Krok 3. Wpisz lub wklej następujący tag wewnątrz pole wyszukiwania, a następnie naciśnij klawisz Enter, aby go znaleźć:

</head>

Po znalezieniu </ head>, dodaj CSS nad nim:

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px solid #EEEEEE;
border-radius: 20px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
background: #F9F9F9;
border: 2px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
}
.PopularPosts .item-title {
clear: both font: 14px Cambria,Georgia, sans-serif;
color: #2288BB;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>

Krok 4. Teraz szukać tego tagu:

</body>

... I tuż nad nim, dodać ten skrypt:

<script type='text/javascript'>                 
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",210);                 
</script>

Wyświetlone na czerwono ID widget gadżetu Popularne posty. Zmień rozmiar miniatur dla każdego z widgetów bloga, najpierw trzeba znaleźć gadżet / widget ID, a następnie dodać linię poniżej tej części:

changeThumbSize("PopularPosts1",210);
changeThumbSize("widget-ID-TUTAJ",210);

... I wymienić widget-ID-TUTAJ na tekst ID tego widgetu / gadżetu.

Uwaga: nie będzie widać zmiany, jeśli widget ma wybór klasy - za to można zmienić klasę id i zastąpić kropkę symbolu z "#" w CSS ... Jeśli tego nie zrobisz zostaw "." 

Jak znaleźć identyfikator danego widżetu, należy sprawdzić ten tutorial jak używać Firebug do projektowania bloga Bloggera. 

Krok 5. Po wciśnięciu Zapisz szablon, aby zapisać zmiany.