Tech & Tips

การแสดงจำนวนบทความและคอมเม้นทั้งหมดในบล็อกของเรา

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

<script src="http://beginsign.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numposts"></script><script src="http://beginsign.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numcomments"></script>
ในส่วนนี้เป็น Code ที่เราจะเรียกใช้งานไปยัง javascript ที่ชื่อว่า JSON นะครับ หากใครต้องการแสดงแค่อย่างใดอย่างหนึ่งก็เลือกเอานะครับ แล้วอย่าลืมเปลี่ยน url ตรงสีแดงนะครับ

<script style="text/javascript">function numposts(json) { document.write('This blog has ' + json.feed.openSearch$totalResults.$t + ' posts'); }function numcomments(json) { document.write(' and ' + json.feed.openSearch$totalResults.$t + ' Comments'); }</script>

แล้วก็ทำการสร้าง Gadget แบบ HTML/Javascript ขึ้นมาหนึ่งอันครับ แล้ว Copy Code ทั้ง 2อันนี้ไปวาง ก็เรียบร้อยแล้วครับ(หรือหากใครต้องการไปวางส่วนอื่นๆของบล็อกก็แทรก code ใน template เอาได้เลยครับ)

 การทำ Slideshow แบบงามๆ ด้วย jQuery ให้กับ Blogger

สวัสดีครับ ไม่ได้อัพบทความซะนานเลยผม ไม่รู้ว่าหายกันไปหมดหรือยัง วันนี้ผมมีลูกเล่นอีก 1 อย่างมานำเสนอ ให้เพื่อนๆ ได้เอาไปใช้งานกัน นั้นก็คือ Slideshow ที่สร้างด้วย jQuery นั้นแหละครับ แต่ ! มันจะทำงานได้ก็ต่อเมื่อ เบราเซอร์ นั้นๆ รองรับ Javascript ด้วยนะครับ เอาหละครับ มาเรื่มกันเลยดีกว่า…
ก่อนอื่นเราต้องมาเตรียมเครื่องไม้เครื่องมือกันก่อนนะครับ เนื่องจากว่าต้องใช้สคริป 2 ตัวที่ชื่อ jquery.js และ s3Slider. js มาใช้งานร่วมกันด้วยครับ ดาวน์โหลดได้ที่นี้ครับ >>คลิก<< หรือหากต้องการศึกษาหาข้อมูลเพิ่มเติมก็หาอ่านได้จากที่นี้เลยครับ >>คลิก<< เสร็จแล้วก็มาเริ่มลงมือในบล็อกของเรากันครับ
1.เริ่มแรก หลังจาก Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)
2.นำ Code ด้านล่างไปวางไว้ในตำแหน่งก่อนที่จะปิด Tag &lt;/head&gt; นะครับ แล้วอย่าลืมแก้ตรงที่เป็นสีแดง ให้ชี้ไปยังต่ำแหน่งที่คุณเอาไฟล์ไปไว้ในโฮสนะครับ (หากใครไม่มีโฮสอ่านต่อด้านล่างนะครับ)
&lt;script src=' http://./jquery.js ' type='text/javascript'/&gt; 
 &lt;script src=' http://./s3Slider.js ' type='text/javascript'/&gt;
 &lt;script type='text/javascript'&gt; 
 //&lt;![CDATA[
 $(document).ready(function() { 
 $('#slider1').s3Slider({
 timeOut: 5000 
 }); 
 }); 
 //]]&gt; 
 &lt;/script&gt;

2.1 สำหรับผู้ที่ไม่มีโฮสนะครับ ผมเห็นถามกันมาหลายคนจากบทความก่อนๆ หน้านี้ 
เราสามารถทำได้ง่ายๆ เลยนะครับ แต่ที่ไม่แนะนำ เพราะมันจะทำให้หน้า 
บล็อกของเราทำงานช้าครับ ถ้าให้ดีหาโฮสฟรีกมาใช้ก็ได้

วิธีทำสำหรับคนที่ไม่มีโฮสนะครับ ให้ทำการเปิดไฟล์ jquery.js และ s3Slider. js ด้วยอะไรก็ได้ครับ ตามถนัดเลย Notepad ก็ได้ แล้วทำการ Copy ข้อมูลทั้งหมดในนั้น *ทั้ง 2อัน มาวางทับตรงที่ผมเน้นสีแดงไว้ทั้งหมด  ผมเน้นแล้วนะครับว่าสีแดงทั้งหมด ตาม Code ด้านล่างเลยนะครับ

<script type='text/javascript'>      
//<![CDATA[       
/* Copy ข้อมูลทั้งหมดมาวางที่นี้นะครับ */       
//]]>       
</script>       
<script type='text/javascript'>       
//<![CDATA[       
$(document).ready(function() {       
$('#slider1').s3Slider({       
timeOut: 5000       
});       
});       
//]]>       
</script>

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

#slider1 {      
width:525px; /* To be same as image width */       
height:237px; /* To be same as image height */       
position: relative;       
overflow: hidden;       
border:1px solid #eee;       
margin:0 auto;       
} 
#slider1Content {      
width:525px; /* To be same as image width or wider */       
position: absolute;       
top: 0;       
list-style:none;       
margin:0;       
padding:0;       
}       
.slider1Image {       
float: left;       
position: relative;       
display: none;       
}       
.slider1Image span {       
position: absolute;       
font: 10px/15px Arial, Helvetica, sans-serif;       
padding: 10px 13px;       
width:550px;       
background-color: #000;       
filter: alpha(opacity=70);       
-moz-opacity: 0.7;       
-khtml-opacity: 0.7;       
opacity: 0.7;       
color: #fff;       
display: none;       
bottom:0;       
}       
.clear {       
clear: both;       
}       
.slider1Image span strong {       
font-size:14px;       
}

ตอนนี้เสร็จขั้นตอนในหน้าแก้ไข HTML แล้วครับ กด Save ได้เลยครับ แล้วไปต่อกันที่ องค์ประกอบของหน้า


4.มาที่ องค์ประกอบของหน้านะครับ แล้วเลือกเพิ่ม Gadget แบบ html/javascript ขึ้นมา 1อัน แล้วเอาวางไว้ด้านบน บทความบล็อก (หรือหากใครอยากไว้ตรงไหนก็ปรับแต่งตามใจชอบได้เลยครับ) แล้วนำ Code ด้านล่างนี้ไปวางนะครับ

<div id="slider1">      
<ul id="slider1Content"> 
<li class="slider1Image">      
<a href=' http://ลิ้งที่เราต้องการลิ้งไป/ '>       
<img alt="my image" src=" http://ลิ้งของรูปภาพที่ต้องการแสดง/"/>       
</a>       
<span>       
<strong> Title ที่จะให้แสดง </strong>       
<br/>       
description ที่จะให้แสดง       
</span>       
</li> 
<li class="slider1Image">      
<a href=' http://ลิ้งที่เราต้องการลิ้งไป/ '>       
<img alt="some image" src=" http://ลิ้งของรูปภาพที่ต้องการแสดง/"/>       
</a>       
<span>       
<strong> Title ที่จะให้แสดง </strong>       
<br/>       
description ที่จะให้แสดง       
</span>       
</li> 
<div class="clear slider1Image"></div>      
</ul>       
</div>

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

 

การทำ counter นับจำนวนผู้เข้าชมเว็บไซต์

สำหรับผู้ที่ทำเว็บเพจการใช้ counter ฟรีที่มีให้บริการตามที่ต่าง ๆ ก็ดูสวยดี แต่หากต้องการที่จะทำการนับจำนวนผู้ที่เข้าชมเว็บเพจของเราในแต่ละหน้าแยกจำนวนออกจากกันจะทำอย่างไร พอดีไปเจอ CGI ทำcounter แบบง่ายๆ และเห็นว่าน่าใช้งานดีเลยถือโอกาสนี้นำมาฝากกัน ก็สำหรับผู้ที่ใช้โฮสต์แบบที่รองรับ CGI เช่น Hypermart.netเท่านั้นโดยได้นำมาจาก http://www.utilmind.com ซึ่งมีความสามารถพิเศษคือเป็นcounter แบบตัวเลขที่ทำงานโดยการเรียกCGI โดยไม่ต้องระบุอะไรโปรแกรมจะทำการตรวจสอบชื่อของไฟล์ html ที่เรียกและสร้างฐานข้อมูลสำหรับการนับพร้อมทั้งแสดงผลเป็นตัวเลขได้ทันที ดูตัวอย่างการทำงานได้จากการนับจำนวนผู้เข้าชมในแต่ละหน้าที่ด้านล่างขวามือ  การใช้งานและติดตั้งก็ง่ายมากๆ โดยทำตามขั้นตอนต่อไปนี้

1. ดาวน์โหลด source code และทำการunzip เก็บไว้ในโฟล์เดอร์/cgi-bin/counter/

2. ไฟล์ข้างในจะประกอบด้วยcounter.cgi คือไฟล์ที่เป็น cgi สำหรับรัน

counter.txt คือไฟล์สำหรับเก็บข้อมูลการนับindex.html คือตัวอย่างการใส่code สำหรับการเรียกcounter.cgi

3. ทำการupload ทั้งหมดไปเก็บไว้ที่Server ของhypermart โดยใช้

FTP Program

4. ไฟล์ counter.cgi ขณะที่ Upload ต้องเลือก mode แบบASCII ด้วยและเปลี่ยน mode เป็น 755 ก่อน

5. ที่หน้าเว็บเพจไหน หากต้องการทำการนับจำนวนให้หาที่ว่างๆใส่ code นี้ลงไป

จำนวนผู้เข้าชม <!--#include virtual="/cgi-bin/counter/counter.cgi"--> ครั้ง

หรือดูตัวอย่างจากไฟล์ index.html ที่ดาวน์โหลดไปก็ได้

6. ตรวจสอบใน source code ของไฟล์ html ก่อนว่าไม่มีสัญญลักษณ์ต่างๆ ปะปนอยู่ด้วย

7. หลังจากนั้นโปรแกรมจะทำงานโดยอัตโนมัติเมื่อมีผู้เรียกดูหน้าเว็บเพจ

โดยที่เราไม่ต้องระบุชื่อไฟล์ html เลย

8. สามารถตรวจสอบจำนวนของ counter ได้โดยการเรียกดูไฟล์/cgi-bin/counter/counter.txt