Sharing Teknologi – Membuat Running Text Yang Berupa Postingan Artikel Atau Kumpulan Berita. Apakah Sobat teknologi[dot]visitklaten[dot]com ingin mempercantik tampilan website dengan animasi teks dengan hanya bermodal tag HTML. Yap.. Maka salah satu metode ini patut dicoba untuk diterapkan dalam blog ataupun website yang dimiliki terutama CMS WordPress.
Dengan hanya bermodal tag HTML dengan sedikit sentuhan style CSS bisa membuat website lebih menarik. Selain itu untuk membuatnya juga sangat mudah sekali.
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.
Teks Berjalan Atau Running Text ini akan bermanfaat apabila ingin menampilkan informasi penting tentang web ataupun hal lainnya. Mungkin rekan-rekan pernah melihat di suatu situs berita yang menampilkan judul artikel yang berjalan yang bisa berupa artikel terbaru, terpopuler atau lainnya.
Untuk membuatnya sangat mudah dan metode yang akan digunakan adalah tag HTML “<marquee></marquee>”. Yuk langsung aja dipraktekkan, kami beri kode html beserta hasilnya. Dengan catatan kami menggunakan tambahan CSS dari bootstrap.
Di kesempatan kali ini, kami akan berbagi cara membuat suatu running text di website yang berupa suatu postingan artikel atau berita. Running text ini nanti bisa berupa gambar dan judul, atau judul saja atau bisa dengan tambahan lainnya menyesuaikan susunan loop HTML,nya.
Dalam artikel ini kami akan membuat yang berupa judul saja agar lebih ringkas yang nanti bisa dikembangkan lebih kustom lagi.
Berikut Cara Membuat Tulisan Berjalan Atau Running Text
Membuat Running Text
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai kebutuhan. Dalam kode dibawah ini kami menggunakan sistem shortcode jadi nanti bisa disesuaikan dengan kebutuhan yang dipasang atau diletakkan di functions.php.
function runpost() {
ob_start();
query_posts( array(
'showposts' => 8, // jumlah post yang ingin ditampilkan
'cat' => 9, // ID kategori yang ingin ditampilan, Kosongkan atau hapus jika ingin semua kategori
) );
echo '<marquee class="py-3 bg-info px-2" direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="6">';
if( have_posts() ) : while( have_posts() ) : the_post();?>
<div class="d-inline-block text-white"><a class="text-white" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a> // </div>
<?php endwhile;
else :
_e( '<div class="no-post">Belum ada post.</div>' );
endif;
echo '</marquee>';
wp_reset_query ();
return ob_get_clean();
}
add_shortcode('runpost', 'runpost');
Kemudian masukkan shortcode dibawah ini di tempat yang diinginkan. Jika berupa halaman atau post bisa langsung dicopas.
[*runpost*] //hilangkan tanda bintang
Namun jika berupa HTML atau php maka bisa menggunakan dibawah ini
<?php echo do_shortcode('[*runpost*]') ;?> //hilangkan tanda bintang
Tampilannya kurang lebih bisa dilihat dibawah ini
Untuk animasi marque lainnya bisa dilihat di Membuat Tulisan Berjalan Atau Running Text .
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar