Friday, December 30, 2016

[HowTo]ขั้นตอนการนำ Recent Posts มาวางใน Blogger

สวัสดีค่ะ

วันนี้จะมาแนะนำเทคนิคการตกแต่ง blogger เล็กๆน้อยๆที่น่าสนใจ ได้แก่เจ้ากล่อง widget แสดงข้อความที่โพสต์ล่าสุดค่ะ สำหรับเพื่อนๆที่ใช้ wordpress มาก่อนคงเคยชินกับออโต้สคริปที่ทางเว็ปเตรียมไว้ให้กันอยู่แล้ว แต่สำหรับสายถึก/ฟรีอย่างเราๆที่เพิ่งหันมาลงหลักปักฐานกับ blogger ใหม่ๆเล่นเอาปวดหัวตึ๊บ ไม่รู้จะเริ่มต้นยังไงเลย

การเพิ่มกล่องแสดงข้อความที่โพสต์ล่าสุด หรือ Recent Posts เนี่ย ช่วยอำนวยความสะดวก ชาว blogger อย่างเราๆ ที่ขี้เกียจ manual มือทุกครั้งที่โพสต์ข้อความใหม่ ซึ่งเราเองก็ไปตามหาสคริปฟรีมาหลายเจ้าค่ะ เวิร์คบ้างไม่เวิร์คบ้าง แต่เนื่องจาก css ไม่ค่อยซัพพอร์ตมือถือเท่าไหร่ จึงเลือก code javascript มาใช้แทน ถือซะว่าเป็นการ trade-off ความสวยงาม กับ ประโยชน์ในการใช้งานก็แล้วกันค่ะ

ตัวอย่างสคริปต์ที่เรานำมาแนะนำ หน้าตาออกมาประมาณแบบนี้ค่ะ ซึ่งเดี๋ยวเราจะสอนวิธีการ custom เล็กๆน้อยๆทีหลัง



ขั้นตอนการนำ Recent Posts มาวางใน Blogger

ขั้นที่ 1 ล็อกอินเข้า blogger

ขั้นที่ 2 เลือก Layout จากนั้นเลือก add a gadget 'HTML/JavaScript'



ขั้นที่ 3 นำ code ด้านล่างไปใส่ในช่องแล้วกด save

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||standardstyling&&document.write(""),1==showpostdate&&document.write(""+l+" "+u[parseInt(o,10)]+" "+a), document.write('<br>',""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = true;var showcommentnum = true;var standardstyling = true;</script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="https://readlikeabear.blogspot.com/2016/12/how-to-put-recent-widget-on-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #997755;font-size:17px;text-transform:capitalize;}.rctitles2 {padding-bottom:13px;margin-bottom:13px;border-bottom: 1px dotted #997755;}
</style>

**หมายเหตุ** ในขั้นตอนนี้จำเป็นต้องตั้งค่าเพิ่มเติม ตามตัวหนังสือที่ไฮไลท์ไว้ ได้แก่

1. นำ url blog ของเรามาเปลี่ยนแทน http://YOURBLOG.blogspot.com
2. var numposts = กำหนดจำนวนของโพสต์ที่ต้องการให้แสดง
3. var showpostdate = true กำหนดว่าจะเลือกแสดงวันที่หรือไม่
4. color: #997755 กำหนดสีของข้อความที่แสดง
5.font-size:17px  กำหนดขนาดตัวอักษรของข้อความที่แสดง

ขั้นตอนเบื้องต้นมีเพียงเท่านี้ค่ะ หากต้องการปรับแต่งเพิ่มเติม เช่นการเคาะบรรทัดให้ข้อความสามารถใส่ <br> เพิ่มเข้าไป ยกตัวอย่างเช่น

document.write('<br>',"")

เท่านี้ก็จะได้ widget งามๆมาแต่งบล็อกแล้วค่ะ

เรานำสคริปมาดัดแปลงนิดหน่อย หากต้องการสคริป original สามารถเข้าไปโหบดจากบล็อกต้นทางได้ค่ะ (เครดิตจาก http://helplogger.blogspot.com/)

ขั้นตอนการตั้งค่า Widget ให้แสดงผลทางเว็ปแบบมือถือ


ขั้นที่ 1 เข้ามาที่หน้า Templates จากนั้นเลือก edit html
ขั้นที่ 2 เลือกหา widget ของเรา ด้วยฟังชั่น jump to widget หรือ search



ขั้นที่ 3 เพิ่มcode ว่า mobile = 'yes' เข้าไป

<b:widget id='HTML1' locked='false' mobile='yes' title='Recent Posts' type='HTML' visible='true'>

ขั้นที่ 4 กดเซฟแล้วลองเช็คหน้าตาบล็อคของเราจากทางมือถือได้เลยค่ะ

ซึ่งวิธีนี้เราสามารถประยุกต์ใช้กับ widget อื่นๆได้หมดเลย ตราบใดที่สคริปของเราซัพพอร์ตกับหน้าเว็ปแบบมือถือค่ะ นอกจากนี้ยังสามารตั้งค่าไม่ให้แสดงผลทางมือถือ ด้วยการใช้ mobile = no หรือ ให้แสดงเฉพาะมือถือเท่านั้น mobile = only ได้เล่นกันค่ะ

ยกตัวอย่าง เราต้องการให้ widget ที่เลือกแสดงผลเฉพาะ mobile เท่านั้น

<b:widget id='HTML2' locked='false' mobile='only' title='Recent Posts' type='HTML' visible='true'>


หวังว่าจะเป็นประโยชน์กับเพื่อนๆนะคะ

No comments:

Post a Comment