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

ส่วนมากลิงค์ 'รินทร์มีแต่ลิงค์ที่แวะไปบ่อย ๆ คับ ออกจะประหลาด ๆ ไม่เหมือนชาวบ้านชาวช่องเค้าสักหน่อย ขออภัยในความไม่สะดวกคับ ฮี่ ๆ ๆ
 
อ่ะ...ลองมาดูวิธีแทนลิงค์ด้วยภาพอย่างง่าย ๆ กันคับ เริ่มแรกเลยก็เปิด Photoshop ก่อนคับ แล้วเลือกขนาดของภาพที่ต้องการจะให้แทนลิงค์กันคับ ขนาดของ Sidebar ในบล็อคเจ้ารินทร์กำหนดไว้ที่ 300px เลยเลือกใช้ภาพขนาด 250X50 คับ เป็นภาพแนวนอนเล็กกระทัดรัดไม่ใหญ่ไม่โต กำลังดีคับ แต่เพื่อน ๆ จะกำหนดให้เล็กหรือใหญ่กว่านี้ก็ได้นะคับ จะแนวตั้งแนวนอน ได้ทั้งนั้น...
 

ทีนี้พอสร้าง File ใหม่ใน Photoshop ขนาด 250X50 แล้วนะคับ ก็มาออกแบบกันว่าจะให้ภาพมันออกมาแบบไหน ตรงนี้สร้างสรรค์กันได้เต็มที่เลยนะคับ ไม่มีลิมิตว่าจะต้องเรียบ ๆ แบบ 'รินทร์ จะแปลกแหวกแนวยังไงก็ได้คับ ลิงค์ภาพของเราเอง เต็มที่สุด ๆ ไปเลยคับ
 
งั้นตัวอย่างวิธีทำ 'รินทร์ขอยกตัวลิงค์ไปมหาวิทยาลัยเกษตรศาสตร์แทนก็แล้วกันนะคับ...
 
 
พอได้ File ที่จะทำก็ให้เพื่อน ๆ เปิดภาพที่จะใช้เป็นส่วนประกอบขึ้นมาคับ สำหรับลิงค์ด้วยภาพไปมหาวิทยาลัยเกษตรศาสตร์ 'รินทร์ใช้แค่ Logo ของมหาวิทยาลัยอย่างเดียวคับ (ความจริงแล้วไม่รู้จะใส่อะไรต่างหาก)
 
 
พอได้ Logo แล้วก็ทำในส่วนต่อไปกันคับ อยากได้สีพื้นเป็นสีอะไร เข้ม สว่าง มืด หวานขนาดไหนก็ซัดกันได้แบบไม่ต้องยั้งคับ ในส่วนนี้ 'รินทร์เลือกใช้สีเขียวเป็นพื้นคับ โดยให้เพื่อน ๆ คลิกเลือกที่แถบเมนูด้านซ้าย เลือก Eyedropper ที่เหมือนหลอดดูดสีนะคับ แล้วไปดูดสีที่ต้องการจากตารางสีด้านขวามือ จากนั้นให้คลิก Paint Bucket Tool (G) ที่เป็นกระป๋องสีอ่ะคับ แล้วเทสีลงใน File ภาพที่จะทำ
 

พอได้สีพื้นที่ต้องการแล้ว ก็มาจัดการในส่วนของ Logo มหาวิทยาลัยกัน โดยลดขนาดของภาพลงมาอยู่ที่ 48X48 ด้วยการเข้าไปลดขนาดที่ Image>Image Size นะคับ
 
หลังจากลดขนาดของ Logo แล้ว ก็ใช้เครื่องมือ Move Tool ในแถบเครื่องมือลากเอา Logo มาแปะไว้ในพื้นที่สีเขียวที่จะใช้แทนลิงค์ด้วยภาพคับ จะให้อยู่ทางซ้ายขวาบนล่างยังไงก็ได้ แล้วแต่ใจต้องการคับ
 
 
พอได้ตำแหน่งของ Logo ที่ต้องการแล้ว ก็มาทำตัวอักษรชื่อกันด้วยการคลิกที่เครื่องมือ Horizontal Type Tool ในแถบเครื่องมือที่เป็นสัญลักษณ์ตัว T อ่ะคับ แล้วก็พิมพ์ตัวอักษรที่ต้องการลงไป ปรับเปลี่ยนขนาดและรูปแบบตามใจชอบได้เลยคับ
 
 
เอาล่ะ...ทำเสร็จแล้วก็ออกมาเป็นหน้าตาแบบนี้ล่ะคับ
 
 
จากนั้นก็ถึงเวลาอัพลงบล็อคและทำลิงค์กัน ซึ่งเมื่ออัพลงบล็อคแล้ว ภาพที่อัพลงไปนั้นจะมีลิงค์ชื่อกำหนดไว้คล้ายกับเวลาอัพภาพแต่ง Theme คับ ให้เปิดภาพขึ้นมาแล้วคลิกขวาดูที่คุณสมบัติของภาพคับ
 

ที่คุณสมบัติของภาพจะมีตำแหน่งที่ตั้งของภาพแบบนีคับ http://chenbin.exteen.com/images/Brand/Logo%20Kasetsart.jpg ให้เพื่อน ๆ คลิกขวาเลือก copy เก็บเอาไว้ก่อนนะคับ แล้วไปคลิกที่ Tap Manage>Links แล้วเลือกแก้ในส่วนที่จะแทนลิงค์ด้วยภาพคับ ซึ่งประกอบไปด้วย
 

URL http://________________________________ (URL ของลิงค์ สามารถใส่ได้ไม่เกิน 255 ตัวอักษร)

Description________________________________

 
ให้พิมพ์ชื่อเว็บที่ต้องการลงในส่วนของ URL http:// คับ... ชื่อเว็บอะไรก็ใส่ไปโลดเลยคับเช่น www.ku.ac.th ของมหาวิทยาลัยเกษตรศาสตร์ แต่มีข้อระวังนิดนึงจะคับถ้าจะใช้วิธี copy มาวาง ไม่ต้อง copy http:// มาด้วยนะคับ เพราะมันจะซ้อนกันทำให้เปิดไม่ได้ (เมื่อวานเล่นเอางงไปพักใหญ่ ผิดตรงไหนหว่า??? เช็คไปเช็คมาถึงได้รู้ copy มาซ้อนกันนั่นเอง แฮ่ ๆ)
 
จากนั้นมาดูส่วนของ Dscription กัน ส่วนนี้แหละคับที่จะใช้แทนลิงค์ด้วยภาพคับ ให้เพื่อน ๆ พิมพ์ตามนี้เลยคับ  <img src=http://chenbin.exteen.com/images/Brand/Logo%20EGAT.jpg alt=Logo EGAT border="0">
 
ตรงสีแดงที่ 'รินทร์เน้นไว้ เป็นตำแหน่งที่ตั้งของภาพนะคับ ให้เพื่อน ๆ ใส่ตำแหน่งที่ตั้งของภาพที่ copy ไว้เมื่อสักครู่ลงไปแทน แล้วอย่าลืมแก้คำอธิบายภาพอย่างย่อในส่วนของ alt ด้วยนะคับ เห็นมั้ยคับ? ง่าย ๆ แค่นี้เองล่ะคับ เราก็สามารถแทนลิงค์ด้วยภาพอย่างง่าย ๆ ในบล็อกของเราได้แล้วล่ะคับ
 
ลองทำกันดูเล่น ๆ นะคับ แล้วจะเพลินติดใจเหมือน 'รินทร์ ทำแล้วสนุกมากคับ ติดใจจนไม่รู้จะหาเว็บอะไรมาทำแล้วล่ะคับ ฮ่า ๆ ๆ 

Comment

Comment:

Tweet

ในที่สุดก็ทราบวิธีการแล้วค่ะ หามาตั้งนาน อิอิ ขอบคุณมากนะคะ XDHot!

#40 By Sunsign on 2012-05-02 18:57

ขอบคุณหลายยยเด๋อออ Hot! Hot! หามานานและsad smile

#39 By on 2011-06-19 16:58

เอาล่ะ ได้เวลาแฮบของดีแล้ว
ขอบคุณค๊า

#38 By อารายนะ on 2010-04-20 23:26

ต้องการอยู่พอดีเลย Hot!

#37 By eiz : อีซ on 2009-09-09 18:02

ทำแจกเลยดีมั้ยคับ? พี่โหน่ง confused smile

#36 By Rin-Kung on 2009-08-15 22:09

อันตัวข้าพเจ้านี้ พยายามอย่างสูงยิ่ง แต่ทำไม ยิ่งอ่าน ยิ่งงง
เอาเป็นว่า ทำให้หน่อยได้ป่ะ (หน้าด๊าน หน้าด้านเน๊อะ) question

#35 By ta_THINK_nhong on 2009-08-11 14:21

ขอบคุณมากๆเลยค่ะHot!

#34 By i'm-may on 2009-08-07 22:34

ไม่รู้จะลิงค์ไปไหน 55555555555555cry cry cry cry cry cry cry cry cry cry cry cry cry cry cry cry cry

#33 By กวางน้อย... on 2009-08-06 22:20

ออ ลืมให้ Hot!

เพราะธีมสวยหรอก

#32 By *+~+LovE- Atmospheric+~+* on 2009-08-06 00:26

ธีมใหม่สวยได้ใจจิงๆเลย

ทำให้บ้างสิเฮียย

หนูแก้ไม่เปน

#31 By *+~+LovE- Atmospheric+~+* on 2009-08-06 00:26

Hot! ไว้หัดทำ

#30 By จอมบงการ on 2009-08-05 23:24

big smile big smile

#29 By เซงครับ on 2009-08-05 23:11

เจ๋งๆพี่รินทร์ไว้เอาไปลองทำมั่งcry double wink
ง่า

ทำมะได้อ่า

ไม่ใช่อธิบายไม่ดีนะ

แต่ที่ทำไมได้เพราะ... ไม่มี link อ่ะ - -

#27 By chimerateddy on 2009-08-05 21:51

confused smile Hot!

#26 By wesong on 2009-08-05 20:39

โอ้ ! สุดยอดมาก
ขอบคุณมาก ๆ เลยนะครับ
confused smile

#25 By PANTHONG on 2009-08-05 20:35

ขยันจริง ๆ เจ้าของบล็อกนี้ confused smile confused smile
ยอดเยี่ยมเลยๆๆๆHot!
เจ๋งแฮะbig smile

#21 By LungDeng on 2009-08-05 16:56

แฮ่ ๆ ๆ ไม่ได้ขยันอะไรหรอกคับ เพียงแต่พอทำได้ก็อยากแบ่งปันวิธีทำให้เพื่อน ๆ ได้ทดลองทำกันดูบ้างนะคับ confused smile

(แอบอู้มาทำ How To น่ะคับ จุ๊ ๆ ๆ อย่าเอ็ดไป เดี๋ยวโดนหัวหน้าเ่พ่งเล็งล่ะยุ่งเลย...) sad smile

#20 By Rin-Kung on 2009-08-05 15:59

ขยันจริงๆ..
คนหนุ่ม ไฟแรง (ก็มนุษย์ไฟฟ้านี่เนอะ) big smile

#19 By PunPrai on 2009-08-05 15:50

น่าลองทำเป็นอย่างยิ่งbig smile

#18 By E.T.*** on 2009-08-05 15:22

เจ๋ง..double wink Hot! Hot! Hot!

#17 By nudee on 2009-08-05 15:14

โอ้ ขอบคุณมากครับเป็นประโยชน์มากๆเลย

^ ^

#16 By k_i on 2009-08-05 15:05

Hot! ขอบคุณครับ ได้ความรู้ใหม่ กำลังอยากแต่งบล็อกพอดี surprised smile question open-mounthed smile

#15 By Recycle Boy on 2009-08-05 13:40

Hot! ขอบคุณมากค่ะ ดีจังสวย และเป็นระเบียบดีด้วยนะคะ

#14 By eeddy(อี๊ด) on 2009-08-05 13:34

ประดับความรู้ดีครับ
ถ้าจะทำแล้วจะมาดูตัวอย่างอีกทีนะครับ

#13 By แทณนี่แหละ on 2009-08-05 12:44

big smile Hot!

#12 By b-padung Studio on 2009-08-05 12:30

ใส่คับหลวงพี่...แฮ่ ๆ ๆ พลาดอีกแล้ว ขอบคุณนะคับที่เตือน sad smile

#11 By Rin-Kung on 2009-08-05 12:03

ไม่ต้องใส่ <img src= หรือ ? แล้วเจ้ารินทร์ลืมใส่สีแดงในโค้ดหรือเปล่า / น่าสนุกดี ไว้ลองทำมั่ง

ป.ล. เข้าไปลองหาธีมมาทำมั่ง ยังไม่เจอที่ชอบเลย

#10 By mahaoath on 2009-08-05 12:00

โหวววว...ความรู้ใหม่เอี่ยมอีกแล้วค่ะ..Hot!

ตามไม่ทันเลย ขอบคุณค่ะ..

ถ้าวันไหน อยากทำ..จะแวะมาดูบล๊อกนี้ค่ะ big smile
ขยันจังนะเจ้ารินทร์ เมื่อไหร่ว่างจัดบ้านให้พี่แพทละคะ....อิอิ
ดีละ เวลาจะเข้า Web ม.เกษตร จะเปิดเข้ามาที่นี่ ง่ายดีค่ะ
Thank หลายๆ นะน้องรัก

#8 By Pat's Song on 2009-08-05 11:47

โอ้ว ความรู้ใหม่ กำลังหาวิธีทำลิงค์รูปอยู่เลย ขอบคุณมากค่ะ big smile Hot!

#7 By elRion on 2009-08-05 11:47

confused smile

#6 By mini-teddy on 2009-08-05 11:33

เอาไปเลยคับพี่แอ้ copy ลิงค์ตามด้านบนไปเลยคับ confused smile

#5 By Rin-Kung on 2009-08-05 11:27

โอ๊ะๆ มีความรู้อีกแล้ว Hot! Hot!

#4 By 'ฟาย..ฟลาย on 2009-08-05 11:24

Hot!
เจ๋งจ้า.. ว่าแต่โลโก้มหาลัยนี่ พี่เอาไปแปะมั่งได้มั้ย
ขี้เกียจทำเองง่ะ.. อิอิ

#3 By แอ้ on 2009-08-05 11:22

ได้อ่านคราวๆแล้วน่าสนใจคะ แต่มันต้องใช้เวลาศึกษา ของแอดเขาบล็อกตัวเองนะคะ

#2 By ฃวด on 2009-08-05 11:21

ขอบคุณมากเลยค่ะเจ้าริทร์ คนโลเทคอย่างพี่จะได้ค่อยๆเรียนรู้
ถ้าเรียนแล้วไม่รู้จะไปถามนะจ๊ะquestion

#1 By โต๊ะคิ้งส์ on 2009-08-05 11:17