Counter-Popup
Counter-Popup
นับยอดเข้าเว็บ
Free Counter Stat : ยินดีต้อนรับ! จำนวนผู้เข้าชมแล้ว
<p style="font-size: 12px; color: #00BFFF;">ยินดีต้อนรับ! จำนวนผู้เข้าชมแล้ว:</p>
<a href="https://www.freecounterstat.com" title="visitors counter">
<img src="https://counter6.optistats.ovh/private/freecounterstat.php?c=yz72c5hpj678ftxyxcqr4q7l2956fz3b" border="0" title="visitors counter" alt="visitors counter">
</a>
Modal Pop up
Prof-local
<!-- นำเข้า CSS ของ Bootstrap และฟอนต์ Kanit จาก Google Fonts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap" rel="stylesheet">
<!-- นำเข้า Popper.js, Bootstrap และ jQuery -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style>
/* กำหนดฟอนต์หลักของเอกสารเป็นฟอนต์ Kanit */
* {
font-family: 'Kanit', sans-serif;
}
/* ปรับพื้นหลังของ modal-backdrop ให้มีความโปร่งแสง 50% */
.modal-backdrop {
background-color: rgba(0, 0, 0, 0) !important;
}
/* ปรับพื้นหลัง modal-content ให้โปร่งแสงและมุมมน */
.modal-content {
background-color: rgba(255, 255, 255, 0.0); /* พื้นหลังโปร่งแสง */
border-radius: 15px; /* มุมมน */
border-color: #FFFFFF; /* สีขอบ */
}
/* ปรับสีของปุ่มให้เป็นสีฟ้า */
.modal-footer .btn {
background-color: #007bff; /* สีพื้นหลังของปุ่ม */
border-color: #007bff; /* สีขอบของปุ่ม */
color: white; /* สีตัวหนังสือในปุ่ม */
}
/* เปลี่ยนสีปุ่มเมื่อผู้ใช้เอาเมาส์ไปวาง */
.modal-footer .btn:hover {
background-color: #0056b3; /* สีพื้นหลังเมื่อ hover */
border-color: #0056b3; /* สีขอบเมื่อ hover */
}
/* ปรับขนาดปุ่มให้ใหญ่ขึ้น */
.modal-footer .btn-lg {
padding: 10px 20px; /* ขนาดของ padding ในปุ่ม */
font-size: 18px; /* ขนาดฟอนต์ */
}
/* ปรับสีตัวหนังสือใน modal */
.modal-body, .modal-footer, .modal-header {
color: white; /* เปลี่ยนสีข้อความใน modal ให้เป็นสีขาว */
}
/* จัดให้ภาพใน modal-body อยู่กึ่งกลางทั้งแนวนอนและแนวตั้ง */
.modal-body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* กำหนดขนาดและอัตราส่วนของภาพ */
.modal-body img {
width: 150%; /* ขยายภาพให้กว้างขึ้น */
max-width: 150%;
height: auto; /* ทำให้ภาพไม่ยืดหรือหด */
object-fit: contain; /* ปรับขนาดภาพโดยไม่เสียอัตราส่วน */
}
</style>
<script type="text/javascript">
$(window).on('load', function() {
// แสดง modal เมื่อโหลดหน้าเว็บครั้งแรก และบันทึกสถานะการแสดงใน localStorage
if (!localStorage.getItem('modalShown')) {
$('#myModal').modal('show');
localStorage.setItem('modalShown', 'true');
}
});
// ฟังก์ชันเปิดหน้าใหม่ไปยัง URL ที่ตั้งไว้เมื่อคลิกปุ่ม
function openpage1() {
window.open("https://sites.google.com/view/prof-local/Home", "_blank");
}
function openpage2() {
window.open("https://script.google.com/macros/s/AKfycbyQIfL8iksXsDhx7ZgcqHL4DUxo5JPi5XTzU1D8Cibop67VtmfnApHpWoJsqGda0Vzeqg/exec", "_blank");
}
</script>
<!-- ส่วนของ Modal -->
<div class="modal fade" id="myModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- ส่วน modal-body -->
<div class="modal-body">
<!-- ภาพที่ต้องการให้แสดงใน modal -->
<img src="https://lh3.googleusercontent.com/d/1L-Fj2FvC3TywiH3XKKNa2fbVb0l7OOHA" alt="Health website banner" />
</div>
<!-- ส่วน modal-footer สำหรับปุ่มลิงก์ -->
<div class="modal-footer mx-auto">
<button type="button" class="btn btn-sm" onclick="openpage1()">เข้าเว็บรวมคู่มืองานคนท้องถิ่น</button>
<button type="button" class="btn btn-sm" onclick="openpage2()">เข้าเว็บ ห้องสมุด อบจ.</button>
</div>
</div>
</div>
</div>
Health RNG
<!-- นำเข้า CSS ของ Bootstrap และฟอนต์ Kanit จาก Google Fonts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap" rel="stylesheet">
<!-- นำเข้า Popper.js, Bootstrap และ jQuery -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style>
/* กำหนดฟอนต์หลักของเอกสารเป็นฟอนต์ Kanit */
* {
font-family: 'Kanit', sans-serif;
}
/* ปรับพื้นหลังของ modal-backdrop ให้มีความโปร่งแสง 50% */
.modal-backdrop {
background-color: rgba(0, 0, 0, 0) !important;
}
/* ปรับพื้นหลัง modal-content ให้โปร่งแสงและมุมมน */
.modal-content {
background-color: rgba(255, 255, 255, 0.1); /* พื้นหลังโปร่งแสง */
border-radius: 15px; /* มุมมน */
border-color: #219DFF; /* สีขอบ */
}
/* ปรับสีของปุ่มให้เป็นสีฟ้า */
.modal-footer .btn {
background-color: #007bff; /* สีพื้นหลังของปุ่ม */
border-color: #007bff; /* สีขอบของปุ่ม */
color: white; /* สีตัวหนังสือในปุ่ม */
}
/* เปลี่ยนสีปุ่มเมื่อผู้ใช้เอาเมาส์ไปวาง */
.modal-footer .btn:hover {
background-color: #0056b3; /* สีพื้นหลังเมื่อ hover */
border-color: #0056b3; /* สีขอบเมื่อ hover */
}
/* ปรับขนาดปุ่มให้ใหญ่ขึ้น */
.modal-footer .btn-lg {
padding: 10px 20px; /* ขนาดของ padding ในปุ่ม */
font-size: 18px; /* ขนาดฟอนต์ */
}
/* ปรับสีตัวหนังสือใน modal */
.modal-body, .modal-footer, .modal-header {
color: white; /* เปลี่ยนสีข้อความใน modal ให้เป็นสีขาว */
}
/* จัดให้ภาพใน modal-body อยู่กึ่งกลางทั้งแนวนอนและแนวตั้ง */
.modal-body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* กำหนดขนาดและอัตราส่วนของภาพ */
.modal-body img {
width: 150%; /* ขยายภาพให้กว้างขึ้น */
max-width: 150%;
height: auto; /* ทำให้ภาพไม่ยืดหรือหด */
object-fit: contain; /* ปรับขนาดภาพโดยไม่เสียอัตราส่วน */
}
</style>
<script type="text/javascript">
$(window).on('load', function() {
// แสดง modal เมื่อโหลดหน้าเว็บครั้งแรก และบันทึกสถานะการแสดงใน localStorage
if (!localStorage.getItem('modalShown')) {
$('#myModal').modal('show');
localStorage.setItem('modalShown', 'true');
}
});
// ฟังก์ชันเปิดหน้าใหม่ไปยัง URL ที่ตั้งไว้เมื่อคลิกปุ่ม
function openpage1() {
window.open("https://sites.google.com/view/prof-local/Home", "_blank");
}
function openpage2() {
window.open("https://script.google.com/macros/s/AKfycbyQIfL8iksXsDhx7ZgcqHL4DUxo5JPi5XTzU1D8Cibop67VtmfnApHpWoJsqGda0Vzeqg/exec", "_blank");
}
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body text-end">
<img src="https://lh3.googleusercontent.com/d/1hd6G7r-coWjz1W5jDUdaO2F_86CL-HbY" width="120%" alt="Modal
Image"/>
</div>
<div class="modal-footer mx-auto">
<button type="button" class="btn btn-dark btn-lg" onclick="openpage()">เข้าสู่เว็บไซต์</button>
</div>
</div>
</div>
</div>
Popup + นับยอดเข้าใช้งาน สำหรับ Google Sheet
code.gs
function onOpen() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("logincome"); // เลือกชีทที่ชื่อว่า logincome
var ui = SpreadsheetApp.getUi(); // ใช้ UI ของ Google Sheets
// ดึงจำนวนผู้เข้าใช้งานจากเซลล์ B1
var countCell = sheet.getRange("B1"); // กำหนดให้เก็บจำนวนผู้เข้าใช้งานในเซลล์ B1
var currentCount = countCell.getValue() || 0; // ถ้ามีค่าที่เก็บอยู่ก็ใช้ ถ้าไม่มีเริ่มต้นที่ 0
// เพิ่มจำนวนผู้เข้าใช้งาน
currentCount++;
countCell.setValue(currentCount); // บันทึกค่าใหม่ลงในเซลล์ B1
// เพิ่มการบันทึกวันที่และเวลาของการเข้าถึง
var timestamp = new Date(); // ใช้วันและเวลาปัจจุบัน
sheet.appendRow([timestamp]); // เพิ่มแถวใหม่ที่บันทึกเวลาเข้าถึง
// แสดง Popup
var htmlOutput = HtmlService.createHtmlOutputFromFile('popup')
.setWidth(650) // กำหนดความกว้างของ popup
.setHeight(550); // กำหนดความสูงของ popup
// ส่งข้อมูลจำนวนผู้เข้าใช้งานไปยัง popup
htmlOutput.append('<script>window.onload = function() {document.getElementById("userCount").innerText = "' + currentCount + '";}</script>');
ui.showModalDialog(htmlOutput, 'มิสเตอร์ เอ สวัสดีครับ'); // แสดง popup
}
Popup.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Prompt, sans-serif;
text-align: left;
margin: 10px;
}
.popup-container {
margin-top: 10px;
text-align: left;
font-size: 14px;
}
.image {
display: block;
margin: 0 auto;
width: 80%;
max-width: 300px;
height: auto;
}
.button-container {
text-align: center;
margin-top: 20px;
}
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background-color: #45a049;
}
p {
line-height: 1;
margin: 5px 0;
}
.link {
color: #1e90ff;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
.styled-text {
color: brown;
font-weight: bold;
}
</style>
</head>
<body>
<div class="popup-container">
<img src="https://lh3.googleusercontent.com/d/1_noTgPW4yiBrTA86g3qDW_F2a0oirqzW" alt="Welcome Image" class="image">
</div>
<b><p>หมายเหตุ</p></b>
<p>- ชุดคำนวณนี้ ใช้ได้เฉพาะการปรับเงินเดือน รอบ 1 พฤษภาคม 2567 เท่านั้น</p>
<p>- ใช้งานซีทไหนก็ได้ หรือสามารถ สำเนาชีตเพื่อเป็นข้อมูลของตัวเองเท่านั้นได้</p>
<p>- สามารถดาวน์โหลดลงคอมพิวเตอร์ส่วนตัว เป็น Excel File ได้เลย</p>
<p>- พบปัญหาการใช้งาน ติดต่อที่ Line ID : mrtrd หรือคลิก <a href="https://line.me/ti/p/Ncz9Fz4UQx" class="link" target="_blank">Add Line</a></p>
<p>- เข้า site ของ มิสเตอร์เอ ได้ที่ sites.google.com/view/prof-local หรือคลิก <a href="https://sites.google.com/view/prof-local" class="link" target="_blank">Go To Site</a></p>
<br>
<p class="styled-text">จำนวนผู้เข้าใช้งานแล้ว : <span id="userCount"></span> ครั้ง (24 กรกฎาคม 2567)</p>
</body>
</html>
</body>
</html>