สร้างแบนเนอร์ด้วย Bootstrap carousel

0

 

      Bootstrap คือชุดคำสั่งที่ประกอบด้วยภาษา CSS, HTML และ Javascript เป็นชุดคำสั่งที่ถูกพัฒนาขึ้นมาเพื่อกำหนดกรอบหรือ รูปแบบการพัฒนาเว็บไซต์ในส่วนของการปฏิสัมพันธ์กับผู้ใช้งานเว็บไซต์ ( User Interface ) เราจึงสามารถเรียก Bootstrap ว่าเป็น Front-end framework คือใช้สำหรับ พัฒนาเว็บไซต์ส่วนการแสดงผล ซึ่งแตกต่างจากภาษาประเภท Server Side Script อย่าง PHP, Python หรือภาษาอื่น ๆ

     ซึ่งวันนี้เราจะนำ carousel ของ  Bootstrap มาทำเป็นสไลด์แบนเนอร์โฆษณาของ Blogger กัันนะะครับ ก่อนอื่นท่านต้องแน่ใจว่าท่านได้ติดตั้งตัวจัดการแพ็คเกจ jsDelivr ซึ่งเป็น CDN ของ Bootstrap ไว้ในธีมของท่านแล้ว หากท่านยังไม่ติดตั้งให้ท่านดำเนินการตามขั้นตอนดังนี้

ขั้นตอนการติดตั้งตัวจัดการแพ็คเกจ

1. ทำการสำรองข้อมูลธีมของท่าน

2. เปิดโหมดแก้ไข HTML ของธีมของท่าน

3. ค้นหาแท็กคำว่า <head>

4. คัดลอกโค้ดด้านล่าง

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

5. นำโค้ดไปวางไว้ตำแหน่งด้านล่างของบรรทัด<head>

 <head>

   .....................โค้ด.............

6. ค้นหาแท็กคำว่า </body>

7. คัดลอกโค้ดด้านล่าง

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

8. นำโค้ดไปวางไว้ตำแหน่งด้านบนของบรรทัด </body>

 ...................โค้ด.............

 </body>

9. ทำการบันทึกการแก้ไขธีม

ขั้นตอนการทำแบนเนอร์

1. เพิ่มวิดเจ็ต (widget)HTML/JavaScript



2. คัดลอกโค้ด carousel จากลิงก์ด้านล่างนี้

https://getbootstrap.com/docs/5.1/components/carousel/

3. เลือกรูปแบบ  carousel ที่ท่านต้องการ  เช่น ....

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="xxxลิงก์รูปภาพxxx" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="xxxลิงก์รูปภาพxxx" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="xxxลิงก์รูปภาพxxx" class="d-block w-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
view rawgistfile1.txt hosted with ❤ by GitHub

4. คัดลอกโค้ดไปวางใน วิดเจ็ต HTML/JavaScript ที่ท่านเพิ่มเข้ามา



5. แก้ไขโค้ดของแท็ก img ทั้ง 3 บรรทัด



       5.1 นำลิงก์ของรูปภาพมาใส่แทน ... ระหว่าง "" หลัง src="..."

       5.2 ใส่ชื่อของรูปภาพแทน ... ระหว่าง "" หลัง alt="..."

เช่น <img src="https://github.com/semicon/semicon.github.io/blob/master/img/img-01.jpg" class="d-block w-100" alt="โลโก้">

6. บันทึกวิดเจ็ต



7. ทดสอบ ดูบล็อก


เท่านี้ท่านก็จะได้แบนเนอร์สวยๆ ไว้ใช้งานแล้วครับ หากพบปัญหาหรือข้อสงสัย ฝากข้อความไว้ครับ


ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={green}
Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า