Cara Membuat Pesan Pembuka Di Blog

Oleh Unknown

Jumat, 19 Desember 2014

Hai Sahabat, kali ini saya akan membagikan tutorial membuat Pesan Pembuka yang menutupi seluruh tampilan blog. Dan menggunakan tombol untuk menghilangkan tampilan dari pesan pembuka tersebut.

Memang beberapa admin blog saat memasuki hari raya atau hari bersejarah sering membuat pesan berupa ucapan selamat. Mulai dari membuat marquee, dialog box dan lain-lain.

Demo

Berikut Cara Membuat Pesan Pembuka Di Blog

1. Simpan kode CSS berikut diatas kode </style> atau ]]></b:skin>

#welcomebox {position:fixed;top:15%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center}
#welcomebox p{background:rgba(255,255,255,0.8);color:#777;box-shadow:0 0 10px 0 rgba(0,0,0,0.08);font-family:&#39;Playfair Display&#39;;font-size:160%;line-height:1.4em;margin:-5px 0 -60px;padding:20px;padding-top:25px;padding-bottom:70px;border:8px solid #FA5858;}
.welcomeclose {background:#555;color:#fff;padding:20px 25px;text-align:center;margin:0 20px;border-radius:3px;padding:4px 10px;text-align:center; cursor:pointer;display:inline;}
.welcomeclose:hover {border:4px solid #222;background-color:#FA5858}
#welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#EEE;}

2. Simpan kode HTML berikut tepat dibawah kode <body>


<div id='welcomeoverlay'/>
<div id='welcomebox'>
  <p><b>&#8220;Selamat Datang di Blog Kang PP&#8221;</b><br/>
<br/>
Semoga anda betah disini, Silahkan komentar di Blog Kang PP Insya Allah admin akan membalasnya ^_^
</p>
<div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading</div>
</div>

Tentu anda bisa merubah kata-kata Pesan Pembuka tersebut. Semoga Bermanfaat ^_^
Sumber Kode : www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html

Tag : Tutorial Blog