1. เข้าสู่ระบบ Blogger > การออกแบบ
2. ที่แถบด้านข้าง Sidebar > เพิ่มแกตเจ็ต
3. เลือก HTML/Javascript
4. เพิ่มโค้ดด้านล่างลงในช่องเนื้อหา > บันทึก
คัดลอกโค้ดทั้งหมดใส่ในช่องเนื้อหาของวิดเจ็ต และแก้ไข
1. ID หรือ Username โซเชียลมีเดียของท่าน
const lineId = "xxxxxxxx"; // xxxxxxxx ใส่ Line ID ของคุณ
const messengerId = "xxxxxxxx"; // xxxxxxxx ใส่ Facebook Messenger ID ของคุณ
const facebookId = "xxxxxxxx"; // xxxxxxxx ใส่ Facebook ID ของคุณ
const telegrameId = "xxxxxxxx"; // xxxxxxxx ใส่ Telegram User ของคุณ
2. โลโก้ขนาดเล็กหน้ากล่องข้อความ
<img src="https://wichianp.github.io/img/download (31).jpg" alt="Profile"
style="border-radius: 50%; width: 60px; height: 60px;" />
<!--************* Social Button*************-->
<style>
@import url('https://fonts.googleapis.com/css2?family=K2D&family=Kanit&display=swap');
/* ปุ่มหลัก */
#mainx-button {
width: 60px;
height: 60px;
border-radius: 50%;
background-size: cover;
position: fixed;
right: 100px;
bottom: 20px;
z-index: 10000;
cursor: pointer;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
/* ป๊อปอัพ */
#chat-popupx {
max-width: 350px;
background-color: #FAFAFA;
position: fixed;
right: 20px;
bottom: 100px;
z-index: 99999;
border-radius: 15px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
overflow: hidden;
border: 1px solid #ccc;
padding-bottom: 20px;
font-family: "K2D", sans-serif;
}
/* ส่วนหัวของป๊อปอัพ */
#chat-popup-headerx {
background-color: #FA7268;
padding: 10px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
text-align: start;
}
/* ข้อความส่วนหัวพร้อมโลโก้ */
#chat-popup-headerx img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
line-height: 1;
}
#chat-popup-headerx p {
margin: 0;
}
/* เนื้อหาภายในป๊อปอัพ */
#chat-popup-contentx {
padding: 15px;
display: flex;
flex-direction: column;
position: relative;
margin-top: 10px;
//height:10px;
background-color:#FFFFFF;
line-height: 2;
text-align: start;
color: #000;
}
/* ข้อความ */
#chat-popup-contentx .txt {
border: 1px solid #0084FF;
border-radius: 0px 10px 10px 10px;
background-color: #E6F4FF;
padding: 15px;
margin: 0;
font-size: 14px;
color: #333;
margin-left: 40px; /* เว้นที่สำหรับไอคอน */
}
/* ไอคอนในกล่องข้อความ */
#chat-popup-contentx img {
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 15px;
left: 10px;
}
/* ส่วนด้านล่างป๊อปอัพ */
#chat-popup-footerx {
padding: 10px;
display: flex;
justify-content: center;
gap: 10px;
}
.chat-popup-footerx{
padding: 0 10px;
text-align: center;
justify-content: center;
color: #000;
}
/* สไตล์ปุ่มแชท */
.chat-buttonx {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#line-buttonx {
background-color: #00B900;
}
#messenger-buttonx {
background-color: #0084FF;
}
h3{
margin: 0 0 10px 0;
}
.close-btn{
font-size: 2.5rem;
cursor: pointer;
}
</style>
<script>
// สร้าง div ใน sidebar ก่อนการดำเนินการใดๆ
window.addEventListener('DOMContentLoaded', function() {
// ตรวจสอบว่ามี sidebar อยู่หรือไม่
const sidebar = document.getElementById('sidebar');
if (sidebar) {
// สร้าง div element
const div = document.createElement('div');
div.id = 'mainx-button';
// เพิ่ม img element ลงใน div
div.innerHTML = `
<img src="https://wichianp.github.io/img/download (31).jpg" alt="Profile"
style="border-radius: 50%; width: 60px; height: 60px;" />
`;
// แทรก div ลงใน sidebar ก่อนการดำเนินการอื่นๆ
sidebar.insertBefore(div, sidebar.firstChild);
}
function togglePopup() {
const popup = document.getElementById('chat-popupx');
popup.style.display = (popup.style.display === 'none' ||
popup.style.display === '') ? 'block' : 'none';
}
// แสดงป๊อปอัพเมื่อคลิกปุ่มหลัก
document.getElementById('mainx-button').addEventListener('click', togglePopup);
// เปิดลิงก์โซเชียลเมื่อคลิกปุ่ม
document.getElementById('line-buttonx').addEventListener('click', openLine);
document.getElementById('messenger-buttonx').addEventListener('click', openMessenger);
document.getElementById('facebook-buttonx').addEventListener('click', openFacebook);
document.getElementById('telegrame-buttonx').addEventListener('click', openTelegrame);
function openLine() {
const lineId = "xxxxxxxx"; // xxxxxxxx ใส่ Line ID ของคุณ
const url = "https://line.me/ti/p/~" + lineId;
window.open(url, "_blank");
}
function openMessenger() {
const messengerId = "xxxxxxxx"; // xxxxxxxx ใส่ Facebook Messenger ID ของคุณ
const url = "https://www.messenger.com/t/" + messengerId;
window.open(url, "_blank");
}
function openFacebook() {
const facebookId = "xxxxxxxx"; // xxxxxxxx ใส่ Facebook ID ของคุณ
const url = "https://www.facebook.com/" + facebookId;
window.open(url, "_blank");
}
function openTelegrame() {
const telegrameId = "xxxxxxxx"; // xxxxxxxx ใส่ Telegram User ของคุณ
const url = "https://t.me/" + telegrameId;
window.open(url, "_blank");
}
document.querySelector('#btn-close').addEventListener('click', togglePopup);
});
</script>
5. ไปที่ FOOTER COPYRIGHT > แก้ไข (ไอคอนดินสอ) > เพิ่มโค้ดด้านล่างในช่องเนื้อหา > บันทึก
คัดลอกโค้ดทั้งหมดใส่ในช่องเนื้อหาของวิดเจ็ต และแก้ไขส่วนต่างๆดังนี้
1. โลโก้ส่วนหัวด้านบน
<!-- โลโก้ส่วนหัวด้านบน -->
<img src="https://semicon.github.io/img/logo2.png" alt="Logo" />
2. โลโก้ขนาดเล็กหน้ากล่องข้อความ
<!-- โลโก้ขนาดเล็กหน้ากล่องข้อความ -->
<img src="https://wichianp.github.io/img/download (31).jpg" alt="Logo" />
3. กล่องข้อความต้อนรับ
<!-- กล่องข้อความต้อนรับ -->
<p class="txt">
Hello! 😀<br />
How may we help you?<br />
Just send us a message now to get assistance.
</p>
<!-- Social button -->
<!-- ป๊อปอัพ -->
<div id="chat-popupx">
<div id="chat-popup-headerx">
<div style="display: flex; align-items: center;">
<!-- โลโก้ส่วนหัวด้านบน -->
<img src="https://semicon.github.io/img/logo2.png" alt="Logo" />
<div>
<h3>Guru Chian</h3>
<p>Typically replies instantly</p>
</div>
</div>
<div class="close-btn" onclick="togglePopup()">×</div>
</div>
<div id="chat-popup-contentx">
<!-- โลโก้ขนาดเล็กหน้ากล่องข้อความ -->
<img src="https://wichianp.github.io/img/download (31).jpg" alt="Logo" />
<!-- กล่องข้อความต้อนรับ -->
<p class="txt">
Hello! 😀<br />
How may we help you?<br />
Just send us a message now to get assistance.
</p>
</div>
<div class="chat-popup-footerx">
<h3>Start Chat with:</h3>
</div>
<div id="chat-popup-footerx">
<div id="line-buttonx" class="chat-buttonx" onclick="openLine()">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670089.png" alt="Line"
width="50px" height="50px" />
</div>
<div id="messenger-buttonx" class="chat-buttonx" onclick="openMessenger()">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670042.png" alt="Messenger"
width="50px" height="50px" />
</div>
<div id="facebook-buttonx" class="chat-buttonx" onclick="openFacebook()">
<img src="https://cdn-icons-png.flaticon.com/128/3670/3670032.png" alt="facebook"
width="50px" height="50px" />
</div>
<div id="telegrame-buttonx" class="chat-buttonx" onclick="openTelegrame()">
<img src="https://cdn-icons-png.flaticon.com/128/2111/2111646.png" alt="telegrame"
width="50px" height="50px" />
</div>
</div>
</div>
เท่านี้ท่านก็จะได้ปุ่มโซเชียลมีเดียไว้สำหรับใช้ติดต่อกับสมาชิกของท่าน
ขอให้สนุกกับการสร้างงานนะครับ