Membuat News Ticker WordPress Tanpa Plugin

Sunday 19 June 2011 | Comments (6)

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 :D

    Themes Redesign (2)

    Thursday 2 June 2011 | Comments (2)

    Masih berkutat di halaman depan. Themes redesign memanfaatkan CSS3 yang hampir didukung sebagian besar browser modern. Adapun teknik yang digunakan adalah border radius, box shadow, text shadow, dan gradient.

    Border radius untuk membuat lingkaran melengkung pada box
    border-radius
    [cc lang="css"]-moz-border-radius: 10px;
    -webkit-border-radius: 10px;[/cc]

    Box shadow akan menghasilkan bayangan di kotak navigasi tengah dan running text di bagian bawah
    box-shadow
    [cc lang="css"]-moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    [/cc]

    Text shadow dapat dilihat pada judul blog, membuat bayangan pada teks
    hed
    [cc lang="css"]text-shadow: 2px 2px 2px #000;[/cc]

    Gradient untuk membuat efek gradient pada latar belakang box
    box-gradient
    [cc lang="css"]background: -webkit-gradient(linear, left top, left bottom, from(#C9DAC9), to(#4C9440));
    background: -moz-linear-gradient(top, #C9DAC9, #4C9440);[/cc]

    Bacaan lebih lanjut bisa kunjungi tautan link berikut

    Themes Redesign (1)

    Sunday 29 May 2011 | Comments (4)

    Themes redesign. Yap. Setelah pindah hosting ke tempat baru, dan sepertinya masih cukup reliable, akhirnya saya menyempatkan diri untuk merombak total blog saya. Akses yang lebih baik membuat saya ingin lebih meng-explore blog ber-platform WordPress ini.

    Perubahan utama adalah akses pertama kali datang ketika pengunjung membuka link utchanovsky.com. Menggunakan custom page template, halaman awal akan memberikan pengantar pada pengunjung untuk menuju segmen-segmen khusus dalam blog ini. Tentunya lebih ringan karena tidak begitu banyak query ke database, selain recent post berupa newsticker di area bar bagian bawah.

    front

    Caranya, buat halaman baru dan simpan dengan nama apa saja di folder themes, semisal front-index.php. Tambahkan code berikut di baris paling atas. Untuk baris Template Name pada kode di atas, bisa diganti sesuai keinginan Anda.

    [cc lang="php"]
    /* Template Name: wide-front */
    ?>
    [/cc]

    page-template

    Isi selanjutnya dari halaman kreasi baru Anda adalah html+CSS kreasi Anda sendiri. Anda bahkan dapat meng-hardcode isi post (text+gambar) langsung pada themes Anda, seperti bagian about blog ini. Setelah page template sudah jadi, buat halaman baru dari dashboard WordPress, dan pilih page template kreasi Anda.

    Bacaan lebih lanjut di sini, atau di WordPress codex

    bersambung…

    Menghilangkan Admin Bar di WordPress 3.0+

    Thursday 28 April 2011 | Comments (6)

    WordPress rilis 3.0 ke atas kini menampilkan admin bar di atas situs kita, persis seperti layanan gratis di WordPress.com. Fasilitas ini memang membantu penggunanya langsung bernavigasi ke fitur-fitur utama dari dashboard administrator tanpa harus me-load dashboard administrator secara keseluruhan.

    Di lain pihak, keberadaan panel ini akan cukup mengganggu Anda. Ketika sedang me-layout tampilan, posisi themes akan turun secara keseluruhan sejauh 30 pixel.

    Cara termudah dan aman untuk menghilangkan admin bar tersebut adalah dengan mengakses profil di dashboard, kemudian pada pilihan Show Admin Bar, hilangkan semua centang yang ada.

    Show Admin Bar


    Blogging Platform, Why WordPress.com? Why Blogspot.com?

    Sunday 2 January 2011 | Comments (19)

    Blogspot vs WordPress

    If somebody asks me about, “what is the best platform for blogging between WordPress.com and Blogspot”, I‘ll said that it would be relative to person who use it. Relative? Like what? OK, I will classifying a blogger kinda type. ( More … )