Menu

Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Thursday, April 2, 2020

[Blogger] วิธีการตั้งค่า Default Facebook Thumbnail สำหรับ Blogger
[Blogger] How to Set Default Facebook Thumbnail for Blogger

Default Facebook Thumbnail จะถูกใช้เมื่อเราแชร์โพสต์ของเราไปยัง Facebook แล้วโพสต์นั้นไม่มีรูปภาพประกอบ Facebook จะดึงข้อมูลภาพที่เราตั้งค่านี้มาแสดงในลิ้งค์แทน

วิธีการตั้งค่าภาพ Thumbnail ตั้งต้นเป็นดังนี้
  1. เข้าไปที่ Theme 
  2. เลือกเมนู Edit HTML 
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme 
    <b:if cond='data:blog.postImageUrl'>
<meta expr:content='&quot;&quot; + data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content= 'image_url' property='og:image'/>
</b:if>
  4. แทนที่ image_url ใน script ข้างต้นด้วย URL ของรูปที่ต้องการ
  5. รอเวลาให้ Facebook อัพเดตข้อมูล ซึ่งใช้เวลาประมาณ 24 ชั่วโมง
หมายเหตุ สำหรับคนที่ไม่ต้องการรอ Facebook อัพเดตตามเวลา สามารถเข้าไปอ่านข้อมูลเพิ่มเติมได้ที่ [Facebook] วิธีการอัพเดตรูปภาพและรายละเอียดของ Link บน Facebook แบบ Manual
at No comments:
Labels: , , , , ,

Thursday, February 27, 2020

[Blogger][แก้ไขเพิ่มเติม] การทำ Code Snippet สำหรับ Blogger ที่เป็น HTTPS
[Blogger][Updated] How to Make Code Snippet for Blogger (HTTPS version)

จากโพสต์ [Blogger] การทำ code snippet สำหรับ Blogger ที่เป็น HTTPS ที่เรียกใช้ resource จาก https://agorbatchev.typepad.com ปรากฏว่า เมื่อเวลาผ่านไป มีบาง resource ที่ไม่สามารถเรียกใช้ได้ เช่น shThemeDefault.css เป็นต้น

เราจึงนำไฟล์ resource ทั้งหมดที่จำเป็นต้องใช้ไปไว้ที่ GitHub แล้วทำการเปิด GitHub Pages สำหรับ repository นี้

หลังจากนั้นแก้ไขการเรียกใช้ resource จาก GitHub แทนดังนี้
  1. เข้าไปที่ Theme 
  2. กดปุ่ม Edit HTML ภายใต้ Live on Blog
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme
    4. <link href='https://arzeroid.github.io/syntaxhighlighter_css_js/css/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://arzeroid.github.io/syntaxhighlighter_css_js/css/shThemeDefault.css' rel='stylesheet' type='text/css'/>
 
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shCore.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushBash.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCpp.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCSharp.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushCss.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushJava.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushJScript.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPlain.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPhp.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPython.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushRuby.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushSql.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushVb.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushXml.js' type='text/javascript'/>
<script src='https://arzeroid.github.io/syntaxhighlighter_css_js/js/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;    
    SyntaxHighlighter.all();
</script>
  4. กดปุ่ม Save theme
  5. ใส่ code ตามด้านล่างในส่วนของ HTML ของ Post
    6. <pre class="brush: html">
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
</pre>
หมายเหตุ: เราไม่จำเป็นต้องใส่ brush ทุกอันในข้อ 3 สามารถเลือกเฉพาะอันที่ใช้เท่านั้นได้ สำหรับ brush เพิ่มเติม สามารถดูได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
at No comments:
Labels: , , , , ,

Friday, August 30, 2019

[Blogger] การทำ code snippet สำหรับ Blogger ที่เป็น HTTPS
[Blogger] How to Make Code Snippet for Blogger (HTTPS version)

  1. เข้าไปที่ Theme 
  2. กดปุ่ม Edit HTML ภายใต้ Live on Blog
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme
    4. <link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
 
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushBash.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPython.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushSql.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushVb.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = &#39;https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/clipboard.swf&#39;;
    SyntaxHighlighter.all();
</script>
  4. กดปุ่ม Save theme
  5. ใส่ code ตามด้านล่างในส่วนของ HTML ของ Post
    6. <pre class="brush: html">
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
</pre>
หมายเหตุ: เราไม่จำเป็นต้องใส่ brush ทุกอันในข้อ 3 สามารถเลือกเฉพาะอันที่ใช้เท่านั้นได้ สำหรับ brush เพิ่มเติม สามารถดูได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
at No comments:
Labels: , , , , ,

Thursday, April 11, 2019

[Blogger] การทำ Code Snippet สำหรับ Blogger ที่เป็น HTTP
[Blogger] How to Make Code Snippet for Blogger (HTTP Version)

  1. เข้าไปที่ Theme 
  2. กดปุ่ม Edit HTML ภายใต้ Live on Blog
  3. Copy script ด้านล่างไปใส่ไว้ในส่วนของ head ของ theme
    4. <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>
  4. กดปุ่ม Save theme
  5. ใส่ code ตามด้านล่างในส่วนของ HTML ของ Post
    6. <pre class="brush: html">
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
</pre>
หมายเหตุ: เราไม่จำเป็นต้องใส่ brush ทุกอันในข้อ 3 สามารถเลือกเฉพาะอันที่ใช้เท่านั้นได้ สำหรับ brush เพิ่มเติม สามารถดูได้จาก http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
at No comments:
Labels: , , , , ,

Friday, November 29, 2013

[JS] วิธีการส่งไฟล์และข้อมูลจากฟอร์มโดยไม่ใช้การส่งค่าจากฟอร์ม
[JS] How to Send File with Form Data without Form Submission

jQuery และ Ajax ถูกใช้อัพโหลดไฟล์จากฟอร์ม HTML ไปยังเซิร์ฟเวอร์โดยไม่ใช้การส่งค่าจากฟอร์ม
jQuery and Ajax is used to upload file from HTML form to server without form submission

สมมติว่า ฟอร์ม HTML เป็นตามด้านล่าง
Assume that HTML form is below
<form id="form-id" action="upload.php" enctype="multipart/form-data" method="post">
     <table style="width: 100%;">
          <tbody>
               <tr>
                    <th><label for="id_path_program">Path program:</label></th>
                    <td><input id="id_path_program" name="path_program" type="file"></td>
               </tr>
               <tr>
                    <th><label for="id_description">Description:</label></th>
                    <td><input id="id_description" maxlength="250" name="description" type="text"></td>
               </tr>
          </tbody>
     </table>
     <input type="submit" value="Upload"/>
</form>
Read more »
at No comments:
Labels: , , ,

Tuesday, October 8, 2013

[HTML] วิธีการเปลี่ยน In-page Style Tag เป็น Inline Style Attribute
[HTML] How to Change In-page Style Tags to Inline Style Attribute

เนื่องจากบางอีเมลล์ไคลเอนต์ เช่น gmail ไม่สนับสนุน in-page style tags (<style></style>) เทมเพลต HTML สำหรับอีเมลล์ จึงต้องเปลี่ยนเป็น inline style attribute (<a style=""></a>)
Due to some email client, such as gmail, does not support in-page style tags (<style></style>), the HTML template for email must be changed to inline style attribute (<a style=""></a>)

เทมเพลต HTML สามารถเปลี่ยนได้ที่ http://beaker.mailchimp.com/inline-css
HTML template can be changed at http://beaker.mailchimp.com/inline-css
at No comments:
Labels: ,
Subscribe to: Posts (Atom)