Membuat Pesan Pembuka di Homepage ~ DELOGIN ZONE

Membuat Pesan Pembuka di Homepage

Posted by : Unknown Sabtu, 28 Juni 2014

Tak terasa hari demi hari berlalu begitu cepatnya, tak terasa pula kita akan segera memasuki bulan Ramadhan yang penuh berkah. Bagi para admin blog pastinya terasa kurang lengkap jika tidak memasang pernak-pernik yang berhubungan dengan bulan Ramadhan ini pada blog mereka. Nah, sehubungan dengan hal tersebut kali ini saya akan share cara membuat pesan pembuka ketika memasuki homepage. Tutorial ini saya repost dari Kompi Ajaib dengan sedikit modifikas tentunya.
Pesan pembuka ini sangat mudah diterapkan pada blog, apalagi didukung dengan loading yang cepat + responsive tentunya. Untuk tampilannya kurang lebih seperti gambar dibawah ini:

Demo

Bagaimana?... Tertarik menerapkannya pada blog sobat?... Okelah, saya kasih tahu caranya:

1. Simpan kode dibawah ini sebelum atau diatas kode ]]></b:skin> atau </style>

/* Pesan Pembuka Homepage */
#welcomebox {position: fixed;top: 10%;left: 50%;width: 70%;margin-left: -37%;z-index: 1000000;text-align: center;background: rgba(0, 0, 0, 0.5);padding: 20px 2%;}
#welcomebox p{color: #FFF;font-size: 150%;line-height: 1.6em;margin: -5px 0 50px;font-family: cursive;}
.welcomeclose {background: #FFF;color: #06F;border-radius: 3px;padding: 4px 10px;text-align: center;margin: 0 auto;cursor: pointer;display: inline;font-weight: bold;}
.welcomeclose:hover {background-color:#DDD}
#welcomeoverlay, #welcomeoverlay2 {position:fixed !important;z-index:999999;margin: auto;top:0px;right:0px;bottom:0px;left:0px;background: linear-gradient(#000, #09F);}
#welcomeoverlay2 {background: url(http://goo.gl/ftdBGk) no-repeat top center;}

Ket:
1. Untuk mengganti font-nya silahkan ganti cursive dengan font yang sobat inginkan.
2. Untuk mengganti warna background silahkan ganti kode (#000, #09F) dengan warna yang sobat inginkan.
3. Untuk mengganti gambar silahkan ganti url http://goo.gl/ftdBGk dengan url gambar yang sobat inginkan.

2. Lalu simpan juga kode dibawah ini di bawah kode <body> atau diatas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='welcomeoverlay'>
<div id='welcomeoverlay2'>
<div id='welcomebox'>
  <p><b>&#8220;Marhaban Ya Ramadhan&#8221;</b><br/>
      Saya, Setyawan Umar selaku admin DELOGIN ZONE mengucapkan<br/>
&quot;Selamat menunaikan ibadah puasa, 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></div></div>
</b:if>

Ket: Sesuaikan tulisan yang berwarna biru dengan pesan yang sobat inginkan.

Bagaimana sob?... Mudah bukan!... Semoga artikel ini bermanfaat bagi sobat.

Sumber:
http://www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html