Trik Komputer: Add Splash Opening Page use CSS input

Kita adalah umat muslim. Telah dipilih Islam sebagai agama satu-satunya yang diridhoi oleh Allah Subhaanahu Wa Ta’alaa. Telah dipilih hari besar kita yaitu hari jum'at, dan telah dipilihkan penghulunya bulan, bulan istimewa bagi umat Islam yakni bulan Ramadhan. Bulan yang didalamnya terdapat berlimpah-limpah keutamaan, antara lain diturunkannya Al-Quran, ditutupnya pintu neraka dibukanya pintu syurga, ...and satu malam kemuliaan yg lebih baik dari seribu bulan Lailatul Qadar.

... Pada hari ini telah Kusempurnakan untuk kamu agamamu, dan telah Ku-cukupkan kepadamu nikmat-Ku, dan telah Ku-ridhai Islam itu jadi agama bagimu. ...Al Maa'idah : 3

Hari jum’at adalah penghulu hari-hari dan hari yang paling mulia di sisi Allah, hari jum’at ini lebih mulia dari hari raya Idhul Fitri dan Idul Adha di sisi Allah, pada hari jum’at terdapat lima peristiwa, diciptakannya Adam dan diturunkannya ke bumi, pada hari jum’at juga Adam dimatikan, di hari jum’at terdapat waktu yang mana jika seseorang meminta kepada Allah maka akan dikabulkan selama tidak memohon yang haram, dan di hari jum’at pula akan terjadi kiamat, tidaklah seseorang malaikat yang dekat di sisi Allah, di bumi dan di langit kecuali dia dikasihi pada hari jum’at.HR. Ahmad

(Beberapa hari yang ditentukan itu ialah) bulan Ramadhan, bulan yang di dalamnya diturunkan (permulaan) Al Quran sebagai petunjuk bagi manusia dan penjelasan-penjelasan mengenai petunjuk itu dan pembeda (antara yang hak dan yang bathil). Karena itu, barangsiapa di antara kamu hadir (di negeri tempat tinggalnya) di bulan itu, maka hendaklah ia berpuasa pada bulan itu, dan barangsiapa sakit atau dalam perjalanan (lalu ia berbuka), maka (wajiblah baginya berpuasa), sebanyak hari yang ditinggalkannya itu, pada hari-hari yang lain. Allah menghendaki kemudahan bagimu, dan tidak menghendaki kesukaran bagimu. Dan hendaklah kamu mencukupkan bilangannya dan hendaklah kamu mengagungkan Allah atas petunjuk-Nya yang diberikan kepadamu, supaya kamu bersyukur.Al Baqarah : 185

Mari kita sambut bulan ramadhan dengan gaya blogger \m/ Master Adhy Suryadi sudah membuatkan satu tutorial cuamik, membuat pesan pembuka ketika masuk blog www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html

Gue sudah melakukan optimasi kode, silahkan masukan semua bumbu ► Add a Gadget ► HTML/JavaScript

<div id='welcomeoverlay' onclick='document.getElementById( "welcomebox" ).style.display="none";welcomeoverlay.style.display="none";'/>
<div id='welcomebox'>
<p>“Marhaban Ya Ramadhan”<br/>
Saya, NAMA SOBAT selaku admin mengucapkan...<br/>
"Selamat menunaikan ibadah shaum,<br/>
semoga kita selalu diberkahi di bulan yang penuh berkah ini...amin."</p>
</div>
<style>
#welcomebox{position:absolute;top:5%;left:3%;width:70%;z-index:1000;text-align: left}
#welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
#welcomeoverlay {position:fixed;z-index:9999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbo7wKwi0VDsiGD_Ubpz1n9qhaZNBViEGWKoroMvC9K7ttgVfod2e_FvYicLzcfOSZvQoBdvZUYXQAkj-Nk1a3WXpaq2TWhhvfNQHoXHuYzwua0x65wzSiGxTaEDhk8wYM89Nf5G2CkyqF/s1600/Wallpaper.jpg) no-repeat top center;}
</style>

Gantikan tulisan NAMA SOBAT dengan nama anda!

Koben buat juga satu tut guna menyambut bulan shaum ramadhan. Cari tagging <body> Tepat dibawahnya masukan syntax berikut<input type="checkbox" id="is_loading" checked="true"/> <label id="load_switch" for="is_loading"></label> <article>Kemudian cari tagging </body> Tepat diatasnya masukan syntax brkt<section id="loader"> <div id="loading_animation"></div> <div id="message"></div> </section> </article>Setelah melakukan itu semua, cari kembali kode </b:skin> Masukin bumbu CSS brikut...

#is_loading {
 display: none;
}
#load_switch {
 position: fixed;
 z-index: 10;
 bottom: 5px;
 right: 5px;
 height: 32px;
 width: 75px;
 background-color: #539B9F;
 line-height: 32px;
 text-align: center;
 border-radius: 5px;
 cursor: pointer;
}
#load_switch:before {
 display: block;
 content: "Buka";
}
#is_loading:checked+#load_switch {
 background-color: #539B9F;
}
#is_loading:checked+#load_switch:before {
 content: "Tutup";
}
#loader {
 position: fixed;
 height: 100%;
 width: 100%;
 top: -100%;
 background-color: rgba(0,0,0,0.9);
 opacity: 0;
 z-index: 1;
 -webkit-transition: opacity 0.5s ease-in-out 0.5s, top 0s ease 1s;
 transition: opacity 0.5s ease-in-out 0.5s, top 0s ease 1s;
}
#is_loading:checked~article #loader,#is_loading_done:checked~article #loader {
 top: 0;
 opacity: 1;
 -webkit-transition: opacity 0.5s ease-in-out, top 0s ease 0s;
 transition: opacity 0.5s ease-in-out, top 0s ease 0s;
}
#is_loading:checked~article #loading_animation {
 -webkit-transform: none;
 transform: none;
}
#is_loading:checked~article #loading_animation,#is_loading:checked~article #loading_animation>div:after {
 background-color: #111;
 opacity: 1;
}
#message {
 position: absolute;
 height: 100px;
 width: 100%;
 top: 50%;
 margin-top: -50px;
 font-size: 24px;
 color: #539B9F;
 line-height: 100px;
 text-align: center;
 z-index: 100;
}
#message:before {
 content: "Maafkan Lahir & Bathin Yaaa ^_^!";
}
#is_loading:checked~article #message:before {
 content: "Selamat menunaikan ibadah shaum \a
 Semoga amal shaum kita diterima Alloh Subhaanahu Wa Ta'ala";
 white-space: pre;
 line-height: normal;
}

CSS tingkat master :D
Source code by: jsdo.it/blogparts/2LtN?view=css

Maafkan lahir dan bathin O:-)

Trik Komputer

Rabu, 25 Juni 2014

Add Splash Opening Page use CSS input

Tidak ada komentar:

Posting Komentar