รวมสูตรใช้งาน

Counter-Popup

นับยอดเข้าเว็บ

Free Counter Stat : ยินดีต้อนรับ! จำนวนผู้เข้าชมแล้ว

<p style="font-size: 12px; color: #00BFFF;">ยินดีต้อนรับ! จำนวนผู้เข้าชมแล้ว:</p>

</a>

Modal Pop up

Prof-local

<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>

$(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>

</div>

<button type="button" class="btn btn-sm" onclick="openpage1()">เข้าเว็บรวมคู่มืองานคนท้องถิ่น</button>

<button type="button" class="btn btn-sm" onclick="openpage2()">เข้าเว็บ ห้องสมุด อบจ.</button>

</div>

Health RNG

<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>

$(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>

<img src="https://lh3.googleusercontent.com/d/1hd6G7r-coWjz1W5jDUdaO2F_86CL-HbY" width="120%" alt="Modal

Image"/>

</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>

<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>