Google Analytics 4


ค้นว่าอยู่เล่มใด แล้วใช้คำสั่งของเครื่องหาตำแหน่งในเล่มอีกทีนะครับ
คำแนะนำการค้นข้อมูล



รวมเทคนิคแต่งบล็อกและเว็บไซต์

รวมเทคนิคแต่งบล็อกและเว็บไซต์ที่ใช้ในเว็บนี้ เผื่อท่านที่สนใจจะนำไปใช้ประโยชน์บ้างนะครับ (ท่านสามารถคลิกที่สารบัญที่มุมขวาล่างของหน้าจอ ซึ่งจะมีหมวดอื่นๆ ให้เลือกอ่านด้วย)

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

เนื้อหาในหน้านี้ :


วิธีทำให้ blogger แสดงวิดเจ็ต หรือ Gadget ในโทรศัพท์มือถือ

ปกติแล้วเวลาเราเพิ่ม Gadget ใน blogger Gadget นั้นจะแสดงเฉพาะในคอมพิวเตอร์เท่านั้นนะครับ ถ้าเราดูในโทรศัพท์มือถือก็จะไม่เห็น Gadget นั้น แต่ถ้าเราต้องการให้ Gadget นั้นแสดงในสมาร์ทโฟนด้วยโดยที่ผู้อ่านไม่ด้องใช้วิธีเรียกดูเว็บไซต์เวอร์ชั่นเดสก์ท็อปในสมาร์ทโฟนก็สามารถทำได้ดังนี้ครับ
  1. เข้าไปที่เมนูแม่แบบของ blogger
  2. คลิกที่รูปเฟืองใต้ช่องมือถือ
  3. เลือกติ๊กที่ "ใช่ แสดงเทมเพลตมือถือบนโทรศัพท์มือถือ"
  4. ที่ใต้คำว่า "เลือกเทมเพลตมือถือ" เลือก "ที่กำหนดเอง"
  5. คลิกบันทึก
  6. จากนั้นคลิกที่ "แก้ไข HTML"
  7. ตรงหน้าแก้ไข template นี้ก็หา Gadget ที่เราต้องการให้แสดงทางโทรศัพท์มือถือนะครับ เพื่อความรวดเร็วสามารถคลิกที่ "ข้ามไปที่วิดเจ็ต" แล้วเลือก Gadget ที่เราต้องการได้เลย
  8. ดูบรรทัดที่หน้าตาประมาณนี้นะครับ
    <b:widget id='HTML7' locked='false' title='slide share' type='HTML' version='1' visible='true'>
    สังเกตที่ id จะแสดงประเภทของ Gadget ตามด้วยตัวเลขลำดับ และที่ title จะเป็นชื่อของ Gadget ที่เราตั้งเอาไว้ตอนสร้าง Gadget นะครับ
  9. ที่บรรทัดนี้เราต้องเพิ่มคำสั่งให้แสดง Gadget บนโทรศัพท์มือถือเข้าไปนะครับ ซึ่งมีได้ 2 แบบคือ
    1. ให้แสดงทั้งในคอมพิวเตอร์และสมาร์ทโฟน ใช้คำสั่ง
      mobile='yes'
    2. ให้แสดงเฉพาะในสมาร์ทโฟนเท่านั้นไม่แสดงในคอมพิวเตอร์ ใช้คำสั่ง
      mobile='only'
  10. เสร็จแล้วก็จะได้หน้าตาประมาณนี้นะครับ
    <b:widget id='HTML7' locked='false' mobile='yes' title='slide share' type='HTML' version='1' visible='true'>
    หรือ
    <b:widget id='HTML7' locked='false' mobile='only' title='slide share' type='HTML' version='1' visible='true'>
  11. จากนั้นก็คลิก "บันทึกเทมเพลต"
  12. คลิก "กลับ" ได้เลยครับ

วิธีทำลิ้งค์ไปจุดที่ต้องการภายในหน้าเว็บ หรือ anchor link

เพื่อความสะดวกสำหรับผู้อ่านในการกระโดดไปจุดที่ต้องการในหน้าเว็บ เราสามารถสร้างจุดอ้างอิงขึ้นมา แล้วทำลิ้งค์ให้กระโดดไปที่จุดนั้นได้ดังนี้ครับ
  1. เข้าไปที่หน้าสำหรับแก้ไข HTML code ก่อนนะครับ ต้องเป็นหน้าที่แสดงเป็น HTML code ที่มีโค้ดต่างๆ แสดงอยู่ในเครื่องหมาย < > ด้วยนะครับ เช่น <p>
    สำหรับ blogger ก็เข้าไปที่หน้าสร้างหรือแก้ไขโพสต์ แล้วคลิกที่ปุ่ม HTML นะครับ
  2. สร้างจุดอ้างอิงในตำแหน่งที่ต้องการโดยใส่ข้อความนี้ลงไปนะครับ
    <a href="http://anchor/null" id="name"></a>
    โดยตรงคำว่า name นั้นก็ใส่ชื่อที่ต้องการลงไปนะครับ ข้อความที่ใส่ลงไปนี้จะไม่แสดงให้เห็นในหน้าเว็บนะครับ จะเป็นเพียงตำแหน่งอ้างอิงสำหรับลิ้งค์เท่านั้น
  3. สร้างลิ้งค์สำหรับคลิกตามปกตินะครับ เพียงแต่ตรงที่อยู่เว็บให้ใส่ที่อยู่เว็บของหน้าที่สร้างจุดอ้างอิงไว้ในข้อ 2. (เป็นหน้าเดียวกันหรือคนละหน้ากับลิ้งค์ก็ได้) แล้วตามด้วยเครื่องหมาย # แล้วตามด้วยชื่อจุดอ้างอิงนั้นนะครับ
    เช่นลิ้งค์มาที่หัวข้อนี้ ที่หน้า HTML code ก็จะเป็น
    <a href="http://tripitaka-online.blogspot.com/2016/05/webtech.html#ancl">วิธีทำลิ้งค์ไปจุดที่ต้องการภายในหน้าเว็บ หรือ anchor link</a>
    ที่หน้าเว็บก็จะเป็น
    วิธีทำลิ้งค์ไปจุดที่ต้องการภายในหน้าเว็บ หรือ anchor link
  4. สำหรับการทำลิ้งค์เพื่อขึ้นไปด้านบนสุดของหน้านั้นไม่จำเป็นต้องสร้างจุดอ้างอิงตามข้อ 2. นะครับ สามารถสร้างลิ้งค์ได้เลยโดยในข้อ 3. ใส่ชื่อจุดอ้างอิงเป็น #top
    เช่น กลับด้านบน

วิธีทำหน้าลิ้นชัก หรือ slide overlay

ในบางครั้งเราต้องการใส่ส่วนประกอบของหน้าเว็บแต่ไม่อยากให้รกหน้าเว็บหลัก ทางหนึ่งที่สามารถทำได้ก็คือการซ่อนเอาไว้แล้วเรียกออกมาใช้เมื่อต้องการเหมือนการเปิดลิ้นชักนะครับ

วิธีการทำนั้นประกอบด้วย 2 ส่วนนะครับ คือส่วนของสคริปต์และส่วนของตัวเรียกใช้งาน โดยส่วนของสคริปต์นั้นถ้าใช้กับ blogger ก็ใส่ไว้ใน Gadget ประเภท HTML/จาวาสคริปต์ นะครับ ส่วนตัวเรียกใช้นั้นก็ใส่ตามความเหมาะสมนะครับ

ตัวอย่างส่วนสคริปต์

ค่าต่างๆ ก็ปรับแก้ตามความเหมาะสมนะครับ
<style>
.slideoverlay {
    height: 200px;
    max-width: 95%;
    width: 0;
    position: fixed;
    z-index: 20;
    bottom: 0;
    right: 0;
    background-color: #eeddbb;
    padding-left: 5px;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.slideoverlay .closebtn1 {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 36px;
    margin-left: 3px;
}

</style>

<script>
function openslideoverlay() {
    document.getElementById("slideoverlay").style.width = "1900px";
}

function closeslideoverlay() {
    document.getElementById("slideoverlay").style.width = "0";
}
</script>

<div id="slideoverlay" class="slideoverlay">
<a href="javascript:void(0)" class="closebtn1" onclick="closeslideoverlay()">&times;</a>
<div>ใส่เนื้อหาของหน้าลิ้นชักตรงนี้</div>
</div>

ตัวอย่างตัวเรียกใช้

ทำได้หลายรูปแบบนะครับ ที่สำคัญคือการเรียกใช้ฟังก์ชั่น openslideoverlay() เช่น
<button onclick="openslideoverlay()" type="button">ตัวเรียกใช้</button>
หรือ
<a href="javascript:void(0)" onclick="openslideoverlay()">ตัวเรียกใช้</a>


วิธีทำหน้า popup overlay

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

วิธีการทำนั้นประกอบด้วย 2 ส่วนนะครับ คือส่วนของสคริปต์และส่วนของตัวเรียกใช้งาน โดยส่วนของสคริปต์นั้นถ้าใช้กับ blogger ก็ใส่ไว้ใน Gadget ประเภท HTML/จาวาสคริปต์ นะครับ ส่วนตัวเรียกใช้นั้นก็ใส่ตามความเหมาะสมนะครับ

ตัวอย่างส่วนสคริปต์

ค่าต่างๆ ก็ปรับแก้ตามความเหมาะสมนะครับ
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
#popupoverlay {
z-index: 10;
background-color:#BB8D2F;
position:fixed; top:5%; left:10%; width:80%; height:90%; text-align:right; color:#ffffff;color:#0F0;
}
#popupoverlay a:link {
    color: #ffffff;
}
#popupoverlay a:visited {
    color: #ffffff;
}
.data {
text-align:left; color:#000000;
}
</style>
<script>
function popupoverlay(){
  datvar=document.getElementById('popupoverlay');
if(datvar.style.display == "none"){
datvar.style.display = "";
datvar.innerHTML = "<a href='#!' onclick='return popupoverlay();'>X ปิด</a><br/><div class='data'>ใส่เนื้อหาของหน้า popup overlay ตรงนี้ โดยห้ามมีเครื่องหมายฟันหนู (เครื่องหมายคำพูดแบบ 2 ขีด) ในส่วนนี้นะครับ ให้ใช้เป็นแบบขีดเดียวแทน เช่น 'ตัวอย่าง'</div>";
}else{
datvar.style.display = "none";
datvar.innerHTML = '';
}
return false;
}
</script>
<div id="popupoverlay" style="display: none;"></div>
</!doctype>

ตัวอย่างตัวเรียกใช้

ทำได้หลายรูปแบบนะครับ ที่สำคัญคือการเรียกใช้ฟังก์ชั่น popupoverlay() เช่น
<button onclick="popupoverlay()" type="button">ตัวเรียกใช้</button>
หรือ
<a href="javascript:void(0)" onclick="popupoverlay()">ตัวเรียกใช้</a>


วิธีทำปุ่มเพิ่ม/ลดขนาดตัวหนังสือ

วิธีการทำนั้นประกอบด้วย 2 ส่วนนะครับ คือส่วนของสคริปต์และส่วนของตัวเรียกใช้งาน โดยส่วนของสคริปต์นั้นถ้าใช้กับ blogger ก็ใส่ไว้ใน Gadget ประเภท HTML/จาวาสคริปต์ นะครับ ส่วนตัวเรียกใช้นั้นก็ใส่ตามความเหมาะสมนะครับ

ตัวอย่างส่วนสคริปต์

<script>
function resizebodyText(multiplier) {
  if (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}
</script>

ตัวอย่างตัวเรียกใช้

<a href="javascript:void(0)" onclick="resizebodyText(-1)"><button type='button'>ลดขนาดอักษร</button></a>
<a href="javascript:void(0)" onclick="resizebodyText(1)"><button type='button'>เพิ่มขนาดอักษร</button></a>


วิธีทำเมนูลอยตรึงไว้ด้านล่าง

วิธีทำเมนูลอยตรึงไว้ที่ด้านล่างขวาของหน้าต่างอย่างที่ใช้ในเว็บนี้ ทำตาม code ด้านล่างนี้นะครับ ถ้าใช้กับ blogger ก็ใส่ไว้ใน Gadget ประเภท HTML/จาวาสคริปต์ นะครับ

ตัวอย่าง code

ค่าต่างๆ ก็ปรับแก้ตามความเหมาะสมนะครับ link ในตัวอย่างใส่เป็น google กับ facebook เอาไว้ สามารถเพิ่ม/ลดจำนวนได้ตามต้องการนะครับ
<style>
.fmenu {
    padding: 5px 10px 2px 5px;
    border-radius: 7px 7px 0px 0px;
    position: fixed;
    z-index: 20;
    bottom: 0;
    right: 0;
    background-color: #b45f06;
    font-size: 20px;
    font-weight:500;
    color:blue;
    text-align: center;
    vertical-align: top;
    overflow-x: hidden;
}
.fmenu a {
    color: #ffffff;
}
.fmenubutton {
    height:30px;
    border-radius: 5px;
    font-size:20px;
    font-weight:500;
    color:blue;
    text-align: center;
    vertical-align: top;
    overflow-y: hidden;
}
</style>

<div id="fmenu" class="fmenu">
<a href="http://www.google.com"><button type='button' class='fmenubutton'>link 1 - google</button></a>
<a href="http://www.facebook.com"><button type='button' class='fmenubutton'>link 2 - facebook</button></a>
<a href="#top"><button type='button' class='fmenubutton'>กลับด้านบน</button></a>
</div>

@

1 ความคิดเห็น :