คลิก Cryzen เพื่อดูตัวอย่างหน้าตาเทมเพลต
เนื้อหาด้านล่างนี้สามารถนำไปปรับแต่งเทมเพลตของคุณได้
โค้ดเรียกใช้งานบล็อกแสดงเนื้อหาโพสต์แต่ละแบบด้วย widget
บล็อกเนื้อหาแบบบล็อก 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">พื้นที่วางโค้ดที่แปลงเป็น entities แล้ว</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">พื้นที่วางโค้ดที่แปลงเป็น entities แล้ว</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">พื้นที่วางโค้ดที่แปลงเป็น entities แล้ว
</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.ไปที่หน้าแก้ไขโพสต์ > เปลี่ยนเป็นมุมมอง HTML2. เลื่อนลงค้นหาฟังก์ชัน escape HTML (อยู่ส่วนท้าย) โค้ดจะเป็นดังภาพที่ 1 แก้ไขให้เป็นดังภาพที่ 2 (replace 2 บรรทัดสุดท้าย) ภาพที่ 1
ภาพที่ 2
3.เลื่อนลงค้นหาฟังก์ชัน คัดลอกโค้ด (อยู่ส่วนท้าย) โค้ดจะเป็นดังภาพที่ 1 แก้ไขให้เป็นดังภาพที่ 2 (replace 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>
โค้ด CSS สำหรับจัดแกลอรี่รูปภาพ 2,3,4 คอลัมม์ ในโพสต์
<!-- ระบบกาเลอรี่รูปภาพ เพิ่มโค้ดในเทมเพลตไว้ก่อนแท็กปิด </head> -->
<style type="text/css">
/* กาเลอรี่ 3 คอลัมน์ */
.my-custom-gallery-container {
margin: 20px 0;
}
.my-custom-gallery-container .my-img-gallery {
display: flex !important;
flex-wrap: wrap !important;
margin: -5px !important;
gap: 0 !important;
}
.my-custom-gallery-container .my-img-gallery-item {
flex: 0 0 calc(33.333% - 10px) !important;
margin: 5px !important;
position: relative !important;
overflow: hidden !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
cursor: pointer !important;
}
.my-custom-gallery-container .my-img-gallery-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.my-custom-gallery-container .my-img-gallery-item img {
width: 100% !important;
height: 200px !important;
object-fit: cover !important;
display: block !important;
transition: all 0.3s ease !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
border: none !important;
box-shadow: none !important;
}
.my-custom-gallery-container .my-img-gallery-item:hover img {
transform: scale(1.05) !important;
opacity: 0.9 !important;
}
.my-custom-gallery-container .my-img-gallery-caption {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 15px !important;
background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
color: white !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.my-custom-gallery-container .my-img-gallery-item:hover .my-img-gallery-caption {
opacity: 1 !important;
}
/* กาเลอรี่ 2 คอลัมน์ สัดส่วน 3:2 */
.my-custom-gallery-2col {
margin: 20px 0;
}
.my-custom-gallery-2col .my-img-gallery {
display: flex !important;
flex-wrap: wrap !important;
margin: -5px !important;
gap: 0 !important;
}
.my-custom-gallery-2col .my-img-gallery-item {
flex: 0 0 calc(50% - 10px) !important;
margin: 5px !important;
position: relative !important;
overflow: hidden !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
cursor: pointer !important;
aspect-ratio: 3/2 !important;
}
.my-custom-gallery-2col .my-img-gallery-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.my-custom-gallery-2col .my-img-gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: all 0.3s ease !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
border: none !important;
box-shadow: none !important;
}
.my-custom-gallery-2col .my-img-gallery-item:hover img {
transform: scale(1.05) !important;
opacity: 0.9 !important;
}
.my-custom-gallery-2col .my-img-gallery-caption {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 15px !important;
background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
color: white !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.my-custom-gallery-2col .my-img-gallery-item:hover .my-img-gallery-caption {
opacity: 1 !important;
}
/* กาเลอรี่ 4 คอลัมน์ สี่เหลี่ยมจัตุรัส */
.my-custom-gallery-4col {
margin: 20px 0;
}
.my-custom-gallery-4col .my-img-gallery {
display: flex !important;
flex-wrap: wrap !important;
margin: -5px !important;
gap: 0 !important;
}
.my-custom-gallery-4col .my-img-gallery-item {
flex: 0 0 calc(25% - 10px) !important;
margin: 5px !important;
position: relative !important;
overflow: hidden !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
cursor: pointer !important;
aspect-ratio: 1/1 !important;
}
.my-custom-gallery-4col .my-img-gallery-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.my-custom-gallery-4col .my-img-gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: all 0.3s ease !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
border: none !important;
box-shadow: none !important;
}
.my-custom-gallery-4col .my-img-gallery-item:hover img {
transform: scale(1.05) !important;
opacity: 0.9 !important;
}
.my-custom-gallery-4col .my-img-gallery-caption {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 15px !important;
background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
color: white !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.my-custom-gallery-4col .my-img-gallery-item:hover .my-img-gallery-caption {
opacity: 1 !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.my-custom-gallery-container .my-img-gallery-item {
flex: 0 0 calc(50% - 10px) !important;
}
.my-custom-gallery-container .my-img-gallery-item img {
height: 150px !important;
}
.my-custom-gallery-2col .my-img-gallery-item {
flex: 0 0 calc(50% - 10px) !important;
}
.my-custom-gallery-4col .my-img-gallery-item {
flex: 0 0 calc(50% - 10px) !important;
}
}
@media (max-width: 480px) {
.my-custom-gallery-container .my-img-gallery-item,
.my-custom-gallery-2col .my-img-gallery-item,
.my-custom-gallery-4col .my-img-gallery-item {
flex: 0 0 calc(100% - 10px) !important;
}
.my-custom-gallery-container .my-img-gallery-item img {
height: 200px !important;
}
.my-custom-gallery-2col .my-img-gallery-item {
aspect-ratio: 3/2 !important;
}
.my-custom-gallery-4col .my-img-gallery-item {
aspect-ratio: 16/9 !important;
}
}
/* Lightbox สำหรับการแสดงภาพขนาดใหญ่ */
.my-custom-lightbox {
display: none;
position: fixed !important;
z-index: 9999 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(0,0,0,0.9) !important;
justify-content: center !important;
align-items: center !important;
backdrop-filter: blur(5px) !important;
}
.my-custom-lightbox img {
max-width: 90% !important;
max-height: 90% !important;
object-fit: contain !important;
margin: 0 auto !important;
display: block !important;
border: none !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
border-radius: 8px !important;
}
.my-custom-lightbox-close {
position: absolute !important;
top: 30px !important;
right: 30px !important;
color: white !important;
font-size: 40px !important;
cursor: pointer !important;
z-index: 10000 !important;
width: 50px !important;
height: 50px !important;
background: rgba(0,0,0,0.5) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.3s ease !important;
}
.my-custom-lightbox-close:hover {
background: rgba(0,0,0,0.8) !important;
}
.my-custom-lightbox-nav {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: white !important;
font-size: 30px !important;
cursor: pointer !important;
background: rgba(0,0,0,0.5) !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.3s ease !important;
}
.my-custom-lightbox-nav:hover {
background: rgba(0,0,0,0.8) !important;
}
.my-custom-lightbox-prev {
left: 30px !important;
}
.my-custom-lightbox-next {
right: 30px !important;
}
@media (max-width: 768px) {
.my-custom-lightbox-close {
top: 20px !important;
right: 20px !important;
font-size: 30px !important;
width: 40px !important;
height: 40px !important;
}
.my-custom-lightbox-nav {
font-size: 24px !important;
width: 40px !important;
height: 40px !important;
}
.my-custom-lightbox-prev {
left: 20px !important;
}
.my-custom-lightbox-next {
right: 20px !important;
}
}
/* กาเลอรี่แนวตั้ง 2 คอลัมน์ สัดส่วน 2:3 (แนวตั้ง) */
.my-custom-gallery-2col-vertical {
margin: 20px 0;
}
.my-custom-gallery-2col-vertical .my-img-gallery {
display: flex !important;
flex-wrap: wrap !important;
margin: -5px !important;
gap: 0 !important;
}
.my-custom-gallery-2col-vertical .my-img-gallery-item {
flex: 0 0 calc(50% - 10px) !important;
margin: 5px !important;
position: relative !important;
overflow: hidden !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
cursor: pointer !important;
aspect-ratio: 2/3 !important; /* สัดส่วนแนวตั้ง */
}
.my-custom-gallery-2col-vertical .my-img-gallery-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.my-custom-gallery-2col-vertical .my-img-gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: all 0.3s ease !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
border: none !important;
box-shadow: none !important;
}
.my-custom-gallery-2col-vertical .my-img-gallery-item:hover img {
transform: scale(1.05) !important;
opacity: 0.9 !important;
}
.my-custom-gallery-2col-vertical .my-img-gallery-caption {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 15px !important;
background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
color: white !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.my-custom-gallery-2col-vertical .my-img-gallery-item:hover .my-img-gallery-caption {
opacity: 1 !important;
}
/* กาเลอรี่แนวตั้ง 3 คอลัมน์ สัดส่วน 3:4 (แนวตั้ง) */
.my-custom-gallery-3col-vertical {
margin: 20px 0;
}
.my-custom-gallery-3col-vertical .my-img-gallery {
display: flex !important;
flex-wrap: wrap !important;
margin: -5px !important;
gap: 0 !important;
}
.my-custom-gallery-3col-vertical .my-img-gallery-item {
flex: 0 0 calc(33.333% - 10px) !important;
margin: 5px !important;
position: relative !important;
overflow: hidden !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
cursor: pointer !important;
aspect-ratio: 3/4 !important; /* สัดส่วนแนวตั้ง */
}
.my-custom-gallery-3col-vertical .my-img-gallery-item:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
.my-custom-gallery-3col-vertical .my-img-gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: all 0.3s ease !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
border: none !important;
box-shadow: none !important;
}
.my-custom-gallery-3col-vertical .my-img-gallery-item:hover img {
transform: scale(1.05) !important;
opacity: 0.9 !important;
}
.my-custom-gallery-3col-vertical .my-img-gallery-caption {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 15px !important;
background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
color: white !important;
opacity: 0 !important;
transition: all 0.3s ease !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
.my-custom-gallery-3col-vertical .my-img-gallery-item:hover .my-img-gallery-caption {
opacity: 1 !important;
}
/* Responsive Design สำหรับแกลอรี่แนวตั้ง */
@media (max-width: 768px) {
.my-custom-gallery-2col-vertical .my-img-gallery-item {
flex: 0 0 calc(50% - 10px) !important;
aspect-ratio: 2/3 !important;
}
.my-custom-gallery-3col-vertical .my-img-gallery-item {
flex: 0 0 calc(50% - 10px) !important;
aspect-ratio: 3/4 !important;
}
}
@media (max-width: 480px) {
.my-custom-gallery-2col-vertical .my-img-gallery-item,
.my-custom-gallery-3col-vertical .my-img-gallery-item {
flex: 0 0 calc(100% - 10px) !important;
aspect-ratio: 2/3 !important; /* ใช้สัดส่วนแนวตั้งในมือถือ */
}
}
</style>
<script type="text/javascript">
//<![CDATA[
// ระบบกาเลอรี่รูปภาพแบบครบครัน
(function() {
var currentImageIndex = 0;
var currentImages = [];
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function createLightbox() {
var lightboxExists = document.querySelector('.my-custom-lightbox');
if (lightboxExists) return lightboxExists;
var lightbox = document.createElement('div');
lightbox.className = 'my-custom-lightbox';
document.body.appendChild(lightbox);
var closeBtn = document.createElement('span');
closeBtn.className = 'my-custom-lightbox-close';
closeBtn.innerHTML = '×';
lightbox.appendChild(closeBtn);
var prevBtn = document.createElement('span');
prevBtn.className = 'my-custom-lightbox-nav my-custom-lightbox-prev';
prevBtn.innerHTML = '‹';
lightbox.appendChild(prevBtn);
var nextBtn = document.createElement('span');
nextBtn.className = 'my-custom-lightbox-nav my-custom-lightbox-next';
nextBtn.innerHTML = '›';
lightbox.appendChild(nextBtn);
var lightboxImg = document.createElement('img');
lightbox.appendChild(lightboxImg);
closeBtn.addEventListener('click', closeLightbox);
prevBtn.addEventListener('click', showPrevImage);
nextBtn.addEventListener('click', showNextImage);
lightbox.addEventListener('click', function(e) {
if (e.target === lightbox) {
closeLightbox();
}
});
document.addEventListener('keydown', function(e) {
if (lightbox.style.display === 'flex') {
switch(e.key) {
case 'Escape':
closeLightbox();
break;
case 'ArrowLeft':
showPrevImage();
break;
case 'ArrowRight':
showNextImage();
break;
}
}
});
return lightbox;
}
function openLightbox(images, index) {
currentImages = images;
currentImageIndex = index;
var lightbox = createLightbox();
var lightboxImg = lightbox.querySelector('img');
var prevBtn = lightbox.querySelector('.my-custom-lightbox-prev');
var nextBtn = lightbox.querySelector('.my-custom-lightbox-next');
lightboxImg.src = currentImages[currentImageIndex];
lightbox.style.display = 'flex';
prevBtn.style.display = currentImages.length > 1 ? 'flex' : 'none';
nextBtn.style.display = currentImages.length > 1 ? 'flex' : 'none';
}
function closeLightbox() {
var lightbox = document.querySelector('.my-custom-lightbox');
if (lightbox) {
lightbox.style.display = 'none';
}
}
function showPrevImage() {
if (currentImages.length > 1) {
currentImageIndex = (currentImageIndex - 1 + currentImages.length) % currentImages.length;
var lightboxImg = document.querySelector('.my-custom-lightbox img');
lightboxImg.src = currentImages[currentImageIndex];
}
}
function showNextImage() {
if (currentImages.length > 1) {
currentImageIndex = (currentImageIndex + 1) % currentImages.length;
var lightboxImg = document.querySelector('.my-custom-lightbox img');
lightboxImg.src = currentImages[currentImageIndex];
}
}
function createGallery(container) {
if (container.querySelector('.my-img-gallery')) {
return;
}
var imgTags = container.querySelectorAll('img');
if (imgTags.length < 2) return;
var gallery = document.createElement('div');
gallery.className = 'my-img-gallery';
var imageElements = [];
var imageSources = [];
imgTags.forEach(function(img) {
var src = img.getAttribute('src');
var alt = img.getAttribute('alt') || '';
if (src) {
imageElements.push({
src: src,
alt: alt
});
imageSources.push(src);
}
});
imageElements.forEach(function(imgData, index) {
var item = document.createElement('div');
item.className = 'my-img-gallery-item';
var newImg = document.createElement('img');
newImg.src = imgData.src;
newImg.alt = imgData.alt;
item.appendChild(newImg);
if (imgData.alt) {
var caption = document.createElement('div');
caption.className = 'my-img-gallery-caption';
caption.textContent = imgData.alt;
item.appendChild(caption);
}
item.addEventListener('click', function() {
openLightbox(imageSources, index);
});
gallery.appendChild(item);
});
container.querySelectorAll('img').forEach(function(img) {
if (img.parentNode) {
var parent = img.parentNode;
parent.removeChild(img);
if (parent.nodeName.toLowerCase() === 'a' && parent.childNodes.length === 0) {
if (parent.parentNode) {
parent.parentNode.removeChild(parent);
}
}
}
});
container.appendChild(gallery);
}
ready(function() {
// รองรับกาเลอรี่ทุกแบบ
var gallerySelectors = [
'.my-custom-gallery-container',
'.my-custom-gallery-2col',
'.my-custom-gallery-4col',
'.my-custom-gallery-2col-vertical',
'.my-custom-gallery-3col-vertical'
];
gallerySelectors.forEach(function(selector) {
document.querySelectorAll(selector).forEach(function(container) {
createGallery(container);
});
});
// สำหรับ Blogger ที่โหลดเนื้อหาภายหลัง
setTimeout(function() {
gallerySelectors.forEach(function(selector) {
document.querySelectorAll(selector).forEach(function(container) {
createGallery(container);
});
});
}, 1000);
});
})();
//]]>
</script>
<!-- สิ้นสุดระบบกาเลอรี่รูปภาพ -->
โค้ด เรียกใช้งาน CSS แกลอรี่รูปภาพ 2,3,4 คอลัมม์ ในโพสต์
<!-- วางโค้ดนี้ในโพสต์ที่ต้องการจัดแกลอรี่ 3 คอลัมม์ สัดส่วน 1:1 -->
<div class="my-custom-gallery-container">
<img src="URL-รูปภาพของคุณ-1" alt="คำอธิบาย 1">
<img src="URL-รูปภาพของคุณ-2" alt="คำอธิบาย 2">
<img src="URL-รูปภาพของคุณ-3" alt="คำอธิบาย 3">
<!-- เพิ่มรูปเท่าที่ต้องการ -->
</div>
<!-- วางโค้ดนี้ในโพสต์ที่ต้องการจัดแกลอรี่ 2 คอลัมม์ สัดส่วน 3:2 -->
<div class="my-custom-gallery-2col">
<img src="รูปภาพ-1.jpg" alt="คำอธิบาย 1">
<img src="รูปภาพ-2.jpg" alt="คำอธิบาย 2">
<!-- เพิ่มรูปเท่าที่ต้องการ -->
</div>
<!-- วางโค้ดนี้ในโพสต์ที่ต้องการจัดแกลอรี่ 4 คอลัมม์ สัดส่วน 1:1 -->
<div class="my-custom-gallery-4col">
<img src="รูปภาพ-1.jpg" alt="คำอธิบาย 1">
<img src="รูปภาพ-2.jpg" alt="คำอธิบาย 2">
<img src="รูปภาพ-3.jpg" alt="คำอธิบาย 3">
<img src="รูปภาพ-4.jpg" alt="คำอธิบาย 4">
<!-- เพิ่มรูปเท่าที่ต้องการ -->
</div>
<!-- วางโค้ดนี้ในโพสต์ที่ต้องการจัดแกลอรี่ 2 คอลัมม์ สัดส่วน 2:3 -->
<div class="my-custom-gallery-2col-vertical">
<img src="URL-รูปภาพของคุณ-1" alt="คำอธิบาย 1">
<img src="URL-รูปภาพของคุณ-2" alt="คำอธิบาย 2">
<!-- เพิ่มรูปเท่าที่ต้องการ -->
</div>
<!-- วางโค้ดนี้ในโพสต์ที่ต้องการจัดแกลอรี่ 3 คอลัมม์ สัดส่วน 3:4 -->
<div class="my-custom-gallery-3col-vertical">
<img src="URL-รูปภาพของคุณ-1" alt="คำอธิบาย 1">
<img src="URL-รูปภาพของคุณ-2" alt="คำอธิบาย 2">
<img src="URL-รูปภาพของคุณ-3" alt="คำอธิบาย 3">
<!-- เพิ่มรูปเท่าที่ต้องการ -->
</div>
กล่องรหัสผ่านตรวจคะแนนนักเรียน google sheets
<!--กล่องรหัสผ่านสำหรับชั้น ป.5-->
<div class="password-container" data-box-id="box1" data-passwords="p5/1,p5/2,p5/3">
<div class="password-section">
<h3>ตารางเช็คงานชั้น ป.5</h3>
<input class="password-input" placeholder="ใส่รหัสผ่าน...เพื่อดูข้อมูล" type="password" />
<button class="check-button">ตรวจสอบ</button>
<p class="password-error">รหัสผ่านไม่ถูกต้อง กรุณาลองอีกครั้ง</p>
</div>
<div class="content-section">
<div class="close-button-container">
<button class="close-button">ปิด</button>
</div>
<!--ใส่ iframe ของ Google Sheets สำหรับชั้น ป.5-->
<iframe frameborder="0" height="600" src="URL_your_sheet">
</iframe>
</div>
</div>
<!--กล่องรหัสผ่านสำหรับชั้น ป.6-->
<div class="password-container" data-box-id="box2" data-passwords="p6/1,p6/2,p6/3">
<div class="password-section">
<h3>ตารางเช็คงานชั้น ป.6</h3>
<input class="password-input" placeholder="ใส่รหัสผ่าน...เพื่อดูข้อมูล" type="password" />
<button class="check-button">ตรวจสอบ</button>
<p class="password-error">รหัสผ่านไม่ถูกต้อง กรุณาลองอีกครั้ง</p>
</div>
<div class="content-section">
<div class="close-button-container">
<button class="close-button">ปิด</button>
</div>
<!--ใส่ iframe ของ Google Sheets สำหรับชั้น ป.6-->
<iframe frameborder="0" height="600" src="URL_your_sheet">
</iframe>
</div>
</div>
<!--กล่องรหัสผ่านสำหรับชั้น ม.1-->
<div class="password-container" data-box-id="box3" data-passwords="m1/1,m1/2,m1/3">
<div class="password-section">
<h3>ตารางเช็คงานชั้น ม.1</h3>
<input class="password-input" placeholder="ใส่รหัสผ่าน...เพื่อดูข้อมูล" type="password" />
<button class="check-button">ตรวจสอบ</button>
<p class="password-error">รหัสผ่านไม่ถูกต้อง กรุณาลองอีกครั้ง</p>
</div>
<div class="content-section">
<div class="close-button-container">
<button class="close-button">ปิด</button>
</div>
<!--ใส่ iframe ของ Google Sheets สำหรับชั้น ม.1-->
<iframe frameborder="0" height="600" src="URL_your_sheet">
</iframe>
</div>
</div>
<!--กล่องรหัสผ่านสำหรับชั้น ม.2-->
<div class="password-container" data-box-id="box4" data-passwords="m2/1,m2/2,m2/3">
<div class="password-section">
<h3>ตารางเช็คงานชั้น ม.2</h3>
<input class="password-input" placeholder="ใส่รหัสผ่าน...เพื่อดูข้อมูล" type="password" />
<button class="check-button">ตรวจสอบ</button>
<p class="password-error">รหัสผ่านไม่ถูกต้อง กรุณาลองอีกครั้ง</p>
</div>
<div class="content-section">
<div class="close-button-container">
<button class="close-button">ปิด</button>
</div>
<!--ใส่ iframe ของ Google Sheets สำหรับชั้น ม.2-->
<iframe frameborder="0" height="600" src="URL_your_sheet">
</div>
</div>
<!--กล่องรหัสผ่านสำหรับชั้น ม.3-->
<div class="password-container" data-box-id="box5" data-passwords="m3/1,m3/2,m3/3">
<div class="password-section">
<h3>ตารางเช็คงานชั้น ม.3</h3>
<input class="password-input" placeholder="ใส่รหัสผ่าน...เพื่อดูข้อมูล" type="password" />
<button class="check-button">ตรวจสอบ</button>
<p class="password-error">รหัสผ่านไม่ถูกต้อง กรุณาลองอีกครั้ง</p>
</div>
<div class="content-section">
<div class="close-button-container">
<button class="close-button">ปิด</button>
</div>
<!--ใส่ iframe ของ Google Sheets สำหรับชั้น ม.3-->
<iframe frameborder="0" height="600" src="URL_your_sheet">
</iframe>
</div>
</div>
<!--กล่องรหัสผ่านสำหรับชั้น ม.4-->
<!--<div class="password-container" data-box-id="box5" data-passwords="m4/1,m4/2,m4/3">
<div class="password-section">
<h3>ตารางเช็คงานชั้น ม.3</h3>
<p>กรุณาใส่รหัสนักเรียนหรือรหัสห้องเรียนเพื่อดูข้อมูล</p>
<input type="password" class="password-input" placeholder="ใส่รหัสผ่าน...">
<button class="check-button">ตรวจสอบ</button>
<p class="password-error">รหัสผ่านไม่ถูกต้อง กรุณาลองอีกครั้ง</p>
</div>
<div class="content-section">
<div class="close-button-container">
<button class="close-button">ปิด</button>
</div>
<!-- ใส่ iframe ของ Google Sheets สำหรับชั้น ม.4-->
<!--<iframe src="URL_your_sheet"></iframe>
</div>
</div>-->
<style>
/* สไตล์สำหรับทุกกล่อง */
.password-container {
margin: 30px auto;
max-width: 800px;
border: 1px solid #bd9b82;
border-radius: 10px;
overflow: hidden;
}
.password-section {
text-align: center;
padding: 20px;
background-color: #e8be9e;
}
.password-input {
padding: 8px;
width: 200px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.check-button {
padding: 8px 15px;
background-color: #e58742;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.password-error {
color: red;
display: none;
}
.content-section {
display: none;
padding: 15px;
}
.close-button-container {
text-align: right;
margin-bottom: 10px;
}
.close-button {
padding: 8px 15px;
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// หาทุกกล่องรหัสผ่าน
const containers = document.querySelectorAll('.password-container');
// สำหรับแต่ละกล่อง
containers.forEach(container => {
const boxId = container.getAttribute('data-box-id');
const allowedPasswords = container.getAttribute('data-passwords').split(',');
const passwordSection = container.querySelector('.password-section');
const contentSection = container.querySelector('.content-section');
const passwordInput = container.querySelector('.password-input');
const errorMsg = container.querySelector('.password-error');
const checkButton = container.querySelector('.check-button');
const closeButton = container.querySelector('.close-button');
// ตรวจสอบรหัสผ่านเมื่อกดปุ่ม
checkButton.addEventListener('click', function() {
checkPasswordForBox();
});
// ตรวจสอบรหัสผ่านเมื่อกด Enter
passwordInput.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
checkPasswordForBox();
}
});
// ปุ่มปิด
closeButton.addEventListener('click', function() {
contentSection.style.display = 'none';
passwordSection.style.display = 'block';
passwordInput.value = '';
errorMsg.style.display = 'none';
});
// ฟังก์ชันตรวจสอบรหัสผ่านสำหรับกล่องนี้
function checkPasswordForBox() {
const password = passwordInput.value;
if (allowedPasswords.includes(password)) {
// รหัสผ่านถูกต้อง
passwordSection.style.display = 'none';
contentSection.style.display = 'block';
passwordInput.value = '';
errorMsg.style.display = 'none';
} else {
// รหัสผ่านไม่ถูกต้อง
errorMsg.style.display = 'block';
}
}
});
});
</script>
การ์ดแสดงทำเนียบบุคลการ
<html lang="th">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<style>
.container, .staff-card, .director-card {
box-sizing: border-box;
}
body {
line-height: 1.6;
background: transparent;
color: #333;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.header {
text-align: center;
margin-bottom: 3rem;
padding: 2rem 0;
}
.page-title {
font-size: 3rem;
font-weight: 700;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
margin-bottom: 1rem;
letter-spacing: 2px;
}
.subtitle {
font-size: 1.2rem;
color: rgba(255,255,255,0.9);
font-weight: 300;
}
/* ส่วนผู้อำนวยการ */
.director-section {
margin-bottom: 4rem;
}
.section-title {
font-size: 2.2rem;
font-weight: 600;
color: white;
text-align: center;
margin-bottom: 2rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.director-card {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-radius: 25px;
padding: 3rem;
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.2);
max-width: 600px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.director-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #f12711, #f5af19);
}
/* ตารางบุคลากร */
.staff-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
margin-top: 1rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* จำกัดจำนวนคอลัมน์สูงสุด */
@media (min-width: 1200px) {
.staff-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
max-width: 1400px
}
}
@media (min-width: 900px) and (max-width: 1199px) {
.staff-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
.staff-card {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 1rem;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.staff-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,#f5af19, #f12711);
}
.staff-card:hover {
transform: translateY(-10px) scale(1.04);
box-shadow: 0 30px 60px rgba(0,0,0,0.15);
z-index: 10;
position: relative;
}
/* รูปภาพ */
.photo-container {
text-align: center;
margin-bottom: 1.5rem;
}
.staff-photo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #f8f9ff;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.director-card .staff-photo {
width: 150px;
height: 150px;
border-width: 5px;
}
.staff-photo:hover {
transform: scale(1.05);
box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}
/* ข้อมูลบุคลากร */
.staff-info {
text-align: center;
margin: 0 -2.5rem;
padding: 0 0.5rem;
}
.staff-name {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.director-card .staff-name {
font-size: 1rem;
margin-bottom: 0.8rem;
}
.staff-position {
font-size: 0.9rem;
color: #e74c3c;
font-weight: 500;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.director-card .staff-position {
font-size: 0.9rem;
margin-bottom: 0.8rem;
}
.staff-subject {
font-size: 0.9rem;
color: #3498db;
font-weight: 400;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.director-card .staff-subject {
font-size: 0.9rem;
margin-bottom: 0.8rem;
}
.staff-contact {
font-size: 0.8rem;
color: #7f8c8d;
line-height: 1.5;
background: #f8f9ff;
padding: 0.8rem 1;
margin: 0.5rem 0rem 0 0rem;
border-radius: 0;
word-wrap: break-word;
word-break: break-all;
}
.staff-contact a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
.staff-contact a:hover {
color: #2980b9;
text-decoration: underline;
}
.director-card .staff-contact {
font-size: 0.8rem;
padding: 1rem;
margin-top: 0.8rem;
}
/* placeholder รูปภาพ */
.photo-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, #f8f9ff, #e8f0ff);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
border: 4px solid #f8f9ff;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
color: #667eea;
font-size: 3rem;
transition: all 0.3s ease;
}
.director-card .photo-placeholder {
width: 150px;
height: 150px;
font-size: 4rem;
}
.photo-placeholder:hover {
transform: scale(1.05);
box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}
/* Responsive */
@media (max-width: 899px) {
.staff-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 2.2rem;
}
.director-card {
padding: 2rem;
margin: 0 1rem;
}
.container {
padding: 0 1rem;
}
}
@media (max-width: 480px) {
.staff-card {
padding: 0.8rem;
}
.staff-photo, .photo-placeholder {
width: 100px;
height: 100px;
}
.director-card .staff-photo,
.director-card .photo-placeholder {
width: 130px;
height: 130px;
}
}
/* Floating elements */
.floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.floating-circle {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,0.08);
animation: float 8s ease-in-out infinite;
}
.floating-circle:nth-child(1) {
width: 100px;
height: 100px;
top: 15%;
left: 8%;
animation-delay: 0s;
}
.floating-circle:nth-child(2) {
width: 80px;
height: 80px;
top: 70%;
right: 10%;
animation-delay: 3s;
}
.floating-circle:nth-child(3) {
width: 120px;
height: 120px;
bottom: 15%;
left: 15%;
animation-delay: 6s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-25px);
}
}
</style>
</head>
<body>
<div class="floating-elements">
<div class="floating-circle"></div>
<div class="floating-circle"></div>
<div class="floating-circle"></div>
</div>
<div class="container">
<!-- <header class="header">
<h1 class="page-title">บุคลากรโรงเรียน</h1>
<p class="subtitle">คณาจารย์และเจ้าหน้าที่โรงเรียนตัวอย่าง</p>
</header> -->
<!-- ส่วนผู้อำนวยการ -->
<section class="director-section">
<h2 class="section-title">ผู้อำนวยการโรงเรียน</h2>
<div class="director-card">
<div class="photo-container">
<!-- <div class="photo-placeholder">👨💼</div> -->
<img class="staff-photo" src="URL_YOUR_PHOTO" />
<!-- <img src="path/to/director-photo.jpg" alt="ผู้อำนวยการ" class="staff-photo"> -->
</div>
<div class="staff-info">
<div class="staff-name">นายโรงเรียน นามสกุล</div>
<div class="staff-position">ผู้อำนวยการโรงเรียน<br />วิทยาฐานะ ABC</div>
<div class="staff-subject">บริหารการศึกษา</div>
<div class="staff-contact">
📧<a href="mailto:ABC@gmail.com">ABC@gmail.com</a><br />
📞 <a href="tel:080-000-0000">080-000-0000</a><br />
🏢 ห้องผู้อำนวยการ อาคาร ABC
</div>
</div>
</div>
</section>
<!-- ส่วนบุคลากรอื่นๆ -->
<section class="staff-section">
<h2 class="section-title">คณะครู และเจ้าหน้าที่</h2>
<div class="staff-grid">
<!-- บุคลากรคนที่ 1 -->
<div class="staff-card">
<div class="photo-container">
<!-- <div class="photo-placeholder">👨💼</div> -->
<img class="staff-photo" src="URL_YOUR_PHOTO" />
<!-- <img src="path/to/teacher1.jpg" alt="ครู" class="staff-photo"> -->
</div>
<div class="staff-info">
<div class="staff-name">นายโรงเรียน นามสกุล</div>
<div class="staff-position">ครู<br />วิทยาฐานะ ABC</div>
<div class="staff-subject">กลุ่มสาระ ABC</div>
<div class="staff-contact">
📧 <a href="mailto:ABC@gmail.com">ABC@gmail.com</a><br />
📞 <a href="tel:080-000-0000">080-000-0000</a><br />
🏢 ห้องประถมศึกษาปีที่ 1<br>อาคาร ABC
</div>
</div>
</div>
<!-- บุคลากรคนที่ 2 -->
<div class="staff-card">
<div class="photo-container">
<!-- <div class="photo-placeholder">👨💼</div> -->
<img class="staff-photo" src="URL_YOUR_PHOTO" />
</div>
<div class="staff-info">
<div class="staff-name">นายโรงเรียน นามสกุล</div>
<div class="staff-position">ครู<br />วิทยาฐานะ ABC</div>
<div class="staff-subject">กลุ่มสาระ ABC</div>
<div class="staff-contact">
📧 <a href="mailto:ABC@gmail.com">ABC@gmail.com</a><br />
📞 <a href="tel:080-000-0000">080-000-0000</a><br />
🏢 ห้อง ABC<br>อาคาร ABC
</div>
</div>
</div>
<!-- บุคลากรคนที่ 3 -->
<div class="staff-card">
<div class="photo-container">
<!-- <div class="photo-placeholder">👨💼</div> -->
<img class="staff-photo" src="URL_YOUR_PHOTO" />
</div>
<div class="staff-info">
<div class="staff-name">นายโรงเรียน นามสกุล</div>
<div class="staff-position">ครู<br />วิทยาฐานะ ABC</div>
<div class="staff-subject">กลุ่มสาระ ABC</div>
<div class="staff-contact">
📧 <a href="mailto:ABC@gmail.com">ABC@gmail.com</a><br />
📞 <a href="tel:080-000-0000">080-000-0000</a><br />
🏢 ห้องประถมศึกษาปีที่ 4<br>อาคาร ABC
</div>
</div>
</div>
<!-- บุคลากรคนที่ 16 -->
<div class="staff-card">
<div class="photo-container">
<!-- <div class="photo-placeholder">👨💼</div> -->
<img class="staff-photo" src="URL_YOUR_PHOTO" />
</div>
<div class="staff-info">
<div class="staff-name">นายโรงเรียน นามสกุล</div>
<div class="staff-position">เจ้าหน้าที่ธุรการ<br /></div>
<div class="staff-subject"></div>
<div class="staff-contact">
📧 <a href="mailto:ABC@hotmail.com">ABC@hotmail.com</a><br />
📞 <a href="tel:080-000-0000">080-000-0000</a><br />
🏢 ห้องธุรการ อาคาร ABC
</div>
</div>
</div>
<!-- บุคลากรคนที่ 17 -->
<div class="staff-card">
<div class="photo-container">
<!-- <div class="photo-placeholder">🏃♂️</div> -->
<img class="staff-photo" src="URL_YOUR_PHOTO" />
</div>
<div class="staff-info">
<div class="staff-name">นายโรงเรียน นามสกุล</div>
<div class="staff-position">นักการภารโรง</div>
<div class="staff-subject"></div>
<!-- <div class="staff-contact">
📞 <a href="tel:080-000-0000">080-000-0000</a><br />
</div> -->
</div>
</div>
<!-- บุคลากรคนที่ 18 -->
<div class="staff-card">
<div class="photo-container">
<!-- <div class="photo-placeholder">👩🎨</div> -->
<img class="staff-photo" src="URL_YOUR_PHOTO" />
</div>
<div class="staff-info">
<div class="staff-name">นายโรงเรียน นามสกุล</div>
<div class="staff-position">แม่ครัว<br /></div>
<div class="staff-subject"></div>
<!-- <div class="staff-contact">
📞 <a href="tel:08080-000-0000">080-000-0000</a><br />
</div> -->
</div>
</div>
</div>
</section>
</div>
</body>
</html>
แถบเปิด-ปิดกล่องเอกสาร PDF
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Viewer with Collapsible Header</title>
<style>
.pdf-viewer-widget {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.pdf-container-widget {
max-width: 800px;
margin: 0 auto 20px auto;
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.pdf-header-widget {
background: linear-gradient(135deg, #f39c12 0%, #f4d03f 100%);
color: white;
padding: 15px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
user-select: none;
}
.pdf-header-widget:hover {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
transform: translateY(-2px);
}
.pdf-header-widget h2 {
margin: 0 !important;
font-size: 1.3em !important;
font-weight: 600 !important;
color: black !important;
line-height: 1.2 !important;
}
.pdf-toggle-icon {
font-size: 1.5em;
font-weight: bold;
transition: transform 0.3s ease;
color: black !important;
}
.pdf-toggle-icon.rotated {
transform: rotate(180deg);
}
.pdf-content-widget {
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.3s ease;
background: white;
}
.pdf-content-widget.collapsed {
max-height: 0;
opacity: 0;
}
.pdf-content-widget.expanded {
max-height: 1000px;
opacity: 1;
}
.pdf-iframe-container {
padding: 20px;
text-align: center;
}
.pdf-iframe-container iframe {
border: none;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
max-width: 100%;
}
.pdf-status-widget {
margin-top: 10px;
padding: 10px;
border-radius: 5px;
font-size: 0.9em;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.pdf-status-widget.expanded {
background-color: #d4edda;
color: #155724;
}
.pdf-status-widget.collapsed {
background-color: #f8d7da;
color: #721c24;
}
/* Responsive design */
@media (max-width: 768px) {
.pdf-viewer-widget {
padding: 10px;
}
.pdf-container-widget {
margin: 10px 10px 20px 10px;
}
.pdf-header-widget {
padding: 12px 15px;
}
.pdf-header-widget h2 {
font-size: 1.2em !important;
}
.pdf-iframe-container iframe {
width: 100% !important;
height: 500px !important;
}
}
</style>
</head>
<body class="pdf-viewer-widget">
<div class="pdf-container-widget">
<div class="pdf-header-widget" onclick="toggleContent(1)">
<h2>📄 คู่มือการปฏิบัติงาน กลุ่มงานบุคลากร 👩🧒</h2>
<span class="pdf-toggle-icon" id="toggleIcon1">▼</span>
</div>
<div class="pdf-content-widget collapsed" id="pdfContent1">
<div class="pdf-iframe-container">
<iframe
allow="autoplay"
height="700"
src="URL_YOUR_PDF_File"
width="640">
</iframe>
</div>
</div>
</div>
<div class="pdf-container-widget">
<div class="pdf-header-widget" onclick="toggleContent(2)">
<h2>📄 คู่มือการปฏิบัติงาน กลุ่มงานงบประมาณ 💰💵</h2>
<span class="pdf-toggle-icon" id="toggleIcon2">▼</span>
</div>
<div class="pdf-content-widget collapsed" id="pdfContent2">
<div class="pdf-iframe-container">
<iframe
allow="autoplay"
height="700"
src="URL_YOUR_PDF_File"
width="640">
</iframe>
</div>
</div>
</div>
<div class="pdf-container-widget">
<div class="pdf-header-widget" onclick="toggleContent(3)">
<h2>📄 คู่มือการปฏิบัติงาน กลุ่มงานทั่วไป 🏠🖥️</h2>
<span class="pdf-toggle-icon" id="toggleIcon3">▼</span>
</div>
<div class="pdf-content-widget collapsed" id="pdfContent3">
<div class="pdf-iframe-container">
<iframe
allow="autoplay"
height="700"
src="URL_YOUR_PDF_File"
width="640">
</iframe>
</div>
</div>
</div>
<div class="pdf-container-widget">
<div class="pdf-header-widget" onclick="toggleContent(4)">
<h2>📄 คู่มือการปฏิบัติงาน กลุ่มงานวิชาการ 📝📊</h2>
<span class="pdf-toggle-icon" id="toggleIcon4">▼</span>
</div>
<div class="pdf-content-widget collapsed" id="pdfContent4">
<div class="pdf-iframe-container">
<iframe
allow="autoplay"
height="700"
src="URL_YOUR_PDF_File"
width="640">
</iframe>
</div>
</div>
</div>
<!-- <div class="pdf-status-widget collapsed" id="status">
📁 คลิกที่แถบชื่อเรื่องเพื่อเปิดดู PDF
</div> -->
<script>
// เก็บสถานะของแต่ละกล่อง
let expandedStates = {};
function toggleContent(boxNumber) {
const content = document.getElementById(`pdfContent${boxNumber}`);
const icon = document.getElementById(`toggleIcon${boxNumber}`);
const status = document.getElementById('status');
// เช็คสถานะปัจจุบัน
const isExpanded = content.classList.contains('expanded');
if (isExpanded) {
// ปิดเนื้อหา
content.classList.remove('expanded');
content.classList.add('collapsed');
icon.classList.remove('rotated');
icon.innerHTML = '▼';
status.textContent = '📁 คลิกที่แถบชื่อเรื่องเพื่อเปิดดู PDF';
status.className = 'status collapsed';
expandedStates[boxNumber] = false;
} else {
// ปิดกล่องอื่นๆ ก่อน (ถ้าต้องการให้เปิดทีละกล่อง)
// closeAllBoxes();
// เปิดเนื้อหา
content.classList.remove('collapsed');
content.classList.add('expanded');
icon.classList.add('rotated');
icon.innerHTML = '▲';
status.textContent = `📖 เอกสาร PDF ที่ ${boxNumber} กำลังแสดงผล`;
status.className = 'status expanded';
expandedStates[boxNumber] = true;
}
}
// ฟังก์ชันสำหรับปิดกล่องทั้งหมด (เอาคอมเมนต์ออกถ้าต้องการให้เปิดทีละกล่อง)
function closeAllBoxes() {
Object.keys(expandedStates).forEach(boxNumber => {
if (expandedStates[boxNumber]) {
const content = document.getElementById(`pdfContent${boxNumber}`);
const icon = document.getElementById(`toggleIcon${boxNumber}`);
content.classList.remove('expanded');
content.classList.add('collapsed');
icon.classList.remove('rotated');
icon.innerHTML = '▼';
expandedStates[boxNumber] = false;
}
});
}
// เพิ่มการสนับสนุนแป้นพิมพ์
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter' || event.key === ' ') {
const header = event.target.closest('.pdf-header-widget');
if (header) {
event.preventDefault();
const onclick = header.getAttribute('onclick');
if (onclick) {
eval(onclick);
}
}
}
});
// ทำให้ header สามารถ focus ได้
document.querySelectorAll('.pdf-header-widget').forEach(header => {
header.setAttribute('tabindex', '0');
});
</script>
</body>
</html>
คัดลอกโค้ดไปยังคลิปบอร์ดแล้ว
Tags:
ดาวน์โหลด
