Jak zrobić automatyczne skracanie wpisów na Bloggerze

niedziela, 6 listopada 2016

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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Czytaj dalej &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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

Jeśli spodobał Ci się wpis, przekaż go dalej :)