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<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.
