Tutorial halaman intro blog

Tutorial halaman intro blog

Baca Juga

Sekarang ini, kelihatan ramai yang membuat paparan halaman intro sebelum masuk ke blog sepenuhnya. Ia agak menarik dan memberi ruang kepada blog untuk loading. Dulu zaman website, loading intro ini pernah popular dan sekarang zaman blog pula untuk menggunakannya.

Untuk memasang paparan intro ini, sila ikuti tutorial berikut:

1. Paste code di bawah sebelum kod ]]></b:skin>

#intro{
  background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWf8s9x9Js-9HZRJqYS5TV4A5ulVCvobp_eb1Si4ZwzftIP-SKePKBeFwmxMRnI2iiocWuq5EtdBlN_3lWNnjjzAubHYBpfkElqXboMawlq6qVJqqxMAb1xgfWqyWzAlJOFXKk404kxkY/) 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
  }

2. Paste kod di bawah sebelum </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.gnesop.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>

3. Paste kod di bawah selepas <body>

<div id='intro'><div class='welcome'>Selamat Datang</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI1-ijgoYPoSs0oGZGgP0N6Qouc-Dpu17PbsF0floTz3Y6B2cJVkdb0PoHDF2SxVn3zqAvDobRoAkf1NVNvPFB-Fm7-LXCcIa91VBxFChPmet08hZ1O9dbSpHQezMcmeBwLeAHX9rfAIo/s1600/welcome.gif' title='go to my homepage'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Lawat blog</a></div>
</div>

4. Simpan. Siapppp....! :)
Anda boleh mengubah gambar dan perkataan mengikut kehendak dan kesesuaian [tulisan biru di atas].

Selamat mencuba...