ลองเพจบน Funnel Bang สร้างเว็บไซต์กรวยความรู้ ขายของก็ได้ การตลาดก็ดี?

     เนื่องจากมีบางส่วนของ content นี้ อยู่บนที่เก่า ถ้าอ่านไม่รู้เรื่องตามไม่ทันให้ไปตามที่เก่าที่นี่ครับ  www.pui108diy.com เดี๋ยวว่างๆจะย้ายมาแล้วเขียนให้ครบ ตอนนี้เขียนเทคนิคไปก่อน ไว้ค่อยมาดราม่า ความรู้สึกอีกที

      บทความนี้เดิมสร้างขึ้นบน platform funnel bang ในวันที่ 14/1/64 ครับ ( ปัจจุบัน 12/7/2564 ผมย้ายบทความทั้งหลายมาที่เวิร์ดเพลสแล้ว แต่เทคนิคต่างๆในบทความนี้ยังคงใช้ได้บน funnel bang ครับ )  ถ้าสนใจลองไปสมัครใช้งานดูนะครับใช้ฟรี14วัน  www.funnelbang.com   การสร้างคอนเท้นท์รูปแบบ ค่อนข้างง่ายมากทีเดียว แล้วมันก็ปรับรูปแบบทั้งสามอุปกรณ์ให้เลยครับ แต่เราต้องไปปรับช่องไฟต่างๆที่ทำให้มันดูไม่ฃัดกันโดยเฉพาะบนมือถือ เดี๋ยวจะค่อยๆอธิบายการปรับแต่งนะครับ ในส่วนที่นี่ผมคงใส่ระบบcss แปลกๆ และ javascript ลงไปได้ด้วยครับ เพราะfunnel bang อนุญาต โดยเฉพาะผมต้องการให้แสดงเนื้อหาในแบบ hide or show ซึ่งทำให้เพจบทความมีลักษณะการซ่อนเนื้อหา ทำให้ไม่รกหูรกตาได้ แต่กำลังขุดคุ้ยอยู่ครับ ว่าจะทำได้อย่างไรให้สวยงาม

• โครงสร้างเพจในฟันเนลแบงจ์ ชื่อไอดีของบล็อกหรือวิธเจ็ทที่อ้างอิงได้
  

• ทำปุ่มเปิด-ปิดซ่อนเนื้อหาแก่ผู้อ่าน ด้วย js (เกริ่น)
  

• ตัวอย่างลิงค์ปุ่มเปิด-ปิดเนื้อหา
  

• A. ตัวอย่างลิงค์ทดสอบ ให้ เปิดเนื้อหาด้วยไอดีของบล็อก ทีละไอดี
  

• B. ตย.ลิงค์เปิดเนื้อหาบน text widget และเป็นข้อความแถวเดียวกัน จากนั้นให้ซ่อนปุ่ม
  

• ^ตย.ลิงค์เปิดเนื้อหาที่ซ่อนแล้วกระโดดข้ามไปจุดเนื้อหาทันที  

• C. ปุ่มฟันเนลแบงจ์ไม่สามารถใช้แสดงเนื้อหาที่ซ่อนได้ แต่ ตย. ปุ่มธรรมดาใช้ได้
  

• ข้อแตกต่างการใช้ ลิงค์ หรือปุ่ม ในการเปิดปิดเนื้อหา ในแง่ seo
  

• D. ตย. สร้างปุ่มเปิดปิดเนื้อหาด้วยspan ใช้คู่กับ a ลิงค์ ถูกและผิดวิธี
  

• ขั้นตอนสร้างลิงค์ให้เปิดปิดทีละคอนเทนต์ลิงค์
  

• อธิบายคำสั่งของ โค๊ด แสดง-ซ่อน คอนเทนต์ javascript code
  

• การสร้างเพจ1โดเมนแต่มี2เลย์เอ้าท์ ใช้ js สับเปลี่ยนคลาส style-boxed-layout / style-full-width-layout
  

• การแก้ไข menu navigator แสดงสีปุ่มให้ถูกหน้าด้วย js
  

เนื่องจากหน้านี้เป็นบทความ ผมอยากได้สไตล์หัวข้อเป็นลักษณะ กรอบจุดไข่ปลา(dot)เหมือนข้างบน ผมจะทำไงได้บ้างครับ ??

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

โครงสร้าง เพจ Block div Structure ใน Funnel Bang

หน้าเพจหน้าหนึ่งๆใน funnel bang ประกอบด้วย block เรียงซ้อนกันจากบนลงล่างแต่ละบล็อกจะมีวิธเจ็ทต่างๆที่ให้ใช้ได้เช่น ตัวอักษร รูป ปุ่ม เรียงใส่ลงไปในแต่ละบล็อก ข้อมูลต่างๆใน1บล็อกจะถูกเก็บไว้ในฐานข้อมูลของแพล็ทฟอร์ม ซึ่งมีบางอย่างอนุญาตให้ทำดัดแปลงได้ และบางอย่างไม่อนุญาต 

   ใน1 block จะประกอบด้วย กรอบ div วางซ้อนกัน ต้องมีรูปแบบ ดำ-แดง-น้ำเงิน-เขียว-เหลือง เป็นอย่างน้อย กรอบหลักdiv ด้านนอกสุด class grid-row คือดำจะมีชื่อid ออโต้ว่า container-widget-15xxxxxxxxxx โดยประมาณ การสร้างสรรค์divในบล็อกหลักblockใหญ่จะทำได้ในรูปแบบ  divแดงคอนเทนgrid-content  divน้ำเงินคอลัม และ  divเขียวแถว  – divเหลืองเป็นwidget ที่มีชื่อid ออโต้ อีกที  มีแค่ดำกับเหลืองเข้มที่มีชื่อไอดีแบบอัตโนมัติที่ต้องสนใจเป็นพิเศษ

เมื่อแปลงเป็นมือถือ การแสดงผลจะเป็นดังรูปบน 

เราศึกษาโครงสร้างของ block div หรือ widget block, tag หรือ element ของ funnel bang เพื่อที่จะนำมาสร้าง class , ID และข้อมูลอื่นๆ เพื่อนำมาประยุกต์ใช้งานต่างๆ เฃ่นใช้กับ javascript เพื่อทำลูกเล่นต่างๆในการเปิดปิดคอนเท็นต์ หรืออื่นๆได้ตามต้องการ

    เท่าที่ลองใช้ เราสามารถใช้เครื่องมือของfunb เพิ่ม class ได้ เฉพาะ block div หลัก ชื่อID = container-widget-159627xxxxx คลาสเดิมคือ “grid-row” กรอบนอกที่เดียวเท่านั้น การยัดข้อมูลอื่นๆ เช่น ชื่อคลาส ชื่อไอดี เนม ใน tag หรือ element อื่นๆ ไม่สามารถทำได้โดยเครื่องมือของเขา

    เราสามารถยัดข้อมูลทุกอย่างที่กล่าวมานี้ ลงในอีลีเมนท์อื่นๆที่เป็นตัวอักษรสีน้ำเงินข้างล่างได้ ส่วนที่อื่นหมดสิทธิ์ โดยใช้ทริ๊กยัดข้อมูลโดยตรงใน ด้วยbrowser ลงในtext widget โดยใช้การตรวจสอบองค์ประกอบของเบ้าเซอร์ แก้ไขข้อมูลในอีลีเมนท์เหล่านั้น แล้วทำการเซฟยัดข้อมูลโดยตรงได้ จึงจำเป็นที่ต้องสร้างแผนผัง div wiget element ของ funb เฉพาะวิดเจ็ทตัวที่ใช้บ่อยๆ เอาไว้เพื่อทำความเข้าใจจุดที่สามารถแก้ไขได้ และจุดที่เรียกไอดีหรือชื่อIDของdivได้ ดังนี้

ชื่อไอดีของบล็อกหรือวิดเจ็ทที่อ้างอิงได้  funbจะสร้าง id=”” ใหัอัตโนมัติเฉพาะ divสีดำ และ divเหลือง

 (ในส่วนข้อความตรงนี้ในบทความนี้บนพื้นสีเหลืองอ่อน สร้างจาก text widget เรียงต่อๆกันจากบนลงล่าง เริ่มต้นด้วย divดำ แดง น้ำเงิน-คอลัม โดย มีเแค่1คอลัม โดยแต่ละtext widget มีรูปแค่1รูป   ในแต่ละ text widget จะขึ้นด้วยdivสีเขียวwidget-rowและdivเหลืองตามidวิธเจ็ทที่เลือกใช้ คือเป็นแถวๆเรียงลงไปเรื่อยๆ โดยกรอบดำจะมีแค่กรอบเดียว และครอบคลุม ทุกวิธเจ็ทที่เรียงต่อกันเสมอ )

<div id=”container-widget-159627xxxxx”

    class=”grid-row ….” >

    /* ^ funb ให้ใส่ class เพิ่มเติมได้ทีเดียว */
  <div class=”grid-content “>
    <div class=”grid-column”>
    1-1  <div class=”widget-row “>

    1-2           blank block       

                 for  any wiidget     

    โครงสร้างdiv ของ text widget

    1-1  <div class=”widget-row “>

    1-2   <div id=”text-widget-1596270106299″

               class=”.. textWidget ..”  >   /*txt วิดเจ็ท */

    1-3    <div class=”text-widget-content”>

    1-4      <p><img src=”..” >test</p>   /* ใส่รูปได้*/

              /*รูปที่ใส่ จะใส่ alt , des ไม่ได้ ไม่มีเครื่องมือใส่*/

    โครงสร้างdiv ของ heading widget

    1-1  <div class=”widget-row “>

    1-2   <div id=”heading-widget-1596270106299″

               class=”.. headingWidget ..”  >   /*heading วิดเจ็ท */

    1-3    <div class=”text-widget-content”>

    1-4      <h2>Heading</h2>> 

              /*     */

  โครงสร้างdiv ของ image widget

    2-1  <div class=”widget-row “>

    2-2   <div id=”image-widget-1596270106299″

               class=”.. imageWidget ..”  >   /*heading วิดเจ็ท */

    2-3    <div class=”imagebox”>

    2-4     <div class=”widget-preserving-ratio-outer”>

    2-5       <div class=”widget-preserving-ratio-inner”>

    2-6        <a class=”lazyImage..”><img src=”..” alt=”..” ></a> 

              /*     */

• ทำปุ่มเปิด-ปิดซ่อนเนื้อหาแก่ผู้อ่าน ด้วย js (เกริ่น)

———————————

• A. ตัวอย่างลิงค์ทดสอบ ให้ เปิดเนื้อหาด้วยไอดีของบล็อก ทีละไอดี

• B. ตย.ลิงค์เปิดเนื้อหาบน text widget และเป็นข้อความแถวเดียวกัน จากนั้นให้ซ่อนปุ่ม

• ^ตย.ลิงค์เปิดเนื้อหาที่ซ่อนแล้วกระโดดข้ามไปจุดเนื้อหาทันที  ขยายความ>....มันคือลิงคB.ข้างบนครับ ลองรีเฟรชใหม่อีกครั้งแล้วกดA.ไปดูข้อความด้านล่างยังซ่อนอยู่   กลับมากดที่B.ดูครับข้อความที่ซ๋อนของAจะเปิดออกมาด้วย  เพียงแต่ทำความเข้าใจเนื้อหาและคำสั่งการใช้ปุ่มเปิดปิด แล้วใส่ a ลิงค์ให้กระโดด href=”#ชื่อไอดีที่จะกระโดด” โดยไม่ต้องกำหนดชื่อคลาส a_toggle_p และใส่คำสั่ง onclick=”toggle_bl( ‘ชื่อไอดีที่ต้องการเปิดคอนเท้นต์’)” เพิ่มเติม ตามนี้นะครับ <a href=”#exinlinetext” onclick=”toggle_bl( ‘container-widget-1596117581727’)”>ตย.ลิงค์แสดงเนื้อหาบน text widget และเป็นข้อความแถวเดียวกัน…</a>
  

• C. ปุ่มฟันเนลแบงจ์ไม่สามารถใช้แสดงเนื้อหาที่ซ่อนได้ แต่ ตย. ปุ่มธรรมดาใช้ได้

• ข้อแตกต่างการใช้ ลิงค์ หรือปุ่ม ในการเปิดปิดเนื้อหา ในแง่ seo

• D. ตย. สร้างปุ่มเปิดปิดเนื้อหาด้วยspan ใช้คู่กับ a ลิงค์ ถูกและผิดวิธี

——————————–

• ขั้นตอนสร้างลิงค์ให้เปิดปิดทีละคอนเทนต์ลิงค์

• อธิบายคำสั่งของ โค๊ด แสดง-ซ่อน คอนเทนต์ javascript code

ตัวอย่าง การใช้ลิงค์ เพื่อแสดงคอนเทนท์ในวิธเจ็ทไอดี ทีละส่วน ด้วยการส่ง href=”#ชื่อไอดี” โดยใช้จาวาสคริ๊ปเบื้องหลัง ตัวลิงค์ a เต็มๆ ใส่แค่นี้นะครับ ต้องยัดข้อมูล class=”a_togglep”ลงไปใน text widget ให้ได้ก็จบ

<a href=”#container-widget-1596117581727″ class=”a_togglep”>expand-hide(จงแสดง-ซ่อน ข้างล่างนี้)</a>

….expand-hide(จงแสดง-ซ่อน ข้างล่างนี้)

ปุ่มของฟันเนลแบงจ์ไม่สามารถใช้แสดงเนื้อหาที่ซ่อนได้

button widget ของฟันเนลแบงจ์ ไม่ได้สร้างจากelement button แต่สร้างจากdiv ที่มี a คร่อมขยายเป็นปุ่มทับ span ซึ่งมีลักษณะโค๊ดฝังซ่อนปิดไม่สามารถยัดข้อมูลอื่นๆแบบtextเพิ่มได้เลย จึงไม่มีลักษณะ html ที่แก้ไขได้ จึงเป็นปุ่มที่ไม่สามารถแก้ไขแบบยัดค่า class หรือค่าอื่นๆได้เลย ไม่เหมาะกับการใช้งานเป็นปุ่มเปิดปิดคอนเทนต์

แต่ปุ่มธรรมดา สามารถซ่อนหรือแสดงเนื้อหาได้

ทดสอบการสร้างปุ่มด้วยการยัดข้อมูล <button> ลงไปใน text widget ได้เป็น

จงกดซ่อน/แสดงปุ่มสีฟ้าด้วย>>..ซ่อนปุ่มสีฟ้า..

<button onclick=”toggle_bl(‘button-widget-1596805917653’);”></button>

ปุ่มทั่วไปแบบนี้ สามารถใส่ลูกเล่นและหน้าตาได้ทุกแบบประเภท แต่จะเสียเวลาสักหน่อย

ข้อแตกต่างการใช้ ลิงค์ และปุ่ม ในการเปิดปิดเนื้อหา ในแง่ seo

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

การใช้ ลิงค์ ด้วยการใส่ <a href=”#ชื่อไอดีที่ต้องการแสดงเนื้อหา”> จะมีการเชื่อมโยงการกระโดดด้วยhtmlโดยตรงไปที่เนื้อหาที่ซ่อนเอาไว้ เพียงแต่เรามีjsโค๊ดให้แสดงแต่ไม่ต้องกระโดด  คอนเทนท์ที่ซ่อนส่วนใหญ่จะถูกเก็บข้อมูลในระบบseoแน่นอน ( แต่ <a> สามารถใช้ onclick ได้เช่นกัน แต่ควรใส่ href=”#” เอาไว้ด้วย ซึ่งจะเหมือนปุ่มนั่นเอง) ด้วยonclickเราสามารถ

ทำลิงค์ให้เหมือนปุ่มด้วยspan แสดง-ซ่อนเนื้อหา

ได้ด้วย ในลักษณะเพิ่มขยายขอบspan  <span style=”background-color: #f7cfab; border: 3px solid #f0a765; border-radius: 10px; padding: 0.6% 2.5%;” ><a></a></span> เช่นกัน แต่ต้องกดปุ่มให้อยู่ในช่วงตัวหนังสือ ขอบปุ่มกดไม่มีผล

ปุ่มขอบspan?>> ....เป็นแบบ span คร่อม a และ aไม่ถูกตกแต่ง

แต่เราไม่สามารถใช้jsและaแสดงคอนเทนต์ได้ถูกต้องถ้าใส่แบบนี้ <a><span></span></a>

จงแสดง1>>..
จงแสดง2>>....แสดงแล้ว.. เนื่องจาก aคร่อมspan เมื่อถูกคลิ๊ก spanสามารถสร้างขอบและกรอบได้ แต่a ทำไม่ได้ ทำให้เกิดเหตุการณ์ที่ spanถูกคลิ๊กก่อนa โดยaตามมาทีหลัง ปุ่มแดงจึงทำงานไม่ถูกต้อง ทางแก้คือ ให้ใส่เป็น span ที่ทำหน้าที่ onclick สั่งให้เปิดคอนเทนต์แทน แต่aยังใส่ เหมือนเดิมเพื่อผลที่ต้องการในด้านseoและขอบปุ่มspanก็ยังกดได้ ดังโค๊ดนี้ .. <a href=”#cont9″ class=”a_togglep”><span class=”a_togglep” onclick=”toggle_inl(‘cont9’)” >จงแสดง2..</span></a>..ลองกดปุ่มจงแสดงสีแดงดูนะครับว่าเกิดเหตุการณ์อะไรขึ้น มันมีการกระโดดเกิดขึ้นแสดงว่า โค๊ดjs ทำงานไม่ถูกต้องนั่นเอง คือjsทำแต่ คลิ๊กspan แต่jsไม่สนa แต่การกระโดดเกิดขึ้นเนื่องจากเป็นภาษาhtmlไม่ใช่js การยกเลิกการกระโดดโดยjsจึงไม่เป็นผลแต่อย่างใด กลับกันปุ่มเขียวใส่ class a_togglep ลง span เพื่อให้่jsยกเลิกกระโดดของ a แทน..

ปุ่มนี้แบบ?>> .. ..เป็นแบบ  aล้วนขยายขอบ *ไม่ใช้span และ aไม่ถูกตกแต่งให้เป็นลิงค์  <a class=”a_togglep” href=”#cont18″ style=”text-decoration:none !important;font-size: 20px;color:#ffffff;font-family:’Prompt’;line-height: 3.0em; background-color: rgba(0, 143, 222, 1); border: 2px solid #000000; border-radius: 20px; padding: 0.8% 4%;”>ปุ่มนี้แบบ?&gt;&gt;&nbsp;..</a> 

 ขั้นตอนสร้างลิงค์ให้เปิดปิดทีละคอนเทนต์

• 1. ก๊อปปี้ code สีดำๆด้านล่าง 2ส่วน ลงไปในเพจ

• 1.1  โค๊ดหลัก111-444  ให้ใส่ไว้ใน global 

• 1.2  โค๊ดสั่งซ่อน 555-666 เอาไว้ซ่อนคลาส หรือไอดี ใส่ไว้ใน page ต้องแก้ไขเพิ่มเอาเองที่สร้างเพจ

• 2. สร้างคอนเทนต์ แล้วตั้งชื่อclass,ID  (ของblock , widget หรือ htmlอีลีเม้นท์ด้วยtext widget)
  

การซ่อนเอาไว้ก่อนให้ผู้ชมคลิ๊กทีหลัง ต้องใช้ชื่อคลาสถ้าไม่มีคลาสจะใช้ไอดี คือต้องมีไอดีเป็นอย่างน้อย ไอดีหรือคลาสที่ได้ เวลาซ่อนจะต้องไปแก้ไขใน4. ส่วน js script

การเรียกให้แสดง-ซ่อน จะเรียกที่ไอดีของคอนเท้นต์  ไอดีที่ได้เอาไปใช้ใน3. a href=”#ชื่อไอดี” 

ตั้งชื่อ class หรือ id ตรงไหนได้บ้าง?

• • 2.1  บล็อก    เพิ่มคลาสที่บล็อก   (โครงสร้างเพจ) เช่น class=”toggle-pui”
  • 2.2  วิธเจ็ท    ID สร้างไอดีออโต้เอาไว้แล้ว เช่น id=”text-widget-122334655″ แต่ไม่มีคลาสเฉพาะทาง
  • 2.3  สร้างเอง  สร้างไอดีและคลาสในอีลีเม้นท์หรือtag เช่น div p span button  โดยแอบยัดข้อมูลเข้าไป

ถ้าเป็น span และต้องการแสดงเนื้อหาในบรรทัดเดียวกัน ให้ใส่ class=”tog_span_inl”บังคับ**

• 3.  สร้างลิงค์ ด้วยทูลfunbส่วนเท็ควิธเจ็ท  a ใส่ href=”#ชื่อไอดีที่ต้องการให้ทำคำสั่งเปิดปิด”  ใส่คลาสเพิ่มให้a  ในฟันเนลแบงจ์ จะต้องใช้วิธีการยัดค่าclassให้ a โดยทูลของเบ๊าเซอร์  class=”a_togglep”บังคับ** อยากตั้งชื่ออื่นให้แก้ในโค๊ดjs นะครับ เพื่อให้codeตรวจสอบความถูกต้องและยกเลิกการกระโดดลิงค์ไปยังจุดอ้างอิงที่อยู่ของไอดีนั้น  ต้องคร่อมตัวอักษรเท่านั้น ห้ามคร่อม tag หรืออีลีเม้นอื่นๆ

• 4. คำสั่งให้ซ่อนเอาไว้ก่อน แก้ไขให้ซ่อนข้อมูลในเพจนั้น  แก้ไขโค๊ดjsย่อยๆของแต่ละเพจ ในส่วนของ 555   เช่นเราตั้งชื่อ class=”know1″ และต้องการซ่อน ไอดี heading-widget-123456789 ให้เราแก้ไขเพิ่มในส่วนของ 555 ซึ่งไม่จำเป็นต้องเป็นclass toggle-pui แต่ชื่อคลาส ห้ามใช้ toggle จะซ้ำกับระบบของfunb เป็น

hide_class(‘know1’);  

hide_id(‘heading-widget-123456789’);

//บรรทัดไหนที่ไม่ใช้ให้ใส่ 

// hide_  หรือลบทิ้งไปก็ได้

   รูปแสดงเพจสคริ๊ปอินเตอร์เฟซของฟันแนลแบงจ์ ให้ใส่โค๊ดลงไป

   ใน funnel bang เราจะใส่ script ที่เป็น java script ถ้าเป็นโค๊ดหลักและใช้เกือบทุกเพจ (ส่วนcode //111-//444 ควรจะใส่ใน global) เลือกในส่วน custom body markup ของ global คือใส่ครั้งเดียวจะมีทั้งเว็บไซต์    หรือถ้าจะใช้ทดสอบแค่เพจเดียว ก็ใส่ด้านล่าง page body markup ได้เลยครับ (ส่วนcode//555-//666 ควรจะใส่ในpage body)   โค๊ดข้างล่าง แก้ไขใหม่แล้วครับอาจไม่ตรงกับรูปส่วนบน สามารถใส่แล้วใช้ได้เลย ส่วนคำอธิบายจะแสดงด้านล่างครับ

อธิบายคำสั่งของ โค๊ด แสดง-ซ่อน คอนเทนต์ javascript code

โค๊ด js หลัก 111-444 ที่ทำหน้าที่อยู่ด้านหลัง ในการเปิดปิด ซ่อนแสดงคอนเท้นต์

ตัวอักษรสีบานเย็น ให้ยัดใส่ในเพจอีดิทเตอร์ส่วนของtext widget ของ funnel bang (funb)

• 111   ใช้ a เปิดปิดคอนเท้นทีละไอดี ด้วยการใส่ href=”#ชื่อไอดี” 

ไม่มีคำสั่งที่ต้องใช้ แต่ a ต้องมีclass=”a_togglep”บังคับ ให้ทำงานได้และป้องกันการกระโดด มีข้อพิเศษอยู่อย่างถ้าต้องการเปิด span ชนิดแสดงต่อในแถวตัวอักษรเดียวกัน ให้ระบุคลาสแสดงอักษรที่ span ถ้าใช้ class=”tog_span_inl”บังคับ ถ้าไม่ระบุจะแสดงเป็น blockหมด 

ตย. a เปิดแบบ block    / /    ตย.a เปิดแบบ inline

• 222   ใช้คำสั่งonclickในอีลีเม้นท์ เพื่อแสดงหรือซ่อนคอนเทนท์ทีละไอดี เป็นแบบ block หรือ inline

ใส่คำสั่ง ใส่ลงไปในลิงค์ หรือปุ่ม 

onclick=”toggle_bl(‘ชื่อไอดี’)”

onclick=”toggle_inl(‘ชื่อไอดี’)”

 กรณีใช้ลิงค์ใส่ href=”#ชื่อไอดี” แต่ไม่ระบุคลาส แล้วใช้onclick เปิดคอนเท้นต์ จะเกิดการกระโดดและเปิดคอนเท้นพร้อมๆกัน ถ้าไม่ต้องการให้เกิดการกระโดดต้องใส่ href=”#” และระบุคลาส a_togglep

ตย. a ใช้คำสั่ง onclick=”toggle_bl(‘ชื่อไอดี’)”    <ลิงค์นี้ก็ใช้ / / 

ตย. ปุ่ม ใช้คำสั่ง onclick=”toggle_bl(‘ชื่อไอดี’)” 

ตย. span ใช้คำสั่ง onclick=”toggle_inl(‘ชื่อไอดี’)”  

   โค๊ด 111-444 copyโค๊ดเหล่านี้ลงไป โกลบอล คือก๊อปครั้งเดียวได้ทั้งเว็บไซต์ ไม่มีการแก้ไข

ด้านบนแสดงโค๊ดหลัก 111-444 ที่ใส่ไว้ใน global

• 333  ใช้คำสั่งonclickในอีลีเม้นท์ เพื่อแสดงคอนเทนท์ทีละคลาส เป็นแบบ block หรือ inline

ใส่คำสั่ง ใส่ลงไปในลิงค์ หรือปุ่ม

onclick=”show_blclass(‘ชื่อคลาส’)”

onclick=”show_inlclass(‘ชื่อคลาส’)”

    กรณีใช้ onclickกับลิงค์ ให้ใส่ href=”#” และระบุคลาส a_togglep เพื่อไม่ให้กระโดด

• 444 เป็นตัวแปรย่อยในการสั่งไอดีหรือคลาสซ่อน ใช้งานใน555 หรือสามารถใช้เป็นฟังก์ชั่น

โดยใช้คำสั่ง onclick ในปุ่มหรือลิงค์(ใส่ href=”#” ระบุ a_togglep) ก็ได้

onclick=”hide_class(‘ชื่อคลาส’);”

onclick=”hide_id(‘ชื่อไอดี’);”

โค๊ด js หลัก 555 ทำหน้าที่ซ่อนคอนเท้น  666 ทำหน้าที่ยัดคอนเทนต์ที่ไม่เคยโหลดมาก่อน
ตัวอักษรสีบานเย็น ให้ยัดใส่ใน html text widget

ตัวอีกษรสีน้ำเงิน ให้แก้ไขใน scirpt interface ของfunb

• 555 ฟังก์ชั่น window.onload โค๊ดจะสั่งงานเองเมื่อเพจโหลดเสร็จ ให้ทำการซ่อน คลาสหรือไอดี

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

คำสั่งซ่อนให้แก้ไขโดยตรงบน js สีดำๆ โดยแก้ไขหรือเพิ่มหรือลบหรือใส่//

hide_class(‘ชื่อคลาส’);

hide_id(‘ชื่อไอดี’);

• 666  ใช้คำสั่งonclickในอีลีเม้นท์ เพื่อโหลดคอนเท้นต์จากjavascript ที่เตรียมไว้

1. ใส่คำสั่งลงในปุ่มหรือลิงค์  โดยต้องเตรียมอีลีเม้นท์สักอันด้วยtxt widget แล้วสร้างไอดีในอีลีเม้นท์ p span div ที่ต้องการโหลดคอนเท้นต์ โดยมีลักษณะการโหลดข้อมูลใส่ลงในtagเรียก-innerload   การเปลี่ยนtagนั้นเป็นtagอื่นที่มีข้อมูลอย่างอื่นเรียกใช้-outerload  การใช้ลิงค์ต้องป้องกันการกระโดดด้วย href=”#” class a_toggle_p

onclick=”innerload(‘ชื่อไอดี’)”

onclick=”outerload(‘ชื่อไอดี’)”

ในjs แนะนำให้ใช้ in1,in2 ,out1,out2 สามารถเพิ่มได้ทีหลัง

2. ใส่ข้อมูลที่ต้องการบนjs เป็นภาษาhtmlที่แปลงแล้ว ลงใน ตรงส่วนของไอดีนั้นๆเช่น case out1

case ‘out1’

   tx=’ข้อมูลที่ต้องการโหลด’; 

   โค๊ด 555-666 copyโค๊ดเหล่านี้ลงไปเพจเชิงเดี่ยว คือจะทำเพจหน้าไหนก็ต้องก๊อปแล้วแก้ทุกครั้ง

• การสร้างเพจ1โดเมนแต่มี2เลย์เอ้าท์ ใช้ js สับเปลี่ยนคลาส style-boxed-layout / style-full-width-layout
  

• การแก้ไข menu navigator แสดงสีปุ่มให้ถูกหน้าด้วย js
  

สร้างเว็บไซต์ที่มี2เลย์เอ้าท์ ใช้ javascript ใน funnel bang

เลย์เอ้าท์ในฟันเนลแบงจ์ จะมี2แบบ คือเพจแบบกล่อง style-boxed-layout และแบบเพจแบบกางเต็มความกว้าง style-full-width-layout ในการกำหนดสไตล์เลย์เอ้าท์ จะกำหนดได้ครั้งเดียวและแบบเดียวใน1โดเมนเท่านั้น ซึ่งของผมกำหนดทุกหน้าให้เป็นแบบกล่อง boxed layout สำหรับงานบทความ แต่ในหน้าขาย หรือ ร้านค้า เราอยากให้เป็นแบบ full width layout ซึ่งดูอลังการดึ จะทำไงได้บ้าง?? แต่จะแสดงผลในdesktopเท่านั้น ในมือถือเห็นเหมือนๆกันไม่แตกต่าง

เราสามารถใช้ js ยัดเปลี่ยน class เพื่อเปลี่ยน เลย์เอ้าท์ได้หลังจากโหลดเพจเสร็จ ด้วยการให้ โค๊ดค้นหา อีลีเม้น ที่มีclass ดังกล่าวแล้วสับเปลี่ยนคลาส ให้เป็นอีกแบบนึง โดยใส่โค๊ดในส่วนของแต่ละเพจที่ต้องการเปลี่ยนสไตล์ดังนี้

ถ้า เซ็ทดีฟอลท์ เป็น full width อยากเปลี่ยน เป็น boxed ให้แก้บรรทัดนี้ จะเห็นว่าแค่สลับกัน เป็น

elements[i].className = elements[i].className.replace(/\bstyle-full-width-layout\b/g,” style-boxed-layout“);

การแก้ไข menu navigator แสดงสีปุ่มให้ถูกหน้าด้วย js

   เมื่อเราใช้ menu widget  สร้างเมนูสำหรับให้ผู้ชมคลิ๊กไปหน้าต่างๆ ซึ่งสะดวกมาก แต่จะมีบางครั้งที่มันแสดงผลของสีปุ่มของเมนูที่ถูกเลือกว่าเรากำลังอยู่ในหน้าใดๆนั้นไม่ถูกต้อง ทำให้ผู้ชมอาจสับสนว่ากำลังอยู่ในหน้าไหนกันแน่ และจะเลือกไปหน้าอะไรต่อดี การเลือกสีปุ่มนั้นในplatformจะสร้างโค๊ดที่ลิ้งค์กับหน้าที่มีอยู่จริงที่เราสร้างไว้เท่านั้น เช่นเราสร้าง home ไว้เป็นหน้าแรก ถ้าเข้าเพจโฮมสีปุ่มจะแสดงถูกต้อง แต่พอเข้าหน้าโดเมนหลักหน้าแรก สีปุ่มกลับไม่มี ซึ่งวิธีแก้ไขให้ใช้ javascript กำหนด ปุ่ม 0, 1, 2, 3 …. ให้แสดงสีปุ่มที่กำลังอยู่ในหน้าเมนูนั้น

ในภาพด้านบนแสดงสีของเมนูวิธเจ็ท ว่าเรากำลังอยู่ในหน้าเมนูใด จะแสดงสีเป็นปุ่มสีเขียว เมื่อมันแสดงไม่ถูกต้อง จึงต้องใช้ js แก้ไข หลังโหลดเสร็จ จะทำการยัดคลาสเข้าไป ที่ปุ่ม0 คือปุ่ม home ยัดคลาสเข้าไปที่ li เป็น

ในการนี้จะยัด เป็น <li class=”active”>บทความ Home</li> แทนโดยใช้ js หาli ที่อยู่ในโครงสร้างเป็น div class=”menuWidget”  แล้วระบุว่า li อยู่ที่ปุ่มที่เท่าไหร่ใน ใน divนั้น แล้วทำการยัดคลาสลงไป

ให้ทำการคัดลอก js ลงในแต่ละเพจที่มีปัญหาแล้วกำหนดปุ่มลงไป

ในที่นี้ เราใส่ correct_color_menuwidget(0); ใส่ไว้ในเพจ home เพื่อให้เมื่อผู้ใช้งานโหลดหน้าแรกขึ้นจะทำงานอย่างถูกต้อง เราสามารถเปลี่ยน จาก 0(home) เป็น 1(ติดต่อ), 2..5. เป็นเลขอะไรก็ได้ที่มีอยู่ในเมนูนั่นเอง โดยปุ่มแรกจะขึ้นด้วย 0ให้เราแก้ไข โดยใส่คำสั่งจาก 0เป็น1  หรือจะให้สีทุกปุ่มทำงานก็ใส่เพิ่มเรียงกันไปเป็นต้น

correct_color_menuwidget(0);

correct_color_menuwidget(1);

correct_color_menuwidget(2);