Halaman khusus ini dapat menambah keprofesionalan desain blog anda dan dapat digunakan dalam beragam keperluan, seperti toko online yang ingin menunjukkan program promonya, blog sosial yang ingin pengunjungnya wajib mengisi polling, dlsb.
Baiklah, share tutorial kali ini saya mulai dengan 3 poin utama yakni: Menggunakan kode b:if-b:else untuk menutup halaman utama blog sesungguhnya dengan halaman khusus/welcome page; Menyiapkan HTML, CSS, dan/atau JS untuk halaman welcome page; Mengganti semua link menuju halaman beranda menjadi http://namablog.blogspot.com/search/posts/default.
Sebagai penghilang rasa penasaran, anda dapat melihat demonya di Welcome-Page blog ini (http://www.wahyuputra.web.id) atau di sini (http://testdrivetemplate.blogspot.com).
Mari kita saksikan bersama!
Baik kita mulai langkah demi langkah membuat Welcome Page/Landing Page/Splash Screen yang keren untuk blogspot anda. Template yang saya pakai dalam tutorialini ialah Minima. Anda dapat menyesuaikan dengan template blog masing-masing.
Langkah #1 : Menutup Semua Header, Body, Footer, dan Widget pada Halaman Beranda
Yakni dengan menggunakan fungsi b:if-b:else yang diletakkan pada sebelum dan sesudah tag body.
1> Cari kode <body> pada Edit HTML, lalu pastekan kode berikut diatasnya:
Baiklah, share tutorial kali ini saya mulai dengan 3 poin utama yakni: Menggunakan kode b:if-b:else untuk menutup halaman utama blog sesungguhnya dengan halaman khusus/welcome page; Menyiapkan HTML, CSS, dan/atau JS untuk halaman welcome page; Mengganti semua link menuju halaman beranda menjadi http://namablog.blogspot.com/search/posts/default.
Sebagai penghilang rasa penasaran, anda dapat melihat demonya di Welcome-Page blog ini (http://www.wahyuputra.web.id) atau di sini (http://testdrivetemplate.blogspot.com).
Mari kita saksikan bersama!
Baik kita mulai langkah demi langkah membuat Welcome Page/Landing Page/Splash Screen yang keren untuk blogspot anda. Template yang saya pakai dalam tutorialini ialah Minima. Anda dapat menyesuaikan dengan template blog masing-masing.
Langkah #1 : Menutup Semua Header, Body, Footer, dan Widget pada Halaman Beranda
Yakni dengan menggunakan fungsi b:if-b:else yang diletakkan pada sebelum dan sesudah tag body.
1> Cari kode <body> pada Edit HTML, lalu pastekan kode berikut diatasnya:
<b:if cond='data:blog.url == data:blog.homepageUrl'>Disini anda membuat tag body lagi. Artinya ada dua tag body dalam template, yakni tag body khusus untuk welcome page dan tag body untuk halaman blog. Biarkan saja dahulu kata-kata yang ada didalam sana, kode tsb nanti akan kita ganti dengan kode HTML Welcome Page.
<body>
Kode HTML Welcome Page Disini
</body>
<b:else/>
2> Cari kode </body> lalu pastekan kode berikut dibawahnya:
</b:if>Jika sudah tekan tombol 'Simpan Template', jika berhasil disimpan maka anda dapat mengecek blog anda menjadi halaman kosong dengan tulisan 'Kode HTML Welcome Page Disini'.
Langkah #2 : Menyiapkan kode HTML, CSS dan/atau JS untuk Halaman Khusus Welcome Page
Saya sudah siapkan halaman welcome page yang unik untuk dishare bersama. Anda dapat menggunakannya di blog anda dengan bebas. Langsung Saja:
1> KODE HTML
Cari dan Blok kata-kata 'Kode HTML Welcome Page Disini' dan ganti dengan kode berikut:
<body>
<div id='contentbox'>
<img class='preloadpic' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnprofilehover.png'/>
<img class='preloadpic' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnentrieshover.png'/>
<img class='preloadpic' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnlinkshover.png'/>
<img class='preloadpic' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksntagboardhover.png'/>
<div id='navigations'>
<div id='navpertama'>
<span onClick='document.getElementById ('maincontent').innerHTML=document.getElementById ('pertama').innerHTML' onmouseout='document.images['s1a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnprofile.png'' onmouseover='document.images['s1a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnprofilehover.png' ' style='cursor:crosshair;'>
<img alt='' border='0' name='s1a' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnprofile.png'/>
</span>
</div>
<div id='navkedua'>
<span onClick='document.getElementById ('maincontent').innerHTML=document.getElementById ('kedua').innerHTML' onmouseout='document.images['s2a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnentries.png'' onmouseover='document.images['s2a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnentrieshover.png' ' style='cursor:crosshair;'>
<img alt='' border='0' name='s2a' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnentries.png'/>
</span>
</div>
<div id='navketiga'>
<span onClick='document.getElementById ('maincontent').innerHTML=document.getElementById ('ketiga').innerHTML' onmouseout='document.images['s3a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnlinks.png'' onmouseover='document.images['s3a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnlinkshover.png' ' style='cursor:crosshair;'>
<img alt='' border='0' name='s3a' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksnlinks.png'/>
</span>
</div>
<div id='navkeempat'>
<span onClick='document.getElementById ('maincontent').innerHTML=document.getElementById ('keempat').innerHTML' onmouseout='document.images['s4a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksntagboard.png'' onmouseover='document.images['s4a'].src='http://i288.photobucket.com/albums/ll161/purple-socks/lksntagboardhover.png' ' style='cursor:crosshair;'>
<img alt='' border='0' name='s4a' src='http://i288.photobucket.com/albums/ll161/purple-socks/lksntagboard.png'/>
</span>
</div>
</div>
<div id='maincontent'>
<br/><br/>
</div>
<div id='pertama' style='display:none'>
<div style='text-align: center'>
<div class='h1'>MANA LINK MASUKNYA?</div>
Ayo coba cari linknya...<br/>
<center>
<a href='http://www.facebook.com/wahyu.putra' target='_blank' title='My Facebook Profile'>FACEBOOOK</a> |
<a href='http://twitter.com/realwahyuputra' target='blank'>TWITTER</a>
</center>
</div>
</div>
<div id='kedua' style='display:none'>
<div style='text-align: center'>
<div class='h1'>BUKAN DISINI :P</div>
<center><img src='http://katamata.files.wordpress.com/2008/08/ragamlogoipb.jpg' width='625px'/></center><br/>
Institut Pertanian Bogor adalah lembaga pendidikan tinggi pertanian yang secara historis merupakan bentukan dari lembaga-lembaga pendidikan menengah dan tinggi pertanian serta kedokteran hewan yang dimulai telah pada awal abad ke-20 di Bogor.Sebelum Perang Dunia II, lembaga-lembaga pendidikan menengah tersebut dikenal dengan nama Middelbare Landbouw School, Middelbare Bosbouw School dan Nederlandsch Indiche Veeartsen School.IPB saat ini berlokasi di Jalan Raya Dramaga, Kecamatan Dramaga, Kabupaten Bogor, Provinsi Jawa Barat.
</div>
</div>
<div id='ketiga' style='display:none'>
<div style='text-align: center'>
<div class='h1'>MASIH SALAH LAGI :D</div>
Maaf anda belum beruntung, gosok terus masih banyak kesempatan hadiah milyaran rupiah!
</div>
</div>
<div id='keempat' style='display:none'>
<div style='text-align: center'>
<div class='h1'>NAH INI DIA!</div>
<font size='4px'><a href='http://testdrivetemplate.blogspot.com/search/posts/default'>Masuk Blog</a></font>
</div>
</div>
</div>
</body>
2> KODE CSS
Disini anda akan menggunakan kode b:if lagi untuk membuat style css khusus pada halaman welcome page saja. Cari kode </b:skin> dan pastekan kode berikut dibawahnya:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
a:link, a:visited, a:active {
color: #333333;
font-family: courier new;
cursor: default;
text-decoration:none;
}
a:hover {
color: #f7f7f7;
background-color: #555555;
cursor: crosshair;
text-decoration:none;
}
body {
background-color: #ffffff;
cursor: default;
font-family: tahoma;
font-size: 9pt;
color: #222222;
line-height: 13px;
text-align:justify;
}
#mainimage {
position: relative;
float: left;
width: 631px;
top: 131px;
left: 144px;
}
#contentbox {
position: relative;
top: 131px;
left: 50%;
width: 636px;
padding-bottom: 20px;
margin-left: -318px;
margin-bottom: 30px;
overflow-x: hidden;
overflow-y: auto;
}
#navigations {
position: relative;
width: 100%;
float: left;
height: 180px;
}
#navpertama {
position: relative;
float: left;
width: 142px;
height: 163px;
padding-top: 6px;
background-color:transparent;
}
#navkedua {
position: relative;
float: left;
width: 157px;
height: 163px;
padding-top: 12px;
background-color:transparent;
}
#navketiga {
position: relative;
float: left;
width: 164px;
height: 163px;
padding-top: 0px;
background-color:transparent;
}
#navkeempat {
position: relative;
float: left;
width: 170px;
height: 163px;
padding-top: 10px;
background-color:transparent;
}
.h1 {
font-family: arial black;
font-size: 20px;
color: #333333;
line-height: 20px;
letter-spacing: 3px;
font-weight:none;
text-align:center;
text-decoration: italics;
text-transform: lowercase;
}
.preloadpic {
display: none;
}
#navbar-iframe {
display: none;
}
</style>
</b:if>
3> Kode JS
Jika welcome page anda terdapat efek khusus yang memerlukan kode javascript maka anda dapat meletakkannya sebelum kode </head>. Pada welcome page kali ini tidak membutuhkan kode javascript.
LANGKAH #3 : FINISHING TOUCH
Pada langkah kali ini anda akan mengganti semua link yang menuju halaman beranda agar ketika visitor klik halaman beranda/home yang tampil malah welcome page terus. Disini anda akan memanfaatkan link http://namablog.blogspot.com/search/posts/default. Link tersebut menampilkan halaman beranda anda lengkap dengan widget yang ada, bukan welcome page.
Jadi untuk sentuhan terakhir ini anda harus mengganti semua link yang menuju ke http://namablog.blogspot.com/ menjadi http://namablog.blogspot.com/search/posts/default
Sekarang tekan tombol 'SIMPAN TEMPLATE'. Jika masih ada yang error perhatikan lagi pada struktur tag-tag yang ada seperti <div> dengan </div>.
Selamat! Kini blog anda lain daripada yang lain!
Kini anda telah dapat membuat halaman welcome page di blogspot. Silakan berkreasi tanpa batas!
Salam blogger!
Baca selengkapnya »: http://www.wahyuputra.web.id/2011/10/membuat-halaman-splash-screenlanding.html#ixzz1qKAqhhet
mantab gan... thanks share ilmunya... ;)
makasih gan, salam dari tegalgondo, malang