Code tin tức chạy ngang trong flatsome

Nhiều khi vào các trang tin tức thì bạn hay thấy ngay đầu trang có 1 dòng chữ chạy ngang qua và chứa các bài viết mới nhất. Thì nếu bạn muốn làm giống như vậy thì cứ làm theo bài hướng dẫn này nha.

Demo: https://giadung.khoweb.xyz/

*Lưu ý: Vì code này sẽ tạo ra 1 shortcode, nên bạn muốn đặt tính năng nào ở đâu trong website cũng được nhé, không nhất thiết là phải ở đầu trang.

Thêm Code tin tức chạy ngang vào file functions.php của theme Flatsome Child

Bạn chèn code bên dưới vào file Functions.php của child theme nhé.

//Code tin tức chạy dọc kiểu marquee
function get_latest_posts_marquee() {
    $latest_posts = get_posts(array(
        'numberposts' => 5,
        'post_status' => 'publish',
    ));

    if ($latest_posts) {
        echo '<marquee onmouseover="this.stop();" onmouseout="this.start();">';
        foreach ($latest_posts as $post) {
            $post_title = $post->post_title;
            $post_link = get_permalink($post->ID);
            echo '<a href="'.$post_link.'">' . $post_title . '</a> | ';
        }
        echo '</marquee>';
    }
}

add_shortcode('fls_latest_post_marquee', 'get_latest_posts_marquee');

Để hiển thị ở nơi bạn muốn thì chỉ cần dùng shortcode

[fls_latest_post_marquee]

Thêm CSS cho code tin tức chạy ngang trong flatsome

Bạn copy toàn bộ code CSS bên dưới vào mục tùy chỉnh theme Flatsome. Có nhiều cách để bạn thêm nhé, bạn tham khảo một trong 3 cách này để thêm

1. Flatsome -> Advanced -> Custom CSS -> Dán code CSS vào khung “ALL SCREENS”.

2. Giao diện > Tùy chỉnh > Style > Custom CSS > Dán code CSS vào khung Custom CSS.

3. Giao diện > Tùy chỉnh > Additional CSS, rồi dán code CSS vào đây.

.header-bottom marquee {
    margin-left: 50px;
    align-items: center;
    text-align: center;
    margin-bottom: -25px;
    padding-top: 10px;
}
.header-bottom marquee a {
    margin-right: 25px;
    margin-left: 10px;
}

Như vậy là đã xong rồi nhé. Giờ bạn chỉ cần bỏ shortcode vào nơi mà bạn muốn hiển thị thôi.

Kết luận

Vậy là với vài dòng code thì bạn có thể thêm Code tin tức chạy ngang trong Flatsome rồi nè. Cũng đơn giản phải không nào. Nếu chưa làm được thì cứ liên hệ mình hỗ trợ cho nha.

Chúc bạn thành công! Nếu thấy hay thì ngại gì không donate ^^.