Embed Size (px)
Citation preview
สร้างร้านค้าออนไลน ์Blogger Stoer V.2
โดย KONIKAWA
ค่าขนมและทุนการศึกษาเลก็ ๆ น้อย ๆ
100.-
http://blogmoney100.electutor.com
2
ค าน า เนื่องจาก template ของ Blogger Free
มีความนิยมเป็นอย่างสูงและได้รับความนิยมอย่างต่อเนื่อง
ตลอดมา และมี template อีกชิ้นหนึ่งที่ได้รับความ
นิยมในการขายของออนไลน์ในขณะนี ้ ก็คือ
Blogger Stoer V.2
ซึ่งผลงานที่ต่อยอดมาจาก V.1 มีความพิเศษที่เพิ่มเข้ามาก็
คือ สามารถติด Adsense ได้นั่นเอง
คู่มือฉบับนี้น าเสนอการใช้งานตั้งแต่การติดตั้ง
ไปจนถึงใช้งานจริงได้ 100% และจะเพิ่มเนื้อหาขึ้น
เรื่อย ๆ อย่างต่อเนื่องเพื่อให้ผู้อ่านสามารถติดตามความ
เคลื่อนไหวได้ทันท่วงที
Konikawa
http://blogmoney100.electutor.com
3
สารบัญ ภาพรวมเกี่ยวกับ Blogger Stoer V.2 5
+ ข้อดีที่น่าใช้ + ข้อเสียที่ต้องปรับปรุง +การประยุกต์ใช้
ดาวน์โหลดและติดตั้งท าอย่างไร ??? 6
Content ด้านขวามันตกจะแก้ไขอย่างไร ??? 10
ติด Adsense ตรงไหนได้บ้าง ???
โพสต์สนิค้าอย่างไร ให้ตรงตามต้นฉบับ ???
Content ด้านขวามันตกจะแก้ไขอย่างไร ???
เปลี่ยน E-mail และสกุลเงิน paypal อย่างไร ???
การแสดงผลแบบ Grid และ Detail เป็นอย่างไร ???
จิปาถะ (อืน่ ๆ) ทั่ว ๆ ไป
ส่วนไหนที่ยังไม่ได้ศึกษา ???
http://blogmoney100.electutor.com
4
http://blogmoney100.electutor.com
5
ภาพรวมเกี่ยวกับ Blogger Stoer V.2
+ ข้อดีที่น่าใช ้
บล็อก Blogger Stoer V.2 มีสีสันสวยงาม สะอาดตา นั่นละ
คือ Landing page ที่ดีครับ
มีระบบ paypal.com ที่ใช้รับช าระเงินตามสกุลเงินต่าง ๆ
สามารถใส่รูป และก าหนดราคาเองได้
ติด Adsense ได้ 3 จุด ปรับแต่ง SEO ได้ดั่งใจฉันเลยละ...
มีการแสดงผลแบบสไลด์โชว์ โดยแสดงภาพที่เราโพสต์ล่าสุดก่อน
+ ข้อเสียที่ต้องปรับปรุง
มีโค้ด HTML ที่เราต้องแก้ไขเองโดยส่วนหน่ึง เพื่อให้ link กับส่วนต่าง
ได้ดี ท าให้การใช้งานสมบูรณ์ยิ่งขั้น
Content ด้านขวา เราต้องแก้ไขโค้ดเล็ก ๆ น้อย ๆ เพื่อให้เกิดความสวยงาม
มี Page มาก จนท าให้ผู้ใช้เกิดอาการงง ??? และต้องเรียนรู้โค้ด HTLM
เพิ่มเติม ซึ่งเปารเสียเวลา มากเกินไป...
+ การประยุกต์ใช้งาน
สร้างร้านค้าออนไลน์ เช่น Amamzon ร้านค้าตัวเอง ขายภาพ ขาย CD
ฯลฯ แล้วแต่จะขายกันนะครับ
http://blogmoney100.electutor.com
6
ดาวน์โหลดและติดตั้งท าอย่างไร ??? อันดับแรกเข้าไปที่ http://javatemplates.com/2011/blogger-store-v2 จะพบ
กับหน้าเว็บไซต์ต้นฉบับดังน้ี
ให้เราท าการคลิก “ Download” เพื่อโหลดไฟล์ดังกล่าวมาไว้ที่เครื่องคอมพิวเตอร์ของเรา
(ถ้าอยากดูบล็อกตัวอย่างให้คลิก Live Demo )
ณ ที่น้ีขอดาวน์โหลด และ บันทึก เก็บไว้
ที่ Desktop นะครับ จากน้ันเรา
ก็ท าการแตกไฟล์ออก จะพบโฟลเดอร์ ๑
อัน ....
จากน้ันเรา ไปที่บล็อกของเราท าการ
Login แล้วเลือก “การออกแบบ” และ
เลือก “แกไ้ข HTML” ดังรูปถัดไป....
http://blogmoney100.electutor.com
7
ให้เราเลือก “Choose File” แล้วที่ Desktop เลือกโฟลเดอร์ที่เราท าการแตกไฟล์ก่อน
หน้าน้ัน และคลิกเพื่อเข้าไปยังโฟลเดอร์น้ันซะเลย..........
http://blogmoney100.electutor.com
8
เมื่อคลิดเข้าไปแล้ว ให้เราเลือกไฟล์ที่ชื่อว่า ... bloggerstore-v2.xml แล้วคลิกเลือก Open
และคลกิเลือก Upload ตามล าดับนะครับ..... รอสักแปบบ........
เมื่ออัพโหลดแล้ว จะพบกับหน้าสีแดง ๆ เตือนเรา ให้เราเลือก ลบ WIDGET ออกให้หมดครับ
เดี๋ยวเราเพิ่มทหีลังกไ็ด้ครับ.....
http://blogmoney100.electutor.com
9
เมื่อเรียบร้อยแล้วใหเ้ราลอง ทดสอบแสดงผลดูนะครับ โดยคลิกที่ ดูบล็อก
เมื่อเราท าการทดสอบการแสดงผล จะพบว่าบล็อกของเรามีความผิดพลาดอยูป่ระมาณ ๒
ส่วน คือ ส่วนสไลด์ภาพด้านบน และ ส่วน Content ด้านขวามือ ลองเปรียบเทยีบกบั
ต้นฉบับดูนะครับ จะพบข้อผิดพลาดอยูบ่้างครับ ศึกษาต่อในหวัข้อถัดไปนะครับ...
http://blogmoney100.electutor.com
10
Content ด้านขวามันตกจะแก้ไขอย่างไร ???
หลังจากเทียบดูกับต้นฉบับแล้ว จะพบว่ามันแตกต่างกันอยู่มาก ท าไมด้านขวามันตกไปอยู่
ด้านลา่ง หว่า....???? หหุ.ุ.. (หวัเราะคลายเครียดดด...) วิธีแกไ้ขท าได้ดังน้ีครับ ไปดูกนั......
ใหเ้ราเข้าไปที่บล็อกของเรา คลิดเลือก การออกแบบ >> แก้ไข HTML จากน้ัน กด Ctrl+F ที่
แป้นพมิพ์ของเรา (ใครใช้ BB ผมไม่รูด้้วยนะ ๕๕๕...) จะพบค าค้นหาดังรูป...
จากน้ันให้เราเปลี่ยนค่าตรงที่ขีดเส้นใต้สีแดง ให้เป็น 210 นะครับ แล้วกด บันทึกแม่แบบ
จากน้ันเราก็ลอง ดูบล็อกอีกครั้ง... จะพบว่า มันขึ้นมาอยู่ตรงที่เดิมเหมือนต้นฉบับแล้วละ
ครับ ที่ต้องปรับค่าจดุน้ี เพราะว่าขอบมันเกยกนัน่ันเองละครับ อิอิ....
http://blogmoney100.electutor.com
11
ส่วนสไลด์ด้านบนน้ัน ผมยังหาวิธีแก้ไขยังไม่ได้ครับ ต้องขอใช้เวลาสักหน่อย ตอนน้ีเอาแค่
ขัน้ต้นไปกอ่นนะครับ หากมีส่วนไหนอัพเดท ผมจะแจง้ใหท้ราบต่อไป...
ติด Adsense ตรงไหนได้บ้าง ???
ในเรือ่งการติด Ads หวังว่าผูอ่้านคงคล่องกนัแล้วนะครับ ผมไม่ขอธิบายอะไรมากนะครับ อิอิ
http://blogmoney100.electutor.com
12
เ ดี๋ยว ม า ท าต อ่ น ะคร ับ !!!!!
ต อน น ี ้ ถา่ย ทอด เ ผยแ พร ่
แด ส่าธ าร ณ ชน เ ทา่น ีก้อ่น น ะคร บั
แบบว า่ มนั เ มือ่ยตู ดดด คร บั
มือห งกิ งอ แ ร ะ
ข อไ ปผอ่น ค ลา ยกอ่น น ะคร บั
อา้งองิจาก สารบญั มนัยงัไมจ่บ.... !!!
เดีย๋วมาพบกันตอ่นะครบั....
http://blogmoney100.electutor.com
13
อ้างอิง http://javatemplates.com
เกี่ยวกับผู้เขียน Konikawa คือนามปากกาของผมเองละครับ ผมใช้ชื่อนี้และอยู่บอร์ด
http://www.thaiseoboard.com มาได้สักพัก ผมมีความสนใจ
ในเร่ืองของ Blogger เป็นอย่างมาก พอมาพบเจอกับ template ชิ้น
น้ี จึงเกิดแรงผลักดันให้ผมมุ่งมั่นศึกษา ค้นคว้า เพื่อน า template ชิ้นนี้มา
ประยุกต์ใช้ให้เกิดประโยชน์สูงสุด จึงเป็นที่มาของคู่มือฉบับนี้ครับ
Blogger ของผม
http://blogmoney100.electutor.com
ติดต่อผมได้หลากหลายช่องทางดังน้ี
http://www.facebook.com/kongkawee.public.health
http://twitter.com/kongkawee
ขอขอบคุณทุกท่าน ที่ติดตามผลงานครับ
