Podsumowania października nie będzie, bo najzwyczajniej w świecie nie miałam nawet czasu na buszowanie po sieci, więc byłoby nie fair, jakbym je zrobiła. Postanowiłam, że zamiast podsumowania podrzucę Wam instrukcję na to, jak zrobić automatyczne skracanie wpisów (czytaj więcej), dzięki tej instrukcji będziemy mogli stworzyć układ kafelkowy taki, jak jest w szablonach
Black and White oraz
Ms. mint brown. Uprzedzam - tak, trzeba będzie grzebać w kodzie, ale myślę, że każdy sobie z tym poradzi :)
1. Przechodzimy do
szablon - edytuj kod HTML (dla starszej wersji wyglądu "zaplecza") dla nowszej wersji grafika poniżej:
2. Klikamy obojętnie w jakie miejsce w kodzie i w okienko, które nam się pojawi wpisujemy
<data:post.body/> i za pomocą klawisza "enter" wyszukujemy. W kodzie szablonu jest ich trzy. My musimy się skupić na
2 i
3.
3. Tą część kodu, która została podświetlona na żółto, usuwamy, a zamiast niej wklejamy poniższy kod (w dwóch miejscach czyli przy 2 i 3 wyszukanym):
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Czytaj dalej »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
4. Teraz wyszukujemy
</head> i
NAD </head> wklejamy:
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Analiza:
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
Ilość znaków po skróceniu wpisu bez zdjęcia
Ilość znaków po skróceniu wpisu ze zdjęciem
Wysokość zdjęcia
Szerokość zdjęcia
Wartości pogrubione i kolorowe można zmieniać.
5. Teraz przechodzimy do
szablon - dostosuj - zaawansowane - dodaj arkusz CSS, aby wkleić styl CSS dla naszego przycisku "czytaj więcej".
6. Wklejamy kod:
.readmore a, #blog-pager-post a {
background: #ec95a8;
color: #fff;
text-transform: uppercase;
font-family: Open Sans Condensed;
font-weight: 700;
font-size: 20px;
letter-spacing: 2px;
padding: 10px 343px;
display: block;
max-width: 500px;
margin: 10px auto;
}
.readmore a:hover, #blog-pager-post a:hover {
background: #efd6d2;color: #fff;
text-transform: uppercase;
font-family: Open Sans Condensed;
font-weight: 700;font-size: 20px;
letter-spacing: 2px;
padding: 10px 343px;
display: block;
max-width: 500px;
margin: 10px auto;
}
Analiza
Wszystkie wartości kolorowe i pogrubione są zmienne.
Tło przycisku przed najechaniem myszką
Tło przycisku po najechaniu myszką
Kolor tekstu przed najechaniem myszką
Kolor tekstu po najechaniu myszką
Styl tekstu (w tym kodzie jest on ustawiony tak, aby litery były tylko wielkie, aby wyłączyć tą opcje wystarczy usunąć uppercase i wpisać none)
Rodzaj fontu
Pogrubienie fontu
Wielkość fontu
Odstęp między literami
Marginesy wewnętrzne
