Cara Mudah Membuat Halam Intro Pada Blog Cara Mudah Membuat Halam Intro Pada Blog | Blog Online Ganden

Senin, Oktober 18, 2010

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(http://lh6.ggpht.com/_pt7i0nbIOCY/TDVAtE_sRoI/AAAAAAAACtU/vYI1BUEhw0g/latar_thumb%5B2%5D.jpg) 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....

Title Post: Cara Mudah Membuat Halam Intro Pada Blog
Rating: 100% based on 92189 ratings. 5 user reviews.
Author: ganden

Terima kasih sudah berkunjung di blog Ganden Online, Jika ada kritik dan saran silahkan tinggalkan komentar

8 komentar:

Loent on 18 Oktober 2010 12.09 mengatakan...

wuih..bagus mas tutornya. udah saya pasang di blog saya yang satunya. makasih ya.

Anim on 18 Oktober 2010 12.11 mengatakan...

hahahaha..ada-ada lagi kamu gan. mantap deh pokoknya. seru abies..

idea on 18 Oktober 2010 14.47 mengatakan...

keren kawan?

Andi Wong on 20 Oktober 2010 08.47 mengatakan...

membuat tampilan awal blog menjadi berbeda dan mengesankan ya.. btw sory baru mampir gw abis dari cuti nih :)

Ladida on 20 Oktober 2010 13.55 mengatakan...

menarik utk dicoba . . ,

nice tutor kawan !!!

Mediafire Movie Collection on 17 Juli 2011 12.08 mengatakan...

mantaap sobat...aku coba dulu ya...Sekalian nitip lapak bagi yang hobby nonton film-film terbaru
http://filmmediafire.blogspot.com
Ditunggu kunjungan baliknya sobat
==KEEP POSTING==

Damai Dank on 6 Juni 2012 19.54 mengatakan...

makasi infonya mau dicoba ni...
ditunggu kunjungan baliknya http://anak-rantau03.blogspot.com

Pus Yakiz on 14 Februari 2013 19.47 mengatakan...

Thx Infonya Gan ..... Sangat Bermanfaat Dan Sangat Menarik

Mantab ! Tingkatkan Terus Ya Gan :D


Bagi Yang Suka Koleksi Hot Wheels, Silahkan Mampir Ke Blog Saya Oke !
Kunjungi Blog Saya Ya Gan : http://Pusyakiz.blogspot.com/

Terimakasih

Loading....

Posting Komentar

Terima Kasih Kunjungan Anda.
Komentar Anda sangat Berarti Buat Saya. Jadi, silahkan anda berkomentar tentang artikel yang berkaitan postingan saya. "Jangan Nyepam atau numpang link untuk kepentingan sendiri tanpa seijin penghuni blog"

 

Blog Online Ganden Copyright © 2009 Modification Blog by Blogger Jepara

Mebel Jepara