Blogger: ให้หน้าแรกแสดงเฉพาะภาพตัวอย่างซึ่งลิงก์สู่บทความได้

Updates 2014/09/05



วิธีนี้เป็นการทำให้หน้าแรกแสดงเฉพาะภาพตัวอย่างที่สามารถลิงก์เข้าสู่บทความได้โดยอัตโนมัติ (Automatic Sample Image Hyperlink to Post Page)

โดยการแสดงเนื้อหาแบบนี้มักถูกใช้กับบล็อกรวมรูปถ่าย หรือเว็บอ่านการ์ตูน ที่ต้องการให้ในหน้าแรกแสดงแต่เฉพาะภาพหน้าปกที่เป็นรูปแรกของแต่ละบทความ แต่เมื่อผู้อ่านคลิกลงบนภาพนั้นก็จะเป็นการสั่งเปิดเนื้อหาแบบเต็มขึ้นมาซึ่งสามารถดูตัวอย่างได้จากลิงก์นี้
https://shopinbottle.blogspot.com

โดยในขั้นตอนที่ 3 นั้นจะมีโค้ดให้เลือกอยู่ 2 แบบคือ
- ชนิดที่ 1 รูปตัวอย่างจะแสดงเป็นสี่เหลี่ยมจตุรัส


- ขนิดที่ 2 รูปตัวอย่างจะแสดงเป็นสี่เหลี่ยมผืนผ้าที่สูงและกว้างไม่เท่ากัน


อธิบายเพิ่มเติม
แต่ถ้าต้องการวิธีแสดงบทความย่อพร้อมภาพตัวอย่างแบบอัตโนมัติให้ทำตามลิงก์อันนี้แทนครับ
http://tip.maxlayout.com/2009/11/blogger_8859.html


ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML'


ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาตำแหน่งของโค้ดบทความซึ่งในปัจจุบันมีอยู่หลายแบบขึ้นอยู่กับลักษณะเทมเพลทบล็อกเกอร์ที่คุณกำลังใช้อยู่
ถ้าหากไม่ใช่บล็อกที่ผู้พัฒนาภายนอกเขียนได้ขึ้นมาเป็นรูปแบบส่วนตัว แล้วละก็จะพบได้ 3 กรณีซึ่งถ้าพบโค้ดในกรณีใดเสร็จแล้วก็ให้ข้ามไปทำขั้นตอนต่อไปได้เลย

กรณีที่ 1. ให้ค้นหา
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
โดยถ้าหาโค้ดนี้ไม่พบก็ให้ทำตามกรณีที่ 2 ต่อได้เลย
จะพบว่าบริเวณข้างใต้โค้ดที่ได้หาเจอนั้นจะมีโค้ดเป้าหมายสำหรับการแก้ไขโค้ดของเรา
เขียนอยู่ในบรรทัดถัดลงมาซึ่งก็คือ
<data:post.body/>

กรณีที่ 2. ให้ค้นหา
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'
โดยถ้าหาโค้ดนี้ไม่พบก็ให้ทำตามกรณีที่ 3 ต่อได้เลย
จะพบว่าบริเวณข้างใต้โค้ดที่ได้หาเจอนั้นจะมีโค้ดเป้าหมายสำหรับการแก้ไขโค้ดของเรา
เขียนอยู่ในบรรทัดถัดลงมาซึ่งก็คือ
<data:post.body/>

กรณีที่ 3. ถ้าคุณหาโค้ดทั้งสองแบบจากสองกรณีแรก ที่ระบุไว้ไม่พบเลยก็ให้ค้นหา <data:post.body/> แล้วทำตามขั้นตอนต่อไปได้เลย


ขั้นตอนที่ 3. จากนั้นให้เลือกแทนที่โค้ดเป้าหมายที่หาเจอจากกรณีที่ตรงกับบล็อกของคุณในขั้นตอนที่แล้วซึ่งก็คือ
<data:post.body/>
ด้วยโค้ดแบบใดแบบหนึ่งข้างล่างนี้



ชนิดที่ 1 รูปตัวอย่างจะแสดงเป็นสี่เหลี่ยมจตุรัส

ซึ่งโค้ดขนิดสี่เหลี่ยมจตุรัสนี้ก็คือ
<!-- maxlayout crop thumbnail link to post start -->
<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=250;
var show_default_thumbnail=true;
var default_thumbnail="https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;

image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';

if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
var thumbnailUrl = &quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/><b:else/></b:if>&quot;
document.write(bp_thumbnail_resize(thumbnailUrl,&quot;<data:post.title/>&quot;));
</script></a>
<b:else/>
<data:post.body/>
</b:if>
<!-- maxlayout crop thumbnail link to post end -->


โดยสามารถแก้ไขขนาดภาพตัวอย่างได้จากในบรรทัดที่ 7 ซึ่งถูกเขียนเอาไว้ว่า
var image_size=250;
ให้เป็นขนาดใหม่ได้ตามต้องการ



ชนิดที่ 2 รูปตัวอย่างจะแสดงเป็นสี่เหลี่ยมผืนผ้าที่สูงและกว้างไม่เท่ากัน

ซึ่งโค้ดขนิดสี่เหลี่ยมผืนผ้านี้ก็คือ
<!-- maxlayout crop thumbnail link to post start -->
<b:if cond='data:blog.url != data:post.url'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=250;
var show_default_thumbnail=true;
var default_thumbnail="https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s250/maxlayout-pencil-blogger-no-image-2013.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;

image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';

if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
var thumbnailUrl = &quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/><b:else/></b:if>&quot;
document.write(bp_thumbnail_resize_rect(thumbnailUrl,&quot;<data:post.title/>&quot;));
</script></a>
<b:else/>
<data:post.body/>
</b:if>
<!-- maxlayout crop thumbnail link to post end -->


โดยสามารถแก้ไขขนาดภาพตัวอย่างได้จากในบรรทัดที่ 7 และ 8 ซึ่งถูกเขียนเอาไว้ว่า
var image_height=250;
var image_width=200;

ให้เป็นความกว้างและสูงใหม่ได้ตามต้องการ


ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์


อธิบายเพิ่มเติม
ภาพตัวอย่างที่ถูกนำมาแสดงเมื่อในบทความไม่มีรูปที่ผมกำหนดไว้ ซึ่งสามารถกำหนดใหม่ได้เองตามต้องการ จะอยู่ในบรรทัดที่ 9 ของทั้ง 2 แบบคือ
https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s250/maxlayout-pencil-blogger-no-image-2013.png

ถ้าหากรูปภาพที่แสดงในบทความบล็อกของคุณ ถูกอัพโหลดไว้กับบริการรับฝากรูปภาพบางแห่งที่ไม่ใช่ของ Blogger หรือ Picasa ก็อาจทำให้รูปเหล่านั้นถูกแสดงได้ไม่ครบถ้วนครับ
เช่นที่คุณสังคม คนออนไลน์ ได้พบว่าถ้าหากฝากรูปไว้ที่ upic.me ก็อาจมีบางรูปไม่ถูกดึงมาแสดงเป็นภาพตัวอย่างจากวิธีในบทความนี้ครับ

Post Status




76 ความคิดเห็น:

PALINA KINDERGARTEN กล่าวว่า...

ดีครับ
ขอเสนอนิดนึงนะครับ ถ้ามีตัวอย่างให้เห็นก็จะดีมากเลยครับ บางครั้งอ่านแล้วนึกภาพตามไม่ออก

Max กล่าวว่า...

ได้ครับ
ตอนนี้ผมใส่ภาพประกอบเพิ่มลงไปแล้วครับ หวังว่าจะเข้าใจได้ง่ายยิ่งขึ้น

ไม่ระบุชื่อ กล่าวว่า...

เว็บนี้สุดยอดมากครับ ทุกบทความนำไปใช้ได้จริงหมด แถมยังสามารถถามได้เลยผ่านเฟซบุ๊ค จะติดตามตลอดไปครับ ^^

Max กล่าวว่า...

ถ้าเนื้อหาในเว็บมีประโยชน์ก็ยินดีด้วยครับ

PALINA KINDERGARTEN กล่าวว่า...

ไม่ได้เข้ามานาน มีบทความใหม่เพียบเลย ขอบคุณฮะ

WebMaster กล่าวว่า...

มีปัญหาคับ สั่งค้นหาCodeด้านบนไม่เจอคับ

Max กล่าวว่า...

เนื่องจากเทมเพลทที่แต่ละคนใช้อาจมีข้อแตกต่างกันอยู่บ้าง จึงอาจมีวิธีระบุตำแหน่งโค้ดบทความที่ไม่เหมือนกัน โดยตอนนี้ผมเขียนเพิ่มเติมลงไปในขั้นตอนการค้นหาแล้วครับ

Tawan -art กล่าวว่า...

คือผมแทนที่ โคดไม่เป็นครับ งง จริง นั่งทำมา3 ชัวโมงแล้วยังไม่ได้เลยครับ
ช่วยที
อยากทำให้ หน้าแรกของบล็อกแสดง ภาพตัวอย่างแล้ว ลิ้งไปยังบทความนะครับ

Tawan -art กล่าวว่า...

นี้ครับ บล็อกที่จะแก้ http://kingart39.blogspot.com/

Max กล่าวว่า...

ผมในฐานะผู้ชมจะไม่สามารถมองเห็นโค้ดแบบเต็มของบล็อกอื่นได้ครับ

Tawan -art กล่าวว่า...

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

Max กล่าวว่า...

ยินดีด้วยที่ทำสำเร็จครับ

ไม่ระบุชื่อ กล่าวว่า...

อยากสอบเรื่อง Recent Posts อ่ะครับ ตอนเเรกใช้ของ blogger เเต่ปัจจุบันมันเกิดข้อผิดพลาดอะไรไม่รู้อ่ะครับ เลยอยากจะสอบถามว่าโปรโปรเเกรม ที่คล้ายๆกัน ที่ทำได้เเบบ วิดเก็ตนี้มั้ยครับ

Max กล่าวว่า...

ตอนนี้ได้เขียนไว้ 3 บทความตามลิงก์ด้านล่างนี้ครับ

แบบที่ 1 แสดงด้วยฟีด ซึ่งค่อนข้างง่ายเพราะไม่มีเมนูให้ตั้งค่าซักเท่าไรนัก
http://tip.maxlayout.com/2012/01/blogger-recent-posts-using-feed-widget.html

แบบที่ 2 ชนิดแสดงรูปด้วย แต่อาจต้องปรับ CSS เพื่อความสวยงาม
http://tip.maxlayout.com/2012/08/blogger-recent-posts-with-thumbnails.html

แบบที่ 3 ใช้เครื่องมือที่มีผู้พัฒนาไว้แล้ว โดยมีเมนูสำหรับตั้งค่าอยู่หลายอัน
http://tip.maxlayout.com/2010/02/blogger-recent-post-with-thumbnails.html

ไม่ระบุชื่อ กล่าวว่า...

ขอบคุน admin ที่ตอบปัญหาได้รวดเร็วมากๆครับ

คือผมลองหมดเล้วอ่ะครับ ผมอยากได้ ที่เป็นเเบบ โชว์เเต่รูปสมมุติ

เเบบ เเถวนอน 5 รูป ตั้ง 4 รูป เเบบนี้อ่ะครับ

. . . . .
. . . . .
. . . . .
. . . . .

( ตัวอย่างครับ )

ต้องขออภัยที่อธิบายเเบบงงๆนะครับ ขอบคุนครับผม

Max กล่าวว่า...

ลองดูแบบที่ 4 ซึ่งเกิดจากการปรับแก้ไขโค้ดจากแบบที่ 2 ได้ตามลิงก์นี้ครับ
http://tip.maxlayout.com/2012/12/blogger-horizontal-recent-posts-thumbnails.html

ไม่ระบุชื่อ กล่าวว่า...

สุดยอดเลยครับ ขอขอบคุน admin มากๆครับ สำหรับความรู้ในครั้งนี้

ผมหาวิธีทำเเบบนี้มาตั้งนาน เเต่ขอรบกวนถามออีกนิดนะครับ ไม่สามารถเพิ่ม

บทความให้ได้มากกว่า 25 หรอครับ ^ ^

Max กล่าวว่า...

ขณะนี้ยังไม่สามารถแสดงเกินกว่า 25 บทความครับ เนื่องจากเป็นการดึงข้อมูลจากฟีด ซึ่งลองสังเกตดูจะพบว่าฟีดที่อยู่ข้างล่างสุดนั้นจะตรงกับ Recent Posts Thumbnails อันสุดท้าย เช่นเดียวกับตัวอย่างข้างล่างนี้ซึ่งอันสุดท้ายจะเป็นบทความเดียวกัน

ตัวอย่างฟีด
http://tip.maxlayout.com/feeds/posts/default

ตัวอย่างการแสดงโพสต์ล่าสุด
http://www.maxlayout.com/

ไม่ระบุชื่อ กล่าวว่า...

อ่อครับผม ขอบคุน admin สำหรับความรู้อีกครั้งครับผม

กระจ่างเลยครับ ^ ^

ไม่ระบุชื่อ กล่าวว่า...

ในที่สุดก็ตามหาเว็บนี้จนเจออีกครั้ง ลงวินโด้ใหม่ที่บันทึกเว็บไว้หายหมดเลย
^ ^
วันนี้ผมรบกวนสอบถาม เรื่อง ทำสไลด์ตัวอย่างหนัง เเทมเพลตนี้อ่ะครับ ดังตัวอย่างที่เลื่อนๆไปอ่ะครับ ผมพยายามทำเเล้ว มันก้ไม่ได้อ่ะครับ รบกวนพี่ admin ชี้ทางส่างด้วยครับ ตามลิ้งนี้เลยนะครับ http://demo.templatesdoctor.com/2012/07/johny-light-banget-blogger-template.html#.UOX9WuSyCoU

ขอบคุณครับผม

Max กล่าวว่า...

ถ้าต้องการให้แสดงผลเหมือนกับลิงก์ข้างล่างนี้ (อาจมีการเปลี่ยนแปลงตัวอย่างนี้ภายใน 3 วัน)
http://test.maxlayout.com/

ก็ให้ลองดาวน์โหลดเทมเพลทจากลิงก์นี้ครับ
http://www.mediafire.com/?886m2o1u8q52u52

ไม่ระบุชื่อ กล่าวว่า...

ผมดาวโหลดมาใช้เเล้วครับ เเต่สไลด์ตามตัวอย่างมันไม่มีอะไรเกิดขึ้นอ่ะครับ
มันไม่มีรูปหรืออะไรขึ้นเลยครับ ผมจึงคิดว่าต้องปรับโค๊ดอะไรบางอย่างตามที่ผมเคยใช้เเทมเพลตที่ผ่านมา มันถึงจะเเสดงอ่ะครับ ผมก็พยายามเเก้เเล้วมันก็ไม่ได้เหมือนเดิม จึงมารบกวนถามพี่ admin ครับ ^ ^

Max กล่าวว่า...

จากที่ผมได้ทดลองดาวน์โหลดเทมเพลทจากเว็บของ templatesdoctor ที่คุณได้ส่งลิงก์ตัวอย่างมานั้นซึ่งก็คือ
http://downloads.templatesdoctor.com/2012/07/johny-light-banget-blogger-template.html
ก็พบว่าส่วนของสไลด์รูปภาพจะไม่มีการแสดงผลครับ

แต่เมื่อเข้าไปตามลิงก์ Published ของเทมเพลทนี้ซึ่งก็คือ
http://www.mediafire.com/?886m2o1u8q52u52
แล้วดาวน์โหลดเทมเพลทมาติดตั้งโดยไม่ต้องแก้ไขอะไรเลย ก็พบว่าสไลด์รูปภาพนั้นสามารถทำงานได้ตามปกติครับ

ไม่ระบุชื่อ กล่าวว่า...

ขอบพระคุนมากมายครับ พี่ admin
ตอนนี้สามารถใช้งานได้สมบูรณ์เเล้วครับผม
ขอบคุนครับ

Max กล่าวว่า...

ยินดีด้วยที่ทำได้สำเร็จครับ

ไม่ระบุชื่อ กล่าวว่า...

สวัดดีครับพี่ admin วันนี้ผมจะสอบถามเรื่องวิธีการเปลี่ยน background [ภาพพื้นหลัง] จากเทมเเพลทที่พี่ admin ให้มาอ่ะครับ
ผมลองเปลี่ยนดุเเล้วมันไม่ได้ครับผม ผมลองเเล้วจริงๆนะครับ ไม่ได้คิดจะมารบกวนพี่ admin อย่างเดียว จนปัญญาจริงๆครับ รบกวนด้วยนะครับ ^ ^

Max กล่าวว่า...

ที่ตั้งภาพพื้นหลังของเทมเพลทอันนั้นคือ
http://4.bp.blogspot.com/-Gt7Dq6QFR3k/UAVJLoeDdqI/AAAAAAAAHpw/C3Hh3lXg-Kc/s1600/body1.png

ซึ่ง CSS ของภาพพื้นหลังในส่วนนี้จะถูกเขียนไว้ว่า
body{background:#4d8481 url(http://4.bp.blogspot.com/-Gt7Dq6QFR3k/UAVJLoeDdqI/AAAAAAAAHpw/C3Hh3lXg-Kc/s1600/body1.png) repeat-x top;

ไม่ระบุชื่อ กล่าวว่า...

ขอบคุนครับพี่ admin สำหรับความรู้เจ๋งๆเเบบนี้
เปลี่ยนได้เเละครับ ขอบคุนมากครับผม

bemew กล่าวว่า...

คือผมอยากให้มันเห็น
รูปทั้งหมดอ่ะครับแก้ยังไงหรอ

http://hd2zone.blogspot.com/

Max กล่าวว่า...

หมายถึงการทำ Recent Posts แบบในลิงก์ตัวอย่างข้างล่างนี้หรือเปล่าครับ
http://www.maxlayout.com/

ถ้าใช่ละก็ดูวิธีได้ตามลิงก์นี้ครับ
http://tip.maxlayout.com/2012/12/blogger-horizontal-recent-posts-thumbnails.html

bemew กล่าวว่า...

ครับเดี๋ยวจะลองดูครับขอบคุณมากครับ คุณ Max

bemew กล่าวว่า...

http://lh5.ggpht.com/_HNH4qHggrsw/S3REBSa3pFI/AAAAAAAAAkM/Uf8gtZIR4yA/max-pencil-and-paper.jpg

อันนี้คืออะไรหรอครับ

bemew กล่าวว่า...

ทำไมรูปมันไม่เต็มครับ งง

Max กล่าวว่า...

คำตอบของคำถามแรก
ภาพจากลิงก์
http://lh5.ggpht.com/_HNH4qHggrsw/S3REBSa3pFI/AAAAAAAAAkM/Uf8gtZIR4yA/max-pencil-and-paper.jpg
ก็คือ ภาพที่ผมสั่งให้บล็อกแสดงออกมาเมื่อระบบต้องการแสดงภาพตัวอย่างจากบทความที่ไม่มีรูปภาพใส่อยู่เลย

คำตอบของคำถามที่สอง
เกี่ยวกับขนาดของรูปให้ลองดูที่ส่วนท้ายของวิธีแก้ไขแต่ละแบบครับ

bemew กล่าวว่า...

ลองปรับขนาดแล้วครับไม่ได้ คือ รูปที่มาจาก http://lh5.ggpht.com/_HNH4qHggrsw/S3REBSa3pFI/AAAAAAAAAkM/Uf8gtZIR4yA/max-pencil-and-paper.jpg นี้เป็น สี่เหลี่ยม มันไม่ใช่ขนาดของรูปเดิมครับ

Max กล่าวว่า...

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

ซึ่งภาพในตัวอย่างนั้นคุณก็สามาถเปลี่ยนเป็นภาพใหม่ตามต้องการได้เลยครับเพราะไม่มีปัญหาต่อสคริปต์

นอกจากนี้ผมเองก็ได้ลองสร้างภาพอันใหม่มาใส่ในบล็อกแล้วครับเพราะเท่าที่ดูแล้วรู้สึกว่าภาพเดิมมันคงเก่าเกินไป

bemew กล่าวว่า...

ขอถามอีกนิดนะครับ เปลี่ยนเป็นภาพใหม่ ยังไงหรอ ผมยัง งงๆ อยู่ มือใหม่ครับ

http://hd2zone.blogspot.com/ นี่ blog ผม รูปหนังมันไม่เต็มอ่ะครับในคอลัมน์

ถ้าจะแก้แก้ยังไง

Max กล่าวว่า...

ขณะนี้รูปภาพที่จะถูกนำมาแสดงเมื่อในบทความไม่มีรูปคือ
https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s250/maxlayout-pencil-blogger-no-image-2013.png

โดยสามารถแทนที่ใหม่ได้ตามต้องการ
ชนิดที่ 1 รูปตัวอย่างจะแสดงเป็นสี่เหลี่ยมจตุรัส จะอยู่ในบรรทัดที่ 9
ชนิดที่ 2 รูปตัวอย่างจะแสดงเป็นสี่เหลี่ยมผืนผ้าที่สูงและกว้างไม่เท่ากันจะอยู่ในบรรทัดที่ 10
(อาจมีการปรับปรุงโค้ดนี้ในภายหลังดังนั้นควรลองดูภายใน 1 สัปดาห์)

ส่วนวิธีกำหนดจำนวนบทความในหน้าหลักดูได้ที่ลิงก์ข้างล่างนี้ครับ
http://tip.maxlayout.com/2013/02/blogger-posts-show-at-most-on-main-page.html

ไม่ระบุชื่อ กล่าวว่า...

สวัดดีครับ พี่ admin Max
ขอย้อนกลับไปจากเรื่องที่รบกวนครั้งที่เเล้วนะครับ

จากที่ผมได้ทดลองดาวน์โหลดเทมเพลทจากเว็บของ templatesdoctor ที่คุณได้ส่งลิงก์ตัวอย่างมานั้นซึ่งก็คือ
http://downloads.templatesdoctor.com/2012/07/johny-light-banget-blogger-template.html
ก็พบว่าส่วนของสไลด์รูปภาพจะไม่มีการแสดงผลครับ

แต่เมื่อเข้าไปตามลิงก์ Published ของเทมเพลทนี้ซึ่งก็คือ
( http://www.mediafire.com/?886m2o1u8q52u52 )
แล้วดาวน์โหลดเทมเพลทมาติดตั้งโดยไม่ต้องแก้ไขอะไรเลย ก็พบว่าสไลด์รูปภาพนั้นสามารถทำงานได้ตามปกติครับ

คือตอนนี้ มันไม่สไลด์เเล้วอ่ะครับพี่ มีวิธีเเก้มั้ยครับ รบกวนพี่ด้วยนะครับ
จากเทมเพลต ที่พี่ให้มาอ่ะครับ ที่วงเล็บไว้อ่ะครับ ขอบคุนครับ

Max กล่าวว่า...

เท่าที่ได้ลองติดตั้งเทมเพลทจาก
http://www.mediafire.com/?886m2o1u8q52u52

ลงไปในบล็อกที่
http://test.maxlayout.com/

แล้วลองเปิดดูด้วย Chrome ,Firefox หรือ IE สไลด์รูปภาพก็ทำงานได้ตามปกตินะครับ (ตอนเปิดดูในครั้งแรกอาจเสียเวลาโหลดนานหน่อย)

ไม่ระบุชื่อ กล่าวว่า...

ขอบคุนมากครับ พี่ admin Max

วันนี้ขอรบกวนสอบถามเรื่อง
Movie Category 1
Movie Category 2
Movie Category 3
Movie Category 4
Movie Category 5
ในเทมเพลต
http://www.mediafire.com/?886m2o1u8q52u52

มันใช้ยังไงหรอครับ คือทีเเรกไม่ได้สนใจอะไร เเต่ไปเจอ blog อื่นที่ใช้รูปแบบดังกล่าวในการเเยกหมวดหมู่หนังพร้อมมีรูปอ่ะครับ เลยสนใจ
ผมอยากรู้การใช้งาน รูปเเบบที่กล่าวมาอ่ะครับพี่ รบกวนด้วยนะครับ ขอบคุนครับผม ^ ^

ไม่ระบุชื่อ กล่าวว่า...

ง่า ยังรอคำตอบอย่างใจจดใจจ่ออยู่นะครับ อิอิ
อยากทำเป็นมากๆครับผม ชี้ทางสว่างผมทีครับ

Max กล่าวว่า...

กล่อง Movie Category นั้นเป็นตัวแสดงบทความจากป้ายกำกับในบล็อก
ซึ่งวิธีใช้นั้นทำได้โดยให้คัดลอกชื่อป้ายกำกับบทความอันใดก็ได้มาหนึ่งชื่อ จากนั้นเข้าไปที่หน้าจอ 'รูปแบบ' สำหรับจัดการเครื่องมือในบล็อก แล้วกดที่ปุ่ม 'แก้ไข' ของ 'Movie Category' อันไหนก็ได้ แล้วนำชื่อป้ายกำกับที่คัดลอกมาใส่ลงไปในช่อง 'เนื้อหา' โดยอักษรที่คัดลอกมานั้นต้องถูกทั้งตัวพิมพ์เล็กพิมพ์ใหญ่และการเว้นวรรค จากนั้นกดปุ่มบันทึกก็เสร็จแล้วครับ

ไม่ระบุชื่อ กล่าวว่า...

รบกวนพี่ MAX ช่วยเเสดง ตัวอย่าง ชื่อป้ายกำกับ โดยอักษรที่คัดลอกมานั้นต้องถูกทั้งตัวพิมพ์เล็กพิมพ์ใหญ่และการเว้นวรรค ตรงนี้ ผมงงอ่ะครับ
คือผมลอง คัดลอกชื่อป้ายกำกับจากหน้าเเรกลงไป1ชื่อ เเล้วกดบันทึกไป
มันไม่เเสดงผลอะไรเลยอ่ะครับ นอกจากหัวข้อ Movie Category
รบกวนด้วยครับ ขอบคุนครับ

Max กล่าวว่า...

ลองดูตัวอย่างที่นี่ครับ
https://plus.google.com/108378280786875080944/posts/NyTAoo4SAug

ไม่ระบุชื่อ กล่าวว่า...

ขอบคุนครับ ทำได้เเล้วครับผม เเต่ทำไมผมก๊อปจากป้ายกำกับมาเลยมันไม่ยอมเเสดงผล งงจริงๆครับ พอพิมพ์ง่ายๆขึ้นเลย ขอบคุนมากๆครับพี่ admin Max
อีกนิดครับพี่ ปรับให้มันเเสดงมากกว่าเดิมได้มั้ยครับ มันเเสดงเเค่ 4 เองอ่ะครับ ผมลองเข้าไปเเก้ไขเเม่แบบ ลองปรับๆดู ก็ไม่ได้ครับผม
ขอรบกวนด้วยนะครับ ขอบคุนมากๆครับ ^ ^

ไม่ระบุชื่อ กล่าวว่า...

ง่า นานจังเลยครับ เเวะมาดูทุกวันเลยครับ ไม่ว่างไม่เปนไรครับผม ขอบคุนมากๆครับพี่ max

Max กล่าวว่า...

เนื่องจากเพิ่งเคลียร์งานเสร็จเมื่อวานนี้เองครับ เลยไม่ได้อัพบล็อกซะหลายวัน
ส่วนวิธีแก้ไขลองดูได้ที่นี่ครับ
https://plus.google.com/108378280786875080944/posts/Qx7A9iAq54A

ไม่ระบุชื่อ กล่าวว่า...

ขอบคุนครับพี่ Max
เพิ่มเติมอีกนิดครับ คือ Movie Category ของผมในหัวข้อ ทั้งหมด มันเเสดงโปรเเกรมหนัง เเค่ 4 เองอ่ะครับ อยากทราบว่าจะเพิ่มให้มันเยอะขึ้นได้มั้ยครับ (ตัวอย่างครับ)
Movie Category1
0 0 0 0 (0 คือรูปภาพนะครับ )
Movie Category2
0 0 0 0
Movie Category3
0 0 0 0

ผมอยากให้มันโชว์มากกว่านี้อ่ะครับ
Movie Category1
0 0 0 0
0 0 0 0
0 0 0 0 แบบนี้อ่ะครับ สามารถทำได้รึป่าวครับพี่ Max
รบกวนด้วยครับ ขอบคุนครับผม

Max กล่าวว่า...

สามารถทำได้ครับ ด้วยวิธีข้างล่างนี้

ขั้นตอนที่ 1. เข้าไปที่บล็อกจากนั้นก็เลือก
'แม่แบบ > แก้ไข HTML'
(โดยที่ไม่ต้องกดสั่ง 'ขยายเทมเพลตวิดเจ็ต')

ขั้นตอนที่ 2. สั่งค้นหา
numposts2=4

ขั้นตอนที่ 3. เปลี่ยนแปลงจำนวนรูปภาพ
โดยตัวเลข 4 ที่อยู่ในส่วนท้ายของโค้ดซึ่งหาเจอในขั้นตอนที่แล้วก็คือ ตัวกำหนดปริมาณสูงสุดของภาพตัวอย่างที่สามารถแสดงอยู่ใน Movie Category โดยสามารถแก้เป็นจำนวนใหม่ได้ตามต้องการเช่น ถ้าต้องการให้ปริมาณสูงสุดที่แสดงได้คือ 12 ภาพ ก็แก้โค้ดให้เป็น
numposts2=12

ขั้นตอนที่ 4. กดปุ่ม'บันทึกเทมเพลต'

ไม่ระบุชื่อ กล่าวว่า...

ขอบคุนครับพี่ Max ทำได้สมบูรณ์เเบบครับผม
ขอบคุนมากๆครับ สำหรับความรู้ดีๆครับ ^ ^

ไม่ระบุชื่อ กล่าวว่า...

สวัดดีครับพี่ Max ผมมีปัญหามาปรึกษาครับ คือ Pages-Next ในblogของผมมันไม่สามารถกดไปดูเนื้อหาหน้าต่อไปได้อ่ะครับ เเล้วมันก็ค้างอยู่ที่เลข 1 ตลอดด้วยครับ เเต่จะดูหน้าต่อไปได้ ต้องกดตัวเลข 1 2 3 4 ไปเรื่อยๆอ่ะครับ เเต่ มันก็จะค้างอยู่เลข 1 เหมือนเดิมครับ ผมเลยเเก้ปัญหาโดยการเพิ่มเลข ตามตัวอย่างครับ ลิ้ง http://i.imgur.com/dtXDU8Q.png เเต่มันเสดงได้สูงสุดเเค่ 21 เองครับ ผมเลยอยากปรึกษาพี่ Max ว่าปัญหาเกิดจากอะไรครับ มีทางเเก้มั้ยครับ ขอบคุนมากๆครับ

Max กล่าวว่า...

เท่าที่ลองนำเทมเพลทนั้นติดตั้งลงใน
http://test.maxlayout.com/
ก็พบว่าตัวแสดงเลขหน้า Pages-Next สามารถทำงานได้ตามปกติครับ
ซึ่งปัญหาที่พบนั้นคาดว่าเกิดจากโค้ดที่ถูกเขียนเพิ่มลงไป โดยถ้าตัดส่วนเพิ่มเติมนั้นออกก็น่าจะกลับมาใช้งานได้เหมือนเดิมครับ

ไม่ระบุชื่อ กล่าวว่า...

อ่อครับผม ขอบคุนมากครับสำหรับความรู้ครับพี่ จะลองเเก้ใขดูครับผม

Chommovie กล่าวว่า...

สวัสดีครับคุณ Max
คือพอดีว่าผมใช้ เทมเพลตที่โหลดจาก
http://www.mediafire.com/?886m2o1u8q52u52
ในส่วนของ Drop MANU ใช้งานยังไงครับ

Max กล่าวว่า...

ลองดูวิธีใช้งานได้ที่นี่ครับ
https://plus.google.com/108378280786875080944/posts/4LS2PYpwuG6

Chommovie กล่าวว่า...

ทำได้แล้วครับ ขอบคุณมาก จัดให้อีก 1 แชร์ สำหรับบล็อคดี ๆ ^^

ถามต่อเลยนะครับ ^^
ผมอยากจะทราบว่า ถ้าผมจะแทรก "เพิ่ม Gadget" เป็นแบบ "HTML/JavaScript" ในส่วนที่ผมได้ทำเป็นกรอบสีแดงไว้(ตามรูป)จะสามารถแทรกได้ยังไงครับ

รูปตัวอย่าง >> https://lh3.googleusercontent.com/-iqXKn3oP3_E/UVkNE77Q39I/AAAAAAAAAe0/1tlmOWo57tA/s901/Untitled.png

Max กล่าวว่า...

ถ้าหากว่าเทมเพลทตามภาพที่ส่งมานั้น มีลักษณะการเขียนแบบเดียวกับ
http://www.mediafire.com/?886m2o1u8q52u52
ละก็สามารถทำได้โดย

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML' (โดยที่ไม่ต้องกดสั่ง 'ขยายเทมเพลตวิดเจ็ต')

ขั้นตอนที่ 2. สั่งค้นหา
<!-- skip links for text browsers -->

แล้วแทนที่โค้ดที่หาเจอในขั้นตอนที่ 2 นี้ด้วย
<div class='headline'><div class='sidebar'>
<b:section class='slide' id='slider-above' showaddelement='yes'/>
</div></div>
<!-- skip links for text browsers -->

ขั้นตอนที่ 3. สั่งค้นหา
<div id='outer-wrapper'><div id='wrap2'>

แล้วแทนที่โค้ดที่หาเจอในขั้นตอนที่ 3 นี้ด้วย
<div class='headline'><div class='sidebar'>
<b:section class='slide' id='slider-below' showaddelement='yes'/>
</div></div>
<div id='outer-wrapper'><div id='wrap2'>

ขั้นตอนที่ 4. กดปุ่ม'บันทึกเทมเพลต'

จากนั้นก็สามารถเพิ่มหรือลด Widget ได้ตามปกติครับ

Chommovie กล่าวว่า...

สวัสดีครับคุณ Max มีปัญหามาให้ช่วยแก้อีกแล้ว !!

พอดีผมสร้าง Blog ขึ้นมาใหม่อีก Blog แล้วได้โหลดเทมเพลทจาก
http://www.mediafire.com/?886m2o1u8q52u52
ไปใช้ครับ ผมกลับเจอปัญหาคือ จำนวนโพสที่แสดงในหน้าแรกมันแสดงแค่ 3 โพสครับ ทั้ง ๆ ที่ผมตั้งไว้ให้มันแสดงถึง 20 โพส ช่วยหาวิธีแก้หน่อยนะครับ ^^

รูปตัวอย่าง >>
https://lh5.googleusercontent.com/-qWhh-tV6e_Y/UV4uYPqGcoI/AAAAAAAAAfE/jHh3Mo1sonc/s880/Untitled.png

Chommovie กล่าวว่า...

อ่อ ลือ อีกคำถามหนึ่งครับ คือผมจะสามารถเปลี่ยนข้อความ RECENT MOVIE ได้ยังไงครับ (ตามรูป)

https://lh5.googleusercontent.com/-zvjozw0Cgas/UV4wbWiGUqI/AAAAAAAAAfM/UsuHJpDdFcE/s731/Untitled.png

Max กล่าวว่า...

สำหรับปัญหาตามรูปที่หนึ่งนั้นผมยังไม่เคยประสบด้วยตัวเองครับ จึงไม่สามารถอธิบายวิธีแก้ไขได้

ส่วนปัญหาตามรูปที่สองนั้นสามารถแก้ไขได้โดย
ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML' (โดยที่ไม่ต้องกดสั่ง 'ขยายเทมเพลตวิดเจ็ต')

ขั้นตอนที่ 2. สั่งค้นหา
Recent</span> Movies

ขั้นตอนที่ 3. แล้วแทนที่ข้อความ Recent และ Movies ด้วยคำที่ต้องการได้เลย

ขั้นตอนที่ 4. จากนั้นก็กดปุ่ม 'บันทึกเทมเพลต' ก็เสร็จแล้วครับ

Unknown กล่าวว่า...

ผมอยากรู้ เค้าทำหน้าแรกของบล็อก
ให้มีรูปเรียงกัน แนวนอน เค้าทำแบบไหนคับ
ตัวอย่าง( http://2.bp.blogspot.com/-V238b68UTJ0/UZIHkPiOKBI/AAAAAAAAADI/KkRGiTMkgnQ/s1600/20130514-122314.png )

แล้วหา จาวาสคริปต์ จากที่ไหนได้คับ

ช่วยสอนวิธีทำหน่อยคับ

Max กล่าวว่า...

หมายถึงบล็อกที่มีลักษณะแบบนี้หรือเปล่าครับ
http://maxlayout-bookcase.blogspot.com/

ถ้าใช่ละก็ให้ใช้วิธีตามบทความทั้ง 3 อันด้านล่างนี้ซึ่งทำงานร่วมกันได้ครับ
http://tip.maxlayout.com/2012/09/blogger-crop-thumbnail-link-to-post.html
http://tip.maxlayout.com/2012/09/blogger-hide-sidebar-from-some-page.html
http://tip.maxlayout.com/2011/11/blogger-multi-post-column-front-page.html

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

teeheed-cliponline กล่าวว่า...

สวัดดีครับพี่ MAX รบกวนสอบถามเรื่อง เเทมเพลต http://www.mediafire.com/download/z485l423ls2obp5/Johny+Joss+Banget.zip ตามลิ้งนี้อ่ะครับ สไลด์ด้านบนสุด มันไม่ยอมสไลด์อ่ะครับ พอจะมีทางเเก้มั้ยครับพี่ รบกวนด้วยนะครับ ขอบคุนมากครับผม

Max กล่าวว่า...

จากที่ได้ลองติดตั้งเทมเพลทนั้นลงไปในบล็อกที่
http://test.maxlayout.com/

แล้วลองเปิดดูด้วย Chrome ,Firefox หรือ IE สไลด์ด้านบนนั้นก็ทำงานได้ตามปกติครับ (ตอนเปิดดูในครั้งแรกอาจต้องเสียเวลา Load นานหน่อย)

teeheed-cliponline กล่าวว่า...

ขอบคุนมากครับพี่ รู้ถึงปัญหามันละครับ ขอบคุนมากๆครับ

X Slow กล่าวว่า...

สวัดดีครับพี่ Max รบกวนถามเรื่อง Movie Category 1-5 ปกติจะมีมาให้ 5
เเต่ผมอยากจะเพิ่มขึ้นอีกอ่ะครับพี่ ลองทำดูด้วยตัวเองละครับไม่ได้สักที รบกวนพี่ชี้ทางสว่างทีครับ ขอบคุนครับพี่

Max กล่าวว่า...

ลองอ่านตัวอย่างวิธีเพิ่ม Movie Category ของเทมเพลต Johny Light Banget ได้จากลิงก์นี้ครับ
https://plus.google.com/108378280786875080944/posts/Qx7A9iAq54A

Chommovie กล่าวว่า...

สวัสดีครับคุณ Max รบกวนถามไรหน่อยครับ คือว่า

จากแทมเพจ http://www.mediafire.com/?886m2o1u8q52u52
ผมต้องการเอาในส่วนของ RECENT MOVIES ออกทั้งหมดสามารถทำได้ไหม แล้ววิธีการทำยังไงครับ

ตามรูป >> https://lh5.googleusercontent.com/-BXSTz8XKnsc/UbV5TV5QbvI/AAAAAAAAAjY/EacEEw_8wG8/w957-h622-no/Untitled.png

Max กล่าวว่า...

สามารถทำได้ตามลิงก์นี้ครับ
https://plus.google.com/108378280786875080944/posts/2xEr4iD7Sh8

Unknown กล่าวว่า...

ของผมทำตามหมดเเล้วกดดูตัวอย่าง มันมีแต่หัวข้อบทความอะครับไม่มีภาพตัวอย่าง แก้ไขอย่างไรดีครับ

ขอบคุณสำหรับความรู้ดีๆครับผม

Unknown กล่าวว่า...

อ่อลืมไปบอกไปผมฝากรูปไว้กับเวปฝากรูปอะครับ T T พอมีวิธีจะช่วยผมบ้างไหมครับ อยากให้หน้าเเรกแสดงเฉพาะ รูปตัวอย่างอะครับ

ขอบคุณครับ

Max กล่าวว่า...

เท่าที่ผู้อ่านบทความนี้บางคนเคยแสดงความคิดเห็นไว้พบว่า หากฝากรูปไว้กับบริการฝากรูปบางแห่งเช่น upic.me จะทำให้การนำรูปมาแสดงเป็นภาพตัวอย่างไม่ครบถ้วนครับ

ดังนั้นถ้าหากเปลี่ยนที่รับฝากรูปไม่ได้ละก็ อย่างน้อยรูปภาพอันแรกที่อยู่ข้างบนสุดของแต่ละบทความซึ่งจะต้องถูกดึงมาแสดงเป็นภาพตัวอย่างก็ควรจะฝากไว้กับ Picasa หรือ Blogger น่าจะดีกว่าครับ

Unknown กล่าวว่า...

ครับผม ผมฝากไว้กับ โอ้โหซ่า สงสัยจะต้องมีการเปลี่ยนแปลงเเล้วละ

ขอบคุณมากๆๆเลยครับ ^^

teeheed-cliponline กล่าวว่า...

สวัดดีครับพี่ Max หลังจากที่ผมไม่ได้รบกวนมาเกือบปี วันนี้ผมขอสอบถามเรื่อง สไลด์ กับ Movie Category ทำไมมันไม่เเสดงอ่ะครับ ผมพยายามแก้เเล้ว มันก็ไม่หายครับ โหลดเทมเพลตมาจาก http://www.mediafire.com/download/z485l423ls2obp5/Johny+Joss+Banget.zip ( เเต่ตัวอย่างใน http://johny-jossbanget.blogspot.com/ กลับทำงานปกติ ) รบกวนด้วยนะครับ

Unknown กล่าวว่า...

admin ช่วยสอนทำแบบนี้ให้หน่อยค่ะ
https://4.bp.blogspot.com/-qajSOiy6tlM/V1xZYgpXomI/AAAAAAAAAIc/nfgIFbp1CbQVODqa1G7fJV2gBzdVM1WuwCLcB/s1600/untitled333.bmp
ทำไม่เป็นเลยค่ะแบบนี้

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น