Membuat Intro Blog tanpa Flash
Berhubung kemarin ada teman blogger yang bertanya tentang cara membuat intro blog seperti blog saya ini di shoutmix, maka saya putuskan untuk open sourch nih..
Mungkin sudah banyak yang membahas masalah membuat intro blog seperti ini tetapi dari kebanyakan yang saya temui yaitu semuanya menggunakan flash. Sedangkan dari yang saya ketahui untuk menjalankan flash harus ada waktu untuk meload flash tersebut. Dan semakin lama blog kita terload maka semakin malas juga orang-orang mengunjungi blog kita.
Contohnya saat kita sedang menjelajah lewat google saat kita mengklik suatu blog dan ternyata loadingnya lama maka sering kali kita mengklik back dan mengurungkan niat untuk berkunjung ke web tersebut.
Balik lagi ke topik awal yaitu cara membuat intro blog tanpa flash, berikut langkah-langkah yang bisa kamu ikuti…
<!doctype html public “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Ebenk789 Weblog</title>
<style type=”text/css”>
<!–
body { background-color:#000000; color:white; overflow:hidden }
#skipDiv {position:absolute; visibility:hidden; width:80px; }
#skipDiv a:link, #skipDiv a:visited {
font-family: verdana, arial, helvetica, sans-serif;
font-size:10pt; color:#dee7f7; }
#wipeDiv1 { position:absolute; visibility:hidden; left:0px; top:0px;
width:1px; height:1px; z-index:1; }
/* Classes for formatting the wipe text content.
Wipe class is used in doWipes function. It’s the only
one needed if all your text is formatted the same. */
.wipe { color:#dee7f7;
font-family: verdana, arial, helvetica, sans-serif; }
/* If you don’t need different sizes, just put a size in
the one above (.wipe) and delete unused classes */
.wipe1 { font-size:36pt; }
.wipe2 { font-size:22pt; }
.wipe3 { font-size:18pt; }
–>
</style>
<script src=”http://dl.getdropbox.com/u/567855/wipes.js” language=”javascript” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
<!–
/*
Document Wipes effect- Web Coding (www.dyn-web.com)
Copyright 2002 by Sharon Paine
Visit http://www.ebenk789.blogspot.com untuk mendapatkan script
*/
dom = (document.getElementById) ? true : false;
ns5 = ((navigator.userAgent.indexOf(“Gecko”)>-1) && dom) ? true: false;
ie5 = ((navigator.userAgent.indexOf(“MSIE”)>-1) && dom) ? true : false;
ns4 = (document.layers && !dom) ? true : false;
ie4 = (document.all && !dom) ? true : false;
opr= navigator.userAgent.indexOf(“Opera”)!=-1
nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
//////////////////////////////////////////////////////////////////////////
// Customization Area
//
// If your wipe series includes images, put them in this array for preload, seperated by commas.
var wipe_imgs=new Array(
‘dwc_btn.gif’
);
if (document.images) {
var theImgs=new Array();
for (var i=0;i<wipe_imgs.length;i++) {
theImgs[i]=new Image();
theImgs[i].src=wipe_imgs[i];
}
}
// Here’s where you put the content for the wipes.
// Array elements are arranged in pairs:
// content to display, time allotted for wipe of that content.
// Suggestion: give longer, larger content more time.
// If all your text is to be formatted the same, you can use
// just the wipe class above (it is applied in the doWipes function)
// and put plain text here.
// Images and links are okay too.
var wipe_array=new Array(
‘<span class=”wipe1″>Ebenk789 Weblog</span>’,2000,
‘<span class=”wipe3″>Blog untuk kita saling berbagi</span>’,2500,
‘<span class=”wipe2″>Karena Berbagi Itu Indah</span>’,2500,
‘<span class=”wipe3″><center>Created by:<br><br><img src=”ebenk789 logo.jpg” width=”240″ height=”100″ border=”0″ title=”ebenk789″></center></span>’,3000
);
var wipe_final=new Array(‘Click here’,2500);
var wipe_in_delay=1000; // delay before each wipe in
var wipe_out_delay=1200; // delay before each wipe out
// wipe out speed (wipe-in time is divided by this number)
var wipe_out_dv=2.5; // 2 to 4 recommended
var dest_delay=0; // delay before going to destination url
// destination url, where to go at end of wipes
function setDest() {
window.location = “http://www.ebenk789.blogspot.com/”;
}
// end customization area
/////////////////////////////////////////////////////////////////////
if (opr||nodyn)
setDest()
function initDynLyrs() {
// non-capable browsers skip this and go to your url
if (nodyn) setDest();
positionBotmRt(’skipDiv’);
wipeLyr1 = new dynObj(‘wipeDiv1′);
wipeLyr1.centerIn(window);
wipeLyr1.show();
//wipeLyr2 = new dynObj(‘wipeDiv2′);
//wipeLyr2.centerIn(window);
doWipes();
}
window.onload=initDynLyrs;
//–>
</script>
</head>
<body>
<!– This div is for the changing content –>
<div id=”wipeDiv1″></div>
<!– This is for people who don’t want to view the animation.
Put your href here. –>
<div id=”skipDiv”>
<a id=”skipLnk” href=”javascript:setDest()”>skip intro</a>
</div>
</body>
</html>
Setelah semua kode diatas dipaste ke notepad maka langkah kita selanjutnya yaitu memahami kode diatas..
Merupakan Title halaman intro blog kita jadi rubah sesuka kamu
<!–
body { background-color:#000000; color:white; overflow:hidden }
#skipDiv {position:absolute; visibility:hidden; width:80px; }
#skipDiv a:link, #skipDiv a:visited {
font-family: verdana, arial, helvetica, sans-serif;
font-size:10pt; color:#dee7f7; }
#wipeDiv1 { position:absolute; visibility:hidden; left:0px; top:0px;
width:1px; height:1px; z-index:1; }
/* Classes for formatting the wipe text content.
Wipe class is used in doWipes function. It’s the only
one needed if all your text is formatted the same. */
.wipe { color:#dee7f7;
font-family: verdana, arial, helvetica, sans-serif; }
/* If you don’t need different sizes, just put a size in
the one above (.wipe) and delete unused classes */
.wipe1 { font-size:36pt; }
.wipe2 { font-size:22pt; }
.wipe3 { font-size:18pt; }
Kamu bisa rubah warna backgroud, ukuran tulisan, dan posisi dari intro blog kamu dengan merubah sedikit kode diatas..
‘<span class=”wipe3″>Blog untuk kita saling berbagi</span>’,2500,
‘<span class=”wipe2″>Karena Berbagi Itu Indah</span>’,2500,
‘<span class=”wipe3″><center>Created by:<br><br><img src=”ebenk789 logo.jpg” width=”240″ height=”100″ border=”0″ title=”ebenk789″></center></span>’,3000
Nah Pesan-pesan diatas kamu dapat rubah sesuai kebutuhan kamu..
Code diatas merupaka
n pengalihan dari hamalan ini setelah animasi telah selesai. jadi rubah alamat url diatas menjadi alamat url blog atau web kamu.
Setelah semua pengeditan selesai maka save hasil pengeditan tadi dengan nama terserah kamu tetapi harus berekstensi html contoh introblog.html
Upload file introblog.html ketempat hosting kamu atau web yang menyediakan web hosting gratis. Untuk lebih jelas kamu bisa baca free web hosting untuk mengetahui tempat hosting yang bagus. Setelah mengupload file html tentunya kamu mendapatkan link dari file hasil upload tadi.. Sebarkan link tadi sebagai homepage kamu atau kamu bisa daftar ke web yang memberikan domain gratis seperti www.co.cc Dan untuk hasilnya maka akan seperti ini www.ebenk789.co.cc
Ok.. Selamat mencoba
Mungkin anda Suka
Filed Under: Blogger
loadnya jadi berat gak mas???
Gwa coba benk …
g mudeng ni.. kyak hiperlink gono bro /
di sambungin .. langsung?
hiyaaaa kereeen…tapi *lemod mode on*
====== ebenk789 ========
@ Senoaji: karena ini merupakan eksternal dari blog jadi gak ada pengruh sama sekali dengan berat blog..
@ Kojek: SilaHkan SemoGa Berhasil..
@ abala: jadi ini kita kayak buat file html bisa yang pake code javascript buat bikin animasinya nah setelah jadi kita upload dan ubah alamat linknya..
@ wening : WaH kok BiSa lemot hehe.. ^_^
======== Berbagi itu Indah ======
TOP ABIZ DECH
bagus jga nich tipsnya……….gw coba dech!!!!
btw ka’ bisa posting artikel tentang form komentar ga’????soalx blog aq form komentarx ga’ berfungsi n bisa diliat di http://bluesrikandy.blogspot.com
thanks before ya ka’………….:)
wah mantep mas triknya boleh di coba ga?
hmm.. oke banget!!!
coba ya
wah mantap nih…
nyoba dulu aja ah…
Ini kan eksternal (terpisah) dari blog asli. Kl bikin yg tergabung dalam blog misalnya kayak situs http://www.telkomspeedy.com itu gimana? sewaktu-waktu nanti bisa kita ganti ataupun dihapus.
patut dicoba niiieee
====== ebenk789 ========
@ ADI RABBANI: ThanK’s ^_^
@ atma.maniest: Thank’s taPi untuk kotak komment udah jalankan..??
@ torik: CoBa aja..
@ Rio Sembilan: Sip..!!!
@ forNez: Silahkan ^_^
@ e-je: Hati_haTi ntar nyoba-nyoba jadi jatuH hati hehe..
@ infini3: http://www.telkomspeedy.com kan dia berbasis PHP jadi punya web hosting sendiri dan tentunya terpisah.. Kalo Blogger kan cuma 1 lembar ^_^ Dan trik ini bisa kamu rubah atau hapus sama mudahnya.
@ didiet: SilaHkan..
======== berbagi itu indah ===========
malam…code yg ada didalam scroll ngga bener, soalnya banyak tanda <br/> .mungkin kamu harus menggantinya lg jgn memakai scroll mungkin bisa memakai quote agar code yg ditampilkan benar.
ronda malem boz!!!!
waw…ini dia yg aku cari2 dari kemaren…
thx ya sob..
Walah brooo,… blog aku aja dah beratt…. malah lagi mikirin buangin yang beberapa widget neeh…
link dagh q pasang yah???^_^
nah iya,,itu jadi berat gak ya???
mas…….
masih bingungggg
http://www.ebenk789.co.cc = http://ebenk789.byethost12.com/ebenk789.htm
tujuan lu apa mskn itu?
itu trojan khan bro!
tulisanny aja http://www.ebenk789.co.cc.. g tw linkny http://ebenk789.byethost12.com/ebenk789.htm
apa tujuanny???
@ Blogger Cilik:
) ketakutan bgt sih u. Udah jelas itu contoh dari animasi intro blog bukan trojan.. lagian klo mau bagi-bagi trojan ngapain di blog ini.. Langsung aja kasih ke target susah amat sih.. So jangan pernah berburuk sangka terhadap orang ok.. 