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.
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>“Marhaban Ya Ramadhan”<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 →</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.
Post a Comment