Informacyjne kwadraciki

Wielu bloggerów zamieszcza na swoich stronach krótkie informacje. Zazwyczaj dodają gadżet pod nazwą ,,text'' w kolumnie bocznej, gdzie w podpunktach zamieszczają krótkie i treściwe info na temat bloga, przyszłego postu, kontaktu itp... Nie zawsze wygląda to jednak atrakcyjnie. Czasami nawet owa informacja staje się wadą, ponieważ jest za długa, bądź nie pasuje do całej reszty. Dlaczego więc nie uprościć sobie życia tworząc coś ładnego, prostego i zajmującego niewielką powierzchnię bloga?

Co dokładnie mam na myśli? Małe kwadraciki, które wyświetlają krótką informację po najechaniu na nie myszką, tak jak na poniższym zdjęciu. To może już przejdźmy do sedna!

Do osób początkujących w kodach HTML!
Wypróbuj kod na próbnym blogu! Tak będziesz miał pewność, że wszystko zadziała poprawnie!

Najpierw wejdź w edycję kodu HTML. Następnie Otwórz pomocnicze okienko do wyszukania kodu za pomocą CTRL+F i wyszukaj kod o nazwie <header>

POD KODEM

<header> <div class='header-outer'> <div class='header-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div>

WKLEJ

<div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/></div> <div class='tabs section' id='crosscol-overflow'><div class='widget HTML' id='HTML6'> <h2 class='title'>Info</h2> <div class='widget-content'> <div class='box1'> <span class='box1ti'>x</span> <span class='box1text'>111<b>222</b> </span> </div> <div class='box1a'> <span class='box1ati'>x</span> <span class='box1atext'>111<b><a href='#'>222</a></b></span> </div> <div class='box1b'> <span class='box1bti'>x</span> <span class='box1btext'>111<b>222</b> </span> <div class='clear'/> </div></div> </div> </div> <div class='tabs-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> <div class='main-outer'> <div class='main-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div>

OBJAŚNIENIE

x - nazwa kwadracika; nie jest konieczna 111 - informacja, którą chcesz zamieścić w kwadraciku <b>222</b> - dalszy ciąg informacji; tym razem czcionką pogrubioną o czym świadczą wartości <b> </b> (b = bold = pogrubienie) # - w miejsce kratki wklej link do strony; nie jest konieczny

Niestety to nie wszystko. Aktualnie zamieściliśmy jedynie informacje, które się wyświetlają na blogu, ale nadal nie wyglądają tak jak powinny. Co więc trzeba zrobić? Oczywiście nadać im wygląd. Najprościej jest to zrobić kodami CSS. No więc do roboty!

KOD

.box1{ [NAZWA KWADRACIKA]
position: absolute;
float: left;
}
.box1ti {
background: #7e8c1f; [KOLOR TŁA KWADRACIKA]
color: transparent; [KOLOR TEKSTU KWADRACIKA]
float: left;
width: 100px;
text-align: center;
padding: 7px;
text-transform: uppercase;
font-family: oswald; [RODZAJ CZCIONKI]
letter-spacing: 2px; [ODSTĘPY MIĘDZY LITERAMI]
width: 0px;
height: 0px;
box-shadow: 1px 1px 0px #f5f5f5; [CIEŃ KWADRACIKA]
}

.box1text { [RAMKA Z TEKSTEM]
font-size: 11px; [ROZMIAR CZCIONKI]
background: #fefefe;
color: #222;
position: absolute;
font-family: oswald;
text-transform: uppercase;
padding: 10px;
text-align: justify;
opacity: 0;
margin-left: 5px; [MARGINES LEWY]
margin-top: -30px; [MARGINES GÓRNY']
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
box-shadow: 2px 2px 0px #e0f5dc;
display: none;
}

.box1:hover .box1text { [PO NAJECHANIU]
opacity: 0.8;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
display:inline;
}

.box1:hover [PO NAJECHANIU]{
overflow: visible;
width:220px;
}

.box1a {
position: absolute;
width: 0px;
float: left;
margin-top: 17px;
width: 220px;
}

.box1ati {
background: #9fab4b;
color: transparent;
float: left;
width: 100px;
text-align: center;
padding: 7px;
text-transform: uppercase;
font-family: oswald;
letter-spacing: 2px;
width: 0px;
height: 0px;
box-shadow: 1px 1px 0px #f5f5f5;
}

.box1atext {
font-size: 11px;
background: #fff;
color: #7e8c1f; position: absolute;
font-family: oswald;
text-transform: uppercase;
padding: 10px;
text-align: justify;
opacity: 0;
margin-left: 5px;
margin-top: -30px;
transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease
;-moz-transition: all 0.2s ease;
box-shadow: 2px 2px 0px #e0f5dc;
display: none;
}

.box1a:hover .box1atext {
opacity: 0.8;
transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
display: inline;
}

.box1a:hover {
overflow: visible;
width: 220px;
}

.box1b {
position: absolute;
float: left;
margin-top: 34px;
width: 220px;
}

.box1bti {
background: #b9c375;
color: transparent;
float: left;
width: 100px;
text-align: center;
padding: 7px;
text-transform: uppercase;
font-family: oswald;
letter-spacing: 2px;
width: 0px;
height: 0px;
box-shadow: 1px 1px 0px #f5f5f5;
}

.box1btext {
font-size: 11px;
background: #fefefe;
color: #222;
position: absolute;
font-family: oswald;
text-transform: uppercase;
padding: 10px;
text-align: justify;
opacity: 0;
display: none;
margin-left: 5px;
margin-top: -30px;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
box-shadow:2px 2px 0px #e0f5dc;
}

.box1b:hover .box1btext {
opacity: 0.8;
transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
display: inline;
}

.box1b:hover {
overflow: visible;
width: 220px;
}



I gotowe! Mam nadzieję, że nie było żadnych problemów ani trudności z wstawieniem kodów. Jeżeli jednak z czymś sobie nie radzisz, albo wystąpił jakiś błąd - pytaj! Odpowiem
Jeżeli szukasz jakiś konkretnych kodów - pisz w komentarzu. Staram się zamieszczać kody, których możesz potrzebować, ale nie czytam Ci w myślach - podpowiadaj, zainspiruj!