17 September 2012
Sobat, bisa jadi Anda sudah tidak asing lagi dengan rangkaian kode JavaScript 'alert' yang dapat digunakan untuk membuat ucapan selamat datang saat blog dibuka. Namun tahukah Anda bahwasanya penggunaan script tersebut untuk membuat pesan atau ucapan selamat datang pada sebuah blog, bisa jadi malah merepotkan pengunjung karena tiap kali halaman atau artikel dibuka maka pesan atau ucapan selamat datang akan ditampilkan dan tiap kali pesan ditampilkan maka pengunjung pun harus mengeklik tombol ‘OK’ untuk menghilangkan pesan yang dimaksud.
Nah, berbicara mengenai pembuatan ucapan selamat datang, sebenarnya ada teknik lain yang lebih efektif karena tidak akan merepotkan pengunjung untuk selalu mengeklik tombol ‘OK’ ketika pesan ditampilkan saat membuka halaman atau artikel pada sebuah blog. Bahkan apabila loading atau penayangan blog yang dimaksud termasuk lambat, maka tampilan pesan yang dimunculkan dengan menggunakan teknik berikut ini dapat dijadikan sebagai indikator proses penayangan konten dan kemudian pesan secara otomatis akan hilang ketika proses penayangan blog telah selesai.
Selanjutnya untuk membuat ucapan selamat datang atau pesan pembuka sebagai penanda proses penayangan halaman, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.
Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di atasnya.
.loading-frame { height: auto; overflow: hidden; width: 250px; padding: 5px; border: 1px solid #666666; color: #000000 !important; text-align: center; font: bold 13px Arial,Tahoma,Helvetica,FreeSans,sans-serif; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #f3f3f3; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f3f3f3), color-stop(1, #ffffff) ); background: -moz-linear-gradient( center top, #f3f3f3 30%, #ffffff 70% ); }
Keterangan:
Rangkaian kode CSS tersebut digunakan untuk mengatur warna dan ukuran bingkai, latar, serta huruf yang digunakan pada tampilan pesan. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka silakan lakukan kustomisasi seperlunya.
Ketiga, sisipkan rangkaian kode berikut ini tepat di atas kode </head>.
<script type="text/javascript" language="javascript"> function tampilkanpesanpembuka() { if (document.getElementById){ document.getElementById('pesanpembuka').style.visibility='hidden'; } else { if (document.layers){ document.pesanpembuka.visibility = 'hidden'; } else { document.all.pesanpembuka.style.visibility = 'hidden'; } } } </script>
Keempat, sisipkan kode onLoad='tampilkanpesanpembuka();' pada <body>. Sebagai contoh perhatikan penyisipan kode tersebut pada <body> yang terdapat dalam template standar (bawaan) Blogger di bawah ini.
Jika <body> yang digunakan dalam template standar (bawaan) Blogger adalah <body expr:class='"loading" + data:blog.mobileClass'>, maka setelah kode yang dimaksud disisipkan ke dalamnya akhirnya akan menjadi seperti yang tampak pada rangkaian kode di bawah ini.
<body expr:class='"loading" + data:blog.mobileClass' onLoad='tampilkanpesanpembuka();'>
Kelima, sisipkan kode berikut ini tepat di bawah kode <body> (seperti yang dimaksud pada langkah keempat).
<b:if cond='data:blog.isMobile'>
<b:else/>
<div id='pesanpembuka' align='center' style='width: 100%; top:300px; white-space: nowrap; position: fixed; z-index: 100;'> <div class='loading-frame'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAqZw8saElqbZpbs8nRsdIUWx3uWUKrOXy9SnruZVWhyphenhyphendwOs9XWHRAEUFUhINABoGSkndezl2LuSY16A4bWBIPr1SrOB1EupeTwDTcwC5AChI5ZroSx4ikgwTa7nyYnv_nwZSdj_FqFJs/s800/Proses%2520Loading.gif'/><br/> SEDANG MEMUAT KONTEN HALAMAN<br/> SILAKAN TUNGGU </div>
</div> </b:if>
Keenam, simpan template.
Dengan menggunakan teknik tersebut akhirnya ketika blog dibuka dan mulai dilakukan proses penayangan (loading), secara otomatis pesan (seperti yang tampak pada gambar di atas) akan ditampilkan dan saat proses penayangan konten halaman telah selesai maka secara otomatis pula pesan yang dimunculkan sebelumnya akan hilang atau disembunyikan.
Semoga berguna, bermanfaat, dan selamat mencoba mengimplementasikan pada blog Anda.
Salam.
Terdapat 28 komentar pada artikel ini ▶
Sob, Banner sobat sudah saya pasang di web saya, tapi di tambahkan /peyimpanan.html
gak jadi :(
@Indra KrisnadiMaksudnya di tambahkan /peyimpanan.html gimana ya Sob? Tadi saya sudah bolak-balik ke blog Sobat tapi tidak kunjung menemukan bagian yang dimaksud /peyimpanan.html
@mencintai dengan sederhanaKarena Sobat menggunakan kustom template, maka coba script pada langkah keempat disisipkan dalam kode [body class='loading']
Keterangan:
[ => <
] => >
AYAHE MELAkurang pahamgak ada body class='loading'
@AYAHE MELA: Maksud saya ditambahkan /penyimpanan.html setelah alamat blog saya. Saya sengaja menyimpan disana karena agar tidak menggangu pembaca.
@Indra KrisnadiMalah muncul tulisan kayak gini Sob, "Sorry, the page you were looking for in this blog does not exist. , hik hiks :(
Gimana kalau Sobat tulis aja URL-nya secara lengkap. :)
@mencintai dengan sederhanaAgar lebih mudah untuk memahami, maka coba cari kode yang diawali degan [body aja.
Karena biasanya rangkaian kode yang di belakangnya memang tidak selalu sama.
Nah, apabila kode yang diawali [body sudah ketemu, maka tambahkan script dari langkah keempat pada rangkaian kode tersebut, dan script dari langkah kelima diletakkan di bawahnya.
Keterangan:
[ => <
Sekian dan semoga dapat membantu. :)
manteb gan
@AYAHE MELA: URL nya: http://teknoworldsite.blogspot.com/p/peyimpanan.html
Maaf ya Sob kalau merepotkan.
@AYAHE MELA: URL nya: http://teknoworldsite.blogspot.com/p/peyimpanan.html
Maaf ya Sob kalau merepotkan.
@BaguspostTerimakasih Sobat.
salam kenal.
Salut saya sama admin, sangat kreatif membuat tips, betul-betul menguasai kode template blogspot...!! saya banyak menggunakan tips disini di blog saya, salah satunya tentang modifikasi kolom komentar, sukses selalu bro.
Salam.
@Ahmad BakriTerimakasih dan salam kenal balik Sobat. :)
Saya turut gembira apabila artikel yang saya terbitkan di blog ini dapat berguna dan bermanfaat bagi orang lain.
tolong kunjungi blog saya burhanhacker.blogspot.com dan beri komentar diblog saya agar saya bisa membuat blog say lebih bagus dan salam kenal
@Muhammad BurhanuddinOke Sobat. Sekarang juga saya akan menuju ke 'TKP' :)
trima kasih atas ilmunya bang, sangat bermanfaat sekali bagi blog saya. blog saya semakn cantik. di tunggu kunbalnya ya bang di andryemos. :D
@Andry P.LOke. Sama-sama Sobat.
Terimakasih balik atas kunjungan dan berkenannya mengeposkan komentar dalam artikel ini. :)
KOK GAK MAU HILANG TULISANNYA MAS..?
@Ady Muhammad RiadiApabila pengerjaannya sudah benar-benar sesuai dengan langkah-langkah tersebu di atas, maka dapat dipastikan pesan pembuka akan hilang secara sendirinya, Sob.
Namun perlu diingat bahwa tampilan pesan pembuka akan benar-benar dilang setelah proses penayangan halaan telah selesai sepenuhnya.
Mas saya sudah menerapkan semua yang di uraikan hanya langka keempat yang blum diterapkan karena tidak menemukan kode yang dimaksud....begitu juga dengan kode [body ini juga tidak ada mas...kiranya ada solusi lain? terimakasih bantuannya...!
@gio akramCoba cermati lagi templatenya, Sob. Karena dalam setiap template pasti terdapat kode body.
Akan tetapi karena rangkaian kode di belakang body kadangkala berbeda untuk masing-masing template, maka untuk mempermudah pencarian, coba gunaka kata<body
Semoga dapat membantu. :)
mas, kok di blog saya layarnya gak item (screen saver) dulu kayak blognya mas? cuma muncul loading box tu aja...
@rxoroxrSaya rasa tidak apa-apa kok, Sob. Sebab proses penayangan halaman memang cukup ringan.
Kalau untuk blog ini, penayangan konten kan memang agak lambat. Jadi ketika pesan pembuka sudah ditampilkan, konten halaman belum juga dapat ditayangkan sepenuhnya.
Hatur nuhun postinggya sudah berhasil.
minta koreksi untuk blog ku (mariefhusaeniar1996.blogspot.com)
Terima Kasih
@M Arief Husaeni ARSama-sama dan terimakasih balik atas berkenannya meninggalkan jejak dengan cara mengeposkan komentar dalam artikel ini, Sob. :)
Oh ya, btw ternyata background blog Sobat dapat diganti-ganti ya.
wah keren om, makasih udah share!
Mastutorial
@Mas Rio Silakan dicoba Sob. Semoga saja tidak menjadikan loading blog makin lambat, akan tetapi dapat menjadikan blognya makin keren. :)