Kattintásra lenyíló ablak
Mostanában egyre gyakrabban előfordul, hogy egyre több dolgot szeretnénk elmondani vagy megmutatni egyetlen cikkben vagy oldalon. Ez úgy tűnik egyre inkább bele ivódik a blogolásba és a cikk írásba. Olvastam olyan tanulmányokat, eBook-okat amik kifejezetten hasznosnak találják és ajánlák hogy hosszabb cikkeket írjunk. Ezt én is csak megerősíteni tudom, hiszen a tartalom minősége és mennyisége hatással van a blog keresőben elfoglalt helyére.
Ugyanakkor a tartalom mennyisége nem feltétlenül kell, hogy kihasson a cikk fizikai hosszára. A statisztikák szerint a mobilozók vannak többségben a blogom olvasói között. Egy tőlem független felmérésben pedig azt olvastam, hogy ezek a mobilozók nem szeretnek perceken keresztül görgetni. Szívesebben használják azokat a modulokat amik rejtett tartalmat fednek fel. Persze nem reklámokra gondolok hanem videókra.
Ebben a cikkben megmutatom, hogyan tudsz egy ilyen modult készíteni amit beilleszthetsz a cikkjeidbe vagy az oldalsó modulodba.
Először is mutatok neked egy példát, hogy miként fog kinézni az egész ha kész lesz. Íme:
Ezt a modult több elemes verzióban IDE kattintva nézheted meg.
Most pedig lássuk lépésről lépésre, hogy miként tudsz létrehozni egy ilyen modult.
1. Amikor létrehozol egy cikket, oldalt vagy modult a blogodon a szerkesztő nézetben válts át HTML nézetre a bal felső sarokban. Javaslom, hogy azután tedd ezt meg miután végeztél a szöveg megírásával.
2. A megfelelő helyhez illeszd be az alábbi kódot:
3. Formázd a saját ízlésed szerint a modult. Először add meg, hogy összesen hány db panelt szeretnél egymás alatt látni. Ezt a következőképp teheted meg.
Az alábbi kódrészt másold be a már meglévő alá és írd át a számokat a 'flip' és panel' feliratok mögött emelkedő sorrendben.
Ezzel még nem vagyunk készen. A következő kódrészletet is be kell másold az előző alá és itt is írd át a számokat a 'flip' és 'panel' szók után. Pirossal kiemeltem a megfelelőt.
padding: a szövegnek a panel szélétől való távolságát mutatja
text-align: a cím igazítása középre, jobbra vagy balra (center, left, right)
color: a cím színe, egy egyszerű 6 jegyű kód
font-size: a cím szövegének a mérete, minél nagyobb a szám annál nagyobbak a betűk
font-family: a betűtípus
cursos: amikor ráviszed az egeret a panelre, az egér kinézete átalakul egy ujjá
background-color: a panel színe, az !important feliratot ne töröld ki!!
border-bottom: a panel szegélye, amely ebben az esetben csak a panel aljára vonatkozik. az adatok sorban: solid= típusa a szegélynek, 3px= a vastagsága, #FFFFFF= a színe. Ha kitörlöd a '-bottom' részt akkor a panel teljes körvonalára fog vonatkozni. ha átírod '-top' (teteje) '-left' (bal) és '-right' (jobb) szócskákra akkor máshol fogod látni ezt.
Ha ezekkel meg vagy, már csak el kell mentened a munkádat és kész is a kattintásra lenyíló modulod.
Sok sikert!
Ebben a cikkben megmutatom, hogyan tudsz egy ilyen modult készíteni amit beilleszthetsz a cikkjeidbe vagy az oldalsó modulodba.
Először is mutatok neked egy példát, hogy miként fog kinézni az egész ha kész lesz. Íme:
Kattints ide a panel lenyílásához!
Ezt a modult több elemes verzióban IDE kattintva nézheted meg.
Most pedig lássuk lépésről lépésre, hogy miként tudsz létrehozni egy ilyen modult.
1. Amikor létrehozol egy cikket, oldalt vagy modult a blogodon a szerkesztő nézetben válts át HTML nézetre a bal felső sarokban. Javaslom, hogy azután tedd ezt meg miután végeztél a szöveg megírásával.
2. A megfelelő helyhez illeszd be az alábbi kódot:
<div style="text-align: justify;">
<doctype itdr4u="">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").slideToggle("slow");
});
});
</script>
<style type="text/css">
.panel,.flip
{
padding:5px;
text-align:center; color: #315F8C; font-size: 20px; font-family: Georgia; cursor: pointer;
background-color: #d9d9d9 !important;
border-bottom:solid 3px #FFFFFF;
}
.panel
{
padding: 0px;
display:none;
}
</style>
</head>
<body>
<div class="flip" id="flip1">
<b>Ide írd be a panel címét.</b></div>
<div class="panel" id="panel1">
Ide rakd be azt amit a panelben szeretnél látni.</div>
</body>
</html></doctype>
<br />
<script src="https://apis.google.com/js/platform.js"></script>
</div>
<script>
function onYtEvent(payload) {
if (payload.eventType == 'subscribe') {
// Add code to handle subscribe event.
} else if (payload.eventType == 'unsubscribe') {
// Add code to handle unsubscribe event.
}
if (window.console) { // for debugging only
window.console.log('YT event: ', payload);
}
}
</script>
Az alábbi kódrészt másold be a már meglévő alá és írd át a számokat a 'flip' és panel' feliratok mögött emelkedő sorrendben.
$(document).ready(function(){
$("#flip1").click(function(){
$("#panel1").slideToggle("slow");
});
});
Ezzel még nem vagyunk készen. A következő kódrészletet is be kell másold az előző alá és itt is írd át a számokat a 'flip' és 'panel' szók után. Pirossal kiemeltem a megfelelőt.
<div class="flip" id="flip1">4. Ha ezzel meg vagy, jöhet a panelek kinézetének átalakítása. A szövegek a panelen belül a blogod beállításától függenek. A paneleknél azonban alakíthatod a cím színét és méretét, a panel háttérszínét és a szegély vastagságát és színét. Ezt a következő kódrészletben teheted meg:
<b>Ide írd be a panel címét</b></div>
<div class="panel" id="panel1">Ide rakd be azt amit a panelben szeretnél látni.</div>
<style type="text/css">Pirossal kiemeltem azokat a dolgokat amiknek az értékének a megváltoztatásával átállíthatod a panelek kinézetét. Itt olvashatod, hogy melyik mire jó:
.panel,.flip
{
padding:5px;
text-align:center; color: #315F8C; font-size: 20px; font-family: Georgia; cursor: pointer;
background-color: #d9d9d9 !important;
border-bottom:solid 3px #FFFFFF;
}
.panel
{
padding: 0px;
display:none;
}
</style>
padding: a szövegnek a panel szélétől való távolságát mutatja
text-align: a cím igazítása középre, jobbra vagy balra (center, left, right)
color: a cím színe, egy egyszerű 6 jegyű kód
font-size: a cím szövegének a mérete, minél nagyobb a szám annál nagyobbak a betűk
font-family: a betűtípus
cursos: amikor ráviszed az egeret a panelre, az egér kinézete átalakul egy ujjá
background-color: a panel színe, az !important feliratot ne töröld ki!!
border-bottom: a panel szegélye, amely ebben az esetben csak a panel aljára vonatkozik. az adatok sorban: solid= típusa a szegélynek, 3px= a vastagsága, #FFFFFF= a színe. Ha kitörlöd a '-bottom' részt akkor a panel teljes körvonalára fog vonatkozni. ha átírod '-top' (teteje) '-left' (bal) és '-right' (jobb) szócskákra akkor máshol fogod látni ezt.
Ha ezekkel meg vagy, már csak el kell mentened a munkádat és kész is a kattintásra lenyíló modulod.
Sok sikert!
Megjegyzések
Megjegyzés küldése