Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Background lebih Dinamis Menggunakan CSS dan PHP

Background website kamu statis itu-itu saja ? Akan lebih keren apabila background pada website kita berubah mengikuti perubahan waktu bukan ? Sebagai contoh apabila pagi hari background kita menjadi gambar matahari terbit, Sore hari background menjadi lebih orange, dan malam menjadi lebih gelap. Kali ini kita akan coba membuat background dinamis menggunakan CSS dan PHP.

Tanpa basa-basi kita langsung praktek saja. Pertama-tama buat sebuah file index.php (terserah anda)

<pre lang="php">
<html>
<head>
</head>
<body>
Konten di sini!
</body>
</html>
</pre>

Setelah body html telah kita buat, tambahkan script css di bawah ini tepat di antara pembuka dan penutup tag html head.

<pre lang="php">
<style type="text/css">
body
{
    background-image: url("<?php echo $background; ?>");
}
</style>
</pre>

Apabila kita melihat pada kode css di atas, kita akan menemukan sebuah script PHP yang disisipkan ke dalam background-image. variable $background ini akan kita berikan nilai sesuai background yang kita mau munculkan sesuai dengan waktu yang kita tentukan.

Tambahkan script php di bawah ini tepat di atas <style>

<pre lang="php">
<?php
$jamSekarang = date("H");
if($jamSekarang >= 6 && $jamSekarang <= 14)
{
    $background = "images/pagi.jpg";
}
elseif($jamSekarang >= 15 && $jamSekarang <= 17)
{
   $background = "images/sore.jpg";
}
elseif($jamSekarang >= 18 && $jamSekarang <= 24)
{
   $background = "images/malam.jpg";
}
else
{
   $background = "images/malam.jpg";
}
?>
</pre>

Pada script php di atas, kita melakukan pengecekan jam pada saat halaman kita diakses dan menyimpannya ke dalam variabel $jamSekarang. Setelah itu kita memberikan kondisi jam sesuai dengan ke inginan kita. Else akhir pada kondisi di atas adalah waktu subuh, atau waktu yang tidak ditentukan pada kondisi if kita. Untuk waktu, kalian bisa menggunakan time() jika kalian mau.

Mudah bukan ? Selamat mencoba!

Tanggapan

  • enggak ada demonya bro :D hehe jadi biar ada contohnya, btw website ini kayanya juga pake metode kaya gini http://johnkavanagh.co.uk/.

    makasih tipsnya ;)
  • lha ini demo produk dalam negri gan: texTPress

    gw ada source klo mau pelajari

  • lha ini demo produk dalam negri gan: texTPress

    gw ada source klo mau pelajari
    itu link nya gag bsa d buka bro,,?? share dunk source nya pngen bljar nih...

    #masi  nubitol nih bro,, :)
  • Ijin ikut belajar sob, kebetulan lagi pengin tahu lebih jauh tentang CSS untuk mengembangkan blog sederhanaku ini agar lebih maksimal saat dipakai dengan ultrabook
  • wah keren nih gan,,, mantap cobain ah... siapa tau bisa... :D
  • harus ada outputnya gan, jgn source codenya aja :D
  • edited May 2013
    Terima kasih tipsnya gan... nanti ane coba dulu :)
  • Iya bener, jadi bingung ngebayanginnya gimana
    soalnya gak ada demonya

    ada yang bisa kasih demonya ?
  • wah saya kurang paham kode kode itu bang, mode html aja masih belajar
  • numpang tanya agan",,, gua kan buat dropdown menu nih lewat DW dengan css, alhamdulilah berhasil tapi saat di pilih menu yang sub item nya og gag mau ya? malah ngilang tolong bantuannya?
    nih gua sertain kodenya dan style.cssnya.

    <div id="menu">
        <li><a href="#1">Home</a></li>
        <li><a href="#1">Services</a>
            <ul>
            <li><a href="#11">Sub Menu 1</a></li>
            <li><a href="#22">Sub Menu 2</a></li>
               </ul>
        </li>
        <li><a href="#2">Company Info</a>
            <ul>
            <li><a href="#21">Sub Menu 1</a></li>
            <li><a href="#22">Sub Menu 2</a></li>
            <li><a href="#23">Sub Menu 3</a></li>
            <li><a href="#24">Sub Menu 4</a></li>
            </ul>
        </li>
            <li><a href="#3">Product</a>
               <ul>
            <li><a href="#31">Sub Menu 1</a></li>
            <li><a href="#32">Sub Menu 2</a></li>
            <li><a href="#33">Sub Menu 3</a></li>
            <li><a href="#34">Sub Menu 4</a></li>
            </ul>
        </li>
        </ul>
        </div>

    di file "index.php"

    /* navigation menu */
    #menu
    {
        height: 31px;
        list-style-type: none;
        margin: 0;
        padding: 0px;
    }
    #menu li
    {
        border-right: solid 1px white;
        float: left;
        height: 30px;
    }
    #menu li a
    {
        color: #fff;
        display: block;
        font-weight: bold;
        padding: 6px 19px 2px 19px;
        text-decoration: none;
        font-family: "Myriad Pro", "Myriad Pro Cond", "Myriad Pro Light", "Myriad Pro Light Cond";
        font-size: 12px;
    }
    #menu li:hover {
        background: #778899;
        position: relative;
        font-family: "Myriad Pro", "Myriad Pro Cond", "Myriad Pro Light", "Myriad Pro Light Cond";
        visibility: visible;
    }
    #menu li:hover a {
        text-decoration: underline;
        position: relative;
        visibility: visible;
    }
    #menu li:hover ul {
        background-color: #3f4a54;
        border: 1px solid grey;
        left: 0px;
        padding: 3px;
        top: 30px;
        width: 160px;
    }
    #menu li:hover ul li { border: none; height: 18px; }
    #menu li:hover ul li a {
        background-color: #778899;
        border: 1px solid #666666;
        color: #fff;
        display: block;
        font-size: 11px;
        height: 18px;
        line-height: 18px;
        padding: 0px;
        text-decoration: none;
        text-indent: 5px;
        width: 158px;
        padding: 3px;
    }
    #menu li:hover ul li a:hover {
        background: silver;
        border: solid 1px #444;
        color: #000;
        height: 18px;
        padding: 3px;
        display: none;
    }
    #menu ul {
        left: -9999px;
        list-style-type: none;
        position: absolute;
        top: -9999px;
    }

    di file "style.css" bagian #menu
    :) thanks gan,,
  • Tq, gan...  sangat bermanfaat...
  • Script <pre lang="php"></pre> pada script diatas itu fungsinya buat apa? bisa dijelaskan?
  • Script <pre lang="php"></pre> pada script diatas itu fungsinya buat apa? bisa dijelaskan?
    http://www.diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb/p1
  • halo. Boleh minta komen untuk web css saya ?
    http://www.jeffriyanto.com/struktur-css.html
  • desainnya bagus, responsive, eh mercubuana kerabat smk ane hehe
  • Terima kasih :D
  • tips. apik. :D,, mungkin pake JavaScript lebih enak. hehehe :D
  • Mantap Gan...
  • Mantap gan...tipsnya work....
Sign In or Register to comment.