วิธีการทำ 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 นะครับ เพราะผมก็ไม่รู้ว่าจะเขียนเรื่องอะไร ><” เรื่องนี้ก็เพิ่งมีคนขอมาเช่นกัน ถึงได้ฤกษ์มาเขียน

อ่านต่อ “วิธีการทำ Slideshow แบบงามๆ ด้วย jQuery ให้กับ Blogger”

ทำบุญวันเกิด : Keyword ตามกระแสแฟนคลับ TSB

จริงๆ ตั้งแต่วันแรกที่ผมได้อ่าน โครงการ การแข่งขัน คีย์ “ทำบุญวันเกิด” ผมก็คิดอยากลองทำดูเล่นๆ เหมือนกันครับ แต่ก็ล้มเลิกความคิดนั้นไป จนเมื่อคืนนี้ได้แวะไปอ่าน บล็อกของท่านหนึ่งมา ที่ทำใน คีย์ “ทำบุญวันเกิด” อ่านแล้วไม่รู้มันเป็นยังไง เหมือนมันมีอะไรจูงใจ ให้ผมอยากมาลองทำดูบ้าง แต่ยังไงซะผมก็คงไม่กล้าไปลงชื่อร่วมวงกับเค้าหรอกครับ ขอเล่นคนเดียวเงียบๆ แบบนี้ดีกว่า แล้วอีกอย่าง คีย์ “ทำบุญวันเกิด” ที่เค้ากำหนด เนื้อหาในเว็บนั้นๆ จะต้องมีประโยชน์ ประมาณว่าทำเพื่อสังคมอะไรงี้อะ แต่ “ทำบุญวันเกิด” ของผมมันออกแนวๆ บ่นๆ ให้คนฟังซะมากกว่า อิอิ จาก บทความนี้ผมจะไม่ทำการ Submit หรือโปรโมทใดๆ ทั้งสิ้น แล้วเดียวอีกซัก 2 อาทิตย์ค่อยมาดูกันครับว่า คีย์ “ทำบุญวันเกิด” ของผมมันจะได้เรื่องว่ายังไงบ้าง

ปล.ภายในวันสองวันนี้ จะมาอัพเด็ทบทความ วิธีการทำ Image Slider ด้วย jquery กันนะครับ อย่าลืมติดตามกันนะครับ ( เพื่อนๆ ใน TSB เค้าขอมาผมก็จัดให้ O_O )

อ่านต่อ “ทำบุญวันเกิด : Keyword ตามกระแสแฟนคลับ 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 เลยคิดดู –.-

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

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

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

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

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

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

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

วิธีทำ navigation bar ให้กับ Template

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

2.Copy Code ด้่านล่างไปไว้ในส่วนของ CSS ไม่รู้ว่าไว้ตรงไหนดู ภาพประกอบ

/* navigation links css code      
----------------------------------------------- */       
#topnav {       
height:40px;       
}       
#topnav ul {       
float:left;       
width:100%;       
padding:0;       
margin:0;       
list-style-type:none;       
}       
#topnav a {       
padding:3px 7px 3px 7px;       
float:left;       
text-decoration:none;       
color:#000;       
margin:9px 10px 0 0;       
}       
#topnav a:hover {       
color:#666;       
}       
#topnav li {       
display:inline       
}

ไม่รู้ว่าไว้ตรงไหนดี ไว้ตามรูปภาพเลยครับ



3.กดค้นหา Code นี้ <div id='content-wrapper'> และนำ Code ด้นล่างมาว่างไว้ด้านบนของ Tag นี้

<div id='topnav'>    
<ul>     
<li><a href='/'>Home</a></li>     
<li><a href='#'>Contact</a></li>     
<li><a href='#'>Link 3</a></li>     
<li><a href='#'>Link 4</a></li>     
</ul>     
</div>

ดูภาพประกอบ ด้านล่าง ไปด้วยก็ได้ครับ



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

อ่านต่อ “วิธีทำ navigation bar ให้กับ Template”

วิธีทำ Readmore และ Thumbnail แบบอัตโนมัติ

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

2.ดาวน์โหลด File นี้ไปอัพไว้ในโฮสของท่าน
http://www.box.net/shared/zhdx2j6v3b

3.จากนั้น Coppy Javascript ดังต่อไปนี้ เอาไปวางไว้ก่อนปิด Tag </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='ใส่ลิ้งของไฟล์ที่ท่านโหลดไปอัพไว้ในข้อ 2 ตรงนี้'/>

ท่านสามารถตั้งค่าของภาพ Thumbnail ได้ที่
img_thumb_hieght = ความสูง
img_thumb_width = ความกว้าง

4.ต่อด้วยการ search หาคำว่า <data:post.body/> และแทนที่ด้วย Code Javascript ด้านล่าง

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>
</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

กดบันทึก ได้เลยครับ เรียบร้อยแล้ว ไป preview ดูหน้าบล็อกของตัวเองจะเห็นว่ามันจะตัดให้เป็น Read More และดึงรูปมา แบบ Auto ให้ทุกโพสต์ เลย หละครับ

อ่านต่อ “วิธีทำ Readmore และ Thumbnail แบบอัตโนมัติ”