วิธีการทำ 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[         
$(document).ready(function() {         
$('#slider1').s3Slider({         
timeOut: 5000         
});         
});         
//]]>         
</script>

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

วันนี้ไปก่อนหละครับ เหมือนเดิมนะครับ ใครอยากให้เขียนเรื่องอะไรก็ pm ทิ้งไว้ที่ TSB นะครับ เพราะผมก็ไม่รู้ว่าจะเขียนเรื่องอะไร ><” เรื่องนี้ก็เพิ่งมีคนขอมาเช่นกัน ถึงได้ฤกษ์มาเขียน

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

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


ผมไปก่อนครับ 6 โมงเช้าพอดี ใครอยากให้เขียนวิธีปรับแต่งอะไร คอมเม้น ไว้ได้นะครับ

วันนี้จะมาสอนวิธีที่ ฝรั่ง เค้าเรียกกันว่า Hack Blogger (กล้าเนอะ)

 

วันนี้จะเขียนเกี่ยวกับวิธีเอา Navbar ของ Blogspot ออกกันครับ แต่ๆ ! ก่อนอื่นต้องบอกก่อนนะครับว่าการที่เราไปเอาออกเนี้ย มันผิด TOS ของเค้านะครับ อ่านรายละเอียดเพิ่มเติมได้ที่นี้ครับ คลิก เอาละครับวิธีการ นั้นมันง่าย สุดแสนจะง่าย อย่างไม่น่าเชื่อ :)

1.ก็ไปที่หน้า "รูปแบบ" เช่นเคยนะครับ แล้วเลือกที่ "แก้ไข html" แล้วก็ตามด้วย "ติ๊ก Checkbox ขยายแม่แบบเครื่องมือ"

2.นำเอา Code นี้ไปวางตรงไหนก็ได้ ให้อยู่ภายใน tag <b:skin> ในนี้ครับ </b:skin> คือในส่วนของ css นั้นแหละครับ

#navbar, #navbar-iframe {
visibility:hidden;
height:0;

หรือถ้ายังง่ายไม่พอหา Code นี้ครับ แล้ว แก้ให้เป็น 0px ให้หมดนะครับ

#navbar-iframe {
margin:0 0 20px 0;

เสร็จแล้วครับ นี้แหละที่ผมไปเจอมา ฝรั่ง เค้าเขียนชื่อบทความประมาณว่า Hack Blogger เลยคิดดู –.-

มาเอา ปุ่ม quickedit ที่แสนจะกวนใจ (ฉัน) ออกกันเถอะครับ

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

2.ทำการเพิ่ม โค็ดนี้ .quickedit{display:none;} ลงไปในส่วนของ CSS ครับ แทรกไว้ตรงไหนก็ได้ แล้วทำการ Save ครับ

3.ไปที่หน้า การตั้งค่า/ขั้นต้น แล้วหาหัวข้อ แสดงการแก้ไขอย่างรวดเร็วบนบล็อกของคุณหรือไม่ ให้เลือกเป็น ไม่ แล้วทำการ Save ครับ

แค่นี้เองครับ เสร็จแล้วครับ ทีนี้ก็ไม่มีไอ้ปุ่มที่แสนจะกวนใจ (ฉัน) อีกต่อไปแล้วครับ :)