Cara Mudah Membuat Halam Intro Pada Blog

Bisakah di blogger membuat halaman intro seperti pada website-website tertentu? jawabannya mungkin bisa saja kali. Apa yang dimaksud intro disini? apabila website tersebut dikunjungi tidak langsung ke halaman utama, namun terlebih dahulu disuguhkan oleh sebuah halaman yang umumnya adalah ucapan selamat datang atau navigasi, ada juga yang berupa gambar animasi ataupun dalam bentuk flash.

Sebenarnya cara ini sudah lama pengen saya pelajari, namun karna waktu yang belum memungkinkan saya untuk posting. Hehehee....Postingan saya kali ini muncul atas dasar inspirasi dari sahabat saya angga delord, yang mempunyai web intro. Alhasil saya jadi kepincut dan penasaran untuk membuatnya. namun apakah bisa digunakan pada blog?

Lanjuttin aja bacanya....

Halaman awal intro pada blog yang saya maksudkan yakni apabila anda telah masuk ke homepage halaman aslinya, anda tidak akan melihat kembali halaman intro tersebut, dengan kata lain anda tidak akan diganggu lagi oleh kehadirannya. Kapan anda bisa melihat kembali halaman intro tersebut? halaman intro tersebut akan muncul kembali apabila anda menutup browser yang digunakan, kemudian mengunjungi kembali halaman tersebut. Namun efek tersebut berlaku apabila komputer yang anda gunakan tidak mematikan fungsi cookie karena script yang digunakan menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.

Cara Membuat Intro Pada Blog.
Silahkan ikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan
3. Klik menu Edit HTML
4. Silahkan cari kode berikut pada template anda :]]></b:skin>
5. Copy dan paste kode di bawah ini tepat di atas kode nomer 4.

#intro{
background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpSoq-OtnZpVnmeq0ADErZbfd6RlebfopmDXp5zAHND6ay1bBKz9EjnH9Lo8nVgY6-RcKJe2Xv7hJzct4cjweyFBzmcbCDq2mjKRYjvtLbaHRkDvFZydpWWPFzTt72dTgow4wc2nKrk0/) repeat-x top left fixed;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}

6. Silahkan cari kode berikut pada template anda : </head>
7. Copy kode di bawah ini dan paste tepat di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/*************************************************
* Blogger intro by http://www.blogspottutorial.com
**************************************************/
var persistclose=1
var startX = 0
var startY = 0
var verticalpos="fromtop"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}}return returnvalue;}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("intro").style.visibility="hidden";}
function staticbar(){
barheight=document.getElementById("intro").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY; }
return el; }
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y == (pY + startY - ftlObj.y)/0;}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y == (pY - startY - ftlObj.y)/0;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10); }
ftlObj = ml("intro");
stayTopLeft();}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

8. Cari kode berikut pada template anda <body>
9. Copy kode di bwah ini dan kemudian pastekan tepat di atas kode nomer 8 ya...

<div id='intro'><div class='welcome'>Welcome to my blog</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i1044.photobucket.com/albums/b449/Tomocchan/pervy-gif.gif' title='enter'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>

10. Anda bisa langsung SIMPAN atau klik Pratinjau jika anda masih ragu.

Nah...jika sudah jadi...Anda dapat mengubah tulisan yang ada dengan tulisan anda sendiri, selain itu jika anda penggemar flash, tentu saja dapat mengganti gambar animasi gif diatas dengan kode flash yang anda miliki. Atau jika anda tidak punya anda bisa langsung cari di sini.

Selamat Mencoba....