2017.01.28. 17:50, ShiroNeko
http://i1130.photobucket.com/albums/m533/Alex_Steffen/Anime-girl-with-computer_1680x1050_zpsf062268b.jpg
Azon gondolkodtam a mai napon, hogy olyan jó lenne ha az oldalamra tudnék készíteni egy olyan lehetőséget, ahol az olvasóim feliratkozhatnak hírlevélre így mindig értesülhetnének a legfrissebb posztjaimról.
Szerintem egy weboldalnak lényeges, hogy legyen hírlevele ugyanis ezzel a látogatókat visszatéríthetjük a weboldalunkra, hiszen minden egyes új poszt után a feliratkozók kapnak egy e-mailt az új posztról. :)
Később észrevettem, hogy a G-Portálnak van erre egy script-je ami nagyban megkönnyítette a munkát számomra, így nem kellett magamtól írni egyet vagy legalábbis, utána keresgélni a kódoknak. Mivel az alap hírlevél sablon egyszerű és formázatlan és formázni sem lehet ha mélyebben bele nem nézel a kódokba... ezért csináltam egyet saját magamnak és ezt a kódot fogom most veletek megosztani.
A sok keresgélés után nem találtam egyetlen weboldalt sem ahol erre lenne kód, tehát nagy örömömre szolgál, hogy általam megismerhetitek ezt a kódot először és használhatjátok ha szükségetek van rá. :D A kódot természetesen meg lehet osztani mindenkinek, vigyétek bátran viszont arra szeretnélek megkérni benneteket, hogy ne tüntessétek fel sajátotokként. Kérlek, említsetek meg belinkelve a nevemmel. (。◕‿‿◕。)
A kód formázása nem nehéz, úgy alakíthatjátok ahogy csak szeretnétek a saját ízlésetek szerint. Íme:
1. lépésként a G-Portálnak van egy script-je amivel működteti a hírlevelet. Ezt egy bal oldali modulba illesszétek be, ettől fog működni. :)
<script src="./gpfunc.js" type="text/javascript"></script>
Ez pedig maga a form amit szintén egy bal oldali modulba illesszetek be. Ez a form fog megjelenni előttetek vizuálisan, amit majd CSS-el formázhattok. :)
<form action="./snewsletter.php" method="post" name="newsletterform" onsubmit="return email_check(this)" style="margin-bottom: 4px">
<b>E-mail címed:</b> <input class="emailfield" name="email" type="text" /><br />
<input checked="checked" class="subscribetext" name="act" type="radio" value="sub" /> <span class="fontstyle">Feliratkozom! </span><br />
<input class="subscribetext" name="act" type="radio" value="unsub" /> <span class="fontstyle">Leiratkozok :( </span><br />
<table border="0" cellpadding="0" cellspacing="0" style="margin-top: 4px" width="100%">
<tbody>
<tr>
<td>
<input class="subkuldes" type="submit" value="Küldés" /></td>
</tr>
</tbody>
</table>
<input name="prt" type="hidden" value="775274" /> <input name="pg" type="hidden" value="37086311" /></form>
A fenti kódban létrehoztam egy pár css osztályt (class), hogy formázni tudjam az egészet. A vastaggal kijelölt részeket átírhatod ha szeretnéd.
A kód utolsó sorában az <input name>-től kezdődően, a vastaggal kijelölt számokat a saját értékeitekre írjátok át, ugyanis azok az értékek az én portálom azonosítói! :) A "7"-essel kezdődő érték a portálod azonosítója, a "370"-el kezdődő érték pedig az oldal azonosítója ahová a látogató visszatér a feliratkozás után.
CSS:
.emailfield {
border-radius: 5px;
padding: 7px;
font-family: 'Raleway', sans-serif;
font-size: 13px;
}
.fontstyle {
padding: 5px;
text-transform: uppercase!important;
font-size: 11px;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
}
.subkuldes {
padding: 10px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
font-family: 'Raleway', sans-serif;
color: #88888;
border: 1px solid #f2f2f2;
text-align: center;
margin-left: 35%;
}
.subkuldes:hover {
padding: 10px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
font-family: 'Raleway', sans-serif;
color: #ffffff;
background-color: #EB9F9F!important;
font-weight: bold;
border: 1px solid #EB9F9F;
text-align: center;
}
Ha esetleg lenne benne hiba vagy nem működne, akkor nyugodtan írjatok nekem és igyekszem kijavítani! :) Az ember minden nap tanul valamit... ≧◡≦
Sok sikert a szerkesztéshez! (。◕‿‿◕。)