Catatan Galung: Buat Halaman Intro Di blogger

Ada beberapa orang yang menanyakan ke Kang Rohman, bisakah di blogger membuat halaman intro seperti pada website-website tertentu? jawabannya mungkin bisa saja kali, cuma terus terang kang Rohman belum pernah mencobanya.

Apa yang dimaksud intro disini? mungkin yang dimaksud oleh si penanya adalah pada website-website tertentu, 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.

Secara umum, blog diblogger agak sulit untuk membuat halaman intro, namun bukan berarti tidak mungkin. Terkait masalah intro ini, pernah juga beberapa blogger membahasnya, antara lain adalah teman kang Rohman yaitu Kang Jaloe, dalam blognya diterangkan bagaimana mengakali agar diblogger bisa dibuat sebuah intro.

Tertarik akan topik ini, kang Rohman mencoba untuk membuat sebuah halaman intro yang bisa dipakai di blogger. Dengan bermodalkan sebuah script iklan dari dynamicdrive, dan tentu saja terjadi modifikasi dibeberapa titik, akhirnya halaman yang mirip intro bisa juga dibuat. Yang penasaran mungkin bisa melihat halaman demonya disini.

Jika sesuai skenario, pada halaman tersebut anda disuguhi sebuah halaman intro berupa ucapan selamat datang dan sebuah animasi gif dari winnie the pooh, dan untuk melihat halaman asli dari blog tersebut anda bisa klik tulisan “Go to Homepage” atau pada animasi winnie the pooh nya.

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.

Ah kang Rohman terlalu banyak basa basi, langsung ke tutorial pemasangan script tersebut dong? Eith, sabar dulu dong. Kalau orang dewasa bilang perlu ~~foreplay~~ agar terasa lebih nikmat…. upsss itu sih untuk tujuh belas tahun keatas Not worthy

Tapi jika terlalu kepanjangan jadi bosen juga yah, mending langsung aja deh ke tutorial bagaimana cara memasang script intro ke blogger.

Cara Pasang Script Intro Ke blogger

Silahkan ikuti langkah-langkah berikut ini :

Silahkan login ke blogger dengan ID anda.
Klik Rancangan.
Klik menu Edit HTML
Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
Silahkan cari kode berikut pada template anda :
```
]]></b:skin>
```

Silahkan copy, lalu paste kode berikut diatas kode ]]></b:skin>

#intro{
  background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyu755gReeGqgfc9IMrQXfPRYXEr0DLTMkCNtWl4Uf9bs-5fUS4XgpCL6cub7TGP4Dpzm8ck_tDyrH04EhV7e2e_kKSVkCX43mamBQq8e8ItkJtSQtZsiZ4f8Qsm1c01Anso9gXCMoa7M/) 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
  }

Silahkan cari kode berikut pada template anda :
```
</head>
```

Silahkan copy, lalu paste script berikut diatas 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>

Cari kode berikut pada template anda <body>

Copy, lalu paste kode berikut dibawah 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>

Klik tombol SIMPAN SETELAN.

Silahkan lihat hasilnya. Selesai.

Penjelasan

Script diatas hanyalah sebuah contoh saja, anda dapat berbagai variasi tampilan dengan memodifikasi bagian CSS.

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.

Kelebihan Script Intro Blogger

Script ini menggunakan cookie sebagai pengingat, sehingga karekteristiknya hampir mendekati sebuah intro sungguhan seperti pada website-wbsite tertentu.

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.

Walaupun demikian, ini tentunya bisa jadi sebuah ide atau inspirasi bagi anda yang mahir tentang pemrograman untuk menciptakan script intro yang lebih ringan di load ataupun cara-cara lain untuk membuat sebuah halaman intro yang lebih mantap surantap Big Grin .

Akhir Kata

Semua tulisan diatas hanyalah sebuah iseng dari sebuah kesenangan kang Rohman belaka, oleh karenanya tentu banyak kekurangan disana sini yang tentunya anda perlu memaklumi atas kekurangan tersebut.

Source and Credits

Original script - dynamicdrive

Animated gift - Graphics comments hi5

Catatan Galung

Jumat, 06 Agustus 2010

Buat Halaman Intro Di blogger