Home > tutorial > cara membuat-halaman-splash-screenlanding

cara membuat-halaman-splash-screenlanding

Bagikan ke Teman! :

cara membuat-halaman-splash-screenlanding
Ini NIh demonya : KLIK

Klau kira-kira tertarik langsung aj yuk !!

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

Langkah 1 : Untuk menutup semua header, body, footer dan widget pada halaman
dengan menggunakan fungsi b:if-b:else

cari kode <body>
copy kode di bawah letak di atas
kode <body>

<b:if cond='data:blog.url == data:blog.homepageUrl'> <body> <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/> </div> </div> <div id='kedua' style='display:none'> <div style='text-align: center'> <div class='h1'>BUKAN DISINI :D</div> <center><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGzAnn8Bj4wed4NSZAB5yMJettLNiTsRekr_0bs1IUiFviar4NK7ADvOYbVIRcnYPJ4j8E-5Yz3Vzxnck6YurwJuwrFzCnpBPagAm3SLakKomfNdeNgB8zt_YnD9q7RidfgiOCNahtMSya/s320/390441_329711410374006_100000054482640_1460791_860537476_n.jpg ' width='625px'/></center><br/> Dai-detected Hanya ingin berbagi </div> </div> <div id='ketiga' style='display:none'> <div style='text-align: center'> <div class='h1'>MASIH SALAH LAGI :D</div> Anda Masih Salah, Ayo Cari lagi! </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://dai-detected.blogspot.com/search/posts/default'>Silah kan masuk SOb</a></font> </div> </div> </div> </body> </body> <b:else/>

cari kode </body>
dan letak kan </b:if>
di bawah </body>

Pratinjau terlebih dahulu..
kalau berhasil save !!

Selanjutnya :
cari kode </b:skin>
copy kode berikut dan pastekan dibawah </b:skin>

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

NB :
Ganti => http://dai-detected.blogspot.com/search/posts/default
dengan nma blog sobat !

save template !!