Czasy podstawówki powracają z #PELE-MELE

29 czerwca 2015


Jakiś czas temu napisała do mnie Pani z wydawnictwa MOLE z propozycja współpracy. Mail bardzo mnie zaciekawił, ponieważ dotyczył on książki #PELE-MELE, która zapewnia nam kreatywne spędzenie czasu. Po pierwszych zdaniach Pani Eweliny pomyślałam sobie "Pewnie coś w rodzaju Zniszcz ten dziennik, To nie książka czy Książka pod tytułem". Stwierdziłam, że spróbuje. Najbardziej przekonało mnie zdanie "Książka, którą sama tworzysz i może być pamiątką na całe życie". Czytając kolejne zdania wyszło na jaw, że jest to książką, która ma formę złotych myśli, chciaż z tyłu książki możemy przeczytać, że trudno jest określić czym jest. Może być pamiętnikiem, dziennikiem, a nawet zaproszeniem do inspirującej przygody - dowiadujemy się tego odwracając książkę.


Chyba każdy z nas miał w podstawówce swój zeszyt, gdzie na pierwszej stronie zawsze pojawiały się pytania, a na kolejnych stronach nasi koledzy i koleżanki odpowiadali na nie, rysowali nam kotki, pieski, chowali jakieś skarby. Każdego roku był to nowy zeszyt, nowe pytania, nowe wpisy. Zabawa przy tym zawsze była najlepsza. Osobiście uwielbiałam odpowiadać na pytania (zresztą zostało mi to do tej pory). Książka (właściwie nazwałabym to pamiętnikiem) zawiera pytania - które swoją drogą ciekawie są sformułowane, po mimo, że niektóre z nich są tradycyjnymi pytaniami ze złotych myśli - miejsce na odpowiedzi oraz zadania i wyzwania dla osób, które odważą się wpisać do naszego #PELE-MELE, które możemy sami zatytułować. #PELE-MELE nie musi nosić takiej nazwy. Na okładce mamy miejsce na wpisanie swojego tytułu, może być to cytat, albo śmieszne zdanie. Otwierając nasze #PELE-MELE możemy przeczytać, że jest to nasza pamiątka oraz, że mamy dobrze się bawić przy jej tworzeniu.



Na pierwszy rzut oka widać, że ta książka różni się od Zniszcz ten dziennik, To nie książka oraz Książka pod tytułem. Zadanie, które są w niej umieszczone, nie mają nic wspólnego z kreatywną destrukcją. Wszystkie zadania są tak sformułowane aby nasze #PELE-MELE pozostało pamiątką z ładnymi wierszykami, sentencjami oraz zabawnymi rysunkami i wiele więcej. Jestem zachwycona tą książką, moja 74-letnia babcia również. Dzisiaj zaczynam swoją przygodę z #PELE-MELE razem ze znajomymi. Zobaczymy co oni na to, a ja już nie mogę się doczekać, aż nazbieram odpowiednią ilość materiału na napisanie recenzji.

Odwiedź #PELE-MELE na FACEBOOKU lub na ich STRONIE.
Czytaj dalej »

Jak zrobić nagłówek ze stronami

20 czerwca 2015


Każdy na blogu chce mieć coś niepowtarzalnego. Dotyczy to nagłówka oraz całego szablonu. Niektórzy kombinują jak połączyć ciekawą grafikę w nagłówku ze stronami, albo po prostu chcą posiadać jedną z tych fantazyjnych czcionek, które odróżnią strony od reszty, a nie potrafią dodać własnych fontów do bloga. W dzisiejszym wpisie przedstawię jak w prosty sposób połączyć nagłówek ze stronami. Można tą instrukcje użyć w innych celach, osobiście używałam tego sposobu właśnie na strony z nagłówkiem.

1. Będziemy potrzebowali białego obrazu, programu PhotoScape oraz jakąś czcionkę, którą możecie pobrać na dafont.com.

2. Otwieramy nasz obraz w programie PhotoScape i zaczynamy projektować nasz nagłówek. Grafika, nazwa oraz nazwy stron.







3. Wchodzimy na stronę Image-maps.com i klikamy "Browse for File".  Szukamy naszego nagłówka i klikamy na niego. Nagłówek wgrał się nam na serwer, a przycisk zmienił napis z "Browse for File" na "Start Mapping" - klikamy w to. Zostaliśmy przeniesieni na kolejną stronę, na której musimy kliknąć "click to continue". Zostaliśmy przeniesieni na jeszcze kolejną stronę gdzie zaczniemy podlinkowanie naszych wyrazów. Klikamy prawym przyciskiem myszki na obraz i wybieramy "Create Rec".







3a. Pojawi nam się kwadracik, który musimy przeciągnąć na dany wyraz i rozciągnąć na jego długość i szerokość. Następnie w linijce "Map URL" musimy wkleić link, do danej strony, na jaką ma nas przekierowywać po kliknięciu. Tę czynność, zaczynając od "Create Rec", musimy powtórzyć za każdym razem przy linkowaniu każdego nowego wyrazu. Na koniec klikamy "Save". Nasze wyrazy powinny być zaznaczone na czerwono.





3b. Klikamy prawym przyciskiem myszki na obrazie i wybieramy "Get Code". Pojawi nam się okienko, w którym wybieramy "HTML Code". Zjeżdżamy na sam dół i z ramki "HTML Image Map Code" kopiujemy kod.





3c. Przechodzimy do układ - dodaj gadżet HTML/JavaScript i wklejamy tam nasz skopiowany kod. Musimy pamiętać aby usunąć dotychczasowe strony z szablonu oraz usunąć nagłówek. Przeciągamy na miejsce stron nasz nagłówek ze stronami i zapisujemy rozmieszczenie.






Przetestuj:

Image Map

Instrukcję w formie filmiku na YouTube* znajdziesz TUTAJ

Czytaj dalej »

Jak zrobić graficzne "czytaj dalej"

17 czerwca 2015


Nie wiem czy ktoś z Was pamięta, ale już jakiś czas temu robiłam wpis o tym jak zrobić za pomocą kodu CSS aktywny button czytaj więcej. Dzisiaj wam pokażę jak w prosty sposób wstawić swoją własną grafikę, która będzie zastępować nam tradycyjne "czytaj dalej". Dla osób, które będą miały problem ze stworzeniem własnego graficznego buttonu "czytaj dalej" przygotowałam 12 grafik do pobrania, które znajdziecie na końcu wpisu.

1. Oczywiście żeby nasze "czytaj dalej" się pojawiło, musimy podczas pisania wpisu w dowolnym momencie kliknąć w zwijanie tekstu.


1a. Pamiętajmy o tym, aby nasz obrazek był wgrany na portal hostingujący np. tinypick, ponieważ będziemy potrzebowali adresu URL do naszego obrazka. (Pobrane buttony s

UWAGA! MUSIMY ZROBIĆ KOPIĘ ZAPASOWĄ SZABLONU, W RAZIE JAKBY COŚ NIE WYSZŁO

2. Szablon - edytuj kod HTML. Klikamy kursorem w dowolne miejsce w szablonie i wybieramy ctrl + f. Pojawi nam się okienko wyszukiwania, w które wpisujemy <b:if cond='data:post.hasJumpLink'> i klikamy enter,



3. Pod wyszukaną linijka będziemy mieli taki fragment kodu:

<div class='jump-link'>  <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  </div>  </b:if>


Usuwamy ten fragment kodu, a na jego miejsce wklejamy ten:

 <div class='jump-link'>  <a expr:href='data:post.url + &quot;#more&quot;'><p align='center'><img border='0' src='LINK DO OBRAZKA'/></p> </a>  </div>  </b:if>



Zapisujemy szablon. Efekt końcowy:


12 buttonów do pobrania:


Czytaj dalej »

Jak zrobić widget multi tabbed

15 czerwca 2015


Tak jak powiedziałam, cały ten tydzień będzie w instrukcjach. Ostatnio trochę je zaniedbałam. W dzisiejszym tutorialu przedstawię wam jak zrobić widget multi tabbet czyli widegt, który umożliwi nam jeszcze lepsze uporządkowanie kolumny bocznej na blogu. Prościej mówiąc są to tak jakby zakładki, które w jednym miejscu mogą zgromadzić trzy widgety. Taki widget wygląda tak:


Będziemy pracowali w HTML, więc ZRÓBCIE KOPIĘ ZAPASOWĄ SZABLONU - w razie jakby coś nie wyszło.

1. Szablon - edytuj kod HTML


2. Klikamy kursorem na dowolne miejsce i naciskamy ctrl + f. Pojawi nam się pole wyszukiwania, w które wpiszemy ]]></b:skin> i klikamy enter.


2a. Pojawiła nam się zaznaczona cześć kodu, którą szukaliśmy. Tuż nad nią wklejamy następujący kod:

.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}
.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0;
font-size:12px;
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#ffe6d2;
border-radius:7px 7px 0 0;
text-decoration:none;
color:#444;
}
.tabviewnav li a:hover {
color:#fff;
background:#444;
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#444;
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #fff;
background:#eee;
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}


Jest to nasz kod CSS, który odpowiada za wygląd naszego widgetu i możemy go dowolnie modyfikować.

Analiza kodu: 
.tabviewcont{
margin:15px 0; - położenie gadżetu w pionie, jeśli dodamy przed liczbę "- "gadżet pójdzie w górępadding:0;
clear:both;
}
.tabviewnav {
margin: 0 0 0 14px; - położenie tytułów gadżetów.
padding:3px 0;
font-size:12px; - wielkość czcionki tytułów gadżetów. font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px; - marginesy wewnętrznemargin-right:1px;
background:#ffe6d2; - tło tytułów gadżetów, które nie są zaznaczone. border-radius:7px 7px 0 0; - zaokrąglenia tytułów gadżetów. text-decoration:none;
color:#444;} - kolor tekstu tytułów gadżetu.tabviewnav li a:hover {
color:#fff; - kolor tekstu po najechaniu na tytuły gadżetów myszką background:#444; - kolor tła po najechaniu na tytuły gadżetów myszkątext-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#444;  - tło tytułu zaznaczonego gadżetu color:#fff;} - kolor tytułu zaznaczonego gadżetu .tabviewcont .tabviewtab {
padding:5px; - marginesy wewnętrzneborder:1px solid #fff; - grubość, rodzaj i kolor ramki background:#eee;} - tło pola, gdzie jest gadżet .tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

3. Teraz wyszukujemy </head>  i nad nim wklejamy następujący kod:


<script type='text/javascript'>
// Tabview for grouping gadgets
//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>



4. Teraz w kodzie wyszukujemy <div class='column-right-inner'> i nad tym wklejamy następujący kod:



<div class='tabview'>
<b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab3' maxwidgets='1'/>
</div>

Zapisujemy szablon.

5. Przechodzimy teraz do układ. Powinno nam się pojawić coś takiego jak na poniższym zdjęciu w ramce:



Jeśli tego nie ma, odśwież stronę. Do Tab1, Tab2, Tab3, dopasowujemy po jednym gadżecie.



Zapisujemy rozmieszczenie. Efekt końcowy:


Czytaj dalej »

Gadżety na blogu - czemu mniej znaczy lepiej?

3 czerwca 2015


Każdy z nas ma na blogu gadżety mniej lub bardziej przydatne. Jedne wstawiamy po to aby czytelnikom było lepiej korzystać z naszego bloga, a drugie wstawiamy nie wiadomo po co, ale zamiar jest taki, aby dodać naszej stronie ciekawych "atrakcji". Nie jestem zwolenniczką blogów, na których jest "tłoczno". Nie lubię jak z miejsca atakują mnie mało przydatne gadżety np. wyskakujące kotki lub muzyka, która zaczyna grać. Nie lubię również czekać na to aż strona łaskawie mi się załaduje. W tym wpisie nie będzie o estetyce bloga i o tym jak poszczególne gadżety psują jego wygląd. Dzisiaj chce Wam przedstawić jedną, pewnie dla większości oczywistą rzecz. Mianowicie - im więcej gadżetów tym wolniej ładuje nam się strona. Takie tzw. pierdółki jak kolorowe kursory, ozdobne migające kotki, muzyka lub inne gadżety jak np. prognoza pogody czy zegar, spowalniają ładowanie strony. Nie tylko takie gadżety, bo oczywiście każdy gadżet zajmuje jakąś tam przestrzeń, ale jeśli naładujemy tych gadżetów nie wiadomo ile, no to niestety musimy liczyć się z tym, że nasza strona będzie się ładować wolniej od pozostałych. Ładowanie się danej strony ma również duże znaczenie jeśli chodzi o jej odbiór. Jest to bardzo prosta matematyka

dużo nie potrzebnych rzeczy na blogu = długie ładowanie strony = mniej czytelników = małe szanse na zdobycie nowego czytelnika

Ja wiem, że pewnie większość z Was sobie myśli "Ja mam szybkie łącze internetowe, każda strona mi się załaduje", świetnie, że takowe łącze posiadasz, jednak trzeba brać pod uwagę to, że nie każdy ma dostęp do szybkiego łącza internetowego. Trzeba brać również pod uwagę osoby, które mieszkają na wsiach, a uwierzcie mi, że nie do każdej wsi da się podłączyć internet po kablu z szybkim łączem. Wtedy zostaje internet mobilny, który jest wolniejszy. Jednak nie zawsze szybkie łącze Was uratuje. Wszystkie dodatki na bloga są obciążeniem dla strony. Nie tylko ty korzystasz w jednym momencie z danej strony. Załóżmy że jedna strona na godzinę może mieć np. 140 użytkowników. Dodaj sobie do tego te wszystkie gadżety i obciążenie strony gotowe. Wolniejsze ładowanie, wyskakujące błędy. takie są tego efekty. Możesz to zmienić. Po prostu siądź, spójrz na swojego bloga i zobacz co należy usunąć, co nie jest potrzebne. Szczerze wątpię, że potrzebny jest ci gadżet prognoza pogody, zegar lub odliczanie. Kolorowe kursory, wyskakujące kotki, spadające płatki śniegu w lecie, również nie są do niczego potrzebne. Już pomijam fakt, że dla mnie taki blog wygląda strasznie tandetnie. Jeśli chcesz wstawić coś na bloga, jakiś gadżet, pomyśl czy naprawdę jest ci on potrzebny czy ma być taką zapchaj dziurą. Takie zapychacze nie są potrzebne. Kolumna boczna prezentuje się dobrze kiedy są w niej tylko najpotrzebniejsze rzeczy, a cały blog aby się obronić i zdobyć nowych czytelników nie potrzebuje tych wszystkich gadżetów, tylko ciekawej treści i przejrzystego wyglądu. Pamiętaj, że większość ludzi to wzrokowcy. Blog to nasza wizytówka. Jeśli nasza strona będzie prezentować się niechlujnie, to wiedz, że prawdopodobnie inni ocenią cię tak samo, nie patrząc nawet na treść jaką masz im do przekazania. Dla innych to będzie sygnał, że nie mają czego szukać na danym blogu, a autor najzwyczajniej w świecie nie przejmuje się swoimi czytelnikami. Bądźmy szczerzy, żaden autor nie chce aby jego czytelnik "cierpiał". Podejrzewam, że sam nie chcesz oglądać blogów, które są zbiorowiskiem 15 różnych gadżetów, które są niedopasowane i spowalniają ładowanie strony. Spójrz na swojego bloga nie okiem autora, a okiem czytelnika, które nie raz jest bardzo krytyczne. Nie musisz się dostosowywać do każdej osoby z osobna, bo każdy ma inny gust, każdy lubi inne kolory, ale spójrz na te wszystkie widniejące gadżety. Usuń to co nie jest potrzebne, a zobaczysz twoja strona będzie ci za to wdzięczna.

Czytaj dalej »

Jak zmienić wygląd gadżetu szukaj

1 czerwca 2015


Blogger ma wśród swoich gadżetów gadżet wyszukiwania, który po dodaniu nie wygląda zbyt ciekawie, ale za to jest bardzo przydatny, bo pozwala na przeszukanie danego bloga wpisując hasła. W dzisiejszym wpisie chce Wam pokazać jak zrobić aby nasz gadżet nie tylko był przydatny, ale również ciekawie wyglądał. Dla przypomnienia nasz gadżet po dodaniu wygląda tak:


Aby zmienić jego wygląd wystarczy dodać do arkusza CSS następujący kod:

#CustomSearch1_form {
margin: 10px -2px -25px -5px;
}
input.gsc-search-button {
background:#000;
border-width: 1px;
letter-spacing:1px;
border-radius: 3px;
border-color: #000;
border-style: solid;
color: #444;
margin: 0 0 0 0 !important;
width: 75px !important;
font-family: 15px Verdana;
height: 35px !important;
}
input.gsc-search-button:hover {
background: #eee;
border-color: #eee;
letter-spacing: 2px;
color: #000;
cursor: pointer;
}
input.gsc-input {
height: 33px !important;
padding: 0 !important;
max-width: 500px !important;
}
td.gsc-search-button {
width: 25% !important;
}
table.gsc-search-box td.gsc-input {
padding: 0px !important;
width: 75% !important;
}
table.gsc-search-box {
margin: 0 0 10px 0 !important;
}

Analiza naszego kodu:

Ta część kodu to marginesy naszego gadżetu. Pierwszy margines to margines górny, drugi to margines prawy, trzeci to margines dolny, a czwarty to margines lewy.
#CustomSearch1_form {
margin: 10px -2px -25px -5px;
}
Kolejna część kodu odpowiada za nasz button, czyli przycisk wyszukaj przed najechaniem na niego myszką.
Tło, grubość ramki, odstęp między literami, zaokrąglone narożniki, kolor ramki, styl ramki, kolor tekstu, marginesy, szerokość, wielkość czcionki i rodzaj, wysokość
input.gsc-search-button {
background:#000;
border-width: 1px;
letter-spacing:1px;
border-radius: 3px;
border-color: #000;
border-style: solid;
color: #444;
margin: 0 0 0 0 !important;
width: 75px !important;
font: 15px Verdana;
height: 35px !important;


Następna część kodu, odpowiada za button po najechaniu na niego kursorem.
Tło, kolor ramki, odstęp między literami, kolor tekstu
input.gsc-search-button:hover {
background: #eee;
border-color: #eee;
letter-spacing: 2px;
color: #000;
cursor: pointer;
}

Kolejna część kodu dotyczy pola wyszukiwania
Wysokość 
input.gsc-input {
height: 33px !important;
padding: 0 !important;
max-width: 500px !important;
}

I to tyle jeśli chodzi o jakiekolwiek zmiany. Efekt końcowy widnieje u mnie na blogu w kolumnie bocznej. Dzisiaj krótka instrukcja, ale na środę szykuję już większą.

Czytaj dalej »