Code ใช้ในการสร้าง float social bar (ปรับปรุงเนื้อหาจากบทความเก่า)

Code ใช้ในการสร้าง float social bar

เป็นโค้ดที่ไว้ทำให้ไอค่อนติดต่อของเราตรึงอยู่บนหน้าจอตลอด ไม่ว่าจะมีการหมุนหน้าจอขึ้นลง

ตามภาพตัวอย่างค่ะ

เป็นการดัดแปลงมาจากในเว็บ W3Schools การนำไปใช้ อาจต้องมีการปรับแต่งบางส่วน โดยเฉพาะโค้ดในส่วนที่ 3 ส่วนที่เป็นข้อมูลติดต่อ ( a href="#") ในเครื่องหมายคำพูดให้ใส่ลิงก์ข้อมูลของท่านเองนะคะ

สำหรับในส่วนของผู้เขียนได้ทดลองนำไปใส่ในเว็บบล็อก แล้วพบว่ายังมีข้อที่ต้องแก้ไข เนื่องจากไอค่อนติดต่อไปอยู่ด้านล่างของข้อความ น่าจะเกิดจากตำแหน่งที่ไปวางโค้ดในส่วนที่ 3 หรือท่านที่ทราบวิธีแก้ไข แนะนำมาได้ค่ะ

Code ในการทำงานมี 3 ส่วน

ส่วนที่ 1 Code ส่วนที่อยู่ที่ Header กรณีมีการอ้างไฟล์หรือสไตล์จากเว็บนอก (เดี๋ยวเขียนเพิ่ม)

ส่วนที่ 2 Code ส่วนที่อยู่ที่ Style

ส่วนที่ 3 Code ที่ใส่ใน body

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

ส่วนที่ 1 Code ส่วนที่อยู่ที่ Header กรณีมีการอ้างไฟล์หรือสไตล์จากเว็บนอก

(เดี๋ยวเขียนเพิ่ม)

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

ส่วนที่ 2 Code ด้านล่างนี้ใส่ใน Style

.icon-bar {

position: fixed;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.icon-bar a {

display: block;

text-align: center;

padding: 16px;

transition: all 0.3s ease;

color: white;

font-size: 20px;

}

.icon-bar a:hover {

background-color: #000;

}

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

ส่วนที่ 3 Code ที่ใส่ใน body

</div>

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

ลองนำไปใช้กันนะคะ แล้วใช้ได้หรือไม่ มาแลกเปลี่ยนกันค่ะ

ค้นหาบล็อกนี้

Translate

สัพเพเหระ ตามใจเจ้าของบล็อก (โปรดใช้วิจารณญาณในการรับชม 555)

Code ใช้ในการสร้าง float social bar (ปรับปรุงเนื้อหาจากบทความเก่า)