คลิก 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>
คัดลอกโค้ดไปยังคลิปบอร์ดแล้ว
Tags:
ดาวน์โหลด
