Home 
Tip Dan Trik Mengganti titlebar standart Joomla dengan javascript (tampilan flash)
Tip Dan Trik Mengganti titlebar standart Joomla dengan javascript (tampilan flash)
the_free87, Monday, 01 December 2008 20:00
Disini saya akan memberikan sedikit info tentang cara merubah titlebar Anda menjadi lebih menarik dengan sedikit animasi yang menggunakan javascript (biasa disebut XHTML/DHTML), tidak monoton seperti kebanyakan web Joomla standar yang hanya menampilkan tulisan Home, Profil, Blog, Buku Tamu, dll.
PERINGATAN KERAS bagi Expert, jangan teruskan membaca tutorial ini, karena hanya akan membuang-buang waktu Anda :D
Skenarionya seperti ini:
- Anda mempunyai akses ke Cpanel untuk mengakses file template->[template Anda]->index.php (bila web Anda telah Online)
- Anda mempunyai akses untuk megedit File template->[template Anda]->index.php (web offline-localhost) Anda yang akan kita Edit
- Memiliki (sudah terinstall) Web Editor. Ex: Dreamweaver, NotePad, NVU, dll
- Telah memiliki Script-Javascript khusus titlebar yang bisa Anda cari melalui Google, salah satu linknya yaitu: www.javascriptkit.com, script bisa berupa file .js ataupun bisa berupa baris script yang langsung di Copy-paste kan di Index.php Anda
- Waktu untuk mulai menjalankan misi,..
Mission begin
- Khusus Online silahkan Anda buka cpanel->file manager->public_html->templates->[nama template]->index.php, kemudian klik Edit pada baris toolbar cpanel Anda, klik Yes sampai tampil baris script dari file index.php Anda
- Khusus Offline silahkan buka File Joomla Anda temlates->[nama tempalte]->index.php, kemudian open with Web editor kesayangan Anda
- Setelah terbuka mari kita masuk ke misi utama yaitu mengganti titlebar yang terbagi menjadi 2 cara
Berikut adalah salah satu Contoh script nya:
-----------------Mulai---------------------------------------------
<script language=JavaScript>
var pesan = " Defriady Official Site || Defriady Official Site ||";
var speed = 200;
function the_free87()
{
document.title=pesan;
pesan=pesan.substring(1,pesan.length)+pesan.charAt(1);
setTimeout("the_free87()",speed);
}
the_free87();</script>
-----------------Selesai-------------------------------------------
Jadi silahkan Anda Copy script yang Anda punya (Atau bisa copy script saya:D) lalu paste di dalam tag <head>---paste disini</head>
Contoh hasil:
-----------------Mulai---------------------------------------------
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;> charset=iso-8859-1" />
<?php if ( $my->id ) { initEditor(); } ?>
<?php echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css" type="text/css"/>" ; ?><?php echo "<link rel="shortcut icon" href="/$GLOBALS[mosConfig_live_site]/<?php echo $mosConfig_live_site;?>/templates/defri/images/favicon.ico" />" ; ?>
<script language=JavaScript>
var pesan = " Defriady Official Site || Defriady Official Site ||";
var speed = 200;
function the_free87()
{
document.title=pesan;
pesan=pesan.substring(1,pesan.length)+pesan.charAt(1);
setTimeout("the_free87()",speed);
}
the_free87(); </script>
</head>
-----------------Selesai-------------------------------------------
2. Dengan membuat sebuah file *.js (title.js) yang isi nya script title bar Anda
Ex: buka sebuah notepad lalu paste scriptnya
-----------------Mulai---------------------------------------------
var pesan = " Defriady Official Site || Defriady Official Site ||";
var speed = 200;
function the_free87()
{
document.title=pesan;
pesan=pesan.substring(1,pesan.length)+pesan.charAt(1);
setTimeout("the_free87()",speed);
}
the_free87();
-----------------Selesai-------------------------------------------
lalu letakkan di temlate->[ama template]->letakkan disini file title.js
Setelah selesai lalu ketikkan script berikut di dalam tag <head>---paste disini</head> :
<script src="/<?php echo $mosConfig_live_site;?>/templates/nama temlplate/title.js" type="text/javascript"></script>
contoh hasil:
-----------------Mulai---------------------------------------------
<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;> charset=iso-8859-1" />
<?php if ( $my->id ) { initEditor(); } ?>
<?php echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css" type="text/css"/>" ; ?><?php echo "<link rel="shortcut icon" href="/$GLOBALS[mosConfig_live_site]/<?php echo $mosConfig_live_site;?>/templates/defri/images/favicon.ico" />" ; ?>
<script src="/<?php echo $mosConfig_live_site;?>/templates/nama temlplate/title.js" type="text/javascript"></script>
</head>
-----------------Selesai-------------------------------------------
Kemudian Save,
Selesai
Silahkan review web Anda pasti title bar nya telah berubah...
Lihat contohnya di www.defriady.tk
Sekian
Jaya selalu Joomla-id :D
| Comments |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Only registered users can write comments!
Powered by !JoomlaComment 3.26
3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."
JUG Indonesia
Id-joomla.com adalah situs resmi Joomla User Group (JUG) Indonesia dan Joomla Translation Team
Download Terjemahan Joomla terakreditasi dari JoomlaCode dan laporkan bugs, ide dan saran nya di Sub Forum Hanacaraka
Login
Artikel
We have 601 guests online
