Membuat Intro Page Pada Blogspot

Apa itu Intro Page ?
Intro Page merupakan sejenis tampilan yang nantinya akan muncul pertama kali di halaman utama (home) blog kita. (defenisi menurut saya) untuk lebih jelasnya silahkan lihat previewnya di ICT SMANSA's BLOG

Pada halaman tersebut anda disuguhi sebuah halaman intro berupa ucapan "welcome to my blog" dan sebuah animasi gambar "Selamat Datang" , dan untuk melihat halaman asli dari blog tersebut anda bisa klik tulisan “Go to Homepage” atau pada animasi gambar "Selamat Datang".

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.

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 ]]></b:skin>

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

5. Copy kode dibawah ini, lalu paste kode tersebut dibawah kode <body>

<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='http://students.ou.edu/S/Budi.Santosa-1/selamat_datang2.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://khamardos.blogspot.com/2010/08/membuat-intro-page-pada-blogger.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

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

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

Thank To...
Saya sangat berterima kasih sekali kepada Kang Rohman, karena tutor ini saya peroleh dari beliau. Saya memposting ini ke blog saya karena saya menganggap tutor ini sangat menarik (karena sangat langka dan susah dicari di google) dan terkesan unik sekali !!! Dan sekali lagi tujuan saya memposting ini hanya untuk berbagi bukan hanya untuk maksud yang g berguna... (hahahah... g ngerti mksudnya). Sekali lagi Thanks untuk Kang Rohman.

Selamat Berkreasi Yach Sobat

Jangan Lupa Komentarnya


----------------------------------------------------------------------------------------------

Sebagai Sajian Penutupnya, berhubungan akan memasuki bulan ramadhan, Saya Beserta Keluarga ingin mengucapkan Marhaban Ya Ramadhan, Mohon maaf atas segala kekhilafan dan kesalahan saya selama ini, karena tidak ada manusia yang sempurna di dunia ini. Samua manusia pasti selalu dihantui oleh dosa-dosa baik yang sengaja maupun tidak sengaja.

Selamat Menunaikan Ibadah Puasa, Semoga Amal dan Ibadah Kita Diterima Oleh Allah SWT, dan Manfaatkanlah Bulan Ramadhan Tahun Ini Sebagai Motivasi dan Penyemangat kita Untuk Berbuat Lebih Baik Lagi !!!

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Tampilan Halaman Label Hanya Judul Postingan
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Tutorial Membuat S3slider Images Show
• Akhirnya, Bisa Juga Join Ke Google+

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tampilan Halaman Label Hanya Judul Postingan
• Tutorial Membuat S3slider Images Show
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Tab View Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Tooltips Pada Sebuah Objek
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin
• Membuat Rate Widget Pada Blog