Cara Membuat Halaman Sambutan / Intro
Cara membuat welcome page di blogger. Halaman Intro / Sambutan di blogspot. apa yang di maksud dengan halaman intro? secara sederhana adalah sebuah halaman baru dimana saat ada orang membuka blog tidak langsung menuju halaman utama / Home tetapi terlebih dahulu di suguhkan halaman palarel yang bisa kita modifikasi sesuai dengan keperluan. Pada umumnya adalah ucapan welcome to my blog, welcome to my life, dan ucapan selamat datang lainnya. Halaman replika ini ada yang berupa gambar saja, animasi, sampai ada yang mengunakan flash. dan ini semua tergantung anda dan kemampuan yang anda miliki.
Namun Sebelum anda memulainya terlebih dahulu anda harus tau apa kelebihan dan kekurangan dari tutorial membuat halaman sambutan :
1. Kelebihan Script Intro Blogger
Script ini menggunakan cookie sebagai pengingat, sehingga karekteristiknya hampir mendekati sebuah intro sungguhan seperti pada website-wbsite tertentu.
2. Kekurangan Script Intro Blogger
Kekurangan yang dirasa cukup mencolok adalah intro ini menggunakan script untuk menutup halaman utama yang dalam kenyataannya halaman blog anda yang lebih dahulu di load daripada script intro yang sedikit lambat untuk di load, sehingga halaman yang terbuka lebih dahulu adalah halaman blog anda kemudian beberapa saat kemudian disusul dengan halaman intro. Ini tentunya terbalik dengan tujuan utama dari sebuah intro.
Silahkan ikuti langkah-langkah berikut ini :
1. Silahkan login ke blogger.
2. Klik Rancangan.
3. Klik tab menu Edit HTML
4. Jangan lupa untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
5. Silahkan cari kode berikut pada template anda : ]]></b:skin>
6. Silahkan copy, lalu paste kode berikut diatas kode ]]></b:skin>
7. Silahkan cari kode berikut pada template anda : </head>
8. Silahkan copy, lalu paste script berikut diatas kode </head>
9. Cari kode berikut pada template anda <body>
10. Copy, lalu paste kode berikut dibawah kode <body>
NB : - Gantilah tulisan berwarna Hijau dengan link gambar, animasi atau flash.
- Ganti tulisan warna orange dengan katakata yang ingin di minculkan.
11. Klik tombol SIMPAN SETELAN.
12. Silahkan lihat hasilnya.
Catatan :
1. Efek tersebut berlaku apabila komputer yang anda gunakan tidak mematikan fungsi cookie karena script yang digunakan menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.
2. Script diatas hanyalah sebuah contoh saja, anda dapat berbagai variasi tampilan dengan memodifikasi bagian CSS.
3. 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.
Namun Sebelum anda memulainya terlebih dahulu anda harus tau apa kelebihan dan kekurangan dari tutorial membuat halaman sambutan :
1. Kelebihan Script Intro Blogger
Script ini menggunakan cookie sebagai pengingat, sehingga karekteristiknya hampir mendekati sebuah intro sungguhan seperti pada website-wbsite tertentu.
2. Kekurangan Script Intro Blogger
Kekurangan yang dirasa cukup mencolok adalah intro ini menggunakan script untuk menutup halaman utama yang dalam kenyataannya halaman blog anda yang lebih dahulu di load daripada script intro yang sedikit lambat untuk di load, sehingga halaman yang terbuka lebih dahulu adalah halaman blog anda kemudian beberapa saat kemudian disusul dengan halaman intro. Ini tentunya terbalik dengan tujuan utama dari sebuah intro.
Silahkan ikuti langkah-langkah berikut ini :
1. Silahkan login ke blogger.
2. Klik Rancangan.
3. Klik tab menu Edit HTML
4. Jangan lupa untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
5. Silahkan cari kode berikut pada template anda : ]]></b:skin>
6. Silahkan copy, lalu paste kode berikut diatas kode ]]></b:skin>
#intro{background:#CAD8C9 url(http://i254.photobucket.com/albums/hh98/Fharo_Ar/c068fd7a.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
}
Ganti tulisan link berwarana hijau di atas dengan link latar belakang yang ingin di tampilkan.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
}
7. Silahkan cari kode berikut pada template anda : </head>
8. Silahkan copy, lalu paste script berikut diatas kode </head>
<pre><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></pre>
//<![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></pre>
9. Cari kode berikut pada template anda <body>
10. Copy, lalu paste kode berikut dibawah kode <body>
<div id='intro'><div class='welcome'>Welcome to faropunya.blogspot.com</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i254.photobucket.com/albums/hh98/Fharo_Ar/c068fd7a.jpg' title='Go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i254.photobucket.com/albums/hh98/Fharo_Ar/c068fd7a.jpg' title='Go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>
NB : - Gantilah tulisan berwarna Hijau dengan link gambar, animasi atau flash.
- Ganti tulisan warna orange dengan katakata yang ingin di minculkan.
11. Klik tombol SIMPAN SETELAN.
12. Silahkan lihat hasilnya.
Catatan :
1. Efek tersebut berlaku apabila komputer yang anda gunakan tidak mematikan fungsi cookie karena script yang digunakan menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.
2. Script diatas hanyalah sebuah contoh saja, anda dapat berbagai variasi tampilan dengan memodifikasi bagian CSS.
3. 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.
Komentar
Posting Komentar