คุยกันก่อนนะครับ

คุยกันก่อนนะครับ
20 ม.ค. 2560

การสร้างแถบแสดงบทความที่มีคนอ่านมาก (Post Recent)

0 ความคิดเห็น
 


วันนี้ จะมาแนะนำเทคนิคการจัดลำดับบทความในบล็อกหรือ Recent Post  เพื่อแสดงถึงสถิติของบทความที่มีผู้อ่านสนใจมากที่สุด 

โดยมีวิธีการดังนี้

1.กำหนดตำแหน่งที่จะวาง (ควรมีพื้นที่ ที่สามารถแสดงผลได้กว้างหน่อย ที่ ที่เหมาะสม ควรอยู่ใต้บริเวณของรายการบทความ ซึ่งก็คือตำแหน่งใต้บทความบล็อก)

2.ไปที่หน้าควบคุมระบบบล็อกหรือแดชบอร์ด (Dashboard)

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


4.ดูที่แถบข้อความ(อักษรสีฟ้า)คำว่า Add a Gadget (เพิ่ม Gadget) คลิกที่ข้อความดังกล่าว จะเกิดหน้าต่างชื่อ เพิ่ม Gadget ที่แถบรายการ Gadget เพิ่มเติม เลือก HTML/JavaScript

5.Gadget HTML/JavaScript  ดังกล่าวจะมาอยู่ในรายการลำดับแรก ท่านสามารถลากวางไปยังตำแหน่งที่ต้องการได้ตามที่ต้องการ : ซึ่งก็คือ ใต้ บทความบล็อก
6.ทำการ Copy Code ด้านล่าง

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
< /script>
< script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
< /script>
< script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
< a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
< noscript>Your browser does not support JavaScript!</noscript>
< link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
< style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
< /style>


7.กดปุ่ม Save ก็เป็นอัเสร็จเรียบร้อย

Readmore...
12 ม.ค. 2560

การเพิ่ม contact form สำหรับติดต่อผู้เขียนบล็อก

0 ความคิดเห็น
 
ช่วงปลายปี 2559 ที่ผ่านมา Blogger มีการเปลี่ยนแปลงเครื่องมือ Widget รวมถึงการแสดงผลบน smartphone ที่รวดเร็วมากขึ้น อีกสิ่งหนึ่งที่ปรากฏในรายการ Gadget ก็คือ contact form สำหรับติดต่อผู้เขียนบล็อก นับได้ว่า Blogger ได้สร้างเครื่องมือที่ทรงพลังในการเชื่อมโยงการติดต่อสำหรับผู้อ่านไปสู่ผู้ดูแลบล็อกได้รวดเร็วยิ่งขึ้น เรามาดูวิธีการเพิ่มเติม Gadget นี้กัน


1. ไปที่หน้าควบคุมระบบบล็อกหรือแดชบอร์ด (Dashboard)

2. ที่เมนูรายการด้านซ้าย เลือกรายการ รูปแบบ หรือ Layout  จะเกิดผังแม่แบบของบล็อก ให้ไปตำแหน่งหรือบริเวณที่จะเพิ่ม ส่วนติดต่อผู้เขียน


3. ดูที่แถบข้อความ(อักษรสีฟ้า)คำว่า Add a Gadget (เพิ่ม Gadget) คลิกที่ข้อความดังกล่าว จะเกิดหน้าต่างชื่อ เพิ่ม Gadget ที่แถบรายการ Gadget เพิ่มเติม เลือก รายการ ฟอร์มรายชื่อติดต่อ

4. Gadget contact form (ฟอร์มรายชื่อติดต่อ) ดังกล่าวจะมาอยู่ในรายการลำดับแรก ท่านสามารถลากวางไปยังตำแหน่งที่ต้องการได้ตามที่ต้องการ


5.ทำการบันทึกการเปลี่ยนแปลงด้วย

6. ทดสอบ Preview ท่านก็จะได้ contact form สำหรับติดต่อผู้เขียนบล็อก ดังภาพด้านล่าง


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

Readmore...

แบบประเมินความพึงพอใจ

++ ความคิดเห็นจากเพื่อน Facebook

สาระ เนื้อหา เรื่องราว ที่ปรากฎอยู่ในบล็อกแห่งนี้ จัดทำขึ้นเพื่อรวบรวมผลงาน แนวคิด จากการศึกษาเรียนรู้ และประสบการณ์ในการทำงาน รวมถึงการนำมาจากแหล่งข้อมูลอื่น(ซึ่งจะแจ้ง links ต้นทาง) นำมาเผยแพร่ให้กับท่านที่สนใจ ผ่านช่องทางและเวทีบล็อกแห่งนี้ หากท่านต้องการที่จะแนะนำ หรือแสดงความคิดเห็นที่เป็นประโยชน์ในการจัดทำบล็อกความรู้นี้ ติดต่อพูดคุย(ฝากข้อความ) ได้นะครับ
ขอบคุณที่กรุณาเข้าเยี่ยมชม
mediathailand