ทริปสร้างเว็บ

การปรับลดขนาดนาฬิกา

 โดยปกติแล้วถ้าเรา copyโค้ดมา ภาพจะมีขนาดใหญ่ จากนั้นเราก็ลดขนาดลงให้ดูเหมาะสมกับBlogของเราได้ โดยไปแก้ไขที่ width="150"และ height="150" เราจะลดขนาด width="50" และ height="50"ได้ดังรูปนี้ 

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

สวัสดีครับ ไม่ได้อัพบทความซะนานเลยผม ไม่รู้ว่าหายกันไปหมดหรือยัง วันนี้ผมมีลูกเล่นอีก 1 อย่างมานำเสนอ ให้เพื่อนๆ ได้เอาไปใช้งานกัน นั้นก็คือ Slideshow ที่สร้างด้วย jQuery นั้นแหละครับ แต่ ! มันจะทำงานได้ก็ต่อเมื่อ เบราเซอร์ นั้นๆ รองรับ Javascript ด้วยนะครับ เอาหละครับ มาเรื่มกันเลยดีกว่า…

ก่อนอื่นเราต้องมาเตรียมเครื่องไม้เครื่องมือกันก่อนนะครับ เนื่องจากว่าต้องใช้สคริป 2 ตัวที่ชื่อjquery.js และ s3Slider. js มาใช้งานร่วมกันด้วยครับ ดาวน์โหลดได้ที่นี้ครับ >>คลิก<< หรือหากต้องการศึกษาหาข้อมูลเพิ่มเติมก็หาอ่านได้จากที่นี้เลยครับ >>คลิก<< เสร็จแล้วก็มาเริ่มลงมือในบล็อกของเรากันครับ

1.เริ่มแรก หลังจาก Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)

2.นำ Code ด้านล่างไปวางไว้ในตำแหน่งก่อนที่จะปิด Tag &lt;/head&gt; นะครับ แล้วอย่าลืมแก้ตรงที่เป็นสีแดง ให้ชี้ไปยังต่ำแหน่งที่คุณเอาไฟล์ไปไว้ในโฮสนะครับ (หากใครไม่มีโฮสอ่านต่อด้านล่างนะครับ)

<script src=' http://./jquery.js ' type='text/javascript'/>         
<script src=' http://./s3Slider.js ' type='text/javascript'/>         
<script type='text/javascript'>         
//<![CDATA[         
on() {         
$('#slider1').s3Slider(
$(document).ready(funct
i{         
5000         
timeOut:
);         

}});         
</script&g
//]]>     
t;

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

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

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

}});       
</script
//]]>   
>

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

#slider1 {      
width:525px; /* To be same as image width */       
height:237px; /* To be same as image height */       
position: relative;       
rder:1px solid #eee;    
overflow: hidden;       
b
o   
margin:0 auto;       
} 
#slider1Content {      
width:525px; /* To be same as image width or wider */       
position: absolute;       
top: 0;       
adding:0;       
}     
list-style:none;       
margin:0;       

p  
.slider1Image {       
float: left;       
}       
.slider1Image s
position: relative;       
display: none;     
 pan {       
position: absolute;       
rif;       
padding: 10px 13px;       
width:550px; 
font: 10px/15px Arial, Helvetica, sans-s
e      
background-color: #000;       
filter: alpha(opacity=70);       
color: #fff;       
dis
-moz-opacity: 0.7;       
-khtml-opacity: 0.7;       
opacity: 0.7;     
 play: 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>       
<strong> 
<span>     
Title ที่จะให้แสดง </strong>       
<br/>       
description ที่จะให้แสดง       
</span>       
</li> 
"slider1Image">      
<a href='
<li class
= http://ลิ้งที่เราต้องการลิ้งไป '>       
<img alt="some image" src=" http://ลิ้งของรูปภาพที่ต้องการแสดง"/>       
</a>       
<strong> 
<span>     
Title ที่จะให้แสดง </strong>       
<br/>       
description ที่จะให้แสดง       
</span>       
</li> 
="clear slider1Image"></div>      
</ul> 
<div clas
s      
>
</di
v

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

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

วิธีการทำ ตัวแสดงจำนวนบทความและคอมเม้นทั้งหมดของบล็อกเรานะครับ หรือใครจะเอาแค่อย่างใดอย่างนึงก็ได้เช่นกัน วิธีการนี้ก็เป็นอะไรที่สุดแสนจะง่ายอีกเช่นเคยครับ เราจะมาพึ่ง 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 เอาได้เลยครับ)