Membuat Pesan Pembuka Ketika Masuk Blog

Membuat Pesan Pembuka Ketika Masuk Blog

Bola Hero Gawai

Membuat Pesan Pembuka Ketika Masuk Blog

Ketika memasuki waktu-waktu istimewa seperti memasuki bulan Ramadhan, Hari Raya Idul Fitri, Tahun Baru dan lain-lain biasanya para admin blog membuat pesan-pesan khusus untuk para pengunjungnya. Banyak macam dan cara yang digunakan untuk menampilkan pesan-pesan tersebut. Mulai dengan tulisan menggunakan marquee, dialog box, banner, dan lain-lain.

Kali ini saya akan share cara membuat pesan pembuka ketika masuk blog dengan background yang menutupi seluruh tampilan blog dengan tombol untuk menghilangkannya seperti pada gambar di bawah atau silahkan coba pada demonya.

Membuat Pesan Pembuka Ketika Masuk Blog


Bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini.

Kode CSS


#welcomebox {position:fixed;top:5%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
.welcomeclose {background:#bbb;color:#111;border-radius:3px;padding:4px 10px;text-align:center;margin:0 auto;cursor:pointer;display:inline;}
.welcomeclose:hover {background-color:#aaa}
#welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(http://1.bp.blogspot.com/-19vOQibfxVQ/U6f5ZZfFtdI/AAAAAAAAdIA/-3kB-n9pUkA/s1600/Wallpaper.jpg) no-repeat top center;}

Untuk background-nya bisa Anda ganti dengan gambar Anda sendiri, silahkan gunakan gambar dengan dimensi yang besar namun usahakan memiliki size yang kecil (di bawah 100kb) agar tidak terlalu mengganggu loading blog.


Kode HTML
Simpan tepat di bawah kode <body>


<div id='welcomeoverlay'/>
<div id='welcomebox'>
    <p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
      Saya, Adhy Suryadi selaku admin Kompi Ajaib mengucapkan<br/>
&quot;Selamat menunaikan ibadah puasa,<br/>
semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...amin.&quot;</p>
    <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading &#8594;</div>
  </div>

Untuk pesannya silahkan sesuaikan dengan keinginan Anda. Selamat mencoba...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

91 Comments Add Comment

Mantef banget nih Kang..izin mau saya simpan ya Kang...hahahyy

Balas

Hehehehe makasih mas :) silahkan dicoba :)

Balas

untuk CSS ditaruh dimana kang :)

Balas

Saya bantu jawab. Diatas kode </style> atau diatas ]]></b:skin>

Balas

Keren kang langsung di praktekin nih :-d

Balas

siip :)
terima kasih mbak atas jawabannya :p

Balas

Betul kata sis Cindy :) makasih bantuannya :)

Balas

Silahkan mas :)

Balas

Mas Adhy ..selamat menyambut bulan ramadhan untuk mas sekeluarga..moga diberkatiNYa selalu..
makasih mas ..mau dicoba juga dulu nihh...

Balas

Makasih mas Adhy..udah berhasil tuhh..

http://fortunamedia.blogspot.com/

Balas

berarti kalau mau nampilin pada bagian home saja, harus menggunakan tag kondisional ya mas :)

Balas

Sama-sama mas Helmy :) semoga kita selalu diberkati-Nya amiin.

Balas

Siipp mas :-bd

Balas

Betul sis :) gunakan tag conditional :)

Balas

iya nih, adem banget kalo udah liat sesuatu yang beraroma ramadhan, semoga diberi kelancaran dalam melaksanakan ibadah puasa-nya ya kang.

Balas

berhasil saya terapin di blog saya satunya kang :-)

Balas

Amiin kang Rian :)

Balas

keren kang :D
saya mau coba sih,
tapi masih ragu nihhh wkwkwk

Balas

Oh jadi itu nama nya tag conditional... baru tauu hehe

Balas

waduh waktu saya dateng kesini langsung comot kodenya lewat cara pintas :D hehe maaf kang :D, eh tau-taunya udah di share, terimakasih kang :)

Balas

Wah saya telat nihh .. :D
Kang apakah bisa pesan tersebut hanya mucul sekali saja ketika seseorang membuka blog kita ? Jadi seseorang jika berkeliling di blog kita tidak keluar pesan tersebut terus-menerus =D

Balas

Heehhehe ga apa2 kalau ragu jangan dulu dicoba mas :)

Balas

Hehehe ga apa-apa mas :)

Balas

Belum bisa mas, mungkin coba hanya menampilkan di homepage aja dengan tag conditional :) jadi ketika muter-muter di blog ga muncul pesannya :)

Balas

apa ada pengaruhnya gak bikin loading blog jadi lambat ...

Balas

izin praktek kang (:

Balas

wah keren banget mas... biasanya yang saya tau tanpa background mas.. tapi kali ini ada background nya jadi tambah keren hehehe :D

Balas

Tentunya ada pengaruhnya dari background image-nya mas, makanya sebisa mungkin background imagenya memiliki size sekecil mungkin :)

Balas

Silahkan mas :)

Balas

Betul mas jadi lebih bernuansa heheeh :)

Balas

wow hade pisan, asa apal tooltipna ieu teh timana-manana :D

Balas

baru check apa yang lagi update di KompiAjaib , pas banget dapet postingan keren ini. izin coba mas .. :D :ng

Balas

saya sudah lihat...saat mencoba membuka blog ini..memang keren banget...
keep happy blogging always...salam dari Makassar :-)

Balas

hahahah.. nya timana weh nya kang?wakakakak mun sok ubek2 kode mah apal wae da eta kang beben :D

Balas

nu koment di blog kang rian eta teh saha nyak!!!

Balas

ieu di bagian ieu #welcomeoverlay naha eta position sadua-dua???

Balas

Seperti di blog ini ya mas ... :D

Balas

Hehehehe terang wae kang Beben mas, si bolang tea :-bd sadaya kaubek... :-d

Balas

Silahkan mas :)

Balas

Salam juga mas Hari :) semoga sehat selalu dan makin sukses :)

Balas

Muhun kang, yang absolute kanggo mengatasi IE kang makanya yang fixed pakai !important

Balas

Iya mas, Kompi Ajaib jg pakai di homepage :)

Balas

mantap kang.... mau dicoba ahhh

Balas

izin copas ya, tenang pake sumber kok

Balas

IE mah tong d anggap, duruk weh :P

Balas

Keren euy mas, apalagi sebentar lagi bulan puasa :D

Balas

cocok sekali untuk mempercantik antar muka blog, terima kasih tutorialnya

Balas

Keren Mas adi..

langsung pakai yah,,

Balas

wah , keren nih mas , adi ijin coba ya ,

Balas

Wah keren kang, ijin simpan ya kang. Di pakenya nanti sehari sebelum puasa.

Balas

wuih keren nih,izin mencobanya kang

Balas

Lumayan berat pastinya buat blog ya mas hehe

Balas

kalau <body> tidak ada dimana narus kode nya yah mas :( :(

Balas

Wah si akang meni kratif kitu gaya pisan atuh eta mah

Balas

Silahkan mas :)

Balas

Silahkan mas :)

Balas

Hehhehe lumayan kang :)

Balas

Iya mas silahkan dicoba :)

Balas

Silahkan mas :)

Balas

Silahkan mas :)

Balas

heeheehe silahkan mas :)

Balas

Silahkan dicoba aja mas :)

Balas

Untuk yang pertama masuk iya kang :) karena blm memiliki cache

Balas

Pasti ada mas :) coba carinya kode <body

Balas

Hehehehe lumayan kang :)

Balas

Top bgt Kang... nanti saya coba. Haturnuhun ah izin caplok he.. :)

Balas

boleh nih dicoba kang,, makasih :)

Balas

gan, tambahan!
tidak semua resolusi sama, kasih css ini gan background-size: cover;

Balas

keren sekali kang, jadi kepingin mencoba juga :)

Balas

saya banyak belajar di blog ini sehingga saya memperoleh sebuah ide dalam merancang template seo super

di blog ini banyak sekali ide kreatif dari bagian sisi dalam dan luar

makasi kompi ajaib
saya mau praktekin yang satu ini

Balas

Mas biar pesan pembukanya pada homepage aja gimana..??

Balas

Keren Kang Adhy, di tabah tutorial yang menyembunyikan widget jadi keren munculnya di hompage aja, yang penting ikut menyambu bulan suci ramadhan, iya gak..?

Balas

Pak? Punya saya tampilnya kok di halaman depan, jg disetiap postingan, kira2 kenapa ya? Suwun

Balas

hehehe :D, sukses selalu buat kang adhy :)

Balas

Hehehehe silahkan kang :)

Balas

Silahkan mas Mawan :)

Balas

Makasih mas tambahannya :) :-bd

Balas

Silahkan dicoba mas Jery :)

Balas

Sama-sama bang Cigo :) Senang bisa bermanfaat untuk orang lain :)

Balas

Gunakan tag kondisional hanya untuk homepage seperti di bawah ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='welcomeoverlay'/>
<div id='welcomebox'>
<p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
Saya, Adhy Suryadi selaku admin Kompi Ajaib mengucapkan<br/>
&quot;Selamat menunaikan ibadah puasa,<br/>
semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...amin.&quot;</p>
<div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading &#8594;</div>
</div>
</b:if>

Balas

Hehehe betul mas :) makasih

Balas

Coba pakai tag kondisional hanya untuk homepage seperti jawaban saya untuk mas Abdur Rahman di atas.

Balas

Pass banget mas momen nya. saya pakai juga ya?, hehe
salam kenal :D

Balas

Izin Repost mas, pake sumber tenang aja...

Balas

Izin nyicip menu ramadhannya ya kang :D

Balas

Terimakasih banyak mas. Sudah berhasil

Balas

Keren bang, ijin pasang di blog saya ya!

Balas

mantaaaap kang,trm kasih banget langsung saya pakai tentunya.....izin sedot ya kang

Balas

keren bos... tapi itu google suka ga boss

Balas

mantap kang..!!! izin make ya ...

Balas

ijin kopi kode dan mempraktekannya yia bos....

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×