Mrs.B: września 2018

poniedziałek, 24 września 2018

JAK UKRYĆ ETYKIETY? NIC TRUDNEGO!

Jak ukryć etykiety pod postami

i po wyszukaniu konkretnych postów

oznaczonych tymi etykietami?

Nic trudnego ;)

Właśnie zapytała mnie o to kumpela,

więc i Wam pokażę :D

Jak usunąć etykiety spod postów?

Wchodzicie w motyw, w zaawansowane,

w dodaj arkusz CSS

i wklejacie tam pierwszy kod z ramki....

Jeśli chcecie ukryć etykiety po wyszukaniu

identycznych postów na Waszych blogach

w dodaj arkusz CSS wklejacie kod z poniższej ramki :)

Zapisujecie i etykiety stają się niewidoczne.

Ale nie martwcie się. Internet dalej wyszukuje

wasze posty i bloga po tych etykietach

między innymi. Po prostu ich tylko nie widać ;)

Efekt, musicie wierzyć na słowo ;)

Jak poniżej :D

ETYKIETY - JESZCZE JEDNA ZMIANA WYGLĄDU

Czy taki wygląd etykiet Wam się podoba?

Mam nadzieję, że tak :)

Oczywiście kolory w kodziku możecie pozmieniać

tak, by ten wzór kolorami pasował do waszej

strony internetowej :)

A jak to zainstalować?

Nic trudnego ;)

Wchodzicie w motyw, w zaawansowane,

dodaj arkusz CSS

i tam wklejacie kodzik z ramki.

Klikacie enter i zapisujecie szablon.

I gotowe :)

.cloud-label-widget-content {
text-align: left
} 
.cloud-label-widget-content .label-count {
background: #2b2b2b;
color: #fff!important;
margin-left: -3px;
padding-right: 3px;
white-space: nowrap;
border-radius: 2px;
padding: 1px 4px !important;
font-size: 12px !important;
margin-right: 5px;
}
.cloud-label-widget-content .label-size {
background: #fbb7ca;
display: block;
float: left;
font-size: 11px;
margin: 0 5px 5px 0
}
.cloud-label-widget-content .label-size a,
.cloud-label-widget-content .label-size span {
height: 18px !important;
color: #2b2b2b;
display: inline-block;
font-size: 12px;
font-weight: 500!important;
padding: 6px 8px
}
.cloud-label-widget-content .label-size a {
padding: 6px 10px
}
.cloud-label-widget-content .label-size a:hover {
color: #000!important
}
.cloud-label-widget-content .label-size,
.cloud-label-widget-content .label-count {
height: 30px!important;
line-height: 19px!important;
border-radius: 2px
}
.cloud-label-widget-content .label-size:hover {
background: #2b2b2b;
color: #fff!important
}
.cloud-label-widget-content .label-size:hover a {
color: #fff!important
}
.cloud-label-widget-content .label-size:hover span {
background: #fbb7ca;
color: #2b2b2b!important;
cursor: pointer
}
.cloud-label-widget-content .label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
font-size: 100%;
opacity: 10
}

Zapraszam Was po nowe

podpowiedzi już wkrótce :)

niedziela, 23 września 2018

PERSONALIZOWANA WYSZUKIWARKA BLOGOWA

Zauważyliście moją wyszukiwarkę blogową? ;)

Nawet takie coś można wyczarować ;)

I działa! Sprawdźcie!

Stworzyłam i dla Was takie trzy.

Powstaną jeszcze inne na bank :)

Jak zainstalować wyszukiwarkę?
Nic trudnego!
Wchodzicie w układ bloga
i dodajecie gadżet HTML/JavaScript.
Tam wklejacie pierwszy, drugi lub trzeci styl wyszukiwarki.
Zapisujecie i gotowe :)

Styl 1

Styl 2

Styl 3

Zapraszam wkrótce po kolejne wzory ;)

ARCHIWUM BLOGA - ZMIANA WYGLĄDU 1

Znudziło się Wam archiwum bloga ;)

Mi ostatnio też, ale można je zmienić

np. by wyglądało tak jak powyżej.

A więc zatem zaczynamy...

Wchodzicie w edycje bloga i wyszukujecie <head>

Tuż nad nim wklejacie kodzik z poniższej ramki.

Zapisujecie szablon...

Następnie przechodzicie w motyw,

w zaawansowane i w dodaj arkusz CSS

wklejacie kodzik z poniższej ramki...

Oczywiście możecie zmienić kolory

na takie, by pasowały do waszego bloga...

I gotowe, zapisujecie szablon i cieszycie się

nowym wyglądem Waszego archiwum bloga :)

/* Archive Month Header */
#ArchiveList ul ul li  a.post-count-link{
    font-size: inherit;
    width: auto;
    margin: 0 5px 0;
    padding: 8px 25px;
    line-height: 1;
    background: transparent;
    text-transform: uppercase;
}
 
#ArchiveList .zippy{
    visibility: hidden;
}
 
#ArchiveList ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}
 
#ArchiveList ul ul li a.toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}
 
#ArchiveList .toggle {
    position: relative;
}
 
#ArchiveList ul ul .zippy{
    color: white;
    visibility: visible;
    text-shadow: none;
}
 
#ArchiveList ul ul .zippy:before {
    content: '\f105';
    font-family: FontAwesome;
    position: absolute;
    top: 3px;
    left: 12px;
    padding: 4px;
    line-height: 1;
    font-size: 12px;
    color: #000000;
}
 
#ArchiveList ul ul .toggle-open:before {
    content: '\f107';
    position: absolute;
    top: 3px;
    left: 10px;
}
 
#ArchiveList ul li{
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;
}
 
#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}
 
#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 30px !important;
    text-transform: none;
}
 
#ArchiveList ul {
    margin: 0 0 2px !important;
}
 
span.post-count {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #000000;
}

sobota, 22 września 2018

JAK DODAĆ GRAFIKĘ NAD TYTUŁEM BLOGA - KWITNĄCE GRAFIKI

Zastanawialiście się jak wstawić grafikę nad tytułem bloga?

Jak w przykładzie powyżej?

Bardzo prosto! Już Wam piszę! :)

Dziś będzie dość kwitnąco, aczkolwiek to już

jutro pierwszy dzień jesieni ;)

Przechodzimy do motyw, dostosuj, zaawansowane, tła, przezroczyste...

Następnie kod z poniższej ramki wklejamy w dodaj arkusz CSS

i zapisujemy szablon :)

Przygotowałam dla Was kilka kwitnących grafik.

Mam nadzieję, że się Wam spodobają

i ich użyjecie ;)

Niedługo dodam inne. Mam w zapasie kropeczki, gwiazdki itp.

Grafika 1

Grafika 2

Grafika 3

JEŻDŻĄCE TRUCKS SOCIAL MEDIA

Nie byłabym sobą gdybym Wam tego nie pokazała ;)

Jeżdżące po stronie Waszego bloga Trucks Social Media.

Oczywiście, że wchodzicie w układ waszego bloga,

dodajecie gadżet HTML/JavaScript

i tam wklejacie poniższy kod z ramki

i to wszystko. Samochodziki sobie jeżdżą po stronie ;)

No to miłej jazdy ;)

PS. Nie zapomnijcie w kodziku dodać własne URL :)

A tak z ciekawości dodałam do kodziku
inne grafiki. Jak widać można
popracować nad kodem i dodać coś własnego ;)
Ja dodałam BMW <3

I wyszło też fajnie ;)

A może Wy macie jakieś ciekawe pomysły?
Co byście chcieli? Jakie grafiki?

piątek, 21 września 2018

HORYZONTALNA LINIA TYTUŁU BLOGA (HEADING)

Dziś jeszcze taka mała ciekawostka.

Horyzontalna linia tytułowa naszego bloga :D

Może komuś się spodoba ;)

Oczywiście, że wchodzicie w motyw, w zaawansowane, dodaj arkusz CSS

i wklejacie kod z powyższej rameczki. Klikacie enter i zapisujecie szablon.

I cieszycie się z fajnego, a zarazem bardzo prostego efektu :D

STYLE TYTUŁÓW GADŻETÓW 1

Witajcie kochani tego jesiennego już prawie poranka ;)

Dziś chciałabym Wam podpowiedzieć jak zmienić

na różne style nasze tytuły gadżetów

na blogu.

Nic trudnego! :D

Wchodzicie w Motyw, w zaawansowane i w dodaj arkusz CSS

i tam wklejacie, któryś ze stylów. Klikacie enter, zapisujecie szablon

i gotowe ;)

Styl 1

Styl 2

Styl 3

Styl 4

Styl 5

Styl 6

Styl 7

Styl 8

Styl 9

Styl 10

Oczywiście, że możecie zmienić kolory w kodzikach.

Nic nie stoi na przeszkodzie ;)

Zapraszam Was za jakiś czas. Pokażę Wam coś nowego :D

tAK JAK NA ZDJĘCIU RAMKA WOKÓŁ GADZETU

.sidebar .widget { border: 3px solid #000; } .sidebar .widget-content { padding: 10px; } .sidebar .widget h2 { text-align: center; z-index: 8; top: -10px; background: #FFF; left: 50%; transform: translate(-50%, 0); display: inline-block; } .sidebar .widget h2:after,.sidebar .widget h2:before { content: "\00a0\00a0"; }

WYJĄTKOWE POPULARNE POSTY CD

Zastanawialiście się jak stworzyć

wyjątkowe popularne posty?

Takie jak te u dołu?

Z ruszającymi się fotkami

przy najechaniu na nie?

Już Wam pokazuje :)

Pamiętajcie jednak, że te popularne posty

pokazują tylko kawałek fotki...

No taka już ich zaleta ;)

Wchodzicie teraz kochani w edycję szablonu...

Wyszukujecie ]]></b:skin> i tuż przed nim

wklejacie kodzik z poniższej ramki...

Następnie wyszukujemy <head> i nad nim wklejacie poniższy kod z ramki...

Następnie wyszukujemy </body> i nad nim wklejamy kod z poniższej ramki i gotowe :)

Zapisujecie szablon i cieszycie się nową wersją popularnych postów :D

ZYGZAKOWATE RUCHOME MENU NAD NAGŁÓWKIEM BLOGA

Jak wykonać takie zygzakowate menu?

Już Wam kochani piszę ;)

Najpierw w edycji szablonu, w kodziku szukacie tej części kodu:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Zmieniacie ją tak jak ja poniżej:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Zmieniacie ją tak jak ja poniżej: Zapisujecie szablon i przechodzicie do układu bloga.

Tam pojawi się Wam nad tytułem bloga dodatkowe miejsce...

Zostawiamy ten dodaj gadżet na później...

Przechodzimy teraz do Motywu bloga, następnie w zaawansowane,

a następnie w dodaj arkusz CSS i tam dodajemy kodzik z poniższej ramki.

Klikamy enter i zapisujemy szablon.

Następnie wchodzimy jeszcze raz w edytuj szablon i przed

]]></b:skin> wklejamy kodzik z poniższej ramki,

możemy zmienić kolory np. #bb577b

i zapisujemy nasz szablon...

/* Main level */
.menu {   
 margin: 50px auto;
 width: 800px;
 width: fit-content; 
}

.menu > li {
 background: #f3a4b2;
 float: left;
 position: relative;
 transform: skewX(25deg);
color: #fff;
}

.menu a {
 display: block;
 color: #fff;
 text-transform: uppercase;
 text-decoration: none;
 font-family: Arial, Helvetica;
 font-size: 14px;

}

.menu li:hover {
 background: #fedfdc;
}

.menu > li > a {
 transform: skewX(-25deg);
 padding: 1em 2em;
}

/* Dropdown level*/
.submenu {
 position: absolute;
 width: 200px;
 left: 50%; margin-left: -100px;
 transform: skewX(-25deg);
 transform-origin: left top;
}

.submenu li {
 background-color: #bc587a;
 position: relative;
 overflow: hidden;  
}

.submenu > li > a {
 padding: 1em 2em;   
}

.submenu > li::after {
 content: '';
 position: absolute;
 top: -125%;
 height: 100%;
 width: 100%;   
 box-shadow: 0 0 50px rgba(0, 0, 0, .9);   
}

/* Odd stuff */
.submenu > li:nth-child(odd){
 transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
 transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
 right: -50%;
 transform: skewX(-25deg) rotate(3deg);
}

/* Even stuff */
.submenu > li:nth-child(even){
 transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
 transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
 left: -50%;
 transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
 opacity: 0;
 visibility: hidden;   
}

.submenu li {
 transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
 opacity: 1;
 visibility: visible;
}

.menu > li:hover .submenu li:nth-child(even){
 transform: skewX(25deg) translateX(15px);   
}

.menu > li:hover .submenu li:nth-child(odd){
 transform: skewX(-25deg) translateX(-15px);   
}

Następnie przechodzimy do układu naszego bloga i dodajemy

nowy gadżet HTML/JavaScript w miejscu zaraz nad nagłówkiem

(te miejsce, które powstało wcześniej) do naszego bloga.

A w niego wklejamy kod z poniższej ramki...

Zmieniacie tam linki i nazwy waszych stron...

z...

<li><a href="adres strony">nazwa strony</a></li>

na np...
(użyjcie własnych url i nazw)

<li><a href="https://b-mrs.blogspot.com/p/kontakt.html">Kontakt</a></li> itd

nagłówkiem Zapisujecie gadżet i cieszycie się wyjątkowym menu na Waszym blogu :D

WYGLĄD ETYKIET 1

Dziś kochani pokażę Wam jak w prosty sposób zmienić wygląd etykiet.

Najpierw w kodziku wyszukujemy </head>

Tuż nad nim wklejamy kod z poniższej ramki...

Następnie wchodzicie w Motyw, Dostosuj, Zaawansowane i w Dodaj arkusz CSS

wklejacie kod z poniższej ramki zmieniając kolory ##ed98a7 i #9f9f9f na Wasze.

No i gotowe. Oczywiście nie zapomnijcie wybrać kilku etykiet i etykiety jako listę w Układzie :)

/* STYLE 4 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */

.Label ul li {
    display: inline-block;
    width: calc(50% - 5px);
    box-sizing: border-box;
    float: left;
}
.Label ul li:nth-child(odd) {
    margin-right: 10px;
}
.Label ul li a:before {
   display: block;
   text-align: center;
   margin-bottom: 8px;
   font-family:'FontAwesome';
   font-size: 18px;   /* Icon size */
}
.Label ul li a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: center;    /* center aligns text in sidebar */
    margin: 5px 0;    /* White space between links */
    padding: 20px 10px;    /* Padding for colored background */
 font-family: "Open Sans";     /* Link Font */
 text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
 font-style: normal;    /* Font Style. Options are normal and italics. */
 font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
 letter-spacing: 1px;    /* Space between letters */
 font-size: 12px;   /* Font Size. */
 color: #ffffff;    /* Link Color */
    background-color: #ed98a7;    /* Background Color */
}
.Label ul li a:hover {
 color: #ffffff;    /* Link Hover Color */
    background-color: #9f9f9f;    /* Background Hover Color */
}

/* ICON CODES */

/* First Icon */
.Label ul li:nth-child(6n+1) a:before {
 content:"\f1fc";
}

/* Second Icon */
.Label ul li:nth-child(6n+2) a:before {
 content:"\f0b1";
}

/* Third Icon */
.Label ul li:nth-child(6n+3) a:before {
 content:"\f03e";
}

/* Fourth Icon */
.Label ul li:nth-child(6n+4) a:before {
 content:"\f040";
}

/* Fifth Icon */
.Label ul li:nth-child(6n+5) a:before {
 content:"\f1ea ";
}

/* Sixth Icon */
.Label ul li:nth-child(6n+6) a:before {
 content:"\f030";
}

JAK ZMIENIĆ POPULARNE POSTY - CD

Dziś pokażę Wam kolejną możliwość zmiany wyglądu popularnych postów.

Wchodzicie w Motyw, następnie w Dostosuj, następnie w Zaawansowane i w Dodaj arkusz CSS.

Tam wklejacie kodzik z poniższej ramki. Klikacie enter i zapisujecie.

Możecie zmienić również kolory z #9e9e9e i z #ef98a7 na swoje własne.

I oczywiście :) Zapraszam was wkrótce po kolejne ciekawostki związane z naszymi blogami :)

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ef98a7;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#9e9e9e;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"} 
#PopularPosts1 ul li:first-child + li + li{background:#ef98a7;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#9e9e9e;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#ef98a7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#9e9e9e;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#ef98a7;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#9e9e9e;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#ef98a7;width:66%} 
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:17px;background:transparent;padding:0;width:73px;height:73px;} 
#PopularPosts1 ul li a{font-size:15px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#000;text-decoration:none; text-align:center} 
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
} 
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg);
-webkit-transform: scale(1.2) rotate(-711deg);
-o-transform: scale(1.2) rotate(-711deg);
-ms-transform: scale(1.2) rotate(-711deg);
transform: scale(1.2) rotate(-711deg);
}

czwartek, 20 września 2018

KAFELKOWE BLOGI - JAK WYKONAĆ

Dziś nowe kafelki :D
Jak je wykonać?
Już piszę...

Przejdźcie do edycji szablonu...

Wyszukajcie w nim </head>

Nad nim wklejcie kod z poniższej ramki...

Następnie w kodzie wyszukajcie <data:post.body/>

Będą trzy takie kody. Drugi i trzeci zastąpcie kodem z poniższej ramki...

Następnie w kodzie wyszukajcie </head>

i nad nim wklejcie kod z poniższej ramki...
Styl 1, 2 lub 3

Zapisujecie szablon i cieszycie się kafelkami.
Możecie jeszcze wejść w Motyw, Dostosuj i tam zmienić szerokość
waszego bloga. Można też w kodzie zmienić kolory szablonu
jeśli oczywiście potraficie.
Piszcie śmiało. Jakby co, to oczywiście pomogę ;)

Styl 1

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% 'Open Sans Condensed',sans-serif;text-transform:uppercase;color:#111;padding:0}h3.post-title{text-align:center;height:22px;position:absolute;bottom:23%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZvCsX6K86jwE9FJf_WOo4Gq2GvGVFf8EZCicPFi1KwFAw2HtwwUtg1Jb8Mb5CVO9LCY1ndamMN4DGG8JCJCruzIWQ2JGRNKBnz1RchMqwGcwyOYE0HewKphL0d2ae4XdCeCSlQQfVp0_/s1600/blueprint.png);font:100% 'Open Sans Condensed',sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% 'Pacifico',cursive;}a.comment-bubble:before{content:"Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaddmBVRpoZh_SQCDB74JLqbpFArQQnBSMEnqvTvr8krnz-Xj4_XdzuBpEGl5WVIBbaDvRwu7UU__Tvc6p3Cumqm1lNAjG3irBPBakI-FxocISVQCwY-zSz59Uf6nfua_RjNYjbkMh5Pgr/s1600/heart-active.png);}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Styl 2

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type="text/css">
#blog-pager{clear:both}.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% 'Open Sans Condensed',sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% 'Open Sans Condensed',sans-serif;overflow:hidden;padding:45px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% 'Pacifico',cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:"Comments: "}.post-header,.post-footer{display:none}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Styl 3

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type="text/css">
#blog-pager{clear:both;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% 'Open Sans Condensed',sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!important}.posts-thumb{width:100%;height:auto;overflow:hidden;clear:both}.post-body{overflow:hidden;position:relative}.post-body a{text-decoration:none}.post-body img{display:block;width:auto;height:auto;max-width:100%;max-height:none;min-width:100%;min-height:auto;margin:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% 'Open Sans Condensed',sans-serif;padding:84px 10% 0;left:0;position:absolute;text-align:center;vertical-align:bottom;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;z-index:10;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1}.post-footer{display:none}a.comment-bubble{color:#fff;text-decoration:none;font:120% 'Open Sans Condensed',sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaddmBVRpoZh_SQCDB74JLqbpFArQQnBSMEnqvTvr8krnz-Xj4_XdzuBpEGl5WVIBbaDvRwu7UU__Tvc6p3Cumqm1lNAjG3irBPBakI-FxocISVQCwY-zSz59Uf6nfua_RjNYjbkMh5Pgr/s1600/heart-active.png);}.main-inner .column-center-inner{-moz-column-count:3;-moz-column-gap:1px;-webkit-column-count:3;-webkit-column-gap:1px;column-count:3;column-gap:1px;width:100%;padding:0!important}
</style></b:if></b:if>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

SIMPLE GRID DESIGN - KAFELKOWY BLOGGER 1

Czy lubicie kafelkowe blogi?

Ja ubóstwiam! :)

A jak wykonać taki powyżej?

Już Wam podpowiadam ;)

Nic trudnego!

Przejdźcie do edycji szablonu...

Wyszukajcie w nim </head>

Nad nim wklejcie kod z poniższej ramki...

Następnie w kodzie wyszukajcie <data:post.body/>

Będą trzy takie kody. Drugi i trzeci zastąpcie kodem z poniższej ramki...

Następnie w kodzie wyszukajcie </head>

i nad nim wklejcie kod z poniższej ramki...

Zapiszcie szablon i gotowe! Są kafelki simple ;)

Na koniec możecie wejść w motyw i poszerzyć trochę wasz blog...

W najbliższym czasie zdradzę Wam jak zrobić inne formy moich ulubionych kafelków ;)

Zapraszam! :D

TĘCZOWY FORMULARZ KONTAKTOWY 1

Dziś jeszcze jeden post z serii HelpBlogger.

Tym razem jak zrobić formularz kontaktowy

na stronie statycznej.

Wchodzicie w układ bloga, następnie dodajecie do kolumny bocznej

gadżet formularza kontaktowego.

Następnie wchodzicie w motyw, w zaawansowane

i tam w arkusz CSS wklejacie poniższy kod z ramki poniżej...

Klikacie enter, zapisujecie i przechodzicie do stron w blogu,

gdzie musicie utworzyć stronę z tytułem kontakt.

Gadżet z układu powinien zniknąć.

Na utworzonej stronie pt. kontakt wchodzicie w HTML,
zaznaczacie, to co ja na granatowo

i wklejacie poniższy kod z poniższej ramki...

Zapisujecie i cieszycie się tęczowym formularzem kontaktowym :)

Oczywiście kolory możecie pozmieniać według waszego uznania.

Nic nie stoi na przeszkodzie ;)

Już wkrótce, kolejne wzory formularzy kontaktowych.

Zapraszam Was cieplutko :D

Strony

poniedziałek, 24 września 2018

niedziela, 23 września 2018

sobota, 22 września 2018

piątek, 21 września 2018

czwartek, 20 września 2018