ZantinoGame #EP (ตอนย่อย)

<!--
[คู่มือการใช้งาน]
สีหลัก: --ztngame-primary: #ff7f00;
ฟอนต์: --ztngame-font: 'Bai Jamjuree', sans-serif; *อย่าลืมเอาลิงก์ฟอนต์มาด้วย

----------------------------------------

***สำคัญ***
data-group="0" / name="game-0" / พวกมี -0 ต่อท้าย จะต้องไม่ซ้ำกันในแต่ละโพสต์
เช่น โพสต์ #1 (หัวกระทู้) ให้ใส่ data-group="0" / name="game-0" / -0 ต่อท้าย
    โพสต์ EP.1 (ตอนย่อย) ให้ใส่ data-group="1" / name="game-1" / -1 ต่อท้าย
    โพสต์ EP.2 (ตอนย่อย) ให้ใส่ data-group="2" / name="game-2" / -2 ต่อท้าย
    .
    .
    .
    โพสต์ EP.x (ตอนย่อย) ให้ใส่ data-group="x" / name="game-x" / -x ต่อท้าย

มีผลเฉพาะในกระทู้เดียวกัน หน้าเดียวกัน เท่านั้น

----------------------------------------

ถ้ารูปมีไม่ถึง 5 รูป ให้ลบ <label> ที่ไม่มีออกไป
เช่น มี 3 รูป ก็ลบ <label for="img4-0"></label> กับ <label for="img5-0"></label> ออก

----------------------------------------

สารบัญแต่ละตอน ถ้าต้องการเพิ่มตอน ให้ก๊อปข้างล่างไปเติม

<a href="--ลิงก์โพสต์ Ep.X--">
<div style="--ztngame-pic: url(--ลิงก์รูป Ep.X);"></div>
<div class="ztngame-ep"><b>EP.X</b>--ชื่อตอน--</div>
</a>

----------------------------------------

ตำแหน่งภาพ : เพิ่ม --ztngame-pos: 50% 50%; ต่อท้ายลิงก์รูปที่ต้องการปรับ
 - เลขตัวแรกคือการขยับซ้าย - ขวา โดย 0% = ชิดซ้าย 100% = ชิดขวา
 - เลขตัวแรกคือการขยับขึ้น - ลง โดย 0% = ชิดบน 100% = ชิดล่าง

ขนาดภาพ : เพิ่ม --ztngame-size: cover; ต่อท้ายลิงก์รูปที่ต้องการปรับ
 - cover คือ ขยายเต็มพื้นที่
 - 100% คือ ขนาดเดิมของรูป
 - มากกว่า 100% คือ ขนาดใหญ่ขึ้น
 - น้อยกว่า 100% คือ ขนาดเล็กลง
-->


<link href="https://dl.dropbox.com/scl/fi/wp0zsaxx3l8kpzmgc51vl/zantino-game.css?rlkey=cw2qdt112xhmq07ltpoe59kqi&st=sjm6knoq" rel="stylesheet"><div id="ZantinoGame"><a href="https://discord.com/users/625292873914515456/"></a><div class="ztngame-box" style="--ztngame-primary: #ff7f00;--ztngame-font: 'Bai Jamjuree', sans-serif;" data-group="x">
<input type="radio" name="game-x" data-item="yt" id="yt-x" checked />
<input type="radio" name="game-x" data-item="img1" id="img1-x" />
<input type="radio" name="game-x" data-item="img2" id="img2-x" />
<input type="radio" name="game-x" data-item="img3" id="img3-x" />
<input type="radio" name="game-x" data-item="img4" id="img4-x" />
<input type="radio" name="game-x" data-item="img5" id="img5-x" />
<div class="ztngame-left">
<img src="--ลิงก์รูป โลโก้เกม--">
<details class="ztngame-details"><summary class="ztngame-summary"><i class="ztngame-warning-icon"></i><div class="ztngame-warning-title"><h3>Trigger Warning</h3>คลิกเพื่ออ่านรายละเอียด</div></summary>
เขียนบรรยาย tw หรือเขียนเป็นข้อก็ได้
[list]
[*]tw 1
[*]tw 2
[*]tw 3
[/list]
</details>
<div class="ztngame-gallery">
<iframe src="https://www.youtube.com/embed/--รหัสยูทูป--" frameborder="0" allowfullscreen></iframe>
<div img="img1" style="--ztngame-pic: url(--ลิงก์รูป screenshot--);"></div>
<div img="img2" style="--ztngame-pic: url(--ลิงก์รูป screenshot--);"></div>
<div img="img3" style="--ztngame-pic: url(--ลิงก์รูป screenshot--);"></div>
<div img="img4" style="--ztngame-pic: url(--ลิงก์รูป screenshot--);"></div>
<div img="img5" style="--ztngame-pic: url(--ลิงก์รูป screenshot--);"></div>
</div>
<div class="ztngame-nav">
<label for="yt-x" class="yt"></label>
<label for="img1-x"></label>
<label for="img2-x"></label>
<label for="img3-x"></label>
<label for="img4-x"></label>
<label for="img5-x"></label></div>
<h1><b>EP.XX</b>--ชื่อตอนย่อย--</h1>
<div class="ztngame-content">--บรรยาย--</div>
</div></div></div>