Cara Membuat Halaman Intro Di Blogger

Cara Membuat Halaman Intro Di Blogger-Halaman intro yang saya maksud di sini adalah sebuah halaman yang muncul sebelum halaman utama blog. Biasanya halaman ini berisi ucapan selamat datang, navigasi, bahkan tampilan slide maupun flash.

Secara umum, (menurut sumber yang saya baca) sedikit sulit untuk membuat halaman intro di blog yang berhosting di blogspot.com. Tapi jangan khawatir sedikit sulit bukan berarti tidak mungkin bukan? Setelah sekian lama searching kesana kemari,
akhirnya saya menemukan tutorial mengenai cara
membuat atau menampilkan halaman intro di blogger.com.
Dengan bermodal script iklan dari Dynamicdrive.com, dan tentu saja telah terjadi modifikasi dibeberapa bagian kode, akhirnya sebuah halaman yang mirip intro bisa Anda tampilkan.

Jika tidak terjadi masalah, pada halaman tersebut anda akan melihat sebuah halaman intro yang berisi ucapan selamat datang dan sebuah animasi gif Winnie the pooh, sementara itu untuk melihat halaman asli dari blog tersebut, Anda bisa klik tulisan "Go to Homepage" atau langsung klik gambar animasinya.

Jika Anda telah masuk ke halaman aslinya, Anda tidak akan melihat kembali halaman intro tersebut meskipun Anda telah mereload halamannya, atau bisa dikatakan Anda tidak akan diganggu lagi oleh kehadiran halaman intro tersebut, halaman ini akan muncul kembali jika Anda telah menutup browser yang Anda gunakan, kemudian mengunjungi kembali blog tersebut. Efek dari halaman intro ini akan berlaku jika komputer yang Anda gunakan tidak menonaktifkan fungsi cookie karena script yang digunakan akan meninggalkan jejak di cookie komputer sebagai pengingat.

Jika Anda tertarik, berikut tutorialnya.

Cara Membuat Halaman Intro Di Blogger

Langkah 1: Backup Template
Dari menu Dashboard masuk ke tab menu Tata Letak | Edit HTML | Download Templat Lengkap sebagai file XML kemudian simpan ke harddisck Anda. Jika nanti terjadi kesalahan pada saat memodifikasi kode template, Anda cukup mengupload ulang template cadangannya.

Langkah 2: Menyisipkan Kode CSS
Letakkan potongan kode CSS berikut di atas kode ]]></b:skin>

/* Page Intro Blogger
-------------------------------*/

#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
  }

Langkah 3: Menyisipkan Kode JavaScript
Sisipkan kode JavaScript berikut 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;
 functinn 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>

Langkah 4: Memodifikasi Kode Template
Sisipkan kode berikut di bawah kode <body>:

<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://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif' title='go to my homepage'/></a>
<div class='gohome'>
<a href='' onclick='closebar(); return false'>Go to homepage</a>
</div>
</div>

Langkah 5: Simpan Template
Simpan pengaturan template dan lihat hasilnya.

Selamat mencoba semoga berhasil.