มาทำ Photo Gallery ลงใน Post กันเถอะ !! Step by Step แบบจับมือทำ !
ตัวอย่าง 📸 Mali, the Cat 🐈
ไม่ยาก แค่ก๊อป Code แปะๆ ก๊อป URL รูป แปะๆ แค่นี้ก็เรียบร้อยยยย
เครื่องมือ / อุปกรณ์
1. Code : Code Github
2. Blog Post ไว้ทำ Gallery
3. Photo : ภาพที่จะเอามาใส่ใน Gallery ให้ทำการอัพโหลดใส่ Blogger เตรียมไว้เลย
//สามารถจัดการรูปภาพใน Blogger ได้ใน blogger.com/mediamanager
How to เมื่อพร้อมแล้ว ก็มาเริ่มกันเลย
1️⃣ อันดับแรก มาเตรียม Post ไว้ทำ Gallery กันก่อน
เข้า Blogger Dashboard >> สร้าง New Post >> จากนั้นดูที่มุมซ้ายบน รูปดินสอ (Compose View) ให้เปลี่ยนเป็น < > HTML View
2️⃣ Copy Code มาใส่ใน Post
เข้าไปที่ Code Github >> คลิกที่ index.html >> ให้ทำการ Copy บรรทัดที่ 20 ถึง บรรทัดที่ 79 แล้วนำมาวางใน Post ที่เตรียมไว้
3️⃣ พิมพ์ script ไว้ท้ายสุดของ Post ไว้รอใส่ JavaScript
4️⃣ กลับไปหน้า Code Github >> คลิกที่ main.js >> Copy Code ทั้งหมด
<script> มาใส่ตรงนี้ </script>
(จากรูปบน วาง Code ใน บรรทัดที่ 64 หรือ 65 ก็ได้)
5️⃣ เปลี่ยน URL รูปภาพ
เข้าไปที่ blogger.com/mediamanager กดที่รูป และ Copy URL รูปมาใส่แทนตรง image/1.jpg ตามรูปด้านล่างนี้
**ทำซ้ำ ตามจำนวนรูปที่เตรียมมา
6️⃣ ใส่คำบรรยายใต้รูป
เปลี่ยนข้อความตรงนี้ได้เลย เมื่อเสร็จเรียบร้อยก็กด Publish เลยยย
7️⃣ เมื่อเรียบร้อยแล้ว ก็มาถึงขั้นตอนสุดท้าย การใส่ CSS ใน Theme ให้แสดงผล
ไปที่ Blogger Dashboard >> Theme >> กด ลูกศรลง ข้างปุ่ม Customize
ก่อนอื่น ให้เลือก Back up Theme ไว้ก่อน (เซฟให้เรียบร้อย) จากนั้นเลือก Edit HTML
เลื่อนหา บรรทัดล่างสุดของ CSS ตามรูปด่านล่าง (หรืออาจค้นหา /b:skin ก็ได้เหมือนกัน)
8️⃣ พิมพ์ระบุไว้หน่อย /* Image Gallery */ จากนั้นกลับไปที่ Code Github >> เลือก style.css >> Copy Code ทั้งหมด แล้วเอามาแปะใต้ /* Image Gallery */ ตามรูป
หลังจากวาง Code แล้ว ให้เลื่อนขึ้นไปบรรทัดต้นๆของ Code ที่แปะ ไปแก้ไขบรรทัด h2 ให้เป็นดังรูปด้านล่าง
เสร็จแล้วก็กด Save
9️⃣ กลับไปที่ Post ของเรา แก้ไขส่วน h2 โดยเพิ่ม class เข้าไป จากนั้นกด update
แก้ไข เมื่อ Fonts ไม่แสดง
ไปหน้า Code Github >> คลิกที่ index.html >> Copy Code บรรทัดที่ 9 ถึง บรรทัดที่ 15
จากนั้น ไปที่ Blogger Dashboard >> Theme >> กด ลูกศรลง ข้างปุ่ม Customize เลือก Edit HTML
นำ Code ไปวางใต้ <head> ตามภาพ แล้วกด Save ( <head> จะอยู่บรรทัดแรกๆเลย หาไม่ยาก)
เรียบร้อยแล้ว Gallery in Blogger !!
ที่มา YouTube
0 💬 🗨️