มณฑล พร้อมสันเทียะ

รวมฝังโค้ด New Google sites

สร้าง Timeline กิจกรรม/งาน

แทรก <> ฝัง
เลือก ฝังโค็ด
นำ code ท้ายนี้ไปวาง/แก้ไขตามต้องการ

<style>

* {

box-sizing: border-box;

}

body {

background-color: #474e5d;

font-family: 'Prompt', sans-serif;

}

/* The actual timeline (the vertical ruler) */

.timeline {

position: relative;

max-width: 1200px;

margin: 0 auto;

}

/* The actual timeline (the vertical ruler) */

.timeline::after {

content: '';

position: absolute;

width: 6px;

background-color: white;

top: 0;

bottom: 0;

left: 50%;

margin-left: -3px;

}

/* Container around content */

.container {

padding: 10px 40px;

position: relative;

background-color: inherit;

width: 50%;

}

/* The circles on the timeline */

.container::after {

content: '';

position: absolute;

width: 25px;

height: 25px;

right: -17px;

background-color: white;

border: 4px solid #FF9F55;

top: 15px;

border-radius: 50%;

z-index: 1;

}

/* Place the container to the left */

.left {

left: 0;

}

/* Place the container to the right */

.right {

left: 50%;

}

/* Add arrows to the left container (pointing right) */

.left::before {

content: " ";

height: 0;

position: absolute;

top: 22px;

width: 0;

z-index: 1;

right: 30px;

border: medium solid white;

border-width: 10px 0 10px 10px;

border-color: transparent transparent transparent white;

}

/* Add arrows to the right container (pointing left) */

.right::before {

content: " ";

height: 0;

position: absolute;

top: 22px;

width: 0;

z-index: 1;

left: 30px;

border: medium solid white;

border-width: 10px 10px 10px 0;

border-color: transparent white transparent transparent;

}

/* Fix the circle for containers on the right side */

.right::after {

left: -16px;

}

/* The actual content */

.content {

padding: 20px 30px;

background-color: white;

position: relative;

border-radius: 6px;

}

/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {

/* Place the timelime to the left */

.timeline::after {

left: 31px;

}

/* Full-width containers */

.container {

width: 100%;

padding-left: 70px;

padding-right: 25px;

}

/* Make sure that all arrows are pointing leftwards */

.container::before {

left: 60px;

border: medium solid white;

border-width: 10px 10px 10px 0;

border-color: transparent white transparent transparent;

}

/* Make sure all circles are at the same spot */

.left::after, .right::after {

left: 15px;

}

/* Make all right containers behave like the left ones */

.right {

left: 0%;

}

</style>

<h2>2021 ส่วนหัวทางซ้าย</h2>

<p>รายละเอียด</p>

</div>

<h2>2021 ส่วนหัวทางขวา</h2>

<p>รายละเอียด <a href="https://www.gotoknow.org/posts/301085">คำสั่งสร้างลิงค์</a><br>

เสร็จเรียบร้อย

</p>

</div>

<h2>1-30 ตุลาคม 2564</h2>

<p>บันทึกข้อมูลอาคารสิ่งก่อสร้าง <a href="https://bobec.bopp-obec.info">B-OBEC</a>

</p>

</div>

</div>

นับเวลาถอยหลัง

ตัวอย่าง ศูนย์บริหารข้อมูลกลาง สพป.ลย.๑

แทรก <> ฝัง
เลือก ฝังโค็ด
นำ code ท้ายนี้ไปวาง/แก้ไขตามต้องการ

<style>

body{

font-family: 'Prompt', sans-serif;

color: orange;

}

</style>

// Set the date we're counting down to //ตั้งค่า เดือน วัน ปี เวลา สิ้นสุดการนับ

var countDownDate = new Date("June 25, 2021 16:30:00").getTime();

// Update the count down every 1 second

var x = setInterval(function() {

// Get today's date and time

var now = new Date().getTime();

// Find the distance between now and the count down date

var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo" *** ข้อความที่ต้องการให้แสดงหน้าเว็บไซต์ ***

document.getElementById("demo").innerHTML = days + " วัน " + hours + " ชั่วโมง "

+ minutes + " นาที " + seconds + " วินาที ";

// If the count down is over, write some text

if (distance < 0) {

clearInterval(x);

document.getElementById("demo").innerHTML = "EXPIRED : 0 วัน 0 นาที 0 วินาที"; //แสดงข้อความหลังสิ้นสุดเวลาที่กำหนด

}

}, 1000);

</script>

</center>

สร้างค้นหาตาราง Filter Table

ตัวอย่าง ศูนย์บริหารข้อมูลกลาง สพป.ลย.๑

แทรก <> ฝัง
เลือก ฝังโค็ด
นำ code ท้ายนี้ไปวาง/แก้ไขตามต้องการ

<style>

body{

font-family: 'Prompt', sans-serif;

}

* {

box-sizing: border-box;

}

#myInput {

background-image: url('/css/searchicon.png');

background-position: 10px 10px;

background-repeat: no-repeat;

width: 100%;

font-size: 16px;

padding: 12px 20px 12px 40px;

border: 1px solid #ddd;

margin-bottom: 12px;

}

#myTable {

border-collapse: collapse;

width: 100%;

border: 1px solid #ddd;

font-size: 18px;

}

#myTable th, #myTable td {

text-align: left;

padding: 12px;

}

#myTable tr {

border-bottom: 1px solid #ddd;

}

#myTable tr.header, #myTable tr:hover {

background-color: #f1f1f1;

}

</style>

</head>

<body>

<h2>แบบตรวจการเปิดเผยข้อมูลสาธารณะ (Open Data Integrity and Transparency Assessment : OIT) ประจำปีงบประมาณ พ.ศ.2564</h2>

<th style="width:40%;">รายละเอียดข้อมูลที่เผยแพร่</th>

<th style="width:40%;">หมายเหตุ</th>

</tr>

<tr>

<td valign=top>โครงสร้างหน่วยงาน</td>

<td><li>แสดงแผนผังแสดงโครงสร้างการแบ่งส่วนราชการของหน่วยงาน</li>

<li>ประกอบด้วยตําแหน่งที่สําคัญ และการแบ่งส่วนงานภายใน เช่น กลุ่ม/งาน เป็นต้น</li></td>

<td valign=top><i class="fa fa-link"></i> <a href="https://w.loei1.go.th/">โครงสร้างแบ่งส่วนราชการ</a></td></tr>

<tr>

<td valign=top>ข้อมูลผู้บริหาร</td>

<td><li>แสดงรายนามของผู้บริหารของหน่วยงาน</li><li>ประกอบด้วยชื่อ-นามสกุล ตําแหน่ง รูปถ่าย ช่องทางการติดต่อ ผู้บริหารสูงสุดหรือหัวหน้าหน่วยงาน และผู้ดํารงตําแหน่งทางการบริหารของหน่วยงาน</li>

</td>

<td valign=top><i class="fa fa-link"></i> <a href="https://w.loei1.go.th/">โครงสร้างการบริหาร</a></td></tr>

<tr>

</td>

<td valign=top><i class="fa fa-link"></i> <a href="https://w.loei1.go.th/">โครงสร้างการบริหาร</a></td></tr>

</table>

function myFunction() {

var input, filter, table, tr, td, i, txtValue;

input = document.getElementById("myInput");

filter = input.value.toUpperCase();

table = document.getElementById("myTable");

tr = table.getElementsByTagName("tr");

for (i = 0; i < tr.length; i++) {

td = tr[i].getElementsByTagName("td")[0];

if (td) {

txtValue = td.textContent || td.innerText;

if (txtValue.toUpperCase().indexOf(filter) > -1) {

tr[i].style.display = "";

} else {

tr[i].style.display = "none";

}

</script>

แหล่งข้อมูล : https://www.w3schools.com/howto/default.asp

Page updated

Report abuse