Cara membuat welcome page di blog.Halaman intro / sambutan di blogspot.Apakah yang anda faham tentang halaman intro?.Halaman intro adalah sebuah halaman baru dimana saat pengunjung memasuki blog, secara tidak langsung menuju halaman utama, tetapi terlebih dahulu di dahului halaman intro yang boleh kita modifikasikan sesuai dengan keperluan blog kita
Pada umumnya adalah ucapan welcome to my blog, welcome to my life dan laen2.Halaman replica ini ada yang berupa gambar, animasi dan flash..Semuanya bergantung atas kemampuan yang anda miliki.
Langkah-langkah memasang halaman intro.
1.Sign blog anda.
2.klik Design.
3.Klik Edit HTML.
4.Cari kod ini ]]></b:skin> (untuk memudahkan pencarian tekan ctrl+f).
5.Copy kod dibawah ini.
#intro{background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQUy30em6vssnRk3eB8R5IEe354v_zXGy154XhHUPGz4X3Al3OwxBN-iTfvenRhE7KI5dqGAnkBFYx61b2rbymAiUyqnnTDKriBKRFJ491e5hKV2X3twPP1PSe7MILGLH8L3JtYwMweRO/s1600/templatemo_bg.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
}
Nota : Gantikan perkataan yang berwarna merah dengan url image yang anda kehendaki.
6.Seterusnya cari kod ini </head>.
7.Copy kod dibawah ini, lalu paste diatas kod </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>
8.Berikut cari kod ini <body>.
9.copy kod dibawah ini,lalu paste dibawah kod ini <body>.
<div id='intro'><div class='welcome'>Welcome to kocomon.blogspot.com</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMoKzvauw_lozJRDCIZIKwYWmaFvLjOZ353ka15uMVLjiUud8vr1HAAPzDJjXHMQ6hlBWnPdCQTNWUBgeHPco75zJM8XFwEW0E2gMtPPWr1RFV2tmAJ5RhEWhIel0yzWBwlB9vpDMwD5A/s1600/gaara-y-naruto-shippuden.gif' title='Go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>
Nota :- - Gantikan tulisan berwarna biru dengan link gambar, animasi atau flash.
- Gantikan tulisan warna hijau dengan kata-kata mengikut kehendak anda.
10.Klik Save template.
11.Lihat hasilnya.
Selamat Mencuba...
Tiada ulasan:
Catat Ulasan