Blogkészítési Tipeek XVIII. - Színes kereső modul
A bloggernek mindössze egyetlen kereső modulja van, annak is egyetlen külalakja. Egynél nem is nagyon kell több kereső egy blogra, de azért jó ha az az egy kedvünk szerint alakítható.
Ebben a cikkben megmutatom, hogyan csinálj profi kereső modult a blogodra, ha a legördülő menüdben még nincsen, vagy másfajta dropdown menüt használsz.
Először is, nézd végig a képeket a cikkben és válaszd ki azt a kereső dizájnt ami a legjobban passzol a blogodhoz.
Színek:
piros: a teljes kereső szélessége, mindig legyen nagyobb mint az alaphelyzetű, vagy az éppen használt kereső szélessége
kék: A keresőbe beírt szöveg színe.
lila: Az alaphelyzetű kereső szélessége pixelben.
Világos kék: Az éppen használatban lévő kereső mező háttere.
Citromsárga: Az éppen használatban lévő kereső mező szélessége pixelben megadva.
Színek:
Piros: A kereső modul szélessége.
Narancssárga: A kereső modul magassága.
Zöld: A beírt szöveg betűmérete.
Kék: A beírt szöveg színe.
Lila: A beírt szöveg helyfoglalása a kereső modulban százalékos arányban megadva.
Ha kiválasztottad amelyik tetszik, menj a blogodra, azon belül is az "Elrendezés" menüpontra és kattints a "Modul hozzáadása" szövegre. (A modult később áthelyezheted máshova, így teljesen mindegy, hogy melyikre kattintasz.)
Válaszd a HTML/JavaScript modult és másold be a kiválasztott kódot az üres felületre. Címet nem kell neki adnod. Állítsd be amire szükséged van!
Mentsd el és nézd meg a blogod! Gratulálok! Kész van az egyedi kereső modulod!
Ebben a cikkben megmutatom, hogyan csinálj profi kereső modult a blogodra, ha a legördülő menüdben még nincsen, vagy másfajta dropdown menüt használsz.
Először is, nézd végig a képeket a cikkben és válaszd ki azt a kereső dizájnt ami a legjobban passzol a blogodhoz.
<style>
#searchbox {
width: 270px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: url(http://mylifefactory.hu/images/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #000000;
width: 200px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #dddddd;
border: 2px solid #f7f7f7;
width: 220px;
padding-left: 10px;
}
#button-submit{
background: url(http://mylifefactory.hu/images/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Keresés indítása..." />
<input id="button-submit" type="submit" value=" "/>
</form>
Színek:
piros: a teljes kereső szélessége, mindig legyen nagyobb mint az alaphelyzetű, vagy az éppen használt kereső szélessége
kék: A keresőbe beírt szöveg színe.
lila: Az alaphelyzetű kereső szélessége pixelben.
Világos kék: Az éppen használatban lévő kereső mező háttere.
Citromsárga: Az éppen használatban lévő kereső mező szélessége pixelben megadva.
<style>
#searchbox {
background: url(http://mylifefactory.hu/images/searchbar.png) no-repeat;
width: 208px;
height: 29px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(http://mylifefactory.hu/images/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(http://mylifefactory.hu/images/magnifierhover.png) no-repeat;
}
#button-submit:active {
background: url(http://mylifefactory.hu/images/magnifierhover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="keresés..." />
<input id="button-submit" type="submit" value="" />
</form>
Színek:
Piros: A kereső modul szélessége.
Narancssárga: A kereső modul magassága.
Zöld: A beírt szöveg betűmérete.
Kék: A beírt szöveg színe.
Lila: A beírt szöveg helyfoglalása a kereső modulban százalékos arányban megadva.
Ha kiválasztottad amelyik tetszik, menj a blogodra, azon belül is az "Elrendezés" menüpontra és kattints a "Modul hozzáadása" szövegre. (A modult később áthelyezheted máshova, így teljesen mindegy, hogy melyikre kattintasz.)
Válaszd a HTML/JavaScript modult és másold be a kiválasztott kódot az üres felületre. Címet nem kell neki adnod. Állítsd be amire szükséged van!
Mentsd el és nézd meg a blogod! Gratulálok! Kész van az egyedi kereső modulod!
Megjegyzések
Megjegyzés küldése