Mẹo tạo popup thông báo đơn giản cho website Ghost

Hướng dẫn cách tạo Popup thông báo cho Ghost siêu nhanh và đơn giản.

Cường Trần
Cường Trần
4 phút đọc

Một trong những cách giúp bạn tăng tỷ lệ chuyển đổi khá hiệu quả đó là Popup vì vậy các công cụ popup chuyên nghiệp như ConvertBox luôn có giá khá cao kể cả lifetime.

Để tiết kiệm chi phí cho bạn, tôi sẽ hướng dẫn bạn tạo một popup thông báo đơn giản, dư sức cho bạn dùng cho các nhu cầu cơ bản.

Hoàn toàn miễn phí!

Thêm code snipet popup vào website Ghost

Copy và dán code snipet bên dưới theo hướng dẫn (nút copy sẽ hiện góc phải khi bạn rê chuột vào code).

<style>
#banner{color:#fff;font-family:inherit;font-size:90%;background:#37434e;padding:20px;position:fixed;bottom:10px;left:10px;width:100%;max-width:300px;box-shadow:0 1px 3px 0 rgb(29 60 111 / 25%);border-radius:5px;margin:0px;z-index:1000000;visibility:hidden;box-sizing:border-box}#banner button{color:inherit;background:#181818;border:0;padding:10px;margin-top:10px;width:100%;cursor:pointer;border-radius:3px}#banner-close-icon{width:22px;position:absolute;right:-10px;padding:3px;top:-10px;border-radius:50%;background-color:white;color:black;box-shadow:0 1px 3px 0 rgb(29 60 111 / 25%)}#banner-close-icon:hover{cursor:pointer}@media only screen and (max-width: 600px){#banner{max-width:100%;bottom:0;left:0;border-radius:0}#banner-close-icon{top:5px;right:5px;color:white;background-color:transparent}}
</style>
Code #1
<div id="banner">
		<svg onclick="closeBanner();" id="banner-close-icon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
		        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
    [Demo]Dịch vụ tạo website Ghost cao cấp Ghost2Blog<br />
    <button onclick="acceptBanner();location.href='/ghost2blog/';">
        Tìm Hiểu Ngay →
    </button>
</div>
<script>
    function acceptBanner() {document.cookie="cookieaccepted=1; max-age=4320; path=/",document.getElementById("banner").style.visibility = "hidden" }
    function closeBanner() { document.cookie="cookieaccepted=1; max-age=10080; path=/",document.getElementById("banner").style.visibility="hidden" }
    document.cookie.indexOf("cookieaccepted")<0&&(document.getElementById("banner").style.visibility="visible")
</script>
Code #2

Code siêu nhẹ, chỉ nặng hơn 2KB chưa gzip.

Bạn có 2 cách thêm tùy vào mong muốn của bạn.

  1. Thêm toàn site. Thêm style vào site head và phần còn lại vào body tag của Ghost.
  2. Thêm popup vào bài viết hay trang chỉ định. Bạn thêm style và Post header và phần còn lại vào Post footer.
1. Thêm popup toàn site
Hoặc - 2. Thêm popup vào bài viết hay trang chỉ định

Lưu ý, bạn chỉ được chọn một trong 2 cách, không được dùng cả 2 sẽ gây ra lỗi. Bạn nên cân nhắc lựa chọn cách nào phù hợp với nhu cầu nhất.

Popup sẽ hiển thị không giới hạn số lần, trừ khi người xem bấm vào nút "X" để đóng Popup thì sẽ không hiển thị nữa trong 7 ngày kế tiếp.

Nghĩa là khi người xem không muốn popup bạn làm phiền thì họ sẽ bấm nút "X" để đóng popup, khi họ xem các trang khác của bạn sẽ không hiển thị nữa, kể cả khi quay lại site bạn. Trải nghiệm người đọc sẽ được đảm bảo.

Khi người xem bấm vào nút kêu gọi CTA thì Popup sẽ ngưng hiển thị trong 3 ngày để tránh bị cảm giác bị spam popup cho người xem.

Để thay đổi redirect trang của nút CTA và ngày hiển thị mặc định bạn hãy làm theo hướng dẫn bên dưới ↓

Tùy chỉnh hiển thị popup như thế nào?

Để thay đổi đường dẫn đến trang đích mong muốn, bạn thay đổi location.href='#'code #2 thành slug của trang hoặc địa chỉ URL bạn mong muốn. Ví dụ:  location.href='/ghost2blog/' (slug) hoặc location.href='https://ghostfam.com/' .

Thay đổi trang đích popup
Ví dụ: location.href='/ghost2blog/'

Để thay đổi nội dung, sửa đoạn text [Demo]Dịch vụ tạo website Ghost cao cấp Ghost2Blog và text nút CTA Tìm Hiểu Ngay như ảnh trên.

Để thay đổi màu sắc bạn thay đổi màu nền bạn thay thế background:#37434e thành background:#maubanthich . Màu nền nút CTA thì đổi background:#181818 thành background:#mauCTAbanthich . Màu chữ thì đổi color:#fff thành color:#mauchubanthich . Tất cả nằm ở code #1, dùng tìm kiếm để thay thế code.

Để thay đổi số ngày mặc định bạn đổi max-age=4320 (3 ngày) và max-age=10080 (7 ngày) thành số ngày bạn muốn. Cách tính ngày là dùng <số ngày>*24*60.

Đổi số ngày

Lời kết...

Đây chỉ là một code snipet đơn giản nhưng đem lại hiệu quả cao cho bạn. Bạn có thể dùng trên bất cứ landing page hay nền tảng khác tùy thích.

Bạn hãy xem demo popup ở trang này ở bên trái nhé.

Chúc bạn thành công!

Hướng Dẫn

Bạn có thể quan tâm

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Cáchtạo hiệu ứng lightbox cho video Youtube đơn giản bằng Fanyapps cho Ghost.

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Thêm hiệu ứng lightbox cho Ghost siêu đơn giản với Fluidbox

Cách đơn giản để thêm hiệu ứng lightbox cho ảnh, vừa nhanh vừa đẹp.

Thêm hiệu ứng Lightbox cho ảnh siêu đơn giản cho Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.

bởi @CườngTrần