ผู้เข้าชมบางคนได้ถามเกี่ยวกับวิธีการวางตำแหน่งชื่อ หรือเกี่ยวกับวิธีการวางตำแหน่งภาพข้างต้น สรุปชื่อเรื่องและโพสต์ ผมพยายามที่จะทำให้การโพสต์ XML ที่ผมทำมีความยืดหยุ่นเป็นไปได้สำหรับวัตถุประสงค์ของการปรับแต่งในอนาคต รวมถึงการโพสต์ตัวอย่าง
ก่อนที่จะดำเนินการตามขั้นตอนดังต่อไป ขอให้คุณพิจารณาว่านี้จะเปลี่ยนโครงสร้างโดยรวมของการโพสต์; เช่นเครื่องมือเพิ่มไว้ก่อนหน้า - ข้อความที่เกี่ยวข้องกับปุ่มสื่อสังคมหรือการปรับแต่งอื่น ๆ - อาจถูกลบออก ดังนั้นผมอยากจะแนะนำให้คุณเก็บ "แม่แบบ" ของคุณก่อนที่จะทำการปรับเปลี่ยนนี้
อย่างแรกคือ แก้ไขเทมเพลต XML
Step 1. ไปที่แผงควบคุมของคุณ Blogger> แม่แบบ> แก้ไข HTML
Step 2. คลิกภายในพื้นที่โค้ดและกดปุ่ม Ctrl + F เพื่อเปิดช่องค้นหา
Step 3. Copy and paste the following code inside the search box and hit Enter to find it:
ขั้นตอนที่ 4 หลังจากที่คุณเจอ <b:includable id='post' var='post'>...</b:includable> (ถ้าคุณไม่เห็นบรรทัดนี้ ให้แน่ใจว่าโค้ดจะไม่ขยาย(►) ในภาพข้างต้นนั้นมันเป็น 1812) แทนที่ด้วยโค้ดนี้
- to make the thumbnails bigger, modify the values in red (please note that some values are for the posts height/width which should be the same as the thumbnails size - except for the first example where you have to add another 30px (150px - posts height) );
-to change the image when there is no thumbnail, replace the url in blue with the address of your image;
-to change the background, change the values in violet: #F6F6F6 - for posts background and #E9E9E9 - for the posts footer
Step 5. Add the CSS code of the chosen style just above this tag (CTRL + F to find it):
Just below the <b:widget id='Blog1' line, should be the </b:section> tag - copy and paste this script just below it (see the screenshot):
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("Blog1",210);
</script>
</b:if>
Step 7. เซฟเทมเพลตได้เลยครับ
ก่อนที่จะดำเนินการตามขั้นตอนดังต่อไป ขอให้คุณพิจารณาว่านี้จะเปลี่ยนโครงสร้างโดยรวมของการโพสต์; เช่นเครื่องมือเพิ่มไว้ก่อนหน้า - ข้อความที่เกี่ยวข้องกับปุ่มสื่อสังคมหรือการปรับแต่งอื่น ๆ - อาจถูกลบออก ดังนั้นผมอยากจะแนะนำให้คุณเก็บ "แม่แบบ" ของคุณก่อนที่จะทำการปรับเปลี่ยนนี้
ตอนนี้ขอเริ่มต้นการเพิ่มโค้ด มีเพียงไม่กี่ขั้นตอนง่ายๆที่คุณต้องปฏิบัติตามคือ
Step 1. ไปที่แผงควบคุมของคุณ Blogger> แม่แบบ> แก้ไข HTML
Step 2. คลิกภายในพื้นที่โค้ดและกดปุ่ม Ctrl + F เพื่อเปิดช่องค้นหา
Step 3. Copy and paste the following code inside the search box and hit Enter to find it:
<b:includable id='post' var='post'>
ขั้นตอนที่ 4 หลังจากที่คุณเจอ <b:includable id='post' var='post'>...</b:includable> (ถ้าคุณไม่เห็นบรรทัดนี้ ให้แน่ใจว่าโค้ดจะไม่ขยาย(►) ในภาพข้างต้นนั้นมันเป็น 1812) แทนที่ด้วยโค้ดนี้
<b:includable id='post' var='post'>ขั้นตอนต่อไปคือการเพิ่ม CSS เลือกหนึ่งในรูปแบบดังต่อไปนี้และคัดลอกโค้ดด้านล่างนี้
<article expr:class='"blogger-post blogger-post-" + data:blog.pageType' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blogger-post-part blogger-post-thumbnail-area'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a>
</b:if>
</div>
</b:if>
</b:if>
<div class='blogger-post-part blogger-post-body-area'>
<h3 class='blogger-post-title'>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
[Untitled]
</b:if>
</h3>
<div class='blogger-post-body'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
<b:else/>
No content.
</b:if>
</b:if>
</b:if>
</div>
<footer class='blogger-post-footer'>
<div class='blogger-post-footer-line blogger-post-footer-line-1'>
<span class='blogger-post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <span class='fn'>
<b:if cond='data:post.authorProfileUrl'>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
<b:else/>
<span class='g-profile'><data:post.author/></span>
</b:if>
</span>
</b:if>
</span> <span class='blogger-post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
</b:if>
</span> <span class='blogger-post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.url + "#comments"'><data:post.commentLabelFull/></a>
</b:if>
</b:if>
</b:if>
</span>
</div>
<div class='blogger-post-footer-line blogger-post-footer-line-2'>
<span class='blogger-post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</span>
</div>
</footer>
</div>
</article>
</b:includable>
1 โพสต์หัวข้อบริเวณภาพด้านซ้าย:
.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after { content:" "; display:block;clear:both;}
.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px; border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-_2PmGzEiQks8FAJH81g_DfBDUf7YTjFffm2XBMX6gvIchM5UKaxfes8jsuAMkVP2Hlb30NPWtSVu8spNsp7D6fePD6dkjyLr2F63HkAQuwFCt5evUxXbnQVueuZGX0eI_GcwPwFc5wX/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}
.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}
2 ภาพที่มีหัวข้อและโพสต์ข้อมูลอย่างย่อทางด้านขวา
blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after { content:" "; display:block; clear:both;}
.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-_2PmGzEiQks8FAJH81g_DfBDUf7YTjFffm2XBMX6gvIchM5UKaxfes8jsuAMkVP2Hlb30NPWtSVu8spNsp7D6fePD6dkjyLr2F63HkAQuwFCt5evUxXbnQVueuZGX0eI_GcwPwFc5wX/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}
3 Blogger กระทู้แบบสไลต์กับหัวข้อและ ข้อมูล ย่อๆ ทางด้านล่าง (เค้าโครงสไตล์หนังสือพิมพ์)
#blog-pager {clear: both;}Note:
.blogger-post {background: #F6F6F6; border-right: 1px dashed #E3E3E3; border-left: 1px dashed #E3E3E3; height: 405px; width:200px; margin:0 20px 20px 0; padding: 10px 10px 0px; overflow:hidden; float: left; display:inline-block; *zoom:1;}
.blogger-post:after { content:" "; display:block; clear:both;}
.blogger-post-title { font:normal bold 16px/1.2 Arial,Sans-Serif; margin:0 0 10px; padding:0;}
.blogger-post-title a{color: #777;}
.blogger-post-thumbnail-area a img{ width:200px; height:200px; background-color:#fff;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-_2PmGzEiQks8FAJH81g_DfBDUf7YTjFffm2XBMX6gvIchM5UKaxfes8jsuAMkVP2Hlb30NPWtSVu8spNsp7D6fePD6dkjyLr2F63HkAQuwFCt5evUxXbnQVueuZGX0eI_GcwPwFc5wX/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;}
.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}
.blogger-post-footer {background: #E9E9E9; margin:10px -20px 0; padding:20px; border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#555;}
.blogger-post-footer a{color: #888;}
.blogger-post-item,
.blogger-post-static_page {width:auto;}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}
- to make the thumbnails bigger, modify the values in red (please note that some values are for the posts height/width which should be the same as the thumbnails size - except for the first example where you have to add another 30px (150px - posts height) );
-to change the image when there is no thumbnail, replace the url in blue with the address of your image;
-to change the background, change the values in violet: #F6F6F6 - for posts background and #E9E9E9 - for the posts footer
Step 5. Add the CSS code of the chosen style just above this tag (CTRL + F to find it):
]]></b:skin>
การเปลี่ยนความละเอียดของภาพ
หากอยากแก้ไขความละเอียดของภาพที่อยู่ในความละเอียด S72-C ให้ทำกดที่คีย์บอร์ดตามนี้ (CTRL + F):
<b:widget id='Blog1'
Just below the <b:widget id='Blog1' line, should be the </b:section> tag - copy and paste this script just below it (see the screenshot):
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("Blog1",210);
</script>
</b:if>
</b:if>
Step 7. เซฟเทมเพลตได้เลยครับ
