iGetMovie Blogger Template The Best Blogger Template For The Movies
จัดหนักจัดเต็มไปครับกับการ Modify Blogger Template เอาใจเหล่าสาวกบล็อกเกอร์ชาวไทยที่อยากจะได้ Template แจ่มๆ ไว้ทำบล็อกดูหนังออนไลน์ เที่ยวนี้ผมเลยจัดการโมให้ลองเอาไปใช้กัน อาจจะยังไม่สวยหรือสมบูรณ์แบบที่สุดนักแต่ก็จัดว่าดูดีมีชาติตระกูลในระดับหนึ่งครับ และสิ่งที่ผม Modify เสริมขึ้นใหม่ใน Template ตัวนี้ก็คือการเพิ่มสไลด์โชว์ขนาดใหญ่ให้ความรู้สึกเสมือนหนึ่งนั่งดูจอภาพยนต์ในโรงหนัง กับเพิ่ม Tab Menu แบบซ่อนได้ช่วยประหยัดพื้นที่เมนูบาร์ด้านข้าง เปลี่ยนสีและลูกเล่นอะไรอีกนิดๆ หน่อย ซึ่งจริงๆ แล้วตอนแรกผมกะจะเพิ่มระบบเรทติ้งเพื่อให้คะแนนภาพยนต์ที่ชื่นชอบ เพิ่ม Related Article แสดงบทความที่เกี่ยวข้องพร้อมรูปภาพ เพิ่ม Facebook Social Plugin ระบบแสดงความคิดเห็นผ่าน Facebook แต่ช่วงนี้ไม่ค่อยว่างครับกับยังไม่ได้หาแกะโค๊ดเลย ไว้ว่างๆ เมื่อไรจะโมให้แจ่มๆ เลย และเช่นเคยครับกับคู่มือการใช้งานพร้อมภาพประกอบซึ่งผมได้ทำไว้ให้อ่านและทดลองทำตามกันเรียกว่าละเอียดยิบเลยครับตามแบบฉบับของผมที่ว่าเอามาให้ใช้แล้วต้องสอนให้ใช้เป็น ไม่ใช่เอามาให้โหลดแล้วต้องไปงมเข็มในมหาสมุทรหาวิธีใช้งานกันเอง...สำหรับใครที่สนใจก็ดูตัวอย่างพร้อมดาวน์โหลดไปใช้ได้ฟรีเลยครับ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
หลังจากดาวน์โหลดและติดตั้งแม่แบบแล้ว คราวนี้ก็มาถึงการปรับแต่งซึ่งไม่ยุ่งยากอะไรครับจัดว่าง่ายมากๆ สำหรับ Template ตัวนี่ ลองทำตามกันเลยครับ
อันดับแรกให้หาโค๊ดต่อไปนี้จากแม่แบบแล้วจัดการแก้ไข
1.ให้หาโค๊ดคำว่า <title><data:blog.pageTitle/></title> เราก็จะเจอโค๊ดดังต่อไปนี้ครับ
<title><data:blog.pageTitle/>ตรงนี้ให้แทรกข้อความสั้นๆ เกี่ยวกับบล็อกลงไป</title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='Author Email Address here!' name='Email'/>
Author Name here! ใส่ชื่อคุณลงไป จะใส่หรือไม่ใส่ก็ได้ครับ
Author Email Address here! ใส่อีเมล์ลงไป จะใส่หรือไม่ใส่ก็ได้ครับ
2.ให้หาคำว่า igetmovie.blogspot.com มีกี่ที่ก็ให้แก้เป็น url ของคุณแทน
3.ให้หาโค๊ด 833115824370827244 จากแม่แบบแล้วแก้เป็น ID ของบล็อกคุณแทน
<a expr:href='"https://www.blogger.com/comment.g?blogID=833115824370827244&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
แล้ว ID บล็อกดูได้จากไหน
รหัส ID บล็อกสามารถดูได้จากช่อง url ในหน้าการออกแบบจัดการก็อปแล้วเอาไปวางแทนเลยครับ เสร็จแล้วให้ทำการบันทึกแม่แบบ
สำหรับคนที่บันทึกแม่แบบไปแล้วอาจจะหาโค๊ด 833115824370827244 ไม่เจอก็ให้ทำการขยายแม่แบบก่อนครับ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
numposts1 = 5;
label1 = "Slide";
แก้ตัวเลขสีน้ำเงินเป็นจำนวนบทความที่ต้องการให้ขึ้นบนสไลด์
แก้ตัวหนังสือสีแดงคำว่า Slide เป็นชื่อป้ายกำกับบทความที่ต้องการให้แสดงเป็นภาพสไลด์ ในกรณีที่มีบทความต่างป้ายกำกับกันแต่อยากให้แสดงขึ้นสไลด์ด้วยกัน แนะนำง่ายๆ เลยครับให้เพิ่มป้ายกำกับบทความที่ต้องการว่า Slide ครับ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
สำหรับในส่วนนี้ผมจะมาว่าถึงการใส่ภาพสไลด์ขนาดใหญ่ซึ่งจะมากเรื่องซักหน่อยไม่เหมือนการใส่ภาพสไลด์ขนาดเล็ก เพราะเราจะต้องเข้าไปแก้ไขที่แม่แบบหลายส่วนด้วยกัน แต่ก็ไม่ยากอะไรมากมายครับ โดยให้หาโค๊ดคำว่า <a href='http://www.blogger.com'><img แล้วจัดการแก้ไขตามตัวอย่างด้านล่าง
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-1' src='http://1.bp.blogspot.com/-7Sr0bzVvvfo/T177Tcqf5qI/AAAAAAAAA1c/vynfbtxJAIQ/s1600/hulk.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-2' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-3' src='http://4.bp.blogspot.com/-bvXEASpa4Q0/T178B021zbI/AAAAAAAAA1s/OR7Xign1eR4/s1600/pun.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-4' src='http://1.bp.blogspot.com/-7Sr0bzVvvfo/T177Tcqf5qI/AAAAAAAAA1c/vynfbtxJAIQ/s1600/hulk.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-5' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-6' src='http://4.bp.blogspot.com/-bvXEASpa4Q0/T178B021zbI/AAAAAAAAA1s/OR7Xign1eR4/s1600/pun.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-7' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>
</div>
<script type='text/javascript'>
if(!window.slider) var slider={};
slider.data=[
{"id":"slide-img-1","client":"title1","desc":"111111"},
{"id":"slide-img-2","client":"title2","desc":"222222"},
{"id":"slide-img-3","client":"title3","desc":"333333"},
{"id":"slide-img-4","client":"title4","desc":"444444"},
{"id":"slide-img-5","client":"title5","desc":"555555"},
{"id":"slide-img-6","client":"title6","desc":"666666"},
{"id":"slide-img-7","client":"title7","desc":"777777"}
*ให้เปลี่ยน http://www.blogger.com เป็น url หน้าที่เราต้องการไปเวลาเราคลิกที่ภาพ
*ให้เปลี่ยน url ของรูปภาพสีเขียวเป็น url รูปภาพของเราแทน
*ให้เปลี่ยนคำว่า title1 - title7 เป็นชื่อบทความของรูปภาพ
*ให้เปลี่ยนคำว่า 111111 - 777777 เป็นรายละเอียดของบทความแทนครับ
หากต้องการใส่ภาพสไลด์จำนวนไม่มากก็ให้ตัดตรง
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-7' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
กับตรง {"id":"slide-img-7","client":"Title7","desc":"Your Description Here"} ออกได้ครับ
หากยังหารูปภาพไม่ได้ก็เอาโค๊ดด้านบนไปใส่ก่อน แล้วค่อยแก้ไขที่หลังก็ได้ครับ เสร็จแล้วก็บันทึกแม่แบบ สำหรับรูปภาพที่ทำภาพสไลด์ต้องมีขนาด 940x262px วิธีทำภาพให้ได้ขนาด 940x262 ผมใช้วิธีตัดภาพให้ได้ขนาดตามที่ต้องการครับ...
<span style="color: #cccccc;">มีผู้ชมแล้ว</span><span style="color: black;">..</span><script src="http://fastwebcounter.com/secure.php?s=http://yourblog.blogspot.com/xxxxxxxxx.html">
</script> <span style="color: black;">..</span><span style="color: #cccccc;">ครั้ง</span>
ให้แก้ตรงส่วนสีส้มเป็น url ของบทความนั้นๆ ครับ ก็หวังว่าคงถูกใจนะครับกับ iGetMovie Blogger Template ที่ผมโมดิฟายด์มาให้ลองเอาไปใช้กัน สำหรับวิธีการปรับแต่งก็คงไม่ยากนะครับค่อยๆ ทำกันไป จะเริ่มปรับแต่งตรงส่วนไหนก่อนก็ได้ตามใจครับ...แต่ตอนนี้ผมรู้สึกว่า Template ตัวที่ผมใช้อยู่ขณะนี้มันชักไม่ค่อยเหมาะกับการทำบล็อกบทความให้คนอ่านเท่าไรนักรู้สึกตาจะลายปวดตามาก เห็นทีต้องไปหาตัวใหม่มาโมใช้แทนดีกว่า...สวัสดีครับ
มีผู้อ่านแล้ว.. ..ครั้ง
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| DEMO : ตัวอย่าง | DOWNLOAD : ดาวน์โหลด |
| วิธีการปรับแต่ง |
อันดับแรกให้หาโค๊ดต่อไปนี้จากแม่แบบแล้วจัดการแก้ไข
1.ให้หาโค๊ดคำว่า <title><data:blog.pageTitle/></title> เราก็จะเจอโค๊ดดังต่อไปนี้ครับ
<title><data:blog.pageTitle/>ตรงนี้ให้แทรกข้อความสั้นๆ เกี่ยวกับบล็อกลงไป</title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='Author Email Address here!' name='Email'/>
Your Blog Description here! ให้แก้เป็นคำอธิบายเกี่ยวกับบล็อกลงไปแทน
Your Keywords here! ให้แก้เป็นคีย์เวิร์คของคุณแทนโดยคั่นคีย์เวิร์คแต่ละคำด้วยเครื่องหมาย , เช่น ทำบล็อก, แต่งบล็อก, สอนโมบล็อกAuthor Name here! ใส่ชื่อคุณลงไป จะใส่หรือไม่ใส่ก็ได้ครับ
Author Email Address here! ใส่อีเมล์ลงไป จะใส่หรือไม่ใส่ก็ได้ครับ
2.ให้หาคำว่า igetmovie.blogspot.com มีกี่ที่ก็ให้แก้เป็น url ของคุณแทน
3.ให้หาโค๊ด 833115824370827244 จากแม่แบบแล้วแก้เป็น ID ของบล็อกคุณแทน
<a expr:href='"https://www.blogger.com/comment.g?blogID=833115824370827244&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
แล้ว ID บล็อกดูได้จากไหน
สำหรับคนที่บันทึกแม่แบบไปแล้วอาจจะหาโค๊ด 833115824370827244 ไม่เจอก็ให้ทำการขยายแม่แบบก่อนครับ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| วิธีใส่สไลด์โชว์ขนาดเล็ก |
numposts1 = 5;
label1 = "Slide";
แก้ตัวเลขสีน้ำเงินเป็นจำนวนบทความที่ต้องการให้ขึ้นบนสไลด์
แก้ตัวหนังสือสีแดงคำว่า Slide เป็นชื่อป้ายกำกับบทความที่ต้องการให้แสดงเป็นภาพสไลด์ ในกรณีที่มีบทความต่างป้ายกำกับกันแต่อยากให้แสดงขึ้นสไลด์ด้วยกัน แนะนำง่ายๆ เลยครับให้เพิ่มป้ายกำกับบทความที่ต้องการว่า Slide ครับ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| วิธีใส่ภาพสไลด์โชว์ขนาดใหญ่ |
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-1' src='http://1.bp.blogspot.com/-7Sr0bzVvvfo/T177Tcqf5qI/AAAAAAAAA1c/vynfbtxJAIQ/s1600/hulk.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-2' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-3' src='http://4.bp.blogspot.com/-bvXEASpa4Q0/T178B021zbI/AAAAAAAAA1s/OR7Xign1eR4/s1600/pun.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-4' src='http://1.bp.blogspot.com/-7Sr0bzVvvfo/T177Tcqf5qI/AAAAAAAAA1c/vynfbtxJAIQ/s1600/hulk.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-5' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-6' src='http://4.bp.blogspot.com/-bvXEASpa4Q0/T178B021zbI/AAAAAAAAA1s/OR7Xign1eR4/s1600/pun.png' width='940'/></a>
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-7' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>
</div>
<script type='text/javascript'>
if(!window.slider) var slider={};
slider.data=[
{"id":"slide-img-1","client":"title1","desc":"111111"},
{"id":"slide-img-2","client":"title2","desc":"222222"},
{"id":"slide-img-3","client":"title3","desc":"333333"},
{"id":"slide-img-4","client":"title4","desc":"444444"},
{"id":"slide-img-5","client":"title5","desc":"555555"},
{"id":"slide-img-6","client":"title6","desc":"666666"},
{"id":"slide-img-7","client":"title7","desc":"777777"}
*ให้เปลี่ยน http://www.blogger.com เป็น url หน้าที่เราต้องการไปเวลาเราคลิกที่ภาพ
*ให้เปลี่ยน url ของรูปภาพสีเขียวเป็น url รูปภาพของเราแทน
*ให้เปลี่ยนคำว่า title1 - title7 เป็นชื่อบทความของรูปภาพ
*ให้เปลี่ยนคำว่า 111111 - 777777 เป็นรายละเอียดของบทความแทนครับ
หากต้องการใส่ภาพสไลด์จำนวนไม่มากก็ให้ตัดตรง
<a href='http://www.blogger.com'><img alt='' class='slide' height='262' id='slide-img-7' src='http://3.bp.blogspot.com/-U8zfKqj2bRg/T177snQwhZI/AAAAAAAAA1k/1PvRfOPLWww/s1600/tran.png' width='940'/></a>
กับตรง {"id":"slide-img-7","client":"Title7","desc":"Your Description Here"} ออกได้ครับ
หากยังหารูปภาพไม่ได้ก็เอาโค๊ดด้านบนไปใส่ก่อน แล้วค่อยแก้ไขที่หลังก็ได้ครับ เสร็จแล้วก็บันทึกแม่แบบ สำหรับรูปภาพที่ทำภาพสไลด์ต้องมีขนาด 940x262px วิธีทำภาพให้ได้ขนาด 940x262 ผมใช้วิธีตัดภาพให้ได้ขนาดตามที่ต้องการครับ...
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
วิธีการก็ไม่ยากครับ หมายเลข1 ให้หาโค๊ดคำว่า comments rss แล้วเราจะเจอโค๊ดต่อไปนี้
<li class='home'><a href='/'>Home</a></li>
<li><a href='http://feeds.feedburner.com/JohnyTemplate' title='Posts RSS'>Posts RSS</a></li>
<li><a href='http://igetmovie.blogspot.com/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://johnytemplate.blogspot.com/2011/12/color-code-to-easier-your-customization.html'>Color Code</a></li>
<li><a href='http://twitter.com'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='http://igetmovie.blogspot.com'>Sample Page</a></li>
</ul>
สีเขียวให้ใส่ข้อความที่ต้องการ สีส้มให้ใส่ลิ๊งค์ของข้อความ เราสามารถตัดหรือเพิ่มลิ๊งค์และข้อความที่ต้องการได้ครับ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
วิธีการก็ดูตามภาพประกอบเลยครับ...
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ก่อนจบบทความนี้ผมขอแถมโค๊ดแสดงจำนวนคนชมภาพยนต์แต่ละเรื่องว่ามีจำนวนเท่าไรแล้วให้เอาไปใส่ที่ใต้บทความครับ
ก็อปโค๊ดด้านล่างนี้ครับ
| การแก้ไขเมนูต่างๆ ในส่วนหัวของบล็อก |
<li class='home'><a href='/'>Home</a></li>
<li><a href='http://feeds.feedburner.com/JohnyTemplate' title='Posts RSS'>Posts RSS</a></li>
<li><a href='http://igetmovie.blogspot.com/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://johnytemplate.blogspot.com/2011/12/color-code-to-easier-your-customization.html'>Color Code</a></li>
<li><a href='http://twitter.com'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='http://igetmovie.blogspot.com'>Sample Page</a></li>
</ul>
สีเขียวให้ใส่ข้อความที่ต้องการ สีส้มให้ใส่ลิ๊งค์ของข้อความ เราสามารถตัดหรือเพิ่มลิ๊งค์และข้อความที่ต้องการได้ครับ
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| การใส่โลโก้บล็อก แบนเนอร์ และเพิ่ม Tab Menu แบบซ่อนได้ |
 |
| โลโก้บล็อก และแบนเนอร์โฆษณา |
 |
| Tab Menu แบบซ่อนได้ 3 Tab |
 |
| วิธีการใส่ส่วนต่างๆ |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| ของแถมก่อนจบครับ... |
<span style="color: #cccccc;">มีผู้ชมแล้ว</span><span style="color: black;">..</span><script src="http://fastwebcounter.com/secure.php?s=http://yourblog.blogspot.com/xxxxxxxxx.html">
</script> <span style="color: black;">..</span><span style="color: #cccccc;">ครั้ง</span>
ให้แก้ตรงส่วนสีส้มเป็น url ของบทความนั้นๆ ครับ ก็หวังว่าคงถูกใจนะครับกับ iGetMovie Blogger Template ที่ผมโมดิฟายด์มาให้ลองเอาไปใช้กัน สำหรับวิธีการปรับแต่งก็คงไม่ยากนะครับค่อยๆ ทำกันไป จะเริ่มปรับแต่งตรงส่วนไหนก่อนก็ได้ตามใจครับ...แต่ตอนนี้ผมรู้สึกว่า Template ตัวที่ผมใช้อยู่ขณะนี้มันชักไม่ค่อยเหมาะกับการทำบล็อกบทความให้คนอ่านเท่าไรนักรู้สึกตาจะลายปวดตามาก เห็นทีต้องไปหาตัวใหม่มาโมใช้แทนดีกว่า...สวัสดีครับ
มีผู้อ่านแล้ว.. ..ครั้ง
