ADS

ADS

Membuat Flash Header sederhana

Posted by Webb Matrix on Wednesday, January 4, 2012

Artikel ini merupakan edisi sambungan dari artikel Membuat Sate Flash di Joomla .
Flash. kalo diartiin secara harfiah artinya kilat / petir. makanya ada tokoh komik namanya Flash, dan supaya gak ketuker sama bang Superman, selalu mengunakan baju dengan gambar Flash. kalo di Indonesia dulu pernah ada namanya Gundala Putra Petir – ini bacaan jaman dulu.
Kalo Flash Header ?

Membuat Flash Header sederhana
apa diartiin sebagai pimpinan petir ?
Tergantung konteks tulisannya dimana. Kalo di web, header biasa ditafsirkan sebagai bagian atas suatu web. so, Flash Header kurang lebih artinya tampilan animasi flash di bagian atas suatu web.
kalo dibawah namanya jadi Flash Footer dong ….
aya aya wae ….
OK, sekarang mari kita membuat Flash Header Module tanpa harus menginstal, dengan kata lain memanfaatkan fasilitas fitur-fitur di Joomla.
mmm, it make me love Joomla for good.

Dalam demo ini saya akan menggunakan template default Joomla 1015 – Rhuk SolarflareII.

Flash Header ini akan dimasukkan sebagai pengganti header image default bawaan Joomla.
Go to the mission:

R/
Cari dan temukan lokasi header image dalam template Rhuk SolarflareII
Untuk menemukan dimana lokasi penempatan header image default yang akan diganti dengan FHM paling mudah dengan menggunakan Firefox Browser + Web Developer Extension.
screenshot : lokasi header image
Posisi header image
 Edit template Dari informasi intelijen oleh agen Firefox extension, ditemukan bahwa header image berada di : templates/Rhuk_SollarflareII/index.php pada div #header, tepat dibawah div #header_outer (lihat gambar) dan merupakan background image…
mmm…OK, kembali ke agen firefox extension -Edit CSS,   temukan dimana kontrol pemasangan header image dan lakukan pengamanan area segera !
sekejap, dua kejap, dan beberapa kejap kemudian laporan datang …

 bos, kontrol ada di file template_css.css, dan area sudah dibersihkan

ini laporannya#header {

float: left;

padding: 0px;

margin-right: 2px;

width: 635px;

height: 150px;

/*   background: url(../images/header_short.jpg) no-repeat;

jangan tampilkan header image

*/

}Sampai disini, lokasi header image area sudah bersih.
Lanjut ya…
(ngopi dulu dong …gluk gluk gluk.. ahhh)
Berhubung akan dilakukan pemasangan module, maka perlu dilakukan sedikit sentuhan dan penanaman posisi modul di template.

OK, silakan kepada prajurit Notepad++ untuk melakukan penggeledahan dan modifikasi seperlunya.
…….(terdengar bunyi keyboard CTRL+F , find “header” ….tara tok tok ….)

berikut hasilnya:

<div id=”header”>

nbsp;

</div>masukkan nama posisi modul (pada contoh kali ini menggunakan nama posisi fhm alias flash header module):

<div id=”header”>

<? php

if ( mosCountModules( ‘fhm’ ) ) {

mosLoadModules ( ‘fhm’, -2 );

}

?> Sebelumnya biasakan membuat backup file / folder yang akan dijadikan percobaan.

penulis tidak bertanggung jawab dan bertanggung gugat bila terjadi error pada website Anda.
sampai disini area header image sudah clear, posisi modul untuk flash header sudah selesai dipasang, mmm…apalagi ya…
Oh ya…

lakukan penanaman  namaposisi module di template position:

lapor dulu ke Manager Template, mohon ijin melakukan inokulasi nama modul di Module Position

setelah OK, berikutnya adalah memasang flash ke dalam Module (User Module) – memanfaatkan fitur default Joomla.
a. menyiapkan module

 Siapkan animasi flash, ukurannya disesuaikan dengan bidang header di template masing-masing
 Masuk ke Module Manager – pilih New Module
 Klik tombol HTML untuk masuk ke Edit Source
 Masukkan kode flash (bisa pakai cara Sate Flash atau unobstructive javascript)

Catatan:

sesuaikan parameter di modul manager dengan kebutuhan, pada contoh kali ini menggunakan setting:

 Show Title : No
 Position : fhm
 Published : Yes
 Module Cache : Yes

Setelah semua OK, segera lakukan penekan tombol Save atau misi penanaman modul flash dinyatakan gagal dan Anda harus melakukan restart level insert New Module.

Blog, Updated at: 7:42 PM

0 comments:

Post a Comment

GEO CITY

SOSMED SHARE

Powered by Blogger.