Selasa, Oktober 26, 2010

Mengganti titlebar standart Joomla dengan javascript (tampilan flash)

Disini saya akan memberikan sedikit info tentang cara merubah titlebar Anda menjadi lebih menarik dengan sedikit animasi yang menggunakan javascript (biasa disebut XHTML/DHTML), PERINGATAN KERAS bagi Expert, jangan teruskan membaca tutorial ini, karena hanya akan membuang-buang waktu Anda

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,..

Langsung mulai :
  • 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
1. copy-paste langsung script ke Index.php
   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-------------------------------------------
silahkan copas script d atas 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...

Artikel Terkait



0 komentar: on "Mengganti titlebar standart Joomla dengan javascript (tampilan flash)"

Posting Komentar


Blog ini sudah DOFOLLOW, silahkan memberikan komentar untuk backlink