Membuat News Ticker WordPress Tanpa Plugin

Sunday 19 June 2011
Posted in: IT Anak Rumahan

newsticker

Kalau Anda sering melihat acara TV, seringkali Anda melihat tulisan berjalan dari kanan ke kiri di sebelah bawah layar. Biasanya berisi berita-berita singkat dengan background warna biru atau merah. Inilah yang dimaksud dengan news ticker.

Kita bisa juga memasangnya untuk tampilan di blog WordPress (self hosted). Ada berbagai macam plugin untuk menampilkan news ticker dari WordPress, namun kali ini kita akan membuatnya secara manual. Isi dari tulisan yang berjalan adalah sepuluh judul tulisan terakhir dari blog kita.

Adapun script php untuk memanggil recent post dari WordPress adalah sebagai berikut.
[cc lang=”php”][/cc]
Angka 10 bisa diubah menjadi 5 untuk membuat 5 post terakhir saja yang ditampilkan.

Selanjutnya kita bisa memberikan tag list dari script tersebut agar membuatnya berurutan dalam bentuk list
[cc lang=”html”]

  • [/cc]

    Untuk membuat efek berjalan, kita bisa menggunakan tag marquee. Tapi jika Anda ingin coding halaman Anda tetap valid, Anda dapat menggunakan javascript. Menggunakan marquee cukup simple, karena tinggal memberikan tag berikut di list recent post.
    [cc lang=”html”][/cc]

    Terakhir, beri style untuk menampilkan teks berjalan tersebut dengan CSS.

    Berikut ini codingan lengkap news ticker. Kode ini dipasang di template WP. Untuk peletakannya bisa di footer.php dan di atas tag body dengan tulisan seperti ini
    [cc lang=”html”]

    [/cc]

    Berikut ini adalah box yang berisi list 10 tulisan terakhir dari blog.
    [cc lang=”php”]

    [/cc]

    Kemudian ini style-nya. Pasang di stylesheet themes.
    [cc lang=”css”]
    #navigation {
    width: 100%;
    height:4%;
    padding-top:10px;
    margin-left:auto;
    margin-right:auto;
    background: #CDF4C7;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    }

    #navmenu {
    margin: 0 auto;
    position: relative;
    z-index: 10;
    }

    #navmenu li {
    display: inline;
    padding: 0 5px;
    margin:0 5px;
    background:#006600;
    }

    #navmenu a {
    text-transform:uppercase;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    }

    #navmenu a:focus, #navmenu a:hover, #navmenu a:active {
    -moz-box-shadow: 0 0 3px #000;
    -webkit-box-shadow: 0 0 3px #000;
    box-shadow: 0 0 3px #000;
    background:#003300;
    }
    [/cc]

    Untuk live demo, bisa lihat halaman depan blog ini 😀

    You might also enjoying this post.