คลิก Cryzen เพื่อตัวอย่างหน้าตาเทมเพลต
โค้ดตัวอย่าง
บล็อกเนื้อหาแบบบล็อก 1 >>> เรียงโพสต์แบบโพสต์บนสุดขนาดใหญ่ โพสต์ถัดไปขนาดเล็กเรียง 2 คอลัมม์ลงด้านล่าง
{getContent} $results={5} $label={Your Label} $type={block1}
บล็อกเนื้อหาแบบบล็อก 2 >>> เรียงโพสต์แบบโพสต์บนสุดขนาดใหญ่ โพสต์ถัดไปขนาดเล็กเรียงลงด้านล่างฝั่งซ้าย
{getContent} $results={4} $label={Your Label} $type={block2}
บล็อกเนื้อหาแบบตาราง 1 >>> เรียงโพสต์แบบ 1 แถว โพสต์ขนาดกลางเรียงไปด้านขวา
{getContent} $results={3} $label={Your Label} $type={grid1}
บล็อกเนื้อหาแบบตาราง 2 >>> เรียงโพสต์แบบ 2 คอลัมม์ โพสต์ขนาดกลาง
{getContent} $results={4} $label={Your Label} $type={grid2}
บล็อกเนื้อหาแบบคอลัมม์ซ้าย >>> เรียงโพสต์แบบโพสต์บนสุดขนาดใหญ่ โพสต์ถัดไปเล็ก อยู่ด้านซ้ายของหน้าเพจ
{getContent} $results={4} $label={Your Label} $type={colLeft}
บล็อกเนื้อหาแบบคอลัมม์ขวา >>> เรียงโพสต์แบบโพสต์บนสุดขนาดใหญ่ โพสต์ถัดไปเล็ก อยู่ด้านขวาของหน้าเพจ
{getContent} $results={4} $label={Your Label} $type={colRight}
บล็อกเนื้อหาแบบวีดีโอ >>> เรียงโพสต์แบบ 1 แถว ขนาดกลางเรียงไปด้านขวา
{getContent} $results={3} $label={Your Label} $type={video}
โค้ด HTML ปุ่มดาวน์โหลด
<!-- CSS สำหรับปุ่มดาวน์โหลดที่ปรับแต่งได้ -->
<style>
/* ตัวแปรสีที่คุณสามารถปรับเปลี่ยนได้ */
:root {
--button-bg-color: #1a1a1a; /* สีพื้นหลังของปุ่ม */
--button-text-color: #fa832c; /* สีข้อความ */
--button-hover-bg-color: #454646; /* สีเมื่อนำเมาส์วาง */
}
.download-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--button-bg-color);
color: var(--button-text-color);
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.download-button:hover {
background-color: var(--button-hover-bg-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.download-button:active {
transform: translateY(0);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.download-icon {
margin-right: 10px;
stroke: var(--button-text-color);
}
</style>
<!-- HTML สำหรับปุ่มดาวน์โหลด -->
<a href="https://example.com/your-file.pdf" download class="download-button" id="download-btn target="_blank">
<svg class="download-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span>ดาวน์โหลดไฟล์</span>
</a>
<!-- JavaScript สำหรับการปรับสี (ถ้าต้องการเปลี่ยนสีแบบไดนามิก) -->
<script>
// ฟังก์ชันเปลี่ยนสีปุ่ม
function changeButtonColor(bgColor, textColor) {
document.documentElement.style.setProperty('--button-bg-color', bgColor);
document.documentElement.style.setProperty('--button-text-color', textColor);
// คำนวณสี hover โดยปรับความสว่างลดลงเล็กน้อย
const darkerColor = adjustBrightness(bgColor, -10);
document.documentElement.style.setProperty('--button-hover-bg-color', darkerColor);
}
// ฟังก์ชันปรับความสว่างของสี
function adjustBrightness(hex, percent) {
// แปลงเป็น RGB
let r = parseInt(hex.substring(1, 3), 16);
let g = parseInt(hex.substring(3, 5), 16);
let b = parseInt(hex.substring(5, 7), 16);
// ปรับค่า
r = Math.max(0, Math.min(255, r + percent));
g = Math.max(0, Math.min(255, g + percent));
b = Math.max(0, Math.min(255, b + percent));
// แปลงกลับเป็น hex
const newR = r.toString(16).padStart(2, '0');
const newG = g.toString(16).padStart(2, '0');
const newB = b.toString(16).padStart(2, '0');
return `#${newR}${newG}${newB}`;
}
// ตัวอย่างการเรียกใช้:
// changeButtonColor('#3498db', '#ffffff'); // เปลี่ยนเป็นสีฟ้า
// changeButtonColor('#e74c3c', '#ffffff'); // เปลี่ยนเป็นสีแดง
// changeButtonColor('#f1c40f', '#000000'); // เปลี่ยนเป็นสีเหลืองพร้อมข้อความสีดำ
</script>
โค้ด HTML กล่องข้อความเเบบเลื่อนลงเปิด-ปิด
<html lang="th">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>กล่องข้อความแสดงข้อมูลพื้นฐาน</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px auto;
padding: 15px;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 1000px) {
.container {
width: 95%;
min-width: unset;
}
body {
margin: 10px auto;
padding: 10px;
}
}
@media (max-width: 480px) {
.container {
width: 100%;
}
body {
margin: 5px auto;
padding: 5px;
}
h1 {
font-size: 1.5rem;
}
}
.collapsible-box {
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
width: 100%;
}
.collapsible-header {
background-color: #f5f5f5;
padding: 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
transition: background-color 0.3s;
}
@media (max-width: 480px) {
.collapsible-header {
padding: 10px;
font-size: 0.9rem;
}
.collapsible-content {
font-size: 0.9rem;
}
.collapsible-content.active {
max-height: 1000px; /* เพิ่มความสูงสำหรับอุปกรณ์มือถือ */
}
}
.collapsible-header:hover {
background-color: #e9e9e9;
}
.collapsible-content {
max-height: 0;
overflow: hidden;
padding: 0 15px;
transition: all 0.3s ease-out;
background-color: #fff;
}
.collapsible-content.active {
max-height: 500px;
padding: 15px;
}
.arrow {
width: 12px;
height: 12px;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
transform: rotate(45deg);
transition: transform 0.3s;
}
.arrow.up {
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div class="container">
<div id="boxes-container">
<!-- กล่องข้อความตัวอย่าง -->
<div class="collapsible-box">
<div class="collapsible-header">
<span>ประวัติส่วนตัว ข้อมูลทั่วไป</span>
<div class="arrow"></div>
</div>
<div class="collapsible-content">
<p><strong>ชื่อสกุล :</strong> ...</p>
<p><strong>อายุ :</strong> .. ปี</p>
<p><strong>เริ่มรับราชการเมื่อ :</strong> ...</p>
<p><strong>อายุราชการ :</strong> ...</p>
<p><strong>ตำแหน่ง :</strong> ...</p>
<p><strong>เลขที่ตำแหน่ง :</strong> 4808</p>
<p><strong>กลุ่มสาระการเรียนรู้ :</strong> ...</p>
<p><strong>สถานศึกษาที่ดำรงตำแหน่ง :</strong> ...</p>
<p><strong>...</strong></p>
</div>
</div>
<div class="collapsible-box">
<div class="collapsible-header">
<span>ประวัติการศึกษา</span>
<div class="arrow"></div>
</div>
<div class="collapsible-content">
<li><strong>จบ... :</strong> ...</li>
<li><strong>จบ... :</strong> ...</li>
<li><strong>จบ... :</strong> ...</li>
<li><strong>จบ... :</strong> ...</li>
<li><strong>จบ... :</strong> ...</li>
</div>
</div>
<div class="collapsible-box">
<div class="collapsible-header">
<span>ช่องทางการติดต่อ</span>
<div class="arrow"></div>
</div>
<div class="collapsible-content">
<li><strong>อีเมล (e-mail) :</strong> ...</li>
<li><strong>โทรศัพท์ (tel) :</strong> ...</li>
</div>
</div>
</div>
<script>
// เพิ่มการทำงานให้กับกล่องข้อความที่มีอยู่แล้ว
document.querySelectorAll('.collapsible-header').forEach(header => {
header.addEventListener('click', function() {
const content = this.nextElementSibling;
const arrow = this.querySelector('.arrow');
// สลับสถานะการแสดงเนื้อหา
content.classList.toggle('active');
arrow.classList.toggle('up');
});
});
</script>
</div></body>
</html>
โค้ด HTML ทำกล่องข้อความโค้ดตัวอย่างพร้อมปุ่มคัดลอก
(ต้องแปลงตัวอย่างโค้ดที่ต้องการวางเป็น HTML entities ก่อน)
<html lang="th">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"></meta>
<title>กล่องข้อความพร้อมปุ่มคัดลอกโค้ด</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #827f7f;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.code-box {
margin-bottom: 20px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background-color: #827f7f;
}
.code-header {
padding: 12px 15px;
background-color: #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
position: relative;
border-bottom: 1px solid #ddd;
}
.code-title {
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
}
.code-arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666;
margin-right: 10px;
transition: transform 0.3s;
}
.code-arrow.open {
transform: rotate(180deg);
}
.code-actions {
display: flex;
align-items: center;
}
.copy-button {
background-color: #f98311;
color: white;
border: none;
border-radius: 4px;
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
.copy-button:hover {
background-color: #b3651a;
}
.copy-icon {
margin-left: 6px;
}
.code-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
background-color: #424141;
}
.code-content.open {
max-height: 500px; /* ความสูงสูงสุดของกล่องข้อความ */
overflow-y: auto; /* เพิ่มแถบเลื่อนในแนวตั้งเมื่อเนื้อหาเกินขนาด */
}
.code-wrapper {
padding: 15px;
position: relative;
background-color: #424141;
border-radius: 0 0 6px 6px;
max-height: 450px; /* กำหนดความสูงสูงสุดสำหรับเนื้อหาโค้ด */
overflow-y: auto; /* เพิ่มแถบเลื่อนในแนวตั้งเมื่อเนื้อหาเกินขนาด */
}
pre {
margin: 0;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
white-space: pre-wrap;
font-size: 14px;
line-height: 1.5;
background-color: #424141;
padding: 0;
border-radius: 4px;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
color: #fff;
display: block;
}
/* สำหรับแสดงโค้ด HTML โดยไม่ประมวลผล */
.code-wrapper {
position: relative;
}
/* สไตล์สำหรับแถบเลื่อน */
.code-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.code-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.code-wrapper::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.code-wrapper::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #323232;
color: white;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s;
z-index: 1000;
}
.toast.show {
opacity: 1;
}
@media (max-width: 600px) {
.code-header {
padding: 10px;
}
.copy-button {
padding: 5px 10px;
font-size: 12px;
}
.code-wrapper {
padding: 10px;
}
pre, code {
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>โค้ดตัวอย่าง</h1>
<!-- ตัวอย่างกล่องข้อความที่ 1 -->
<div class="code-box">
<div class="code-header" onclick="toggleCodeBox(this)">
<div class="code-title">
<div class="code-arrow"></div>
<span>โค้ด HTML 1</span>
</div>
<div class="code-actions">
<button class="copy-button" onclick="copyCode(this, event)">
คัดลอก
<svg class="copy-icon" fill="none" height="16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
<rect height="13" rx="2" ry="2" width="13" x="9" y="9"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
</div>
<div class="code-content">
<div class="code-wrapper">
<pre><code class="language-html">พื้นที่วางโค้ด</code></pre>
</div>
</div>
</div>
<!-- ตัวอย่างกล่องข้อความที่ 2 -->
<div class="code-box">
<div class="code-header" onclick="toggleCodeBox(this)">
<div class="code-title">
<div class="code-arrow"></div>
<span>โค้ด HTML 2</span>
</div>
<div class="code-actions">
<button class="copy-button" onclick="copyCode(this, event)">
คัดลอก
<svg class="copy-icon" fill="none" height="16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
<rect height="13" rx="2" ry="2" width="13" x="9" y="9"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
</div>
<div class="code-content">
<div class="code-wrapper">
<pre><code class="language-css">พื้นที่วางโค้ด</code></pre>
</div>
</div>
</div>
<!-- ตัวอย่างกล่องข้อความที่ 3 -->
<div class="code-box">
<div class="code-header" onclick="toggleCodeBox(this)">
<div class="code-title">
<div class="code-arrow"></div>
<span>โค้ด HTML 3</span>
</div>
<div class="code-actions">
<button class="copy-button" onclick="copyCode(this, event)">
คัดลอก
<svg class="copy-icon" fill="none" height="16" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
<rect height="13" rx="2" ry="2" width="13" x="9" y="9"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
</div>
<div class="code-content">
<div class="code-wrapper">
<pre><code class="language-css">พื้นที่วางโค้ด
</code></pre>
</div>
</div>
</div>
<!-- แจ้งเตือนเมื่อคัดลอกสำเร็จ -->
<div class="toast" id="toast">คัดลอกโค้ดไปยังคลิปบอร์ดแล้ว</div>
<script>
// เมื่อโหลดหน้าเว็บเสร็จแล้ว
document.addEventListener('DOMContentLoaded', function() {
// แปลงเนื้อหาโค้ดทั้งหมดให้เป็น HTML entities
document.querySelectorAll('.code-box pre code').forEach(function(codeElement) {
if (!codeElement.dataset.processed) {
const rawHtml = codeElement.innerHTML;
const escapedHtml = escapeHtml(rawHtml);
codeElement.innerHTML = escapedHtml;
codeElement.dataset.processed = 'true';
}
});
});
// ฟังก์ชัน escape HTML
function escapeHtml(html) {
// ถ้าเป็น entities อยู่แล้วไม่ต้อง escape ซ้ำ
if (html.includes('<') || html.includes('>')) {
return html;
}
return html
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
// เปิด/ปิดกล่องข้อความ
function toggleCodeBox(header) {
const content = header.nextElementSibling;
const arrow = header.querySelector('.code-arrow');
content.classList.toggle('open');
arrow.classList.toggle('open');
}
// คัดลอกโค้ด
function copyCode(button, event) {
event.stopPropagation(); // ป้องกันการเปิด/ปิดกล่องเมื่อกดปุ่ม
const codeBox = button.closest('.code-box');
const codeElement = codeBox.querySelector('code');
// รับข้อความจาก HTML ที่ถูก escape แล้ว
let codeContent = codeElement.innerHTML;
// แปลงจาก HTML entities กลับเป็นอักขระปกติ
codeContent = codeContent
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''');
// วิธีคัดลอกข้อความแบบใหม่
navigator.clipboard.writeText(codeContent)
.then(() => {
showToast();
})
.catch(err => {
console.error('ไม่สามารถคัดลอกได้: ', err);
// วิธีเก่าสำหรับเบราว์เซอร์ที่ไม่รองรับ clipboard API
fallbackCopyTextToClipboard(codeContent);
});
}
// วิธีคัดลอกแบบทั่วไป (สำหรับเบราว์เซอร์เก่า)
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
// ทำให้มองไม่เห็น
textArea.style.position = "fixed";
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.width = "2em";
textArea.style.height = "2em";
textArea.style.opacity = "0";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
showToast();
}
} catch (err) {
console.error('ไม่สามารถคัดลอกได้: ', err);
}
document.body.removeChild(textArea);
}
// แสดงข้อความแจ้งเตือน
function showToast() {
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 2000);
}
</script>
</div></body>
</html>
คัดลอกโค้ดไปยังคลิปบอร์ดแล้ว
1.ไปที่หน้าแก้ไขโพสต์ > เปลี่ยนเป็นมุมมอง HTML
2. เลื่อนลงค้นหาฟังก์ชัน escape HTML (อยู่ส่วนท้าย) โค้ดจะเป็นดังภาพที่ 1 แก้ไขดังภาพที่ 2 (replace 2 บรรทัดสุดท้าย)
ภาพที่ 1
ภาพที่ 2
ภาพที่ 1
ภาพที่ 2
โค้ด HTML ทำภาพป๊อปอัปเมื่อเข้าสู่เว็บไซต์
<!-- เพิ่มโค้ดนี้ในส่วน <head> หรือก่อนปิด </body> ของเทมเพลต Blogger ของคุณ -->
<style>
/* สไตล์สำหรับป๊อบอัปต้อนรับ */
.welcome-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s;
}
.welcome-popup.show {
opacity: 1;
visibility: visible;
}
.popup-content {
position: relative;
width: 90%;
max-width: 500px;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transform: scale(0.8);
opacity: 0;
transition: all 0.5s ease;
}
.welcome-popup.show .popup-content {
transform: scale(1);
opacity: 1;
}
.popup-image {
width: 100%;
height: auto;
display: block;
}
.popup-text {
padding: 20px;
text-align: center;
}
.popup-text h2 {
margin: 0 0 10px 0;
color: #333;
font-size: 24px;
}
.popup-text p {
margin: 0 0 20px 0;
color: #666;
font-size: 16px;
line-height: 1.5;
}
.popup-button {
display: inline-block;
padding: 10px 25px;
background-color: #4285f4; /* สีของ Google */
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: background-color 0.3s;
margin-bottom: 10px;
cursor: pointer; /* เพิ่ม cursor เป็น pointer เพื่อแสดงว่าคลิกได้ */
}
.popup-button:hover {
background-color: #3367d6;
}
.close-popup {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 1;
transition: background-color 0.3s;
}
.close-popup:hover {
background-color: rgba(255, 255, 255, 1);
}
.close-popup::before, .close-popup::after {
content: '';
position: absolute;
width: 15px;
height: 2px;
background-color: #333;
}
.close-popup::before {
transform: rotate(45deg);
}
.close-popup::after {
transform: rotate(-45deg);
}
/* สำหรับเว็บไซต์มือถือ */
@media (max-width: 768px) {
.popup-content {
max-width: 85%;
}
.popup-text h2 {
font-size: 20px;
}
.popup-text p {
font-size: 14px;
}
}
</style>
<!-- HTML สำหรับป๊อบอัป -->
<div class="welcome-popup" id="welcomePopup">
<div class="popup-content">
<div class="close-popup" id="closePopup"></div>
<img src="https://example.com/your-welcome-image.jpg" alt="Welcome" class="popup-image"></img>
<div class="popup-text">
<h2>ยินดีต้อนรับสู่บล็อกของเรา</h2>
<p>ขอบคุณที่แวะมาเยี่ยมชม! เราหวังว่าคุณจะเพลิดเพลินกับเนื้อหาและบทความต่างๆ ของเรา</p>
<a href="#latest-posts" class="popup-button" id="startReadingBtn">เริ่มอ่านเลย</a>
</div>
</div>
</div>
<script>
// สคริปต์สำหรับควบคุมป๊อบอัป
document.addEventListener('DOMContentLoaded', function() {
// ฟังก์ชันสำหรับปิดป๊อบอัป
function closePopup() {
document.getElementById('welcomePopup').classList.remove('show');
}
// เช็คว่าผู้ใช้เคยเห็นป๊อบอัปนี้แล้วหรือยัง
if (!localStorage.getItem('welcomePopupShown')) {
// หน่วงเวลาเล็กน้อยก่อนแสดงป๊อบอัป
setTimeout(function() {
document.getElementById('welcomePopup').classList.add('show');
}, 2000); // 2 วินาที
// บันทึกว่าผู้ใช้เห็นป๊อบอัปแล้ว (จะไม่แสดงอีกเป็นเวลา 1 วัน)
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
localStorage.setItem('welcomePopupShown', expirationDate.getTime());
} else {
// เช็คว่าครบกำหนดเวลาแล้วหรือยัง
let storedTime = parseInt(localStorage.getItem('welcomePopupShown'));
let currentTime = new Date().getTime();
if (currentTime > storedTime) {
// ถ้าครบกำหนด 1 วันแล้ว ให้แสดงป๊อบอัปอีกครั้ง
setTimeout(function() {
document.getElementById('welcomePopup').classList.add('show');
}, 2000);
// บันทึกเวลาใหม่
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
localStorage.setItem('welcomePopupShown', expirationDate.getTime());
}
}
// การกดปิดป๊อบอัป
document.getElementById('closePopup').addEventListener('click', closePopup);
// ปิดป๊อบอัปเมื่อคลิกพื้นที่ด้านนอก
document.getElementById('welcomePopup').addEventListener('click', function(e) {
if (e.target === this) {
closePopup();
}
});
// เพิ่ม Event Listener สำหรับปุ่ม "เริ่มอ่านเลย"
document.getElementById('startReadingBtn').addEventListener('click', function(e) {
// ปิดป๊อบอัปเมื่อกดปุ่ม
closePopup();
// ถ้าต้องการให้ลิงก์ทำงานตามปกติด้วย ไม่ต้องใส่บรรทัดด้านล่าง
// e.preventDefault();
});
});
</script>คัดลอกโค้ดไปยังคลิปบอร์ดแล้ว
Tags:
ดาวน์โหลด
