RSS

Percantik Website Joomla dengan Web Intro

08 Aug

Percantik Website Joomla dengan Web Intro web desain grafisSiapa bilang memasang web intro pada joomla itu susah?? Tapi sebelum kita membicarakan cara memasang web intro di joomla, apakah kalian semua sudah tahu apa yang dimaksud dengan web intro? Untuk yang belum tahu saya beri tahu sekilas, Web Intro merupakan animasi pembuka bisa berbentuk flash animation atau pun DHTML menggunakan JavaScriptketika kita membuka suatu halaman. Tujuannya dibuat web intro sendiri digunakan untuk mempercantik sebuah web sehingga user tertarik untuk selalu mengunjungi website yang kita miliki. Seringkali ketika ada sebuah web yang mempunyai web intro yang bagus pengunjung akan mengatakan “WAH….” dan tertarik untuk lama-lama mengunjungi web tersebut. Tapi ada beberapa kekurangan dari penggunaan web intro ini, jika web intro yang kita gunakan adalahberupa flash diantaranya dengan menggunakan web intro ini maka kita kan melakukan pemborosan resource halaman dan flashtidaklah search engine friendly. Tapi tenang, walaupun begitu kita masih bisa mengakali semua itu dengan menggunakan cara yang saya dapatkan dari web tetangga sebelah :

1. Menggunakan SEO friendly Flash.
2. Pastikan anda hanya memberikan animasi pendek. Kecuali animasi flash tersebut adalah content paling penting website anda, maka pastikan durasi flash presentation tidak lebih dari 10-15 detik.
3. Isi animasinya itu To the point, memiliki tujuan. Misalnya showcase content terbaik dari website atau presentation yang bersifat sebagai Navigator menuju bagian-bagian penting website anda.

Ok dari sini kita bisa langsung saja menuju ke topik utamanya yaitu cara memasang web intro sendiri. Jangan lupa siapkan bahan-bahannya dulu ya.

Alat dan Bahan yang perlu disiapkan:

1. Seperangkat komputer, tentunya akan lebih baik jika memiliki koneksi internet, sehingga nanti hasil uji cobanya dapat langsung di publish ke internet.
2. Website yang akan kita di make over untuk di tambahkan web intro.
3. Web intro yang akan kita pasang.
4. Joomla explorer atau yang sejenisnya bisa didownload di http://joomla.org, atau filemanager bawaan hosting yang anda gunakan.

Jika sudah lengkap semua langkah selanjutnya

1. Install terlebih dahulu joomla xplorernya dah tahu to caranya kita pilih extensions>>>install/uninstall kemudian browse componenent joomla Xplorer yang akan kita install lo udah silahkan klik uploap file & install .
2. Kalau sudah, langsung beralih ke menu components pilih joomla Xplorer yang barusan kita install, atau anda juga bisa memanfaatkan file manager pada cpanel bawaan anda.
3. Jika sudah saatnya kita mengupload file intro yang akan kita pasang, klik aja menu file upload yang memiliki icon gambar bumi berwarna biru, seperti biasanya pilih file yang akan kita upload setelah itu kalian tinggal pilih upload, usahakan nama intro yang kita upload tidak sama dengan yang ada di file root joomla anda.
4. Kemudian langkah berikutnya adalah pada di file .htaccess (file harus bernama .htaccess jika masih bernama htaccess.txt anda bisa merenamenya dengan .htaccess, pada file manager .htaccess ini tidak tampak, anda bisa menggunakan joomla Xplorer untuk dapat melihat file .htaccess ini) Tambahkan isi ke dalam file .htaccess :

?DirectoryIndex index.html index.php? (pada contoh disamping nama web intro yang akan kita pasang adalah index.html jika nama web intro yang akan pasang berbeda nama silahkan diesuaikan tanpa tanda kuitp ya…)

Nanti begitu kita akses situsnya, yang akan tampil adalah file index.html

jika anda tidak ingin menggunkan flash intro dan hanya ingin menggunakan web page biasa anda bisa menggunakan kode yang saya ambil dari dynamic drive, silahkan copy paste saja :

<html>

<head>
<title>STMIK AKAKOM YOGYAKARATA</title>
</head>

<body bgcolor=”#000000″ text=”#FFFFFF”>

<div id=”splashcontainer” style=”position:absolute;width:350px;”></div>

<layer id=”splashcontainerns” width=450></layer>

<script>

/*
Dynamic Splash Screen effect- ? Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100′s more DHTML scripts, and Terms Of Use,
Visit http://dynamicdrive.com
*/

//Specify the paths of the images to be used in the splash screen, if any.
//If none, empty out array (ie: preloadimages=new Array())
var preloadimages=new

Array(“http://abstract.simplenet.com/point.gif”,”http://abstract.simplenet.com/point2.gif”)
//configure delay in miliseconds between each message (default: 2 seconds)
var intervals=2000
//configure destination URL
var targetdestination=”http://akakom.ac.id” //silakan ganti dengan alamat home web anda

//configure messages to be displayed
//If message contains apostrophe(‘), backslash them (ie: “I’m fine”)

var splashmessage=new Array()
var openingtags=’<font face=”Arial” size=”4″>’
splashmessage[0]=’ <img src=”http://www.akakom.ac.id/sites/default/files/logo.png”><br>Sugeng

Rawuh Wonten <br>STMIK AKakom Yogyakarta<br><h6>dipersembahkan oleh : Avif istanto<h6>’
splashmessage[1]=’STMIK AKakom merupakan Sekolah tinggi yang pertama dan utama dalam

menyelenggarakan kuliah dibidang komputer’
splashmessage[2]=’menciptakan programer bersertifikasi’
splashmessage[3]=’Menciptakan Lulusan-lulusan yang handal dibidangnya’
splashmessage[4]=’Go the real STMIK’
splashmessage[5]=’dientosi sekedap…’
var closingtags=’</font>’

//Do not edit below this line (besides HTML code at the very bottom)

var i=0

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
var theimages=new Array()

//preload images
if (document.images){
for (p=0;p<preloadimages.length;p++){
theimages[p]=new Image()
theimages[p].src=preloadimages[p]
}
}

function displaysplash(){
if (i<splashmessage.length){
sc_cross.style.visibility=”hidden”
sc_cross.innerHTML=’<b><center>’+openingtags+splashmessage[i]+closingtags+’</center></b>’
sc_cross.style.left=ns6?parseInt(window.pageXOffset)+parseInt(window.innerWidth)/2-parseInt(sc

_cross.style.width)/2 :

document.body.scrollLeft+document.body.clientWidth/2-parseInt(sc_cross.style.width)/2
sc_cross.style.top=ns6?parseInt(window.pageYOffset)+parseInt(window.innerHeight)/2-sc_cross.of

fsetHeight/2 : document.body.scrollTop+document.body.clientHeight/2-sc_cross.offsetHeight/2
sc_cross.style.visibility=”visible”
i++
}
else{
window.location=targetdestination
return
}
setTimeout(“displaysplash()”,intervals)
}

function displaysplash_ns(){
if (i<splashmessage.length){
sc_ns.visibility=”hide”
sc_ns.document.write(‘<b>’+openingtags+splashmessage[i]+closingtags+’</b>’)
sc_ns.document.close()

sc_ns.left=pageXOffset+window.innerWidth/2-sc_ns.document.width/2
sc_ns.top=pageYOffset+window.innerHeight/2-sc_ns.document.height/2

sc_ns.visibility=”show”
i++
}
else{
window.location=targetdestination
return
}
setTimeout(“displaysplash_ns()”,intervals)
}

function positionsplashcontainer(){
if (ie4||ns6){
sc_cross=ns6?document.getElementById(“splashcontainer”):document.all.splashcontainer
displaysplash()
}
else if (ns4){
sc_ns=document.splashcontainerns
sc_ns.visibility=”show”
displaysplash_ns()
}
else
window.location=targetdestination
}
window.onload=positionsplashcontainer

</script>

<!–Set href in below link to the URL of the target destination–>

<div align=”right”>
<table border=”0″ width=”400″ height=”100%” cellspacing=”0″ cellpadding=”0″>
<td width=”100%” valign=”bottom” align=”right”>
[ <a href=”http:akakom.ac.id”><font color=”#FFFFFF”>Skip Intro</font></a> ]
</td>
</table>
</div>

</body>
</html>

Oke, selesai, selamat mencobanya…

 

 

 

 
Leave a comment

Posted by on August 8, 2012 in Technology Information

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: