Cara Membuat Splash Screen
Bingung juga milih judul yang cocok untuk artikel ini. Soalnya dari beberapa tutorial yang saya baca judulnya berbeda-beda. Ada yang nulis "Cara membuat Intro Image" dan Ada juga yang nulis "Cara Membuat Halaman Pembuka" dan Banyak lagi versi yang lain dan yang terakhir saya milih judul "Cara Membuat Splash Screen" Saja.
Apapun judulnya yang terpenting adalah anda harus mengetahui dulu halaman Splash Screen apa yang saya maksudkan disini. Untuk itu coba anda Klik pada menu Home pada blog ini atau langsung klikuntuk melihat contohnya.
Sekarang anda pahamkan maksud saya ?? pada saat anda masuk pada menu home atau halaman utama pada blog ini anda akan terlebih dahulu melihat sebuah tampilan dengan latar hitam dan beberapa pesan serta atribut lainnya yang berfungsi sebagai pesan serta informasi kepada pengunjung blog kita.
Untuk langkah pembuatannya ikuti tutorial berikut ini :
Langkah Pertama.
Bagi anda yang paham HTML dan CSS Langkah pertama yang harus anda lakukan adalah membuat sebuah design halaman pembuka yang akan anda tampilkan. Anda Dapat menggunakan HTML dan ditambah sedikit Style dengan menggunakan CSS atau mencantumkan beberapa link/tautan sebagai informasi tambahan seperti profil Faebook, Twitter, Google Plus Atau yang lainnya.
Nah ! bagi anda yang tidak paham atau hanya sedikit mengerti tentang HTML, silahkan anda design gambar dengan ukuran 400px X 400px yang nantinya akan kita gunakan sebagai halaman pesan pembuka yang akan dimasukkan kedalam template blog milik anda. Setelah gambarnya selesai didesign uploadlah gambar kehosting gambar milik anda.
Langkah Kedua
Saya Asumsikan bahwa anda telah selesai dengan langkah pertama. Selanjutnya buka menu Edit HTML pada akun blog Anda. Untuk Langkah ini saya juga asumsikan bahwa anda sudah paham apa yang saya maksud.
jangan lupa tandai pada kolom Expand Widget Templates.
kemudian cari kode berikut :
<body>
Untuk memudahkan tekan kombinasi tombol CTRL + F kemudian salin kode diatas kedalam kolom pencarian.
Letakkan Kode Berikut Persis Dibawah Kode <body>
<div id='intro'> <div align='center'> <p style='padding:50px 0 20px;'> <a expr:href='data:blog.homepageUrl + "search/label/?max-results=4"'> <img border='0' height='240' src='url Gambar' width='240'/></a> </p> <p style='padding-top:5px;font-size:18px;font-weight:bold;color:#fff;'> <a expr:href='data:blog.homepageUrl + "search/label/?max-results=4"'> skip intro or login to blog</a></p> </div> </div>
Perhatikan baik-baik :
- Ganti Tulisan url Gambar dengan url gambar yang telah anda upload.
- Tulisan yang berwarna Kuning adalah ukuran gambar anda. "Height= tinggi gambar" dan "width="Lebar Gambar" silahkan disesuaikan dengan gambar milik anda.
- Tulisan yang berwarna merah adalah jumlah artikel atau postingan yang akan ditampilkan pada saat anda masuk kedalam halaman blog. sesuaikan dengan keinginan anda.
- Tulisan yang berwarna hijau adalah penunjuk untuk memasuki halaman blog anda. Silahkan diganti dengan kata-kata lain sesuai dengan keinginan anda
- Untuk Anda yang membuat tampilan dengan menggunakan HTML dan CSS, anda dapat mengganti <img border='0' height='240' src='url Gambar' width='240'/> dengan script HTML yang telah anda buat. Tulisan skip intro or login to blog juga dapat anda ganti dengan url gambar tanpa disertai Link.
Langkah Ketiga
cari kode berikut ini
<b:includable id='main'>
Kemudian Letakkan Kode berikut tepat dibawah kode <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <style> #navbar-iframe{display:none; height:0; visibility:hidden} body { background-color: #000000; background-image: none; } #intro { text-align:center; margin:auto; padding:auto; } #outer-wrapper{display:none;} </style> <b:else/> <style>#intro{display:none;}</style> </b:if>
Kode yang berwarna merah adalah warna latar dari tampilan pesan pembuka.
Langkah Keempat
ini merupakan langkah terakhir dan terpenting. karena jika kode ini tidak dimasukkan maka semua postingan anda akan selalu menampilkan pesan ini.
cari kode ini
]]></b:skin>
kemudian masukkan kode ini tepat diatasnya
body#layout #intro {display:none;}
Demikian Artikel Cara Membuat Splash Screen... Jika Masih Ada pertanyaan silahkan berkomentar !
| Terima Kasih Telah Berkunjung |
 |
4 Comments