Membuat Halaman Splash Screen Page di Blogspot

Selamat malam sobat blogger, ane jadi inget sama template ane yang lama yang memakai halaman Splash Screen, tapi sekarang udah ganti template tapi sobat masi bisa kok lihat demonya >> Disini kalo sobat berminat langsung aja ke cara pembuatannya

login blogger
rancangan, edit html
dan ikuti langkah langkah di bawah ini

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'> <body> Kode HTML Welcome Page Disini </body> <b:else/>

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.
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/djasrieman-soekrie' target='_blank' title='My Facebook Profile'>FACEBOOOK</a> | <a href='http://twitter.com/' 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://i1089.photobucket.com/albums/i344/djasrie/kongkang/kongkang.png ' width='625px'/></center><br/> Cyber-jm ingin berbagi </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://cyber-jm.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!
Semoga bermanfaat

Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Unknown, Published at 07.25 and have 3 komentar

[./Cyber-JM]

Membuat Halaman Splash Screen Page di Blogspot

3 komentar:

Categories