2012. április 9., hétfő

Banner(logó) elhelyezése

Banner(logó) elhelyezése a blogban, hogy új ablakba nyíljon


Banner elhelyezése a blogspotban
(kód készítése a bannerhez, hogy új ablakba nyíljon)
A képet(bannert) a tárhelyre tesszük egy mappába. A blogspothoz a Picassa Webalbumok a tárhely. Sajátunk, létezik ahogy blogot nyitottunk.
Ha nem tudjuk, hogy hol van a webalbumunk, nyitunk egy oldalt a blogunkban, amit piszkozatnak használunk és mások számára láthatatlan. Itt a képre kattintunk és kinyilik egy ablak : fájl kijelőlése.
Itt a "Picassa Webalbumok szolgáltatásból" címűre kattintunk és megvan a saját albumunk.
Ha az "Ebből a blogból" -ra kattintunk: fölül ez jelenik meg:  Ezek a képek a Picasa Webalbumokban, a Google ingyenes fotómegosztó szolgáltatásában is megtekinthetők és megoszthatók. Itt a picassawebalbum link formában van. Rámegyünk megynyitjuk, és lementjük a címet egy könyvtárba, hogy könnyen elérhető legyen. (Sok mindent tárolhatunk benne, képeket, videókat, mi döntjük el, hogy ki láthatja.)

Folytatjuk a banner kód készítését. Megvan a képünk az oldalon. Rákattintunk az egérrel, amitől a színe megváltozik(kijelöltük) Közbe nyitva van a kép alján a sáv, hol méretezhetünk stb. Nekünk nem kell most, ha a kívánt méretben töltöttük fel a képet.

Rákattintunk a link szóra ( ahol a képet behoztuk azon a panelen). A lenyíló panelen dolgozunk.
Az internet címet kitöltjük (http://holabda.blogspot.com/) ahova szeretnénk hogy vigyen bennünket a link. Kipipáljuk a link megjelölése új ablakban kockát. Az új szerkesztőfelületen már automatikusan ki van, csak ellenőrizzük.
Megjelenítendő szöveg nem kell, mert a kép van helyette.
Leokézzuk(OK) rákattintva a kockára

Most megvan a másik oldalra nyíló bannerünk(logónk).
Mi a kódot szeretnénk megszerezni, és ehhez megvan a lehetőség.

Az írás helyett a HTML -re kattintunk. Az oldalon sok kriksz-kraksz jelenik meg, ez a mi kódunk.
Jobb egérgombra kattintunk és az egészet kijelöljük. Másolásra kattinva az egerünkön van. Ha még nincs nyitva a helye akkor egy jegyzetfüzetbe helyezzük(beillesztés) és elmentjük. Lila színnel ennek a legalsó képnek a kódja.
Később is felhasználhatjuk,ha kicseréljük a zöld részt(kép helye)
és a link helye.
Ez megy a

HTML/JavaScript elem beállításai 

ablakba.

--------------------------------------------------------------------
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://holabda.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4lTNceUzeieu3RzXwwxCKwA-Ch6H4K9Ieb25ZpXgRJIgtOVmXPJKKkBrc_gDvJzuHzIzCD9jKydDGUxpH7g_ii4_HWKY1IIW1GUYnGrEiDUZXi9B0RxFvrGBEFA5AfZ8vvutztg3LIo/s1600/blog.gif" /></a> </div>
<br /></div>
</div>
-------------------------------------------------------------------------------------------
Itt középre van a kép helyezve, de ezt a szokott módon alakíthatjuk amikor a képet felrakjuk.


A tervezésnél a kiválasztott ablak a HTML/JavaScript panel lesz. Oda rakjuk utólag ahova akarjuk.




5 megjegyzés:

Rózsa írta...

Szeretem az ilyen jellegű oktató bejegyzéseket, bizonyos koron felül, így sokkal könnyebb tanulni, ha lépésről lépésre képpel illusztrálod ami követi a szöveget, Köszönet érte.

Hólabda írta...

Ezeket kérésre készítem..

Névtelen írta...

Köszönöm a segítséget!

Hólabda írta...

Szívesen bármikor!

Coke írta...

Sokat segítettél! :)
Köszi!