5 Steps: สร้าง Gallery บนBlog Header

posted on 02 Jan 2013 09:32 by verellie in Blogging directory Tech, Idea
วันนี้ไม่ได้มารีวิวหนังสือหรือหนังค่ะ!
วันนี้เขียนฮาวทูนะ! ฮาวทู! >_<
 
 
หลังจากเมื่อวานเปลี่ยนธีมใหม่และเขียนฟังก์ชั่นเล่น
(เอ็งว่างมากนะ...เขียนโปรแกรมที่บ.อย่างเดียวไม่พอใช่มั้ย...)
เห็นว่าทำง่ายดี วันนี้เลยมาเขียนฮาวทูแบ่งปันค่ะ
 
 
ใครยังไม่เห็นธีมใหม่ รีเฟรชๆ
ถ้าลองจิ้มๆ เล่นดูจะเห็นว่า เวลาเอา cursor ไปชี้ที่ pages หรือ links ภาพตรงหัวบล็อกก็จะเปลี่ยนไปค่ะ
อันนี้คือทำเล่น พอมานั่งคิดๆ ดูว่ามันสามารถทำเป็น gallery ได้เลยนะเนี่ย เลยลองทำขึ้นมาจริงๆ ค่ะ
 
 
 
 
ตย. เฮดบล็อกที่กลายเป็นแกลลอรี่เรียบร้อยแล้ว
 
 
 
Live Demo:
ลองไปจิ้มๆ เล่นได้ที่ http://mrfriday.exteen.com/
ต่อไปถ้าเราเปลี่ยนธีมคงจะจิ้มเล่นไม่ได้แล้ว แต่คงไม่เปลี่ยนธีมบ่อยค่ะ ขี้คร้าน : P
 
 
 
 
 
STEP 1: เราจะใช้ธีมของ Exteen เป็นพื้นค่ะ เลือกธีม New Horizons นะคะ
ลายมือก็งามมาก... ส่วนประกอบจะมี Header(h1, h2, coverimage), Neck, Belly บลาๆ อย่างที่เห็นค่ะ
 
 
 
Step 2: เราจะเลื่อน Neck ไปติดกับ Header ค่ะ เวลาแก้เลย์เอาท์ จะแก้ด้วยโค้ด CSS
เปิดหน้า CSS Editor ขึ้นมาแล้วหา #neck ให้เจอ แล้วแก้ให้เหมือนข้างล่าง
 
Code 2.1#
 
#neck{
    background:#EEE;
/*    height:43px;*/
    -webkit-border-radius: 5px 5px 0 0;
    -khtml-border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    box-shadow:0 1px 2px #AAAAAA;
    color: #a4a5aa;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom:15px;  /*จุดที่แก้คือ ณ บรรทัดนี้ เปลี่ยน top เป็น bottom ค่ะ*/
}
 
ถ้ารีเฟรชดูก็จะเห็นว่า Neck เลื่อนไปติดกับ Header แล้ว แต่หน้าตายังด่างพร้อยอยู่
ตอนนี้ก็แก้ CSS ตามใจชอบค่ะ จะลบ Border จะปรับขนาดอะไรก็ได้
หรือแก้ตามโค้ดด้านล่างนี้เลยก็ได้ค่ะ
 
Code 2.2#
 
#header{
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #BBBBBB;
    border-bottom: none; /*เอากรอบด้านล่างออกเพราะจะเชื่อมกับ neck*/
    border-radius: 5px 5px 0 0;
    /*เมื่อแก้ 5 สองตัวหลังเป็น 0 มุมเฮดเดอร์ด้านล่าง
    จากที่มนๆ กลมๆ จะกลายเป็นสี่เหลี่ยมค่ะ*/
    /*box-shadow: 0 1px #EEEEEE, 0 0 0 1px #FFFFFF inset;*/
    /*จุดที่แก้คือใส่ "/*" กับ "*/" คือการเปลี่ยนโึ้ค้ดเป็นคอมเม้นต์ ไม่ใช้งานโค้ดบรรทัดนั้น */
    padding-bottom: 10px;
    padding-right: 24px;
    padding-left: 24px;
    padding-top: 0px;
    /*เปลี่ยนจาก padding: 32px 24px; อันนี้แก้ตามใจชอบค่ะ*/
     width: 930px;
    text-shadow:0 1px 0 #FFFFFF;
}
 
 
Code 2.3#
 
#neck{
    background:#EEE;
/*    height:43px;*/
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    border-radius:0px 0px 5px 5px;  /*radius ทั้งหมดคือขอบมน แก้ให้มนที่ก้น*/
    /*box-shadow:0 1px 2px #AAAAAA;*/ /*คอมเม้นต์เอาชาโดว์ออก*/
    border: 1px solid #BBBBBB;
    border-top: none; /*เอากรอบด้านบนออกเพื่อเชื่อมกับ header*/
    color: #a4a5aa;
    font-size: 11px;
    line-height: 1.4;
    margin-bottom:15px;
    width:978px; /*แก้ขนาด*/
}
 
#neck .module{
    display:inline;
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    border-radius:0px 0px 5px 5px;  /*radius ทั้งหมดคือขอบมน แก้ให้มนที่ก้น*/
    /*box-shadow:0 1px #FFFFFF inset, 0 -1px #DDDDDD inset;*/
    float:left;
    /*width:980px;*/
    height:50px;
}
 

/* อย่าลืมแก้ขอบ belly ที่โดนตัดคอออกให้มนๆ นะ!!!*/

#belly{
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow:0 1px 2px #AAAAAA;
    padding:20px;
    position: relative;
    width: 940px;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px; /*เติมบรรทัดนี้เข้าไปเลยค่ะ*/
}
 
เท่านี้เราก็จะได้ เฮดที่มีหัวกับคอต่อกันเรียบร้อย~
 
 
Step 3: แก้ขนาดรูป coverimage หรือขนาดของรูปที่จะใส่เป็น header ค่ะ
ก่อนอื่นก็อัพรูปขึ้นเซิร์ฟเวอร์ให้เรียบร้อย ขนาดรูปอย่าใหญ่มาก ไม่เกิน 100 kb อัพลงเอ็กซ์ทีนเลยก็ได้
จะอัพกี่รูปก็ตามใจเลยค่ะ ในตัวอย่างนี้ใช้ 6 รูป ขนาด 930 x 418 px
(otter1.jpg, otter2.jpg, otter3.jpg, otter4.jpg, otter5.jpg, otter6.JPG)
 
Code 3.1#
 
#coverimage{
    background:url(http://..../otter1.jpg) no-repeat;
    /*ก็อป url ของภาพที่หนึ่งไปแปะในวงเล็บ -> url() */
    overflow:hidden;
    max-height:418px; /*แก้ความสูงของภาพ*/
    max-width:930px; /*แก้ความยาวของภาพ*/
    height:418px!important;/*IE*/ /*แก้ความสูงของภาพ*/
    width:930px!important; /*IE*/ /*แก้ความยาวของภาพ*/
    margin-bottom:5px;
}
 
 
ได้น้องนากมาแล้ว!!
 
 
 
Step 4: จะทำปุ่มดาวไว้กดๆ เลือกรูปล่ะ
ขั้นแรกให้แก้ Widget เอาแถบ page ที่ธีมพื้นฐานจัดวางเอาไว้ออก
แล้วแปะ Custom Code 1 ลงในแถบ Top Menu แทนค่ะ ตามนี้
 
จากนั้นให้ก็อปโค้ดข้างล่างไปใส่ใน Custom Code 1
 
Code 4.1#
 
<div id="hoshi" class="hoshi">
<ul>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
  <li>&#9733;</li>
</ul>
</div>
 
มันคือโค้ด HTML ทำ List ธรรมดาๆ นี่แหละค่ะ ไอ้โค้ดยึกยือๆ ใน <li></li> คือดาวค่ะ...
จะแก้เป็นคำว่าอะไรก็ได้ค่ะ : )
ถ้ารีเฟรชดูเราจะเห็นว่ามีดาวมาแทน pages แล้วแต่ดาวช่างเล็กกะจ้อยร่อย...
 
ไปเปิด CSS Editor อีกรอบเพื่อแต่งดาว
ก็อปโค้ดด้านล่างไปใส่ไว้ท้ายสุดของ CSS ค่ะ อันนี้แก้ตามใจชอบได้เลยแล้วแต่การตกแต่ง
.hoshi หมายความว่าเราจะใช้โค้ดนี้สำหรับ class hoshi เท่านั้น
(เลื่อนไปดู code 4.1 จะเห็นว่าเราเซต class ของ html code ที่ใส่ลงไปเป็น hoshi ค่ะ)
 
Code 4.2#
 
/*================CustomCode Style=============*/
.hoshi {
    margin-left: 17px;
}
.hoshi li{ /*ตกแต่งดาว แก้ตามใจค่ะ*/
    font-size: 35px;
    margin-left:8px;
    color: #00A5F0;
    text-shadow:1px 1px #C0C0C0; 
}
.hoshi li:hover{ /*ตรงนี้เป็นส่วนที่ทำให้เวลาเอาเมาส์ไปชี้แล้ว...*/
    color: #C0C0C0; /*สีดาวเปลี่ยน*/
    cursor: pointer;  /*เปลี่ยน cursor เป็นรูปมือเหมือนจิ้้มลิงค์ แต่จริงๆ ไม่ใช่ลิงค์*/
}
 
 
เสร็จแล้ว ได้ดาวแล้ว
 
 
Step 5: jQuery ค่ะ อย่าสงสัยเลยนะคะว่ามันคืออะไร...
มันคือ Javascript Library (ภาษาคอมพิวเตอร์)ที่รัีนบนเว็บบราวเซอร์
Javascript สามารถจับevent ที่เกิดขึ้นบนเว็บบราวเซอร์เช่น คลิก จิ้ม พิมพ์ ฯลฯ ได้
แต่ต้องทำใจว่าบราวเซอร์รุ่นเก่าๆ อาจจะรันได้ผลไม่เหมือนรุ่นใหม่ๆ ค่ะ เช่น IE 6 ลงไป...
 
ให้ลาก Custom Code 2 หรืออันที่ว่างอยู่ไปแปะไว้ตรงไหนของบล็อกก็ได้ค่ะ
เราแปะใส่ SideBar#1 ไม่ต้องกลัวว่าบล็อกจะเสียเพราะจะมองไม่้เห็นสคริปต์ค่ะ
จากนั้นก็แก้ Custom Code 2 ให้เป็นโค้ดด้านล่าง
 
จะเห็นว่าใน Code4.1 เรากำหนด id = hoshi เอาไว้
ทั้งนี้ก็เพื่อกำหนดว่าให้เปลี่ยนภาพเมื่อคลิกที่ลิสต์ที่เราสร้างไว้เท่านั้นค่ะ
ให้ก็อปปี้ url ภาพที่อัพโหลดไว้ในขั้นตอนที่ 3 มาแปะตามตัวหนาที่น้ำเงินด้านล่างค่ะ
 
Code 5.1#
 
<script>
$(document).ready(function() {
$("#hoshi li").click( //ฟังก์ชั่นจะถูกใช้เมื่อกดที่ li ใน id=hoshi เท่านั้น
    function () {
        var index = $(this).index(); //บรรทัดนี้จะจับว่าuserกดดาวดวงไหนค่ะ
        var imgurl = "";
        switch (index)
        {
            case 0: //ลำดับดาวจะนับจาก 0 นี่คือเคสที่กดดาวดวงที่ 1
                imgurl="url(http://..../otter1.jpg) no-repeat"; //เปลี่ยนรูปเป็น otter 1
                  break;
            case 1: //นี่คือเคสที่กดดาวดวงที่ 2
                imgurl="url(http://..../otter2.jpg) no-repeat"; //เปลี่ยนรูปเป็น otter 2
                  break;
            case 2:
                imgurl="url(http://..../otter3.jpg) no-repeat";
                  break;
            case 3:
                imgurl="url(http://.../otter4.jpg) no-repeat";
                  break;
            case 4:
                imgurl="url(http://..../otter5.jpg) no-repeat";
                  break;
            case 5:
                imgurl="url(http://..../otter6.JPG) no-repeat";
                  break;
        }
        if (imgurl!=""){ //โค้ดส่วนนี้จะเปลี่ยนภาพ header ให้เราค่ะ
            var image = $('#coverimage'); //เลือกว่าเราจะแก้ #coverimage นะ
            image.fadeOut(1000, function () { //1000คือความเร็วที่ภาพวื้บบบเข้า-ออก
                image.css("background", imgurl); //background ของ #coverimage
                image.fadeIn(1000);
                });
        }
    });
});
</script>
 
 
เสร็จแล้ว ลองจิ้มเล่นกันได้เลยค่ะ ต้องคลิกนะคะ แค่เอาเมาส์ไปจ่อไปเปลี่ยนนะ
 
 
 
 
(ถ้าต้องการแบบเอาเมาส์ไปจ่อแล้วเปลี่ยน
ให้เปลี่ยนเป็น hover ค่ะ แล้วเติม function stop กันฟังก์ชั่น trigger 2 ที
//T_T ลองไปศึกษาเล่นๆ กันดูนะคะ มันก็สนุกดีนะ...)
 
 
ส่วนของบล็อกนี้ที่เราให้จิ้ม pages กับ links แล้วเปลี่ยนรูปได้ก็ใช้หลักการคล้ายๆ กันค่ะ
ใครลองทำแล้วไม่เข้าใจถามได้ค่ะ
 
 
สุดท้ายนี้ก็ขอขอบคุณทีมงานเอ็กซ์ทีนที่ทำบล็อกให้เล่นนั่นเล่นนี่ได้เยอะแยะมากมาย XD
สวัสดีปีใหม่ทุกท่านค่ะ
 
 
 
ปล. ภาพน้องนากทั้งหมดเรากูเกิลมาค่ะ : )
ปล. 2 โฆษณาบล็อกที่อัพเมื่อวานซืน รีวิวนิยายตัวเองส่งท้ายปีเก่า

Comment

Comment:

Tweet

ยอดเลยค่ะ

#19 By ปาปิลิโอ on 2013-01-07 17:18

เก๋สุดอะไรสุดเลยค่ะพี่เพอร์ ;v; Hot! Hot! Hot!

#18 By saya chan on 2013-01-07 15:49

มาให้ดาวด้วยอีกคน Hot!

#17 By เมพหมี shakri on 2013-01-07 11:13

 
โฮกกก แจ่มมากๆค่ะะะะ
Hot! Hot! Hot!
ขอรับไปพิจารณาใช้ค่ะ <3
ขอบคุณค่ะ

#16 By さくちゃん on 2013-01-05 13:57

คุณเพอร์สุดยอด!!!  Hot! Hot! Hot! Hot! Hot! /ดันให้ขึ้นฮอตตตต
ปล. ขำเมนต์ @pupumeteor /ลงไปกองกับพื้น

#15 By มาโช on 2013-01-03 19:46

เก่งจังเลยค่ะ
ขอบคุณที่แบ่งปันนะคะ
เป็นเคล็ดวิชาที่เท่ห์จริงๆ ค่ะ
big smile big smile big smile Hot! Hot! Hot!
น้าเคท

#14 By Siamese Kate on 2013-01-03 13:59

สอนละเอียดมาก เห็นสัจธรรมเลยค่ะตอนนี้
ขอบคุณที่สอนกันมากๆเลยนะคะ
ให้ดาวผู้สาวน้ำใจงาม
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#13 By Jiseino on 2013-01-02 20:16

Hot! Hot! Hot!  เจ๋งมากเลยค่ะะะะะะ

#12 By BlackcatZerin on 2013-01-02 17:38

เจ๋งมากค่ะ ทีนี้เราก็สามารถทำแกลลอรี่เจ้าชายทั้งหกได้แล้วสิ  Hot! Hot! Hot! Hot! Hot! Hot!
โอ้ยลืมดาวคต่ะ Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#10 By HOJO on 2013-01-02 15:47

โหหหหหหหหหหหหหหห อลังการเริ่ดมากๆๆๆๆเลยค่ะแง ขอนำไปใช้บ้างนะคะ ขอบคุณที่มาลงฮาวทูดีๆค่ะ

#9 By HOJO on 2013-01-02 15:46

Hot! Hot! Hot! Hot! Hot! Hot! Hot!
กรี๊ด มันไฮโซมากค่ะ'q'
ไว้จะเอาไปทำบ้างนะคะ อิย๊า ชอบมากค่ะ Hot! Hot!

#8 By ★ LYNIXS ★ on 2013-01-02 14:54

สุโก้ยยยยย Hot! Hot! Hot!
อยากทำบ้างค่ะๆ แต่สารภาพ อ่านแล้วไม่มั่นใจ
เรื่องพวกนี้ เราไม่ถนัดเลย แต่เดี๋ยวจะลองทำค่ะ open-mounthed smile

#7 By Ayako on 2013-01-02 13:45

คุณเพอร์ขาาาา เจ๋งง่า Hot!

#6 By อีฟ on 2013-01-02 13:36

เจ๋ง!!!! Hot!

#5 By KAINO on 2013-01-02 12:46

@loukmhee  ได้จ้ะหมีๆ ตราบใดที่ยังมี coverimage
หรือจะเปลี่ยน background ของ body ก็ได้
var image = $('#coverimage'); โดยเปลี่ยน ไอ้ที่อยู่ในวงเล็บน่ะ
ถ้าหมีๆ จะเปลี่ยนธีมแล้วหาไม่เจอทวีตถามก็ได้กั๊บ จะหาให้ แต่เท่าที่ดูทุกธีมที่มี รูป head ก็จะอยู่ใน tag coverimage นะ

#4 By persona non grata on 2013-01-02 12:35

คำถาม!!  #ยกมือ
ถ้าไม่ใช้ธีม New Horizons จะสามารถแสดงผลแบบเปลี่ยนรูปได้ไหมคะ?
หรือว่าใช้ธีมอื่นที่มีเฮดเดอร์ได้เหมือนกันหมด   หมีอยากลอง  แต่รู้สึกว่าธีมที่ใช้ "น่าจะ" ไม่ใช่ธีมนี้น่ะค่ะ

#3 By akua on 2013-01-02 12:30

@pupumeteor  เขียนแฟลชไม่เป็น //ชิ้ง...
ขำยูโกสลาเวีย oTL

#2 By persona non grata on 2013-01-02 12:23

พี่สาวน้องเก๋มาก !!!!
ตอนรกน้องนึกว่าใช้แฟลช
แต่ใช้เป็นโค้ดแล้วมันเท่ห์ม้อกก
วิธีเปลี่ยนรูปกิ๊บเก๋ฝุดๆก๊าบ
ตรัสพร้อมดาวดึงส์ตะลึงงัน 
กรรมการจากยูโกสลาเวียให้สิบเต็ม
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#1 By Pupu Meteor on 2013-01-02 11:48