Mirat: Cara membuat welcome page yang unik di blogger

Cara membuat welcome page yang Unik 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.
contoh halamannya bisa seperti gambar di bawah ini

sebenarnya membuat halaman intro di blogger sedikit sulit, berbeda dengan wordpress dan blogsome dengan php nya yang jauh lebih mudah. namuan bukan berarti hal itu tidak kita terapkan di blogspot, ternyata bisa loh! dengan sedikit memodifikasi script dari blognya kang Jaloe.

Sobat informasi maya disini kita akan melakukan modifikasi dengan bermodalkan sebuah script iklan dari dynamicdrive, dan tentu saja dengan modifikasi dibeberapa titik, dengan begitu halaman yang mirip intro bisa juga dibuat. Yang penasaran mungkin bisa melihat halaman demonya disini
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.

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.
Bagaimana Cara Membuatnya ?
Ok, Jika Tidak mau pikir panjang, ayo dan simak pembuatannya di bawah ini !!!
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
Back up Template dengan cara Mengklik : Download Template Lengkap
Setelah itu, beri tanda cek pada Expand Widget Templates.

3. Copy kode CSS dibawah ini, dan paste diatas kode ]]>

#intro{
background:#FFFFFF 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
}

Note : Pada kode yang berwarna merah, merupakan warna background intro tersebut. Anda bisa menggantinya dengan warna yang sesuai/kesukaan anda. Untuk melihat kode warna Css silahkan check di KODE WARNA HTML

4. Silahkan copy, lalu paste script berikut diatas kode

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

5. Copy kode dibawah ini, lalu paste kode tersebut dibawah kode

<div id='intro'><div class='welcome'><font size='7'>Welcome to my blog</font></div>
<a href='/' onclick='closebar(); return false'><img alt='go to my homepage' height='85' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglY-gcxHR9uFn1VdrHQS4Bb2twiDBvpnQwb2PoHFY_awfpGE-mEILSADWNdbDh2tFSjoNOsWWy7cIOIpAwmXov9Eq61m3g01KRMMNK16LrTc7zhS1qsrw6H6Qycbyr6TDp_IIzYExtqpj2/s320/intro+page.JPG' title='go to my homepage' width='700'/></a>
<div class='gohome'><a href='/' onclick='closebar(); return false'>Go to homepage</a></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>Want this Intro <a href='http://www.mirat.co.cc/2011/01/cara-membuat-welcome-page-yang-unik-di.html' target='_blank' >Click Here</a>
</div>

Note : Anda juga dapat memodifikasi kode tersebut sesuka anda
- : Ubah Dengan Kata-Kata Anda
- : Sebuah alamat (url) gambar, ganti dengan gambar yang anda inginkan.

6. Lalu klik Save/Simpan

sekian dulu Tips dan trik Cara membuat welcome page yang Unik di blogger dari Mirat