วิธีสร้างพื้นที่สำหรับ Add Gadgets ที่ Blogger Header
วิธีเพิ่มพื้นที่สำหรับ Add Gadget ที่ส่วน Header
ก่อนอื่นเราผมจะให้ดู Layout และโค้ดเดิมใน Template ก่อนทำการปรับแก้ และก่อนที่จะปรับแก้โค้ดขอให้ท่านทำการ backup แม่แบบ เอาไว้ก่อนเพื่อป้องกันความผิดพลาด
ขั้นที่ 1 ค้นหาโค้ดเดิม
ในที่นี้ผมจะใช้ Template Minima เป็นตัวอย่างในการปรับแต่ง ส่วน Template อื่นๆ ก็จะปรับแต่งได้คล้ายกับตัวอย่างนี้
ก่อนทำการปรับแก้เราจะเห็นว่าส่วนหัวของบล็อกยังมี Column เดียว
ซึ่งถ้าเข้าไปที่ การออกแบบ >> แก้ไข HTML คุณจะพบโค้ดที่กำหนดส่วนหัวดังนี้
CSS โค้ที่กำหนด Header
#header-wrapper {ซึ่ง CSS ที่เราจะทำการปรับแต่งคือ CSS ในส่วนสีแดง
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: copperplate gothic light,Helvetica,Arial,serif;
font-variant:small-caps;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
font-family:copperplate gothic light, Arial,Helvetica;
font-variant:small-caps;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:1000px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
HTML
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY DESIGN (ส่วนหัว)' type='Header'/>
</b:section>
</div>
ขั้นที่ 2 ปรับแต่งโค้ดเดิมและติดตั้งพื้นที่สำหรับ Add Gadget
2.1 ให้ปรับแก้ CSS โค้ดเดิมดังนี้
จากโค้ดเดิม
#header {ให้แก้ใหม่เป็น
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header {สังเกตโค้ดสีน้ำเงินที่เพิ่มเข้าไป เป็นการลดความกว้างของไอดี Header ให้มีความกว้างเพียง 40 % และชิดซ้าย ส่วนความสูง 120px คุณสามารถจะกำหนดเพิ่ม/ลดได้ตามความเหมาะสม เมื่อทำตามขั้นตอนนี้แล้วผลที่ได้จะเปลี่ยนจากเดิมเป็นดังรูปด้านล่าง
float:left;
width:40%;
height:120px;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
2.2 เพิ่ม CSS ของพื้นที่ใหม่
ต่อไปกำหนด CSS ของส่วนที่เราจะเพิ่มเข้าไปดังนี้ ต่อเนื่องจากชุดโค้ดของ ไอดี header ให้วางโค้ดต่อไปนี้ลงไปแล้วบันทึก
#header2{
float:right;
width:58%;
height:120px}
หมายเหตุ ความกว้างและความสูงของไอดี header2 อาจจะกำหนดให้พอดีกับขนาดของ Banner ก็ได้ เช่นกำหนดเป็น
#header2{
float:right;
width:468px;
height:120px}
2.3 ต่อเนื่องจากการเพิ่ม CSS ให้ค้นหาโค้ด
<div id='header-wrapper'>(การค้นให้เจอเร็วที่สุดคือ กด Ctrl + F และใช้คำค้นว่า(ส่วนหัว) และโค้ดที่พบอาจจะไม่ได้เหมือนโค้ดในตัวอย่างทั้งหมด)
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY DESIGN (ส่วนหัว)' type='Header'/>
</b:section>
</div>
จากนั้นแก้โค้ดส่วนนี้ใหม่เป็น
<div id='header-wrapper'>( ในที่นี้ผม locked ให้เพิ่มได้ 2 Gadget เพราะไม่อยากให้เพิ่มเยอะเกินไป ) จากนั้นบันทึกแม่แบบ
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY DESIGN (ส่วนหัว)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'/>
</div> <div style='clear:both;'/>
ขั้นที่ 3 เมื่อมาดูที่องค์ประกอบของหน้าคุณจะพบว่ามีพื้นที่สำหรับ Add Gadget แล้ว
คุณสามารถเพิ่ม Gadget ต่างๆ ในบริเวณนี้ตามความต้องการ เช่น
► AdSense โค้ด ขนาด 468 x 60
► กล่องค้นหา
► Banner ขนาด 468 x 60
► Google Translate
► Social Bokmark icon เป็นต้น
หวังว่าบทความนี้คงเป็นประโยชน์สำหรับ Blogger หลาย ๆ ท่านนะครับ และขอฝากว่า ถ้าคุณคิดว่าเนื้อหาของบล็อกนี้มีประโยชน์ก็ช่วยบอกต่อกันด้วยนะครับ สวัสดีครับ





ไม่เกี่ยวกับกระทู้นี้เลยนะคับ แต่ผมไม่รู้จะติดต่อกับพี่ยังไงแล้วอะก๊าบ เลยขอให้ ผ่านคอมเม้นของกระทู้นี้ละกันนะคับ
คือ ผมได้ ทำตามที่พี่สอน หลายอย่างมากมายน่ะ
แต่ปัญหา ของผมตอนนี้ คือ ตรงแถบข้างบนอะคับ ที่มี
home contact us contact me อะก๊าบ
http://temp28cfilm.blogspot.com/ บล็อกของผมที่กำลังเจอปัญหา
แล้วคือ พอผมจะไปเพิ่มบทความตรงแถบนั้น เช่น ในบล็อกของผม ผมจะเข้าไป เพิ่มบทความในส่วนของ NEWS คือตอนนี้ที่ผมทำ มันมีแค่หน้าเดียวที่ให้เราเขียนได้อะคับ ได้แค่ พิมเพิ่มเข้าไป ไม่สามารถสร้างหน้าใหม่ (บทความใหม่) ได้เลย
ที่ผมจะถามคือ
1 การเพิ่มบทความใน NEWS (แถบสีเทา) มันทำได้แค่ อัพเดท ส่วนนั้นเรื่อยๆหรือคับ
2 มันสามารถเพิ่มบทความเข้าไปเรื่อยๆในส่วนนั้น เช่นเดียวกับการเพิ่มบทความ แล้วมันไปขึ้นในหน้า HOME ไหม (มีหลายหน้าให้เขียน)
แต่ที่ผมต้องการที่สุด คือการเพิ่มบทความใหม่แล้วให้โชวในหน้า HOME แล้วให้มันไปขึ้นที่หน้า NEWS ด้วย ให้ขึ้นเป็นลักษณะ มีรูป ข้อความบางส่วน และคำว่า read more .. แบบเดียวกับที่ขึ้นหน้า Home เลย แล้วสามารถกดเข้าไปอ่านข้างในต่อได้
สามารถทำได้ไหม (หน้าอื่นเช่น FILM / CONTACT US / ABOUT US ไม่ต้องขึ้นนะ คับ)
รบกวนพี่ช่วยหาทางแก้ให้ผมด้วยนะคับ
@ TEMP28cFILM :
ตอบข้อ 1 หน้าเว็บใน blogger มันก็คือบทความ 1 บทความเท่านั้น ดังนั้นเราไม่สามารถไปเพิ่มบทความในหน้า news ได้อีก (เพราะจะเป็นการเพิ่มบทความในบทความ ซึ่งมันทำไม่ได้)
ใน CMS ตัวอื่น ๆ เช่น Joomla, maxsite ฯ จะทำสิ่งเหล่านี้ได้โดยแยกส่วนต่าง ๆ ออกเป็น Module แล้วแต่ละ Module ก็ทำงานอิสระจากกันได้ แต่ใน blogger จะไม่มีสิ่งเหล่านี้ ซึ่งคุณอาจจะสร้างหมวดหมู่ดดยใช้ Gadget Label มาทดแทนได้
ตอบข้อ 2 สิ่งที่คุรต้องการยังทำไม่ได้ใน blogger แต่คุณสามารถใช้ โค้ด recent post with thumbnail ไปวางในหน้า News ได้ >> http://www.hackublog.com/2009/09/blog-post_4934.html ตัวอย่างที่ได้ดูจากหน้านี้ครับ
http://hackudesign.blogspot.com/2010/05/hackublogcom-index.html
หาก สงสัยเพิ่มเติมและไม่เกี่ยวกับบทความนี้เข้าไปคุยใน Forum หรือไม่ก็ไปที่หน้า contact me ซึ่งผมทำเมนูให้แล้ว
ขอบคุณพี่มากนะคับ
@ TEMP28cFILM : ไม่ทราบว่าที่ตอบพอจะช่วยได้บ้างหรือเปล่า ถ้าสงสัยถามเพิ่มเติมได้ที่ Forums นะครับ >> http://www.hackublog.com/p/hackublog-forums.html
ชื่อปลานะคะ มีคำถามอีกแล้วค่ะ
อยากทราบว่าเราสามารถเพิ่ม Gadget Header Column (ไม่ใช่แบ่ง) ได้หรือไม่ค่ะ
http://fishhatcheryfarm.blogspot.com/
คืออยากเอารูปปลาอยู่บน head อยูถัดจากหน้าเวปนะค่ะ (เพราะเวลาเขียนบทความลงไปมันอยู่ต่ำมากจนไม่น่าสนใจ)
ขอบคุณค่ะ
เอาโค้ด
#NewGadget-wrapper{width:100%;background:#fff;height:auto;margin: 10px auto;}
วางก่อนโค้ด
]]></b:skin>
และนำโค้ด
<div id='NewGadget-wrapper'>
<b:section class='NewGadget' id='NewGadget' maxwidgets='2' showaddelement='yes'/>
</div> <div style='clear:both;'/>
ไปวางก่อนหน้า โค้ด <div class='main-outer'>
ขอบคุณมากค่ะตอบเร็วมากๆยังไม่ข้ามวันเลยทำได้แล้วนะค่ะ
แต่มีคำถามให้ช่วยตอบอีกแล้ว..
1.บทความของ blog ดิฉันทำไมมันไม่เรียงโชว์ในหน้าแรก(มีตัวอย่างค่ะ)
- blog 1 http://fishhatcheryfarm.blogspot.com/ ( blog นี้เอาจริง) ในหน้ามี 1 บทความเท่านั้น
- blog 2 http://farmcatfish.blogspot.com/ (ใช้เป็น blog ทดลองน่ะค่ะ) บทความเรียงในหน้าเดียว
2.หน้าเวป เราสามารทำเป็น gallery ได้ไหม เหมือนมันเขียนได้แค่อย่างเดียวเอง
ตอบคุณปลา :
1. ข้อแรกผมยังงงกับคำถามครับ เข้าไปดูบล็อกตามที่บอกแต่ก็ยังไม่เข้าใจ คำว่า 'บทความของ blogไม่เรียงโชว์ในหน้าแรก' เท่าไรครับ ลองขยายความมาอีกทีนะครับ
2. การปรับแต่งหน้าก็สามารถวาง HTML หรือโค้ดที่ต้องการลงไปในหน้าได้ แต่ถ้าต้องการให้หน้านั้นแตกต่างจากหน้าอื่น ๆ ก็ดู บทความนี้เป็นแนวทางครับ
http://www.hackublog.com/2010/05/how-to-create-difference-pgae-on.html
และ
http://www.hackublog.com/2010/05/different-post-page-on-blogger.html
หาโค๊ด #header-wrapper , <div id='header-wrapper'> ไม่เจอครับ...ไปต่อไม่ถูกเลย นั่งอ่านโค๊ดจนตาลายแล้วครับ...ขออนุญาตเรียนแนะนำว่า ถ้าพอจะมีเวลา(ดูแล้วคงมีเวลาว่างไม่มากนะครับ...เพราะแค่ผมอ่านแล้วทำตามยังไม่ทันเลย)...น่าจะทำเป็นตารางเทียบ ระหว่างtemplateเก่า กับ templateใหม่นะครับ เผื่อคนที่เข้ามาใหม่อยากทำของเก่าบ้างอ่ะครับ ของผมที่นี่นะครับ HealthAtWill.blogspot.com
ที่ผมสอนเป็นโค้ดของแม่แบบรุ่นเก่าครับ สำหรับแม่แบบรุ่นใหม่ก็ยังไม่ได้เขียนไว้ครับ
ถ้าจะเทียบต้องทำเป็นหลายพันตาราง เพราะโค้ดแต่ละแม่แบบไม่เหมือนกันเลย ผมก็ได้เพียงเขียนเอาไว้เป็นแนวทาง และถ้าจะทำจริง ๆ ผมถามว่า จะมีคนทำตามจริง ๆ กี่คน มันคุ้มไหม แล้วคุณบงกชจะช่วยผมทำไหมครับ
ใครต้องการทำจริง ๆ ก็ทิ้งคำถามเอาไว้เป็นกรณี ๆ ไปอย่างนี้ไม่ดีกว่าหรือครับ ไม่อย่างนั้นจะมีกล่อง comment เอาไว้ทำไมครับ ขอให้เข้าใจกันง่าย ๆ แบบนี้นะครับ ผมเขียนบล็อกโดยไม่มีใครจ้างวาน เขียนเพราะอยากเขียน ไม่อยากให้ใครมาบังคับหรือสั่งให้ทำแบบโน้นแบบนี้ เพราะนี่คือตัวตนของผม เรื่องจะมีเวลา หรือไม่มีเวลา มันเกี่ยวอะไรกับใครไหมครับ มันเรื่องของผมครับ ^ ^
ขออภัยครับ...หากข้อความที่ผมโพสไปทำให้คุณHackublogไม่สบายใจ ที่ผมโพสในวงเล็บไปเพราะผมเข้าใจดีว่าคุณก็มีงานที่ต้องทำ แต่สละเวลามาทำตรงนี้ ซึ่งไม่ใช่งานที่ง่ายเลย...ต้องใจรักที่จะแบ่งปันความรู้จริงๆ ผมไม่ได้มีเจตนาที่จะทำให้คุณอึดอัดใจ ผมเองไม่มีความรู้ในเรื่องblog จึงไม่รู้จริงๆว่า การทำตารางเทียบนั้นมันเป็นงานที่ซับซ้อนและไม่คุ้มค่า...blogของผมเ็ป็นรูปเป็นร่างได้ขนาดนี้ ก็ได้ความรู้จากที่นี่ที่เดียวเท่านั้นครับ เพราะคุณHackublogช่วยเหลือทุกคนและทุกครั้งที่มีผู้สอบถามเข้ามา...ผมเสียใจและขออภัยอีกครั้งครับ...ถ้าทำให้คุณไม่สบายใจ...
บงกช เบญจกูล
เอาเป็นว่าต่างฝ่ายต่างขอโทษกันนะครับ ผมเองก็ใช้คำพูดส่อไปทางเสียดสีมากไปครับ ขอภัยด้วย แต่ถ้าคุณบงกชจะทำจริง ๆ ผมก็จะเขียนบทความให้ครับ เดี๋ยวลองดูวันนี้เลยครับ อาจจะเป็นดึก ๆ หน่อยครับ
ขอบคุณครับ...
ของผมเองก็หาไม่เจอแต่ก็ไม่กล้ารบกวน ท่านอาจารย์ hacku
แต่ในเมืื่อมีคนถามแล้วกระผมก็ขอชมด้วยคนคร๊าฟ...
ฮือ ๆ แต่ไม่รู้ว่าบทความที่ท่านอาจารย์เขียน ชื่อว่าอะไร อ่ะ...ครับ
ATTAPON มือใหม่หัดเขียน blog คร๊าฟ....
@ ATTAPON : ขอผมเสร็จงานก่อนนะครับ พอดีเขาเร่งงานมายังเขียนบล็อกไม่ได้เลยครับ ขออภัยทั้งสองท่านด้วยที่ผิดนัด แต่จะเขียนให้เป็นบทความแรกที่เสร็จงานด่วนเลยครับ งานเข้า ๆ ตอนนี้ยังนั่งปั่นอยู่เลยเฮ้อเย็นวันศุกร์วันของการพักผ่อน Y_T
ผมอยากจะแบ่งครึ่งตรง Post Header ที่เป็น class .postheader ออกเป็นสองส่วน แล้วส่วนขวาผมจะแทรก Tag div จะทำได้มั้ยครับ
@ Administrator : น่าจะทำได้ด้วยหลักการเดียวกันครับ แต่ต้องเปลี่ยนชื่อ Class และ ID ใหม่
คือผมอยากจะเพิ่ม gadget ให้มันอยู่ต่อจาก header มาทางข้างล่างอะครับ ไม่อยากเพิ่มด้านข้างน่ะครับ ช่วยทีนะครับ
พอดีผมไม่ค่อยมีความรู้ครับ อันนี้บล๊อกผมครับ http://vinsantmovies.blogspot.com/
@ vinsant : ศึกษาได้จากบทความ How to Make New Gadget Area on (New version) Blogger ครับผม
ได้แล้วครับผมเอามาประยุกต์นึดนึง ขอบคุณมากครับผม
ขอถามหน่อยค่ะ ถ้าเราจะเอาบล็อคของเราไปโฆษณาบล็อคเพื่อน โดยเวลาเข้าบล็อคเพื่อนแล้วจะมีโฆษณาบล็อคเราด้วย แล้วถ้าเรากดคลิกที่โฆษณาบล็อคของเราแล้ว มันก้อจะลิงค์มาที่บล็อคของเรา โดยให้รูปแบบโฆษณา เป็นแบบมีภาพโลโก้ของบล็อคเรา ขอบคุณล่วงหน้าสำหรับคำตอบค่ะ
@ Tour-Thailand : ใช้โค้ดด้านล่างสร้างให้โค้ดสมบูรณ์แล้วเอาไปติดที่บล็อกเพื่อนของคุณครับ
<a href="ใส่ LINK บล็อกของคุณ"><img alt="ใส่Keyword" src="ใส่ LINKรูปที่1"/></a>
มีตัวอย่างแบบวิธีสร้างป้ายโฆษณาของบล็อคไหมค่ะ ไม่รู้จะเขียนยังไง ขอบคุณมากค่ะ
ใส่คีย์เวิด คือใส่พาสของบล็อคเราใช่หรือเปล่าค่ะ
ส่วนรูปภาพต้องเราไปฝากเว็ปไหนก่อนหรือเปล่า ค่ะ ถึงจะได้ url มา รบกวนหน่อยนะค่ะ
คีย์เวิด หามาจากตรงไหนค่ะ ใช่พาสเวิดของบล็อคเราหรือเปล่าค่ะ เขียนแบบไหนค่ะ ขอบคุณมากค่ะ
@ Eco-Spa Household ทำความเข้าใจเรื่อง Keyword จากบทความนี้ครับ
http://www.hackublog.com/2010/08/seo-keyword-research-blogger.html
ส่วนรูปต้องฝากเอาไว้ก่อนแล้วคัดลอก URL มาสร้างเป็นโค้ดครับ หรือจะฝากเก็บไว้บนบล็อกเราเองก็ได้ อ่าน
http://www.hackublog.com/2009/10/blog-post.html
มือใหม่เริ่มต้นก็ควรอ่านจากบทความนี้ก่อน
http://www.hackublog.com/2010/06/roadmap-blogger-blogspot.html
ขอบคุณมากค่ะ สำหรับความรู้ ใส่ทุกอย่างหมดแล้ว มีให้กดลิงค์ แต่ภาพโลโก้ที่กดลิงค์มันไม่ขึ้นเป็นรูปภาพให้ค่ะ ทำแล้วแก้หลายรอบแล้วก้อไม่ขึ้นรูปภาพให้ค่ะ
ตามโค้ดนี้ค่ะ
ทำไม ใส่โค้ดแล้วไม่โชว์รูปภาพค่ะ
โพสโค้ดไปแล้ว จะให้พี่ดูว่าโค้ดถูกหรือเปล่า แต่ทำไมโพสไปแล้วโค้ดไม่ขึ้นค่ะ แปลงโค้ดแล้ว ก้อไม่ขึ้นค่ะ
มันไม่โชว์รูปภาพค่ะ แต่กดลิงค์ได้ มันเกิดจากภาพใหญ่ไปหรือมีสาเหตุอื่นไหมค่ะ รบกวนบ่อย ขอโทษด้วยนะค่ะ แต่ไม่มีความรู้เลย เริ่มเขียนบล็อคก้อได้บล็อคของคุณช่วย ตลอดเลย ขอบคุณมากสำหรับบล็อคที่ดี
@Tour-Thailand : เอาโค้ดที่สร้างเสร็จแล้วมาให้ดูหน่อยครับ ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือข้างบนนี้ก่อนด้วยครับไม่อย่างนั้นจะไม่แสดงผลครับ
สาเหตุอื่นก็อาจจะเป็นสาเหตุที่ใช้โค้ดรูปไม่ถูกต้อง หรือที่ฝากรูปไม่สามารถเรียกใช้แบบ hotlink
ขออภัยที่ตอบไม่ทันใจคุณเพราะผมก็ทำงาน ผมจะว่างเข้ามาดูบล็อกบางเวลาเท่านั้นครับ
<a href="http://eco-spa.blogspot.com"><img alt="eco-spa" scr="http://2.bp.blogspot.com/_HIBy66Kmmt8/TJBlYgGysqI/AAAAAAAAAEA/329G7oixViI/s1600/eco-spa.jpg" /></a>
ตามโค้ดข้างบนนี้ค่ะ ขอบคุณมากนะค่ะ
คุณ Tour thailad พิมพ์ผิดครับต้องเปลี่ยยนเป็น
<a href="http://eco-spa.blogspot.com"><img alt="eco-spa" src="http://2.bp.blogspot.com/_HIBy66Kmmt8/TJBlYgGysqI/AAAAAAAAAEA/329G7oixViI/s1600/eco-spa.jpg" /></a>
ตรง scr ต้องใช้ src จึงจะถูกครับ
ได้แล้วค่ะ แต่ว่ารูปมันใหญ่ไป ถ้าตั้งขนาดเล็ก เป็นขนาดเท่าไหร่ค่ะ
ขอบคุณค่ะ ได้แล้วค่ะ
ปรับขนาด ส่วนหัวบล็อก และ วิดเก็ต ที่ถัดลงมา ต้องแก้ตรงไหนครับ
แม่แบบรุ่นใหม่ครับ
อยากทราบค่ะว่า ถ้า gadget อยู่ด้านซ้าย แล้วเราอยากจะย้ายไปอยู่ด้านขวาได้หรือไม่คะ
อยากเพิ่ม sidebar ด้านข้างอะครับ เทมเพลตเป็น1คอลัมน์
ไม่ทราบต้องทำยังไงหรอครับ
ขอบคุณบทความดีดีค่ http://powaruk.blogspot.com/ ฝากด้วยนะ ไว้พัฒนาฝีมือ ก่อน ^^ ช่วยๆกันกดค่ะเว็บรวมๆความบันเทิงค่ะ
รบกวนหน่อยครับ บล็อกผมhttp://greenistudio.blogspot.com อยากจะลดช่องว่างระหว่างgadgetอะครับหรือไม่ก็รวมเป็นเนื้อเดียวกันเลยแล้วมีเส้นกั้นอะครับ มพอมีวิธีมั้ยครับ
อ่อๆผมทำได้แล้วครับๆๆ
ขอบคุณมากมายนะคะ ^/\^