Membuat Pesan Spesial Ramadhan

Membuat pesan pembuka saat masuk blog

Wah sebentar lagi bulan Suci Ramadhan akan tiba nih, saat memasuki bulan Ramadhan, Hari Raya Idul Fitri, Tahun Baru dan lain-lain biasanya para admin blog membuat pesan-pesan khusus untuk para pengunjungnya. Mulai dengan tulisan menggunakan marquee, dialog box, banner, dan lain-lain. Nah sekarang saya akan membagikan cara untuk membuat pesan pembuka saat masuk ke blog, pesan pembuka yang satu ini akan menutupi seluruh tampilan layar, dan ada tombol untuk closenya.

Jika agan atau sista tertarik berikut cara pembuatannya :
1. Masuk ke Blogger > Template > Edit HTML
2. Letakkan kode css dibawah ini tepat diatas ]]></b:skin> atau </style>
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yRsXhJUh5SY24zTmpYNC6GWB8K7m_OuRtpIVF6DZjYbl06nwQvFb6jGMsVsxNBfRD5H_Q4nVMVTJym4Orsd912P5rbFkIzFX1BwVc1SANKpgpLhAe36Vv4X2gyt6DT5kByYrJKAvV0wb/s1600/Wallpaper.jpg) no-repeat top center;}
agan bisa mengganti gambarnya dengan mengganti url gambar warna biru diatas dengan url gambar yang ingin agan terapkan

3. Sekarang letakkan kode html ini tepat dibawah <body>
<div id='welcomeoverlay'/>
<div id='welcomebox'>
    <p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
      Izinkan Admin Ganteng Ini Mengucapkan :D<br/>
&quot;Selamat menunaikan ibadah puasa,<br/>
Semoga Dosa-Dosa terdahulu kita Diampuni Oleh Allah SWT,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>
4. Langkah terakhir klik Simpan Template

Hal yang harus diperhatikan :
  • Ganti Code warna hijau jika sobat ingin mengganti wallpaper/gambar sendiri.
  • Ganti code warna merah dengan kata kata sobat sendiri.

Demikian cara untuk membuat pesan pembuka di blog, Semoga Bermanfaat.
Sumber script : http://www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html
sumber artikel : http://agan-tutorial.blogspot.com/2014/06/membuat-pesan-pembuka-spesial-ramadhan-di-blog.html

3 komentar

Sudah pernah lihat cuman belum pernah icip
izin icip dulu mas :) siapa tau blog ane lebih keren

Reply

Posting Komentar