วิธีการใช้งาน Font Awesome, Google Icons และ Icons BS Glyphicons

FONT AWESOME , Icon Font , Glyph font
ฟอนต์ อวีซัม ความหมายคือ ตัวอักษรแบบไอคอน (ไอคอน ฟอนต์ ) หรือ อักษรสัญลักษณ์ (ยิป ฟอนต์)
call home drive_eta mms
การเรียกขานโดยอ้างอิงตามแบบ
 Font Awesome = Font Awesome เช่น fa fa-bar-chart
 Google = Material Icons  (Google Icons)เช่น assessment
 Bootstrap = Icons BS Glyphicons เช่น  glyphicon glyphicon-cloud

ข้อดี
-ลงแค่ font เดียว ก็เหมือนได้ Icons ดีๆ มาใช้นับไม่ถ้วน (one font = font 360+)
-สามารถปรับขนาดได้โดยง่ายเหมือน font ทั่วไป และยังแสดงผลได้อย่างคมชัด เพราะเป็น SVG (Infinite Scalability)
-ตกแต่งรูปแบบเพิ่มเติมได้ง่ายด้วย CSS (CSS Control )
-ออกแบบมาเพื่อให้ใช้ได้กับ Bootstrap โดยเฉพาะ (Made for Bootstrap)
-สามารถใช้ได้ฟรี แม้จะเป็น Commercial Use ก็ตาม (Free)

วิธีการใช้งาน การวางโค้ด  Font Awesome,Google Icons และ Icons BS Glyphicons
คัดลอกโค้ดไปใช้ได้เลยครับ
ส่วนที่1. วางโค้ดสีแดงลงในส่วน <head>

<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>  
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700|Open+Sans:400,700,400italic|Exo+2:700' media='all' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

* โค้ดนี้ใช้ได้ทั้งสามแบบเลยครับ
Font Awesome = Font Awesome
Bootstrap = Icons BS Glyphicons
Google = Google Icons

ส่วนที่ 2. การทำตัวอักษรสัญลักษณ์
-ใส่โค้ดตัวอักษรสัญลักษณ์ แทนที่สีน้ำเงิน
Font Awesome
-สัญลักษณ์กล้องถ่ายภาพ

<i class="fa fa-camera-retro fa-lg"></i> 
............
-สัญลักษณ์กล้องถ่ายภาพ พร้อมใส่ลิงก์

<a href=' ใส่ลิงก์ตรงนี้ครับ '><span class='fa fa-camera-retro fa-lg'/><span/></a>
............
-สัญลักษณ์หนังสือ ใส่ลิงก์ และ title

<a href="ใส่ลิงก์ " rel="nofollow" title="ใส่ title"><span class='fa fa-camera-retro fa-lg '/></span></a>
............
-สัญลักษณ์หนังสือ ใส่ลิงก์ และ title และ size fa-2x ,fa-3x, fa-4x


<a href="ใส่ลิงก์ " rel="nofollow" title="ใส่ title"><span class='fa fa-camera-retro fa-lg fa-3x'/></span></a>
............

Google Icons (material Icons)
-สัญลักษณ์ โทรศัพท์ call (ใส่โค้ดตัวอักษรสัญลักษณ์ แทนที่สีน้ำเงิน)
call
<i class="material-icons">call</i>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อม ใส่ลิงก์
call
<a href="ใส่ลิงก์" rel="nofollow" ><i class="material-icons">call</i></a>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อม ใส่ลิงก์ ใส่ title
call
<a href="ใส่ลิงก์" rel="nofollow" title="ใส่ title"><i class="material-icons">call</i></a>
...............
-สัญลักษณ์ โทรศัพท์ call พร้อมใส่ลิงก์ ใส่ title และกำหนด size
call
<a href="ใส่ลิงก์" rel="nofollow" title="ใส่ title"><i class="material-icons"><span style="font-size: 65px;">call</span></i></a>
.............

Bootstrap
โค้ดนี้วางในส่วนของ <div class="container"> ครับ
-สัญลักษณ์ Signal icon:
    <div class="container">
    <span class="glyphicon glyphicon-signal"></span>
    </div>

ดูโค้ดตัวอักษรสัญลักษณ์ ข้างล่างนี้ครับ
Font Awesome

ดูเพิ่มเติมได้ที่ http://fontawesome.io/icons/ 
Google Icons ดูเพิ่มเติม https://material.io/icons/

ดูเพิ่มเติมได้ที่ดูเพิ่มเติม https://material.io/icons/ และ http://fontawesome.io/icons/ และ https://www.w3schools.com/icons/icons_reference.asp

Font Awesome
Icons Brand
Icons Chart
Icons Currency
Icons Directional
Icons File Type
Icons Form
Icons Gender
Icons Hand
Icons Medical
Icons Payment
Icons Spinner
Icons Text
Icons Transportation
Icons Video
Icons Web Application

Bootstrap
Icons BS Glyphicons

Google
Google Icons
Icons Action
Icons Alert
Icons AV
Icons Communication
Icons Content
Icons Device
Icons Editor
Icons File
Icons Hardware
Icons Image
Icons Maps
Icons Navigation
Icons Notification
Icons Places
Icons Social
Icons Toggle

โค้ดเพิ่มปุ่ม AddThis+

AddThis Button ที่เดียวเพื่อง่ายต่อการส่ง แชร์ ปริ๊น


คัดลอกโค้ดไปใช้ได้เลยครับ

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_preferred_6"></a>
<a class="addthis_button_preferred_7"></a>
<a class="addthis_button_preferred_8"></a>
<a class="addthis_button_preferred_9"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f8d7fe93deaf226"></script>
<!-- AddThis Button END -->

วิธีวางโค้ด
ไปที่รูปแบบ >>HTML/JAVASCRIPT >>วางโค้ด >>บันทึก

เริ่มเขียนบทความใหม่

เริ่มเขียนบทความใหม่

1.คลิกที่รูปดินสอ  หรือ คำว่า "บทความใหม่"



2. จะเข้าสู่การเริ่มเขียนบทความใหม่
คลิกที่ภาพเพื่อขยาย

3.ใส่ชื่อโพสต์ 
4.ใส่รายละเอียดของบทความ สามารถปรับรูปแบบตัวอักษรให้สวยงามเหมาะสม พร้อมใส่รูปภาพ และวิดีโอ ได้อีกด้วย
5.คลิกที่ "ป้ายกำกับ" (จะใส่หรือไม่ใส่ก็ได้) เพื่อการแสดงหมวดหมู่,แท็ก, Label,Tag (แล้วแต่จะเรียก)
6.คลิกที่ "แสดงตัวอย่าง" เพื่อตรวจสอบบทความให้เรียบรอยแล้ว ก่อนที่จะเผยแพร่บทความออกไป
7.คลิกที่ "เผยแพร่" เสร็จเรียบร้อย
7.1 ถ้าหากยังไม่พร้อมเผยแพร่ ให้คลิกที่ "บันทึก" แล้ว "ปิด" บทความนี้ก็จะเป็น "ฉบับร่าง" คือยังไม่เผยแพร่ เราสามารถมาเขียนเพิ่มเติมใหม่ แล้วเผยแพร่ในวันต่อไปก็ได้เช่นกัน

เพิ่มปุ่ม Line it! บนเว็บบล็อกและเว็บไซต์

การเพิ่มปุ่ม Line it! บนเว็บบล็อกและเว็บไซต์ เพื่อง่ายต่อการแชร์ไปยังไทม์ไลน์ หรือแชร์ไปยังเพื่อนได้อีกด้วย คัดลอกโค้ดสีแดงนี้ไปใช้ได้เลยครับ

ขั้นตอนการเพิ่มโค้ดของปุ่ม

ไปที่แม่แบบ/ธีม/>>แก้ไข HTML>>
คัดลอกโค้ดไปวางในบริเวณที่ต้องการแสดงบนเว็บไซต์
                          <!-- Line Start -->
<script type="text/javascript">LineIt.loadButton();</script>
<div class='line-it-button' data-lang='th' data-type='share-a' expr:href='data:post.url' style='display: none;'/>
 <script async='async' defer='defer' src='https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js'/>
                          <!-- Line End -->
เมื่อวางโค้ดเสร็จแล้ว บันทึกแม่แบบ


ทำป้ายกำกับแบบเท่ๆ ให้กับล็อกเราดีกว่า

วิธีทำป้ายกำกับใต้ภาพ หรือ ป้ายกำกับใต้หัวข้อบทความ ในหน้าแรกของเว็บ บล็อก เพื่อแยกหมวดหมู่ [LABEL] ให้กับบทความ ดังภาพตัวอย่าง
โค้ด

.post-labels
#viewers

ส่วนที่1
.post-labels{position:relative;margin:0;padding:0}
.post-labels a{float:left;height:18px;line-height:18px;position:relative;font-size:11px;margin-top:4px;margin-left:15px;background:#eb4938;color:#fff;text-decoration:none;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;padding:0 10px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-9px;width:0;height:0;border-color:transparent #eb4938 transparent transparent;border-style:solid;border-width:9px 9px 9px 0}
.post-labels a:after{content:"";position:absolute;top:7px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #666;-webkit-box-shadow:-1px -1px 2px #666;box-shadow:-1px -1px 2px #666}
.post-labels a:hover{background:#555}
.post-labels a:hover:before{border-color:transparent #555 transparent transparent}

ส่วนที่2
#viewers{float:left;width:100%;font:12px Arial;padding-top:3px;border-top:1px solid #bbb;margin:0;background:#eee}
.readmorecontent{float:right;margin:0;padding:3px 10px;0}

ทั้งสองอยุ่ก่อนหน้า ]]></b:skin>

ส่วนที่3
                        <div class='post-footer'>
                          <div id='viewers'>

                            <span class='post-labels'>
                              <b:if cond='data:post.labels'>
                                <b:loop values='data:post.labels' var='label'>
                                  <a expr:href='data:label.url + &quot;?&amp;max-results=5&quot;' rel='tag'>
                                    <data:label.name/>
                                  </a>
                                </b:loop>
                              </b:if>
                            </span>
                          </div>
                        </div>

ลิงก์ไปยังย่อหน้า หรือหัวข้อ ภายในหน้าเดียวกันอย่างรวดเร็ว

โค้ดเพิ่มลิงก์ ไปยังย่อหน้า หรือหัวข้อ ภายในหน้าเดียวกันอย่างรวดเร็ว ด้วยการคลิกลิงก์ คุณไม่ต้องเลื่อน หรือหา ให้เสียเวลา คุณสามารถคลิกข้ามไปยังหัวข้อที่ต้องการได้ทันที

  เพียงคลิกลิงก์ ก็จะไปยังหัวข้ออย่างรวดเร็ว เพื่อง่าย และสะดวกต่อผู้อ่านบทความ ในบล็อก หรือว็บไซต์ ที่มีเนื้อหา หัวข้อ รายละเอียดเยอะๆ ในบางทีเราก็ต้องการข้ามไปยังหัวข้อที่เราต้องการอ่านเท่านั้น แต่การเลื่อนหาทีประโยคคงเสียเวลา เมื่อคุณใช้โค้ดนี้จะสะดวกสำหรับผู้เข้าอ่านเนื้อหาในเว็บ หรือบล็อกของคุณ อย่างมากเลยครับ
คลิกดูตัวอย่าง
หัวข้อที่1หัวข้อที่2 /หัวข้อที่3 /หัวข้อที่4 /หัวข้อที่5/หัวข้อที่6/หัวข้อที่7/หัวข้อที่8/หัวข้อที่9


คัดลอกโค้ดไปใช้ได้เลยครับ
<a href="http://webblog2u.blogspot.com/2016/03/blog-post.html#9">หัวข้อที่9</a>
<a name="9"></a> หัวข้อที่9

วิธีทำ
ส่วนที่1 สร้างลิงก์แบบปกติ เช่น (หัวข้อที่9)
-ส่วนประกอบ <a href="ใส่urlของหน้า#เลข">หัวข้อที่9</a>
-ลิงก์คือ http://webblog2u.blogspot.com/2016/03/blog-post.html#9
-โค้ดHTMLคือ
<a href="http://webblog2u.blogspot.com/2016/03/blog-post.html#9">หัวข้อที่9</a>

ส่วนที่2 หัวข้อหรือย่อหน้า ที่กำหนดไว้ (คลิก html ก่อนวางโค้ด)
-ส่วนประกอบ <a name="เลข"></a> หัวข้อที่9
-โค้ดที่ใช้วางก่อนหน้าหัวข้อ <a name="9"></a> หัวข้อที่9


ตัวอย่าง

หัวข้อที่1
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่2
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่3
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่4
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่5
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่6
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่7
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่8
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่9
รายละเอียด
เนื้อหาอื่นๆ
บลาๆๆๆๆ

หัวข้อที่1หัวข้อที่2 /หัวข้อที่3 /หัวข้อที่4 /หัวข้อที่5/หัวข้อที่6/หัวข้อที่7/หัวข้อที่8/หัวข้อที่9
วิธีทำ / ไปบนสุด

วิธีทำหน้าเว็บให้เป็นสีขาวดำ

วิธีทำหน้าเว็บให้เป็นสีขาวดำ เทา
ขั้นตอน
ไปที่แม่แบบ >>แก้ไข html
1.ค้นหา ]]></b:skin>
2.คัดลอกโค้ด

html {
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

3.วางโค้ดวางลงก่อนหน้า ]]></b:skin>
4.บันทึกแม่แแบบ เสร็จแล้วครับ

ตัวอย่าง
html {
filter: grayscale(100%);
filter: gray;
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
]]></b:skin>
คัดลอกโค้ดไปใช้ได้เลยครับ

**ถ้าหากมืดเกินไปให้ปรับลดลงเป็น90%,80%ตามเหมาะสม
**หากต้องการกลับมาเหมือนเดิมให้ลบโค้ดออกครับ

แก้ปัญหา Line หาย

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

แก้ปัญหาง่ายๆขั้นตอนดังนี้
1.ลงทะเบียนบัญชีอีเมลล์
-เข้าไปที่รูปฟันเฟือง>>บัญชี>>ลงทะเบียนบัญชีอีเมลล์>>ใส่อีเมลล์ของท่าน

2.เปิดใช้งานLineด้วยคอมพิวเตอร์ หรือโน๊ตบุ๊ค

2.1หากมีLineติดตั้งไว้แล้วก็Loginเข้าใช้ได้เลย
ท่านสามารถLoginด้วยอีเมลล์ หรือLoginด้วยเบอร์โทร ก็ได้ครับ

2.2ถ้าหากยังไม่มีLineในเครื่อง ให้ติดตั้งก่อน
ดาวน์โหลดได้ที่ https://line.me/th/download

**นอกจากนี้ท่านยังสามารถเปลี่ยนเบอร์ หรือเปลี่ยน อีเมลล์ ในบัญชี Lineได้อีกด้วยครับ โดยทุกอย่างก็ปกติ

ต่อไปนี้ หากเปลี่ยนเครื่อง เปลี่ยนเบอร์ รีเซ็ตเครื่อง Lineท่านจะไม่หายแล้วครับ

Area Croods Map

code area croods map กำหนดปุ่มคลิกตำแหน่งในแผนที่ แล้วจะลิงก์ไปยังหน้าเว็บที่ต้องการ
"rect"  คือ สี่เหลี่ยม
"circle" คือ วงกลม
ภาพอธิบายการกำหนดตำแหน่ง


คัดลอกโค้ดไปใช้ได้ครับ
<img alt="Planets" height="222" src=" ใส่ URLภาพ " usemap="#planetmap" width="309" />
<map name="planetmap">
<area alt="นครปฐม" coords="33,151,113,30" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="ปทุมธานี" coords="136,80,280,24" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="กรุงเทพฯ href=" coords="180,90,280,146" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="สมุทรปราการ" coords="176,160,280,204" href="ใส่URLลิงก์" shape="rect"></area>
<area alt="นนทบุรี" coords="152,96,25" href="ใส่URLลิงก์" shape="circle"></area>
<area alt="สมุทรสาคร" coords="96,184,30" href="ใส่URLลิงก์" shape="circle"></area>
</map>

*ท่านสามารถดัดแแปลงไปใช้กับแผนที่ แบบอื่นๆได้ตามความเหมาะสม
*ขนาดพื้นที่  height และ width ควรเท่ากันกับขนาดภาพ
ลองคลิกดูครับ
Planets

นครปฐม
ปทุมธานี
กรุงเทพฯ href=
สมุทรปราการ
นนทบุรี
สมุทรสาคร

โค้ดเล่นไฟล์สกุล m3u8 บนเว็บไซต์

ไฟล์สกุล .m3u8 เป็นรูปแบบไฟล์คอมพิวเตอร์ที่มีรายการเพลง มัลติมีเดีย หรือสำหรับรายการสด Live broadcast จากสถานีวิทยุ โค้ดนี้สามารถฟังได้ทั้งเครื่องคอมพิวเตอร์ และสมาร์ทโฟน ทุกระบบ

คัดลอกโค้ดไปใช้ได้เลยครับ
<script src="https://jwpsrv.com/library/iCNxUOakEeKTGxIxOQulpA.js"></script>
    <script>jwplayer.key="IlVNgC+NtBYXe66VHWfLpLzgHU7cOg7MBhdlHA=="; </script>
    <br />
<div id="mediaspace">
</div>
<script>
        var createPlayer = function ()
        {
          jwplayer('mediaspace').setup({
             playlist: [{ file: 'ใส่URL ของไฟล์ที่นี่' }],
             width: '300',
             height: '30',
             autostart: true,
             aspectratio: '16:9',
             primary: 'html5',
             androidhls: true,
    events:{
    onReady:function(){
     jwplayer().setVolume(100);
    }
   }
          });
        }
        createPlayer();
    </script>

ตัวอย่าง
สถานีวิทยุเอฟเอ็ม 87.5 วิทยุรัฐสภา
http://202.57.162.55:1935/live04/live04/playlist.m3u8


วันนี้