Membuat Pesan Pembuka Ramadhan Versi Kartun



Kali ini saya akan share Membuat Pesan Pembuka Versi Kartun
Berhubung Bulan ramadhan sudah dekat, saya berfikiran untuk membuat Pesan pembuka ini di blog 
Supaya Blog agan menghormati Bulan penuh berkah ini, dan mencerminkan Nama baik Blog agan





Tutorialnya bisa kalian lihat dibawah ini





MENAMBAHKAN KODE CSS

Kemudian pindah Opsi ke menu Template pilih Edit HTML
Salin kode CSS berikut di atas kode  ]]></b:skin>
Gunakan CTRL  F untuk mempermudah pencarian


#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://th02.deviantart.net/fs71/PRE/i/2013/192/d/1/ramadhan_mubarak_by_nayzak-d6d3533.jpg) no-repeat top center;}

Url yang berwarna pink adalah URL gambar yang sama persis dengan demo, kalian bisa menggantinya dengan gambar yang lain atau bisa juga menggunakan Gambar di bawah ini

Gambar Alternatif



PENAMBAHAN CODE

Salin Code berikut di atas code </body>
Gunakan CTRL  F untuk mempermudah pencarian


<div id='welcomeoverlay'/> <div id='welcomebox'> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <p>&#8220;Marhaban Ya Ramadhan&#8221;<br/> Saya, Rudi Ardiansyah selaku admin CoretaNewbiee 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;;'>Lanjutkan Membaca &#8594;</div> </div>

Tulisan yang berwarna Merah bisa kalian ganti dengan Nama Sobat dan Nama Blog Sobat.
Simpan Template dan lihat hasilnya





Sekian Pembelajaran tentang CSS
Semoga bermanfaat, Terima Kasih

Comments

  1. sudah ane terapkan dengan sedikit modif css :)

    ReplyDelete
  2. tinggal ganti URL doang ya gan,, gampang nih, ntar ane terapin dah,,

    ReplyDelete
  3. Walah gan versi baru ya ? :D , bisa dicoba nih :D

    ReplyDelete
  4. mau gue pasang dulu di blog gue, biar keren dikit :D

    ReplyDelete
  5. pas benget nig bulan ramadhan....
    saya coba dulu gan :-)

    ReplyDelete
  6. Wah, sangat lucu dan bermanfaat. :)
    Terima kasih.

    ReplyDelete
  7. Wah bagus gan (Y)
    Tapi bikin blognya lemot gk??

    ReplyDelete
  8. mantep dah keren :D cocok banget buat blog niche anime :D

    ReplyDelete

Post a Comment

Peraturan Berkomentar Di Coretanewbiee

HARAP MEMBACA TERLEBIH DAHULU
SEBELUM BERKOMENTAR

|| Dilarang Spam ||
|| Dilarang Meninggalkan Link Aktif ||
|| Diharapkan berkomentar Sesuai Dengan Post ||
|| Berkomentar Yang Mengarah Ke Sisi Positif ||
|| Utamakan Baca Artikel sebelum berkomentar ||
|| Dilarang SARA , PORN, atau sebagainya ||
|| Diharapkan berkomentar menggunakan bahasa yang sopan ||

Komentar Yang Melanggar Akan Segera DiHapus

Tertanda "CoretaNewbiee" ✔

Popular posts from this blog

Judul lagu iklan McDonalds 2016 berhadiah Mobil HRV

G vusion Responsive Blogger Template

Peran dan Fungsi Mahasiswa