17# Przepis na Popularne Posty

Cześć wszystkim!

W dniu dzisiejszym prezentuję prosty sposób na ozdobienie gadżetu z popularnymi postami na Waszych blogach. Omówimy również krótko anatomię tego gadżetu dzięki czemu będziecie w stanie dowolnie modyfikować przedstawiony przeze mnie sposób, no i oczywiście we własnym zakresie bawić się z kodami we własnym zakresie. Efekt, który dziś uzyskamy prezentuje się następująco:

Po lewej efekt przed najechaniem na post. Po prawej po. Przez jakiś czas będzie również efekt będzie można podziwiać na moim próbnym blogu, pod >>TYM<< adresem.

SELEKTORY

Zaczniemy od obiecanej anatomii popularnych postów.

#PopularPosts1 h2 - tytuł gadżetu
#PopularPosts1 - cały gadżet (wraz z tytułem)
#PopularPosts1 .widget-content - zawartość gadżetu (bez tytułu)
#PopularPosts1 ul li - lista, którą tworzą kolejne posty w gadżecie
#PopularPosts1 .item-content - zawartość każdego z elementów listy (tytuł + miniatura + fragment)
#PopularPosts1 img - miniaturka
#PopularPosts1 .item-title a - tytuł posta
#PopularPosts1 .item-snippet - fragment posta

To powinno nam pomóc z pracą nad omawianym gadżetem. :)

KROK 1. Konfiguracja gadżetu

Po dodaniu Popularnych postów na blog kliknijcie na ikonkę ustawień znajdującą się w prawym, dolnym rogu. Możecie dowolnie oznaczać okresy z których będą wyświatlały się posty a także ich liczbę. Ważnym jest jednak, by odhaczyć zarówno miniaturkę obrazu jak i fragment.

KROK 2. HTML - opcjonalnie

By omawiany gadżet wyglądał estetycznie należy dokonać jednej, drobnej zmiany w arkuszu HTML. Miniaturki w omawianym przez nas gadżecie są dość niewielkie, a przez ich rozciąganie w CSS mogą stracić na jakości. Aby temu zapobiec w panelu administracyjnym naszego bloga klikamy na Szablon > Edytuj kod HTML. Wciskamy na klawiaturze CTRL i F, by odnaleźć następujący kod:

<div class='item-thumbnail'>

Tuż pod powyższym kodem znajdziecie:

 <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;): data:post.thumbnail' var='image'>

Pogrubioną wartość należy zmienić na większą. W moim przypadku było to 400.

KROK 3.CSS

Po wykonaniu dwóch pierwszych kroków możemy przejść do stylu gadżetu. W panelu administracyjnym bloga wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS, by w białym polu wkleić:

#PopularPosts1 ul
{
/*usunięcie marginesów i odległości od ramek w gadżecie*/
padding:0;
margin:0;
}

#PopularPosts1 ul li
{
list-style-type:none; /*usunięcie stylu listy*/
padding:0; /*usunięcie  odległości od ramek w liście*/
margin-top:3px; /*ustawienie marginesu między postami*/
}

#PopularPosts1 .item-content
{
width:100%; /*szerokość każdego pota*/
border:2px groove grey; /*styl obramowania*/
font-family:arial; /*czcionka w postach*/
height:150px; /*wysokość posta*/
overflow:hidden; /*przycięcie gadżetu (dzięki temu nie będzie się rozciągał)*/
}

#PopularPosts1 img
{
width:400px; /*szerokość obrazu*/
min-height:150px; /*minimalna wysokosć obrazu*/
margin:-100px 0 0 -150px; /*pozycja obrazu*/
z-index:-1; /*ustawienie obrazu za pozostałymi częściami gadżetu*/
}

#PopularPosts1 .item-title
{
position:relative;
top:45px; /*pozycja tytułu posta*/
}

/*TYTUŁ POSTA*/
#PopularPosts1 .item-title a
{
color:#FFF; /*kolor czcionki*/
transition:.5s; /*czas animacji*/
text-transform:uppercase; /*wszystkie literki są wielkie*/
font-size:9px; /*wielkość czcionki*/
line-height:14px; /*odległość między linijkami */
padding:15px; /*odległość napisu od ramki*/
position:absolute;
left:0;
right:0;
margin:0 auto; /*tak ustawiony margin wraz z zerową wartością dla left i right ramkę z naszym tytułem na środku*/
width:70%; /*szerokość ramki*/
text-align:center; /*wyśrodkowanie tekstu*/
text-decoration:none; /*brak podkreślenia w linku*/
background:rgba(0,0,0,0.8); /*tło*/
}

/*FRAGMENT POSTA*/
#PopularPosts1 .item-snippet
{
color:#FFF; /*kolor czcionkia*/
font-size:10px; /*wielkość czcionki fragmentu posta*/
opacity:0; /*uniewidocznienie fragmentu posta, w czasie gdy nie najeżdżamy na niego kursorem*/
letter-spacing:1px; /*odległość między literami we fragmencie posta*/
line-height:11px; /*odległość między liniami we fragmencie posta*/
padding:5px; /*odległość tekstu od ramki*/
position:absolute;
left:0;
right:0;
margin:45px auto 0!important; /*takie ustawienie umożliwi nam usytuowanie fragmentu na środku*/
width:70%; /*szerokość ramki z fragmentem posta*/
text-align:center; /*wyśrodkowanie tekstu*/
background:rgba(0,0,0,0.9); /*tło*/
transition:1s;/*czas animacji*/
}

/*ANIMACJA FRAGMENTU POSTA PO NAJECHANIU NA RAMKĘ*/
#PopularPosts1 .item-content:hover .item-snippet
{
opacity:1;
transition:1.5s
}

/*ANIMACJA TYTUŁU PO NAJCHENIU NA RAMKĘ*/
#PopularPosts1 .item-content:hover .item-title a
{
padding:0;
padding-top:10px;
padding-bottom:10px; /*odegłości pomiędzy ramką, a tekstem (top - góra, bottom - dół)*/
margin-top:-45px; /*podniesienie tytułu wyżej*/
width:100%; /*rozciągnięcie tytułu na całą szerokość obrazka*/
transition:.5s/; /*czas animacji*/
}

Jak widzicie - trick jest prosty, a moim zdaniem efekt jest całkiem fajny. :)
Podzielcie się koniecznie opinią odnośnie takiej stylizacji dla Popularnych Postów w komentarzach!

I... Mam do Was pytanie. Zwiedzając blogi zauważyłam, że część z Was nie czyta zasad zawartych na MRUwisku. Macie pomysł jak temu zapobiec? A może powinnam po prostu zrezygnować z regulaminu?

Pozdrawiam!
Kociak

Czytaj dalej >>

16# Avatar autora w poście

Cześć!

Avatar autora w poście to fajny trick dla blogów na których jest więcej niż jeden autor. W odpowiedzi na Wasze prośby zdecydowałam się opracować w języku polskim instrukcję inspirowaną tym postem.
Uprościmy nieco kod autora wskazanego bloga, wytłumaczę również jak to działa.
Efekt, który uzyskamy prezentuje się następująco:

KROK I - HTML

Zaczynamy od skierowania się w profilu naszego bloga do sekcji Szablon, by w kolejnym etapie kliknąć na przycisk Edytuj kod HTML. Kierujemy kursor na arkusz z naszym kodem, klikamy, by następnie wcisnąć na klawiaturze CTRL i F. Wyszukujemy:

<span class='post-author vcard'>

Naszym oczom powinien ukazać się poniższy kod:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

Usuwamy go. Jeśli w kodzie znajdują się dwa takie kody - należy usunąć oba.
Ponownie wciskamy CTRL i F, by tym razem wyszukać:

<div class='post-header-line-1'/>

W szablonie mogą wystąpić również dwa takie kody. Jeśli tak jest - kierujemy się do tego drugiego z kolei.
Usuwamy go, a w jego miejsce wklejamy:

<div class='post-header-line-1'>
<div class='autorzy'>
<b:if cond='data:post.author == "nick autora"'>
<span class='autor'><a href='link do profilu autora'><img src='link do obrazka'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>
</div>
</div>

nick autora - wpisujemy tu dokładnie taki nick, jaki posiada dany autor na blogu;
link do profilu autora - tu wklejamy link do profilu autora (czy to na google, czy na bloggerze)
link do obrazka - link do avatara

Jeśli autorów jest więcej niż jeden, tuż pod </b:if> w powyższym kodzie wklejamy ponownie:

<b:if cond='data:post.author == "nick autora 2"'>
<span class='autor'><a href='link do profilu autora 2'><img src='link do obrazka 2'/><span class='nick' itemprop='name'><data:post.author/></span></a></span>
</b:if>  

Kod uzupełniamy.

Co w praktyce zrobiliśmy? Pierwszym punktem było usunięcie całej sekcji z autorem na naszym blogu, w kolejnym stworzyliśmy inny kod. Zakłada on, że jeśli nick autora postu będzie dokładnie taki jaki podaliśmy - wyświetli się zalinkowany do wskazanego przez nas profilu avatar autora. Tuż obok wyświetli się nick autora postu (również zalinkowany do podanego przez nas profilu).

KROK II - CSS

Teraz czas na dodanie prostego kodu CSS. W profilu naszego bloga wchodzimy w Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSS, by wkleić poniżej następujący kod:

.autorzy img {
width: 80px; /*szerokość avatara ustawiona na 80 pikseli*/
height: 80px; /*wysokość avatara ustawiona na 80 pikseli*/
}

.autorzy span {
display: block; /*ustawiamy nick i avatar jedno pod drugim
}

Możecie dowolnie przesuwać używając opcji float i margin swój avatar. Można również zmienić czcionkę w nicku, jego kolor... Zaokrąglić rogi avatarów... Do ozdobienia tej części naszego posta przydatne będą następujące selektory:

.autorzy - puszka zawierająca avatar i nick
.autorzy img - avatar
.nick a - nick autora postu

I.. To wszystko w dniu dzisiejszym. Mam nadzieję, że instrukcja przypadła Wam do gustu. Zachęcam do komentowania. :)
Pozdrawiam!

Czytaj dalej >>

15# Slajder w nagłówku

Cześć wszystkim!
Od jakiegoś czasu nosiłam się z zamiarem opracowania prostego slidera celem opublikowania tu instrukcji. W końcu się udało i muszę przyznać,że dla mnie efekt jest zadowalający. Pokażę Wam dziś w jaki sposób opracować pokaz slajdów na swojego bloga, a także wytłumaczę jak umieścić taki w nagłówku.
Efekt, który chcemy uzyskać prezentuje się następująco:

⇐

⇒

• pierwszy kotek!
• drugi kotek!
• trzeci kotek!
• czwarty kotek!

Zaczniemy od dodania kodu HTML w miejsce naszego nagłówka. Wchodzimy w nasz edytor kodu HTML, w panelu administracyjnym bloga klikając na odnośnik "Szablon", by następnie skierować się do "Dostosuj kod HTML". Kursor kierujemy na arkusz z kodem i klikamy gdziekolwiek, by po wciśnięciu klawiszy CTRL i F móc wyszukać: <header>
Usuwamy cały kod pomiędzy <header>, a </header> i zastępujemy go:

<div id="slajder">
<div class="poprzedni">⇐</div>
<div class="nastepny">⇒</div>
<ul>
<li>
<img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span>
</li>
<li>
<img src="adres drugiego obrazka"/>
<span>podpis pod drugim obrazkiem</span>
</li>
<li>
<img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span>
</li>
</ul>
</div>

Kod uzupełniamy w preferowane przez nas obrazki i tekst, który ma się pod nimi pojawić.
Szablon zapisujemy.

KROK I i 1/2 - opcjonalnie

Jeśli chcecie, by kliknięcie w slajd powodowało przeniesienie do jakiejś podstrony wystarczy nieco zmodyfikować kod. W takim przypadku każdy element z listy powinien prezentować się następująco:

<li>
<a href="link przekierowania"><img src="adres pierwszego obrazka"/>
<span>podpis pod pierwszym obrazkiem</span></a>
</li>

KROK II - CSS

Czas na edytowanie stylu naszego slidera.
Kierujemy się do panelu administracyjnego naszego bloga, by kolejno przenieść się do Dostosuj > Zaawansowane > Dodaj arkusz CSS
Tam też wklejamy i według preferencji edytujemy następujący kod:

#slajder {
    position: relative;
    overflow: hidden;
  }
  #slajder ul {
    position: relative;
    margin: 0;
    padding: 0;
  }
  #slajder ul li {
    position: relative;
    display: block;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
    width: 600px; /*szerokość slajdów*/
    height: 400px; /*wysokość slajdów*/
  }
  #slajder img {
    height: auto;
    max-width: 700px; /*maksymalna szerokość obrazków w slajdach*/
    min-width: 600px; /*minimalna szerokość obrazków w slajdach*/
    min-height: 400px; /*minimalna wysokość obrazków w slajdach*/
    position: relative;
  }
  #slajder li span {
      background-color: rgba(0, 0, 0, 0.5); /*kolor tła pod opisem naszego slajdu*/
      position: absolute;
      display: block;
      font-family: Arial; /*czcionka*/
      font-size: 16px; /*rozmiar czcionki slajdu*/
      text-transform: uppercase; /*zamienienie wszystkich liter na wielkie*/
      text-align: center; /*wyśrodkowanie tekstu*/
      padding: 10px; /*odległość tekstu od ramki*/
      color: white; /*kolor tekstu*/
      width: 580px; /*szerokość ramki z opisem slajdu (by była od brzegu do brzegu zdjęcia należy od szerokości slajdów odjąć 2x padding w odległości tekstu od ramki)*/
      z-index: 1 !important;
      bottom: 0px; /*odległość ramki z opisem od dolnej krawędzi zdjęcia*/
    }
    .poprzedni {
      background-color: rgba(0, 0, 0, 0.8); /*kolor tła pod strzałką kierującą nas do poprzedniego slajdu*/
      color: white; /*kolor tej strzałki*/
      cursor: pointer; /*zmiana kursora*/
      display: block;
      width: 15px; /*szerokość tła strzałki*/
      position: absolute;
      bottom: 180px; /*odległość omawianej strzałki od dolnej krawędzi*/
      z-index: 1;
      padding: 15px; /*odległość strzałki od ramek tła*/
      left: 0px; /*ustawienie strzałki po lewej stronie*/
    }
    .nastepny {
      background-color: rgba(0, 0, 0, 0.8); /*kolor tła pod strzałką kierującą nas do następnego slajdu*/
      color: white; /*kolor tej strzałki*/
      cursor: pointer; /*zmiana kursora*/
      display: block;
      width: 15px; /*szerokość tła strzałki*/
      position: absolute;
      bottom: 180px; /*odległość omawianej strzałki od dolnej krawędzi*/
      z-index: 1;
      padding: 15px; /*odległość strzałki od ramek tła*/
      right: 0px; /*ustawienie strzałki po prawej stronie*/
    }

Zmiany należy zastosować do bloga.

KROK III - JQUERY

Ostatnim co musimy zrobić jest dodanie kodu jQuery, który umożliwi slajderowi spełnianie swojej funkcji.
Kierujemy się, ponownie jak w pierwszym kroku do edytora kodu HTML, by po kliknięciu na obszar z kodem odnaleźć </head>. Tuż nad nim wklejamy następujący kod:

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
  jQuery(document).ready(function ($) {
   var slideCount = $('#slajder ul li').length;
   var slideWidth = $('#slajder ul li').width();
   var slideHeight = $('#slajder ul li').height();
   var slajderUlWidth = slideCount * slideWidth;
   $('#slajder').css({ width: slideWidth, height: slideHeight });
   $('#slajder ul').css({ width: slajderUlWidth, marginLeft: - slideWidth });
    $('#slajder ul li:last-child').prependTo('#slajder ul');
      function moveLeft() {
          $('#slajder ul').animate({
              left: + slideWidth
          }, 500, function () {
              $('#slajder ul li:last-child').prependTo('#slajder ul');
              $('#slajder ul').css('left', '');
          });
      };
      function moveRight() {
          $('#slajder ul').animate({
              left: - slideWidth
          }, 500, function () {
              $('#slajder ul li:first-child').appendTo('#slajder ul');
              $('#slajder ul').css('left', '');
          });
      };
      $('.poprzedni').click(function () {
          moveLeft();
      });
      $('.nastepny').click(function () {
          moveRight();
      });
  });
  </script>

Pogrubione wartości stanowią prędkość przesuwania się kolejnych zdjęć w milisekundach.

To wszystko ode mnie w dniu dzisiejszym.
Jestem Wam winna przeprosiny za częstotliwość postów na tym blogu, uwarunkowane to było niedoborem wolnego czasu. Teraz mam go dużo więcej i obiecuję, że teraz posty będą się pojawiały dużo częściej.
Zachęcam do komentowania! :)

źródła: [x][x][x][x][x]

Czytaj dalej >>