Maprang 5350110068: TECH & TIPS

1. การเปลี่ยนรูปภาพหัวข้อเรื่องตรงแถบด้านข้าง

ตรงหน้าของแต่ละหัวข้อจะมีรูปเล็ก ๆ อยู่ (bullet) เราสามารถเปลี่ยนรูปตรงนี้
เป็นรูปอื่น ๆที่เราต้องการได้ โดยการเปลี่ยน CSS เพียงนิดเดียวเอง

1. เข้าไปที่ Theme --> แก้ CSS ด้วยตัวเอง จากนั้นหาคำว่า .sidebar-item li

.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/patchy/bul.gif);
background-position:0px 2px;
}

2. ตรงคำว่า background-image: ให้เปลี่ยน url ตรงที่ไฮไลท์ไว้เป็น URL
ของรูปที่เราต้องการให้เป็นหัวข้อ ตัวอย่างเช่น ถ้า url ของรูปใหม่ คือ http://uc.exteenblog.com/jennessa/images/0164_star.jpg
CSS ที่ได้จะเป็นดังข้างล่าง

.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image:
url(http://uc.exteenblog.com/jennessa/images/0164_star.jpg);
background-position:0px 2px;
}

3. ตรงคำว่า background-position: เป็นการกำหนดตำแหน่งของหัวข้อเลข
ตัวแรกคือตำแหน่งตามแนวนอน เลขตัวที่สองคือตำแหน่งตามแนวตั้ง
ตัวอย่างเช่น ถ้าเราต้องการให้รูปหัวข้อไปทางขวามากขึ้น เราก็ต้องเพิ่ม
ตัวเลขตัวแรกให้มากขึ้น
( ลองเปลี่ยนรูปดูก่อน แล้วค่อยดูว่าจะต้องเปลี่ยนเลขตรงนี้หรือไม่)

4. เรียบร้อยแล้วค่ะ จากนั้นลองไปดูที่ blog ของเราหัวข้อตรงแถบด้านข้าง
จะเปลี่ยนไป

2. วิธีใส่ไอคอนหน้า URL

icon หน้า URL เรียกว่า Favorites Icon เป็นคุณลักษณะที่ทำให้มัน
เป็นที่จะเชื่อมโยงโลโก้พิเศษหรือกราฟิก ที่มีขนาดเล็กหน้าเว็บ favicon
จะปรากฏมักจะไปที่ที่อยู่เว็บไซต์เหมือนวิธีที่ไอคอนทางลัดที่ใช้บนเดสก์ทอป
ของคอมพิวเตอร์ที่จะแยกโปรแกรมคอมพิวเตอร์และแฟ้ม favicons สามารถ
ถูกใช้เพื่อกำหนดหรือแบรนด์เว็บไซต์ เพื่อความสวยงาม บ่งบอกถึงเว็บไซต์ต่างๆ
ปัจจุบันเบราว์เซอร์หลักที่สนับสนุน favicons มีดังนี้
Internet Explorer 5 / 6 +
Firefox 1 +
Mozilla 1 +
Netscape 7 +
Opera 7 +
Konqueror 3 +
Safari

วิธีทำ Icon ของเว็บไซต์
1. เตรียมรูปภาพที่จะทำ Icon ขนาด 16x16 พิกเซล Save เป็น สกุล .gif , .jpg,
.bmp หรือ.png ก็ได้
2. เมื่อได้รูปแล้วต้องเอารูปไปแปลงเป็นไฟล์สกุล .ico ซึ่งเราสามารถใช้โปรแกรม
แปลงไฟล์ เช่น AWicons Lite , AtoBsoft PNG to ICO Converter หรือตามเว็บ
ที่ให้แปลงไฟล์ก็ได้ โดย เข้าไปที่ URL ดังนี้
http://tools.dynamicdrive.com/favicon/
หรือ http://favicon.htmlkit.com/favicon/

3. กด Browse หรือกดเรียกดู เพื่อเลือกไฟล์ที่รูปภาพ

4.เลือกเสร็จก็กด Upload it! รอซักพัก แล้วแต่ขนาดไฟล์ ถ้ารูปใหญ่ก็รอนาน

ดูตรง Host It at IconJ.com: (Direct Link) แล้วก็อปโค้ดมาสำหรับตำแหน่งที่
วางโค๊ดนี้ลงไปให้วางไว้ในแท็ก HEAD ตัวอย่าง

<head>

…

</head>

สำหรับทำแล้วไม่ขึ้นให้ดูข้อควรระวังตามนี้

1. ไฟล์เป็นไฟล์ .ico หรือไม่

2. ไฟล์ icon เรียกใช้ถูกที่หรือไม่

3. ตรวจสอบ Version เบราว์เซอร์ที่สนับสนุน

3. การใส่ปุ่ม Share ของ Facebook

การใส่ปุ่ม share ของ facebook ลงเว็บ

http://www.facebook.com/share/

สำหรับวิธีที่ 1 คือ

copy code ตัวอย่างด้านล่างนี้ไปติดไว้ที่หน้าเว็บที่ต้องการ share ก็จะได้ปุ่ม
share ของfacebook

<a name=”fb_share” type=”button_count”
href=”http://www.facebook.com/sharer.php”>Share</a>
<script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share”
type=”text/javascript”></script>

สำหรับวิธีที่ 2 คือ

สามารถ share หน้าที่ต้องการได้ไม่ว่าจะเป็นหน้าไหนก็ตามสามารถ
ทำได้หมด เพียงแค่ใส่url กับ หัวข้อลงไป

<a href=http://www.facebook.com/sharer.php?u=
http://www.teenee.com&t=ที่นี่.คอม">share Facebook</a>

สร้างรูปมาใหม่สักรูปแล้วใส่ลิ้งค์ตามด้านบนนี้ โดยให้เปลี่ยน url กับ title
เป็นลิ้งค์ของหน้าเว็บที่ท่านต้องการ share เพียงเท่านี้ก็สามารถติด share
facebook ที่หน้าเว็บได้แล้ว

การเรียกใช้งาน