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

Updates 2014/09/05



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

โดยการแสดงเนื้อหาแบบนี้มักถูกใช้กับบล็อกรวมรูปถ่าย หรือเว็บอ่านการ์ตูน ที่ต้องการให้ในหน้าแรกแสดงแต่เฉพาะภาพหน้าปกที่เป็นรูปแรกของแต่ละบทความ แต่เมื่อผู้อ่านคลิกลงบนภาพนั้นก็จะเป็นการสั่งเปิดเนื้อหาแบบเต็มขึ้นมาซึ่งสามารถดูตัวอย่างได้จากลิงก์นี้
http://maxlayout-bookcase.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




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

Pongpop Srisophon กล่าวว่า...

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

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

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

kapong กล่าวว่า...

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

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

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

Pongpop Srisophon กล่าวว่า...

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

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

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

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

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

chatchai buthem กล่าวว่า...

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

chatchai buthem กล่าวว่า...

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

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

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

chatchai buthem กล่าวว่า...

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

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

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

Tee กล่าวว่า...

อยากสอบเรื่อง 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

Tee กล่าวว่า...

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

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

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

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

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

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

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

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

Tee กล่าวว่า...

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

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

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

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

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

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

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

Tee กล่าวว่า...

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

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

Tee กล่าวว่า...

ในที่สุดก็ตามหาเว็บนี้จนเจออีกครั้ง ลงวินโด้ใหม่ที่บันทึกเว็บไว้หายหมดเลย
^ ^
วันนี้ผมรบกวนสอบถาม เรื่อง ทำสไลด์ตัวอย่างหนัง เเทมเพลตนี้อ่ะครับ ดังตัวอย่างที่เลื่อนๆไปอ่ะครับ ผมพยายามทำเเล้ว มันก้ไม่ได้อ่ะครับ รบกวนพี่ 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

Tee กล่าวว่า...

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

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

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

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

Tee กล่าวว่า...

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

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

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

Tee กล่าวว่า...

สวัดดีครับพี่ 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;

Tee กล่าวว่า...

ขอบคุนครับพี่ 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

Tee กล่าวว่า...

สวัดดีครับ พี่ 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 สไลด์รูปภาพก็ทำงานได้ตามปกตินะครับ (ตอนเปิดดูในครั้งแรกอาจเสียเวลาโหลดนานหน่อย)

Tee กล่าวว่า...

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

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

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

Tee กล่าวว่า...

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

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

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

Tee กล่าวว่า...

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

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

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

Tee กล่าวว่า...

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

Tee กล่าวว่า...

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

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

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

Tee กล่าวว่า...

ขอบคุนครับพี่ 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. กดปุ่ม'บันทึกเทมเพลต'

Tee กล่าวว่า...

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

Tee กล่าวว่า...

สวัดดีครับพี่ 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 สามารถทำงานได้ตามปกติครับ
ซึ่งปัญหาที่พบนั้นคาดว่าเกิดจากโค้ดที่ถูกเขียนเพิ่มลงไป โดยถ้าตัดส่วนเพิ่มเติมนั้นออกก็น่าจะกลับมาใช้งานได้เหมือนเดิมครับ

Tee กล่าวว่า...

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

อ๊อด รักจริง กล่าวว่า...

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

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

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

อ๊อด รักจริง กล่าวว่า...

ทำได้แล้วครับ ขอบคุณมาก จัดให้อีก 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 ได้ตามปกติครับ

อ๊อด รักจริง กล่าวว่า...

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

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

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

อ๊อด รักจริง กล่าวว่า...

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

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

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

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

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

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

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

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

narek naja กล่าวว่า...

ผมอยากรู้ เค้าทำหน้าแรกของบล็อก
ให้มีรูปเรียงกัน แนวนอน เค้าทำแบบไหนคับ
ตัวอย่าง( 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 กล่าวว่า...

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

Calikrsis hamster กล่าวว่า...

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

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

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

อ๊อด รักจริง กล่าวว่า...

สวัสดีครับคุณ 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

hatake kakachi กล่าวว่า...

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

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

hatake kakachi กล่าวว่า...

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

ขอบคุณครับ

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

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

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

hatake kakachi กล่าวว่า...

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

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

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

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

มนตรา มณีล้อม กล่าวว่า...
ความคิดเห็นนี้ถูกผู้เขียนลบ
มนตรา มณีล้อม กล่าวว่า...

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

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