11 stycznia 2014

Instrukcja: Jak zrobić automatycznie zwijany post z miniaturą?

Cześć! We wczorajszej notce pytałam czy chcecie wspomnianą w tytule posta instrukcję. Odzewu nie było, ale postanowiłam ją napisać - być może komuś się przyda :) Ostatnio bardzo spodobało mi się zawijanie posta (opcja Czytaj więcej/Czytaj dalej). Według mnie wygląda to na blogu bardzo estetycznie. Jednak zawijanie ręcznie każdego posta podczas jego pisania było dla mnie nieco uciążliwe. Poza tym chciałam żeby każdy post był skrócony po takiej samej liczbie znaków. No i chciałam miniaturkę pierwszego zdjęcia z danego posta obok. Zdecydowałam się zrobić lekkie modyfikacje w html i wprowadzić automatyczne zwijanie. Efekt możecie zobaczyć wyświetlając stronę główną mojego bloga. Jeżeli Wam się podoba i chcielibyście zrobić takie coś u siebie to zapraszam do poczytania dalszej części notki.


http://imageshack.com/a/img30/669/bvfe.jpg

INSTRUKCJA: Jak zrobić automatycznie zwijany post z miniaturą?

PO PIERWSZE: ZRÓB KOPIĘ ZAPASOWĄ SZABLONU! Gdyby coś poszło nie tak to będziesz mógł bez problemu przywrócić poprzedni wygląd.
1. Wejdź w panel bloggera i otwórz: Szablon -> Edytuj kod HTML.


2. Na oknie z kodem HTML naciśnij CTRL+F i wyszukaj kod:

<data:post.body/>

Jest kilka takich kodów. Musisz wybrać drugi i trzeci i przy każdym z nich wykonać krok 3.

3. Jak już wyszukasz odpowiedni kod to zaznaczasz go i zamiast niego wklejasz poniższy:

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

Będzie to wyglądało tak:



4. Teraz wyszukujesz w kodzie html fragment:

</head>

Tuż nad nim wklejasz poniższy kod skryptu:

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

Wartości oznaczone kolorami (zielony, pomarańczowy, czerwony, niebieski) odpowiadają poszczególnym ustawieniom. Możesz je dostosować po swojemu.

Wartość zaznaczona kolorem zielonym oznacza ilość znaków wyświetlanych przed "Czytaj dalej" w poście bez miniatury (bez zdjęć zdjęć).
Wartość zaznaczona kolorem pomarańczowym oznacza ilość znaków wyświetlanych przed "Czytaj dalej" w poście z miniaturą (ze zdjęciem/zdjęciami).
Wartość zaznaczona kolorem czerwonym oznacza wysokość zdjęcia w miniaturze. *
Wartość zaznaczona kolorem niebieskim oznacza szerokość zdjęcia w miniaturze. *

* Wartości te powinny być proporcjonalne, żeby nie zniekształcało zdjęcia. Np. jeśli dodajesz zdjęcia w rozmiarze 640x480 (poziome) to miniaturę proponuję dać o wymiarach 220 (szerokość) i 165 (wysokość).


5. Zapisujesz i gotowe :)


EFEKT:



Mam nadzieję, że instrukcja się Wam przyda. W razie jakiś problemów możecie śmiało pisać na emaila - jeśli tylko będę umiała to Wam pomogę.

Zostawiam Was z instrukcją, a ja idę trochę pozmieniać wygląd bloga :D



107 komentarzy

  1. Świetna instrukcja, bałabym się jednak że coś namieszam. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. To naprawdę nie jest trudne :)

      Usuń
    2. W razie czego zawsze możesz zrobić back-up templejta i, kiedy coś pójdzie nie tak, jak powinno, możesz odzyskać dawny wygląd bloga :)
      Pozdrawiam, WingsOfEnvy Blog
      :)

      Usuń
  2. Odpowiedzi
    1. Haha :D to jest łatwa instrukcja :P bardziej skomplikowane wymagają zmian w kodzie html nawet w kilkunastu miejscach :P

      Usuń
  3. Odpowiedzi
    1. Myślałam, że wszyscy ogarną :D

      Usuń
  4. Mnie akurat nie potrzeba :) wolę post w całości :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Skoro tak wolisz :) Po otwarciu posta z listy czytelniczej oczywiście wyświetla się w całości :) Jedynie po wejściu bezpośrednio na bloga jest "zwinięty" :)

      Usuń
  5. Akurat dzisiaj tego szukałam, spadłaś mi z nieba ;)

    OdpowiedzUsuń
  6. Super pomysł z instrukcją :)
    Kiedyś może wykorzystam. Dziękuję ;*
    http://borenium.blogspot.com/

    OdpowiedzUsuń
  7. Ha! :) Sama "zawijam" posty - myślę, że blog rzeczywiście dużo bardziej atrakcyjnie i przejrzyście wygląda :)
    Pozdrawiam, WingsOfEnvy Blog
    :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Łatwiej można znaleźć notkę, która nas interesuje :)

      Usuń
  8. Puki co, wolę post w całości, ale być może przyda się w przyszłości, jak zdecyduję się na zmiany :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja wcześniej też wolałam całe posty :)

      Usuń
  9. Haha ja nie mogłam zczaić czym się różni od zwykłego zwijanego :D Ale już znalazłam różnicę :D JA generalnie nie lubię tego 'Czytaj dalej' :( Ale jest taki jeden blog, gdzie aż się prosi, żeby to zrobić ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja dawniej też tego nie lubiłam :P

      Usuń
  10. Dzięki za instrukcje! Bardzo przydatna :)
    Ps. zapraszam do mnie na rozdanie BeautyBlendera i gąbki do makijażu HD z Real Techniques :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że przydatna :)
      Zaraz do Ciebie zajrzę :)

      Usuń
  11. bardzo lubię zwijane notki, ale wolę sama zkikać na zwijanie, bo wiem kiedy chce je wstawić ;) jednak nie wykluczam, że zrobię coś takiego i u siebie :D
    a może napisałabys notkę jak zrobić własny przycisk "czytaj dalej" bo od dłuższego czasu to za mną chodzi a nie ogarniam tego ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Podłączam się do delikatnej prośby o pomoc w zrobieniu własnego przycisku. :)

      Usuń
    2. Przygotuję niedługo taką instrukcję skoro chcecie :)

      Usuń
  12. świetny post może na takie notki sie przestawie :P

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja się na takie przestawiłam niedawno :P o wiele łatwiej mi teraz ogarnąć bloga i wygląda bardziej przejrzyście :)

      Usuń
    2. kurcze spróbowałam ale mi nie wyszło,nie za bardzo wiem od którego momentu mam usunąć ten pierwszy kod :P hehe to chyba nie dla mnie

      Usuń

    3. dokładnie to musisz usunąć i zamiast tego wstawić tamten kod, który podałam w notce :)
      tylko to, żadnego przecinka, kropki, nawiasu itp. więcej bo wtedy może nie zadziałać :P

      Usuń
  13. Mi nie chciało się tego robić więc po prostu zmieniłam szablon na taki z innej strony a nie z blogera. Teraz nie wyobrażam sobie, żeby mieć post od razu na całą stronę :)

    I-am-Journalist.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Jest sporo szablonów zewnętrznych dostępnych z takim zwijaniem, masz rację :) Ale ja nie chciałam zmieniać na razie nic poza właśnie tym zwijaniem, więc nowy szablon (w kwestii html) nie wchodził w grę :)

      Usuń
  14. Na pewno komuś się przyda. :D

    OdpowiedzUsuń
  15. Odpowiedzi
    1. Nie ma w tym nic skomplikowanego :P

      Usuń
  16. Ja nie lubię jak posty są zwinięte ;p Wolę je na całej stronie ;D

    OdpowiedzUsuń
  17. Ja uwielbiam się w HTML bawić :D
    ______________________________________
    Zapraszam na: borsuk-testuje.blogspot.com/

    OdpowiedzUsuń
  18. Ja jestem taką sierotą jeśli chodzi o sprawy informatyczne, że na 100% coś bym popsuła, nawet z tak czytelną instrukcją :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Gdybyś robiła wszystko krok po kroku to z pewnością by Ci się udało :)

      Usuń
  19. Odpowiedzi
    1. Czarnej magii jeszcze nie widziałaś z html :D

      Usuń
  20. Przydatne :) kiedyś nie wiedziałam jak to zrobić, więc taki post się przyda.

    OdpowiedzUsuń
  21. Wow! Super, że zrobiłaś taką instrukcję! ;) Aż sama pokombinuję ;)

    OdpowiedzUsuń
  22. bardzo miło z Twojej strony, że robisz takie instrukcje, które na pewno pochłaniają masę czasu. ja chciałabym aby pod każdym moim postem były okienka z podobnymi i linki do nich ale nie mam pojęcia jak to zrobić.

    OdpowiedzUsuń
    Odpowiedzi
    1. Nazywa się to LinkWithin :) Zaraz napiszę Ci u Ciebie link do instrukcji :)

      Usuń
  23. Świetnie wytłumaczone! Uwielbiam Twoje instrukcje i techniczne podpowiedzi :)

    OdpowiedzUsuń
  24. przydatny post, fajny pomysl na niego :)
    zapraszamy w wolnej chwili :)

    OdpowiedzUsuń
  25. u mnie niestety 3/4 takich kodów nie działa, choć wyszukuje je w HTML ;/
    http://psychodelax3.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli wszystko jest dobrze wklejone to MUSI działać :) W html jest problemem tylko to, że wystarczy że nie ma w danym miejscu np. przecinka i już kod nie zadziała ;)

      Usuń
  26. Bardzo przydatny wpis. Na razie nie planuję zwijać postów, ale jak mi się odmieni, to będę wiedziała, gdzie szukać informacji :)

    OdpowiedzUsuń
  27. Kiedyś stosowałam ręczny zwijak, że tak to ujmę, teraz jednak wolę 'całe' posty ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Mi łatwiej ogarnąć zwinięte jak odpowiadam na komentarze :P

      Usuń
  28. piszesz kopiuj/wklej, a u mnie nie da się wklejać kodu, tylko trzeba przepisywać :)

    OdpowiedzUsuń
    Odpowiedzi
    1. masz szablon z blogera czy wgrany z zewnątrz?

      Usuń
  29. U mnie niestety na żadnym blogu taki kod nie chce działać i muszę ręcznie zawijać posty :)

    OdpowiedzUsuń
    Odpowiedzi
    1. być może blokuje go jakiś inny skrypt ;)

      Usuń
  30. I tego właśnie szukalam!!! Wielkie dzięki!

    OdpowiedzUsuń
  31. Jak zrobić, żeby zdjęcia miały oryginalne rozmiary?

    OdpowiedzUsuń
    Odpowiedzi
    1. Trzeba wpisać odpowiednie wymiary w miniaturze.

      Usuń
  32. O nie!!!!!!! Próbowałam ustawić zwijane post i wszystko mi się popsuło! wszystko mi zniknęło i nie ma ani zdjęć ani treści. Co mam zrobić? To jest mój blog: http://lindalemons.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Napisz do mnie na emaila: kasia93@interia.eu i prześlij mi swój pełny szablon.

      Usuń
    2. Już wysłałam. Bardzo dziękuję, że chcesz mi z tym pomóc

      Usuń
  33. Ten post jest GE-NIA-LNY!!! Nawet takie beztalencie jak ja sobie poradziłam, a dłubanie w html to normalnie dla mnie męczarnie i tortury. Dzięki! Jesteś wielka!

    OdpowiedzUsuń
  34. Kochana a co zrobić żeby to zdjęcie było tak duże jak u ciebie i na środku a pod spodem tekst?

    OdpowiedzUsuń
    Odpowiedzi
    1. Trzeba powiększyć wymiary miniatury do takich rozmiarów, aby była na całą szerokości posta :)

      Co do wyśrodkowania to:

      < span class='readmore' style='float:right'>< a expr:href='data:post.url'>Czytaj dalej »< /a >

      w tym wierszu dopisujesz po style= przed float-right taką frazę:
      margin-right:5px;

      liczba przy px może być większa lub mniejsza - w zależności od wielkości miniatury :)

      Usuń
    2. Gdy wklejam margin-right:5px; to wyskakuje mi błąd. Dlaczego?

      Usuń
    3. Ten wiersz kodu po dopisaniu margin ma wyglądać tak:
      < span class='readmore' style='margin-right: 5px; float:right'>< a expr:href='data:post.url'>Czytaj dalej »< /a > (bez spacji przed znakami < , musiałam zrobić spację żeby móc wkleić kod w komentarzu)

      Jak dobrze wkleisz to błąd nie powinien się pojawić :)

      Usuń
  35. Hej, mam nadzieję, że odpowiesz :) jak dodać same miniaturki? Bez tego zwijania postu (wolę zwijać ręcznie)

    OdpowiedzUsuń
  36. Mam problem :(
    Wyszukiwarka nic mi nie wykazała, z jest 0 z 0. O co tu chodzi?

    OdpowiedzUsuń
    Odpowiedzi
    1. Wpisz w wyszukiwarkę samą frazę post.body i wyszukuj, aż natrafisz na pełną frazę z punktu 2 :)

      Usuń
  37. Mam problem, ponieważ nie mogę znaleźć w kodzie HTML frazy . Co mam zrobić w takim wypadku? Skąd wiedzieć gdzie wkleić dany fragment kodów? Korzystam z szablonu prostego na Bloggerze.

    OdpowiedzUsuń
    Odpowiedzi
    1. Wpisz w wyszukiwarkę samą frazę post.body i wyszukuj, aż natrafisz na pełną frazę z punktu 2 :)

      Usuń
  38. Ja też mam problem, a mianowicie w moim html są tylko dwie takie frazy, więc gdzie powinnam wstawić frazę zastępczą zamiast na 2 i 3 miejscu? ;/

    OdpowiedzUsuń
  39. Wszystko działa aż miło :3 Mam tylko jedno pytanko, wiesz może jak zrobić aby miniatura była okrągła?

    OdpowiedzUsuń
  40. Dzięki udało się! Nie wiedziałam, że takie to proste :)
    Zapraszamy do nas :)
    http://pieswpile.blogspot.com/

    OdpowiedzUsuń
  41. Mam tylko jeden post.body co zrobić?

    OdpowiedzUsuń
  42. Świetna instrukcja ! Prosto, jasno i czytelnie :) Dzięki i pozdrawiam :)

    OdpowiedzUsuń
  43. Ja też skorzystałam, wklejając kody na mój drugi blog! idealnie o to chodziło - sukces, dzięki jasnej instrukcji :) Dzięki!

    OdpowiedzUsuń
  44. Tej post jest już dość stary, ale dopiero teraz na niego trafiłam :)
    Kiedy wklejam wszystko zgodnie z instrukcją (choć u mnie kod pojawia się tylko dwa razy) poprawnie zwija się tylko pierwszy post. W pozostałych pojawia się zdjęcie, ale zamiast tekstu jest "Normal 0 21 false false false PL X-NONE X-NONE MicrosoftInternetExplorer4 ..."
    ... co może być przyczyną?

    OdpowiedzUsuń
    Odpowiedzi
    1. Prawdopodobnie posty piszesz najpierw w Wordzie i kopiujesz do edytora posta przez co skrypt zwijania postów niepoprawnie "widzi" tekst. Po skopiowaniu posta z Worda to edytora posta usuń formatowanie posta i ustaw je na nowo w edytorze posta - powinno pomóc :)

      Usuń
  45. A może wystarczyłoby dodać samo czytaj dalej? Dać do posta obrazek i by było to samo?

    OdpowiedzUsuń
    Odpowiedzi
    1. Przecież to tak nie zadziała :) Jak ma się automatycznie zwinąć post po dodaniu do niego obrazka? To nawet nie brzmi logicznie :)

      Usuń

Jeśli masz jakieś pytanie - pisz śmiało, odpowiem pod Twoim komentarzem :)

Staram się odwiedzać wszystkich komentujących. Możesz zostawić w komentarzu adres swojego bloga - będzie mi łatwiej na niego trafić :)

Related Posts Plugin for WordPress, Blogger...