twitterfacebookgoogleyoutubemail
PENAWARAN
butuh jasa pembuatan website? klik GarudaCode

Membuat Fitur News Ticker, Hot Topic, Breaking News atau Headlines di Header WordPress

Membuat Fitur News Ticker, Hot Topic, Breaking News atau Headlines di Header WordPress

Membuat fitur News Ticker, Hot Topic, Headlines, atau Breaking News di Header Wordpress. Situs ini update lagi, di antara sekian banyak kesibukan, hari ini Saya meniatkan membuat tutorial sesuai pengalaman Saya mengerjakan pembuatan website menggunakan CMS berbasis Wordpress.

Pada tutorial kali ini Saya akan membahas cara membuat fitur yang sering dinamakan News Flash, News Ticker, Hot Topic, atau Headlines, Breaking News yang bergerak secara marquee di Wordpress. Saya menerapkannya di situs tourdebima.com. News Flash atau Hot Topic biasanya ada di bagian header. Fitur ini banyak digunakan oleh website-website portal berita.

Ketika pengerjaan website di atas (Tour de Bima), Saya diminta memasukkan fitur tersebut. Setelah googling beberapa menit, Saya memutuskan menggunakan plugin News-Ticker yang bisa di download langsung di situs wordpress.org.

Fitur News Flash, News Ticker, Hot Topic, atau Headlines akan mempercantik tampilan website Anda, terutama yang berbasis pada portal berita dan blog. Fitur ini akan menarik perhatian pembaca, karena biasanya dia akan bergerak dinamis secara fade, running, atau slide (tergantung pengaturan). Fitur ini usahakan diisi dengan konten yang menarik, sehingga dibaca oleh pengunjung website.

Langsung saja, berikut langkah memasangnya,

1. Silahkan pluginnnya download di sini; note: saat ini sudah dua tahun lebih tidak ada update dari plugin ini.

2. Kemudian install plugin tersebut di Wordpress Anda (Saya asumsikan Saudara sudah bisa instalasi plugin sendiri).

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress

3. Setelah plugin News-Ticker dipasang, maka akan muncul menu pengaturan plugin tersebut di bagian bawah menu Settings Dashboard saudara, silahkan klik.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress15

4. Saya akan jelaskan sedikit pengaturan plugin News-Ticker ini.

a. Content Source: Mengatur sumber tulisan yang akan ditampilkan di kolom News Ticker, News Flash, Breaking News, atau Hot Topic atau nama lainnya nanti sesuai yang Anda kenal. Ada empat tipe, nah Saya lebih memilih tipe “Blog Posts“. Hal ini akan memudahkan kita mengelompokkan tulisan yang akan kita tampilkan di bagian atas header itu.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress1

b. Category Filter: Pengaturan ini digunakan untuk memilih kategori yang akan mengandung konten yang akan ditampilkan di News Ticker. Saran Saya buatlah satu kategori tersendiri di bagian Posts dengan nama “Hot Topic, Terpopuler, Breaking News” atau nama lainnya, sehingga konten yang dimuat di News Sticker adalah konten yang paling berkualitas dari website saudara dan lebih spesifik. (note : pengaturan ini bebas tergantung pilihan)

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress2

c. Post Selection: Mengatur tipe konten yang akan ditampilkan dari kategori yang sudah kita pilih di poin b. Saya lebih memilih Recent Posts, karena akan menampilkan tulisan terkini dari kategori tersebut. Saudara bisa memilih Most Popular Posts over the last (terpopuler), Most Commented Posts (postingan yang paling banyak dikomentarin), Recent Comments (postingan dengan komentar terbaru), Specific Posts (Menampilkan konten secara spesifik, saudara bisa memasukkannya berdasarkan ID konten).

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress3

Ticker Setup

e. News Ticker Contents: Saya lebih memilih untuk tidak menceklis pilihan Show Images (menampilkan thumbnail), Show Dates (menampilkan tanggal), dan Show Excerpts (menampilkan deskripsi konten). Jika Anda mengosongkannya, yang akan muncul di News Ticker hanyalah judul tulisan saja, dan menurut Saya inilah yang umum digunakan.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress6

f. Number of Posts: Masukkan jumlah konten yang akan ditampilkan, Saya memilih memasukkan 10 konten saja (kosongkan untuk menampilkan seluruh konten dari kategori yang dipilih di poin b).

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress5

g. Ticker Length: Biarkan saja default

h. Ticker Speed: Kecepatan perpindahan antara satu judul konten ke judul konten lain di News Ticker. Satuannya adalah detik, dan Saya memilih mengatur per 3 detik untuk kecepatan penggantian konten.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress4

i. Ticker Timeout: Mengatur lama waktu suatu konten akan tampil. Satuannya adalah detik, dan Saya memilih mengatur per 3 detik konten Ticker akan berganti.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress7

j. Ticker Animation: Silahkan pilih animasi News Ticker yang Anda inginkan. Saya memilih Scroll left (berpindah ke kiri).

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress8

k. Ticker Height: Mengatur ketinggian konten Ticker. Satuannya adalah pixel, dan Saya memilih menggunakan 20 px.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress9

5. Silahkan klik “Update Options”

Sekarang coba lihat website saudara, pasti tidak akan memunculkan News Ticker atau semacamnya, karena script PHP yang digunakan untuk memanggil fungsi plugin ini belum kita pasang.

PASANG SCRIPT FUNGSI

Saya memasang script News-Ticker di bagian header. (tempat pemasangan script terserah saudara saja, bebas-bebas saja).

1. Setelah masuk ke Dashboard Wordpress Anda, pilih menu Appearance > Editor.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress11

2. Pada sisi paling kanan, ada list file php dan stylesheet yang terdapat dalam folder Theme yang saudara gunakan. Silahkan cari file dengan nama “header.php” dan klik.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress10

3. Akan ada baris kode php di file header.php tersebut. Setelah itu letakkan kode berikut: <?php if ( function_exists(‘insert_newsticker’) ) { insert_newsticker(); } ?> di bawah kode <body>. Pertama, carilah kode <body>, dan kemudian tempatkanlah kode fungsi php di atas di bawahnya, silahkan saudara sesuaikan dengan struktur Theme yang saudara gunakan  (kode PHP di atas juga bisa ditempatkan di file lain, misalnya footer.php, sidebar.php atau file apa saja yang berisi tampilan website Anda, cuma umumnya, News Ticker, Breaking News atau Headlines ditempatkan dibagian Header).

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress12

note: Saya membuat tag Div ID baru sehingga saya bebas mengatur stylesheetnya. Saya memilih menempatkan News Ticker di atas navigasi menu.

4. Silahkan klik tombol “Update File”

Sekarang lihatlah tampilan website atau blog Saudara, sudah ada News Ticker atau News Flash, atau Hot Topic yang akan menarik perhatian pengunjung website Anda. Silahkan komentar jika ada yang bisa Saya bantu atau kurang jelas, atau jika tidak, terimakasih telah membaca.

Situs berita yang menggunakan News Sticker antara lain, Suara Merdeka, Majalah Marketing, dan masih banyak lainnya.

membuat-fitur-news-ticker-breaking-news-headlines-di-wordpress13

dishare yah :)
Written by Ananda Puja

Penulis saat ini aktif dalam dunia Digital Media. Meliputi pembuatan website, campaign melalui media sosial seperti Facebook, Twitter, Youtube, hingga forum-forum online, SEO dan kontrol terhadap berita media massa. Selain itu penulis juga aktif di organisasi kemahasiswaan dan pemuda.

18 Comments

  1. huda · March 26, 2015

    klo cara bkin drop down itu gimana sih mas yang di edit yang mana tu mas header ato yang mana masih bngung newbie mas

    • kursus website · March 26, 2015

      dropdown yang mana mas? coba ke Appearance > Editor > cari file header.php di sisi kanan. Untuk ngedit di header.php tempattin aja setelah tag nanti lihat hasilnya mas, setelah itu baru coba tempatin sesuai tempat yang mas kehendaki…

  2. INFOLENGKAP.NET · August 8, 2015

    Saya belum mengerti mas, gambarnya tidak muncul.

  3. Altavesia · December 19, 2015

    aslkm bang, bang kami pake thema evolve. bisa gak ya. kalau setting otomatis?

  4. eko · March 26, 2016

    mas mau tanya kalo mau pasang kolom berita nama plugin nya apa?

  5. Fathurrahman imran · May 18, 2017

    Sangat membantu., Penjelasn sangat detail…
    Bisa tidak membuatkan postingan yg detail seperti ini tentang membuat upload file tanpa menggunakan plugin tpi pake PHP

  6. Fathurrahman imran · May 18, 2017

    Sangat membantu…
    Bisa postingkan cara membuat form upload dengan menggunakan PHP

  7. ahmad · November 17, 2017

    Ngga tampil apa apa blank

  8. Berita Dinamika · August 15, 2018

    Contoh website nya blank

  9. inung · October 10, 2018

    bingung menempatkan kode ininya gan…

    mau dutaruh dimana???

  10. inung · October 10, 2018

    kode ini:
    sy bingung mau dimasukkan dimana gan???

Leave A Reply