Membuat Pesan Pembuka Full Screen Saat Masuk Ke Blog ~ Agan Tutorial
Friday, July 11, 2014

Membuat Pesan Pembuka Full Screen Saat Masuk Ke Blog


Membuat Pesan Pembuka Full Screen Saat Masuk Ke Blog

Pada saat ada hari-hari khusus salah satunya bulan Ramadhan 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.

pesan pembuka saat masuk blog

Nah cukup menarik bukan... jika sobat tertarik ingin menerapkannya di blog sobat berikut tutorialnya :
1. Pertama-tama masuk ke blogger lalu ke Template > Edit HTML
2. Letakkan kode CSS dibawah ini tepat diatas ]]></b:skin> atau </style>
/* Pesan agan-tutorial.blogspot.com */
#welcomebox {position:fixed;top:5%;left:50%;width:70%;height:40%;min-height:30%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{background:#fff;color:#888;font-family:sans-serif;font-size:180%;font-weight:700;line-height:1.6em;margin:-5px 0 50px;padding:15px;padding-top:40px;padding-bottom:40px;border-top:60px solid #f35d5c;border-bottom:4px solid #222;transition:all 0.4s linear;}
#welcomebox p:hover{color:#666;}
.welcomeclose {background:#555;color:#fff;border-bottom:4px solid #222;padding:10px 25px;text-align:center;margin:0 auto;cursor:pointer;display:inline;transition:all 0.4s ease-in;}
.welcomeclose:hover {background-color:#444;color:#fff;border-bottom:4px solid #202020;box-shadow:inset 181px 0px 0px #f35d5c;-moz-animation: pulse .4s ease-in;
-webkit-animation: pulse .4s ease-in;animation: pulse .4s ease-in;}
#welcomeoverlay {position:fixed!important;position:absolute;z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#333;max-width:100%;max-height:100%;}
3. Kemudian letakkan kode HTML pemanggilan dibawah ini dan letakkan tepat dibawah kode <body>
<div id='welcomeoverlay'></div>
<div id='welcomebox'>
<p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
      Saya, Ryan selaku admin Agan-Tutorial mengucapkan<br/>"Selamat menunaikan ibadah puasa,<br/>semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...amin."</p>
<div class='welcomeclose' onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>Continue Reading &#8594;</div>
</div>
Silahkan di ganti tulisan yang berwarna biru sesuai selera sobat

4. Langkah terakhir klik Simpan Template sobat

Nah cukup mudah bukan untuk cara pembuatannya, Semoga Bermanfaat.

Membuat Pesan Pembuka Full Screen Saat Masuk Ke Blog

4 komentar

font-family:'Playfair Display' nya ga work, krna nda ada source @font-face nya

boleh di coba ini gan, tapi kira-kira mengganggu pengunjung apa tidak ya......

iya gan :v, ya itunya dihapus aja atau diganti sesuai font yang ada :3

Mungkin agak mengganggu, sebaiknya ditampilkan dibagian home page saja menggunakan tag kondisional

No comment moderation in this page,
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly.