8# Rozwijane Informacje [instrukcja]

Kontynuując naszą odyseję po gadżetach bloggera, którą rozpoczęło prezentowane w poprzednim poście archiwum, przechodzimy do gadżetu z tekstem. W dniu dzisiejszym pokażę Wam trick, który pozwoli go nieco urozmaicić, a także zaoszczędzić troszkę miejsca na blogu. :) Efekt, jaki uzyskamy prezentuje się następująco:

kliknij, aby wyświetlić tekst

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet posuere tortor, at faucibus ipsum. Aliquam malesuada iaculis sem non varius. Aenean quis ullamcorper mi. Aliquam et diam rutrum, iaculis felis quis, mollis augue. pogrubienie| kursywa | link

Instrukcja nie należy do skomplikowanych i jeśli tylko będziecie kierowali się zaprezentowanymi przeze mnie krokami z pewnością uda Wam się osiągnać ten efekt. Jak zawsze zachęcam do eksperymentowania. Nie tylko z CSSem! :)
Zacznijmy od drobnych edycji w kodzie HTML. W panelu naszego bloga przechodzimy do sekcji "szablon", by następnie kliknąć przycisk z napisem "Edytuj kod HTML". Klikamy CTRL i F, by wyszukać tego fragmentu:

  <b:widget id='Text1'

 Naszym oczom powinien się ukazać taki kodzik:

<b:widget id='Text1' locked='false' title='Gadżet z tekstem' type='Text'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

Wycinamy cały powyższy fragment i zastępujemy go następującym:

  <b:widget id='Text1' locked='false' title='kliknij, aby wyświetlić tekst' type='Text'>
    <b:includable id='main'>
      <div class='przycisk'><data:title/></div>
<div class='tekst'>
  <data:content/>
</div>

Następnie, wciąż w naszym kodzie HTML wyszukujemy </head>, by tuż pod nią wkleić następujący kod:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function(){

$(".tekst").hide();
$(".przycisk").show();

$(".przycisk").click(function(){
$(".tekst").slideToggle();
});

});

</script>

Dzięki niemu będziemy mogli ukrywać i chować nasz tekst po kliknięciu na niego myszką.  :) 

Jak już się z pewnością domyślacie - teraz przejdziemy do obróbki stylu naszego odmienionego gadżetu w CSS. W tym celu ponownie klikamy na naszym panelu Szablon, by nacisnąć na przycisk Dostosuj. Następnie przechodzimy do Zaawansowane, gdzie po kliknięciu na Dodaj arkusz CSS mamy możliwość przy podglądzie dostosować wygląd naszego gadżetu. Poniżej kod, którego ja użyłam z opisami, dzięki którymi będziecie mogli dostosować go do własnych potrzeb.

Zaczęłam od wyglądu przycisku, a właściwie tytułu naszego gadżetu.

.przycisk
{
background:#5fa119; /*tło*/
display:block;/*nie zmieniamy :)*/
padding:10px;  /*odległość tekstu na przycisku od brzegu*/
color:#fff!important; /*kolor tekstu*/
font-family:Tahoma; /*czcionka*/
text-transform:uppercase; /*zmiana wszystkich liter na wielkie*/
text-align:center; /*wyśrodkowanie tekstu*/
text-shadow: 2px 2px 3px #206700; /*cień tekstu*/
box-shadow:inset 10px 10px 30px #206700; /*wewnętrzny cień przycisku*/
border:2px solid #206700; /*ramka tytułu*/
font-size:13px; /*rozmiar czcionki*/
cursor:pointer; /*zmiana kursora po najechaniu na tytuł. Polecam pozostawić bez zmian.*/
}

Teraz przejdźmy do obróbki tekstu, który pojawia się na dole po wysunięciu.

.tekst
{
padding:10px; /*odległość tekstu od ramki*/
background:#2a2a2a; /*tło*/
color:silver; /*kolor czcionki*/
font-family:Tahoma; /*czcionka*/
font-size:12px; /*rozmiar czcionki*/
text-align:justify; /*wyjustowanie tekstu*/
text-shadow:1px 1px 2px #000; /*cień tekstu*/
}

Przywykłam do zmienienia nieco stylu literek pogrubionych, pochylonych czy linków w gadżecie z tekstem. Wygląda to w mojej opinii atrakcyjniej. Dlatego też zachęcam! :)

.tekst b
{
color:#88bf3a; /*kolor tekstu pogrubionego*/
}
.tekst i
{
color:#fff; /*kolor tekstu pisanego kursywą*/
}
.tekst a
{
color:#b0b0b0; /*kolor linków*/
text-shadow:0 0 5px #206700; /*cień linków*/
text-decoration:underline; /*podkreślenie linków*/
}

To wszystko ode mnie w dniu dzisiejszym.
Macie pomysł na jaki jeszcze gadżet chcielibyście zobaczyć instrukcję? Składajcie propozycje w komentarzach!

Czytaj dalej >>