Gadget สุ่มบทความอัตโนมัติแบบ Headline News

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

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

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 8px;
border: 1px solid #AAAA8A;
}
.gfg-title {
font-size: 16px;  /* ขนาดอักษรที่หัว */
font-weight : bold;
color : #EDECEC;
background-color: #8F8383; /* สีพื้นหลังที่หัว */
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #360000;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #E5A835;
background-color: #9DA278;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}
.gfg-subtitle a {
color : #DDB06F;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/* FeedControl customizations.*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 12px; /* ขนาดอักษรหัวข้อบทความ */
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #ACACAC;
margin-top : 3px;
}

/*Easy way to get horizontal mode, applicable via js options to gadget.*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 10px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */

.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}

/* FeedControl customizations.*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 500 px; /* ขนาดของ Gadget */
font-size: 10px;
color: #920000; /* สีของอักษรขณะรอโหลด */
}
</style>
<noscript><a href=http://ใส่ชื่อบล็อกของคุณ.blogspot.com target="_blank">Blogger Hacks</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://ใส่ชื่อบล็อกของคุณ.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "ใส่หัวเรื่องของคุณ"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://ใส่ชื่อบล็อกของคุณ.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
<div id="feedGadget">ใส่ข้อความขณะรอดาวน์โหลดครับ</div>

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

หากมีข้อสงสัยเชิญสอบถามได้เลยครับ
ที่มา http://www.hackublog.com/2009/11/gadget-headline-news.html

วิธีแสดง Random Post บน Blogger

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

ขั้นตอนการติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ  >> องค์ประกอบหน้า >> Add Gadget >> เลือก Gadget ชนิด HTML/จาวาสคริปต์

จากนั้นวางโค้ดด้านล่างนี้ลงไป ตั้งชื่อ Gadget นี้ และบันทึก

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

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

วิธีทำให้บทความที่ต้องการอยู่หน้าแรกเสมอ

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



ขั้นที่ 1 ไปที่แผงควบคุม >> แก้ไขบทความ แล้วเลือกแก้ไขบทความที่ต้องการ



ขั้นที่ 2  ให้สังเกตเมนูด้านล่างของการเขียน/แก้ไขบทความ  จะมีเมนูชื่อว่า ตัวเลือกของบทความ 

ขั้นที่ 3 ให้แก้วันที่ของบทความที่ต้องการแสดงในหน้าแรก เป็นวันที่หลังจากวันที่ของบทความสุดท้าย (ถ้าอยากให้อยู่หน้าแรกเสมอจริงๆ ก็แก้ คศ. ให้เป็นปีหน้าเลยก็ได้ครับ)



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

วิธีแสดงบทความที่เกี่ยวข้องพร้อมรูปประกอบ (Related Article with thumbnail)

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

วิธีสร้าง

ขั้นที่ 1 ไปที่แผงควบคุม >> รูปแบบ    >>  แก้ไข HTML   >> ขยายแม่แบบเครื่องมือ

ขั้นที่ 2 ให้ค้นหาโค้ด  </head>  แล้วแทนที่ด้วยโค้ดต่อไปนี้

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://hackublog.googlecode.com/files/related-with-thumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>



ขั้นที่ 3 ต่อไปให้ค้นหาโค้ดที่มีลักษณะคล้ายหรือเหมือนกับ

<div class='post-footer-line post-footer-line-1'>

หรือพยายามหาโค้ดแบบนี้

<p class='post-footer-line post-footer-line-1'>
แล้ววางโค้ดต่อไปนี้ต่อจากโค้ดดังกล่าว
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://hackublog.blogspot.com/2009/09/blog-post_30.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://hackublog.blogspot.com' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->



หมายเหตุ  อักษรสีแดงสามารถแก้ไขได้ เช่น เลข 5 กำหนดว่าจะแสดงบทความที่เกี่ยวข้อง 5 บทความ และคำว่า Related Posts สามารถแก้ไขได้อย่างเช่นบล็อกของผมแก้เป็นคำว่า บทความที่เกี่ยวข้อง

ปล.เสร็จแล้วอย่าลืมบันทึกแม่แบบด้วยนะครับ และเช่นเคยถ้าแก้แล้วกลัวพลาดให้ ทำการสำรองแม่แบบก่อนแก้ไข HTML นะครับ ที่มา : bloggerplugins.org

วิธีทำ Automatic Read more ให้บทความบน Blogger

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

ขั้นที่ 1 ไปที่ แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ

ในขั้นที่ 1 นี้เราจะ back up แม่แบบ ไว้ก่อนก็ได้นะครับ (กันพลาด)

ขั้นที่ 2 มองหาโค้ด </head> (ถ้าหาไม่เจอใช้ Ctrl+F ช่วยค้นหา) แล้วแทนที่ด้วยโค้ดด้านล่างนี้

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://siiam.bravehost.com/excerpt.js' type='text/javascript'/>
</head>

การปรับแต่ง :
summary_noimg = 230; คือจำนวนอักษรที่จะแสดงเป็นตัวอย่าง เมื่อบทความนั้นไม่มีรูปประกอบเลย
summary_img = 140; คือจำนวนอักษรที่จะแสดงเป็นตัวอย่าง เมื่อบทความนั้นมีรูปประกอบ
img_thumb_height = 100; และ img_thumb_width = 100; คือความกว้างและความยาวของรูปตัวอย่าง

ขั้นที่ 3 ค้นหาโค้ด <data:post.body/> (ถ้าหาไม่เจอใช้ Ctrl+F ช่วยค้นหา) แล้วแทนที่ด้วยโค้ดด้านล่างนี้


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>


เป็นอันจบขั้นตอนครับ คราวนี้บล็อกของเราก็ดูสบายตาขึ้นไม่ต้องลากยาวไปอ่านด้านล่างอีกแล้วครับ

หมายเหตุ : คำว่า Read more >> สามารถแทนด้วยภาพหรือ เปลี่ยนเป็นข้อความอื่น ๆ ก็ได้ตามใจคุณ

เช่น บล็อกของผมใช้ภาพแทน ถ้าอยากเอาไปใช้บ้างก็ใช้โค้ดด้านล่างนี้ครับ

<img title="readmore" src="http://upic.me/i/co/indexpostbutton2.gif" />