การสืบค้นข้อมูลและบูรณาการ

วันเสาร์ที่ 21 กุมภาพันธ์ พ.ศ. 2558

แต่งบล็อกให้สวยด้วย template

แต่งบล็อกให้สวยด้วย Template ที่โหลดจากอินเทอร์เน็ต

เราสามารถค้นหา Templeats ได้มากมาย ผ่าน "www.google.com" โดยค้นหาว่า Theme+blogger หรือ Templeats+blogger

ขอยกตัวอย่าง http://btemplates.com

วิธีดาวน์โหลด Templates!!

1. ค้นหาว่า Theme+blogger หรือ Templeats+blogger ใน Google

2. เลือกเว็บไซต์ที่ต้องการในที่นี้ขอยกตัวอย่าง http://btemplates.com

3. เมื่อเราเลือก template ได้เรียบร้อยเราควรที่จะคลิกเพื่อดูตัวอย่างของ template ว่ามันเข้ากับเนื้อหาของ Blog ที่เราต้องการจะสร้างหรือเปล่า ถ้าเราพอใจค่อยดาวน์โหลดมา

4. เมื่อเราดาวน์โหลดไฟล์มาเป็นที่เรียบร้อยมันจะเป็นไฟล์ zip หรือ .rar ให้เราทำการแตกไฟล์ออกมาโดยทำการคลิกขวาแล้วเลือก extract here หรือ แยกไฟล์ลงที่นี่

5. เมื่อเราได้ทำการแตกไฟล์ออกมาแล้วก็จะมีโฟเดอร์อยู่ 2 โฟเดอร์ ให้เราลือกโฟลเดอร์ที่ 2 แล้วดับเบิ้ลคลิกเข้าไปก็จะได้ไฟล์ประมาณนี้ ให้เราสังเกตไฟล์ ที่มีนามสกุลว่า .xml เพราะเราจะใช้ตัวนี้ทำการติดตั้ง

6. ขั้นตอนแรกเราก็จะต้อง Login เข้าสู่ Blogger ก่อน เลือก Blog ที่เราต้องการเปลี่ยน template แล้วเลือกที่แม่แบบ -----> คลิก สำรอง / กู้คืน

7. ให้เราเลือกไฟล์ ที่มีนามสกุลว่า .xml เท่านั้น มิฉะนั้นเราจะไม่สามารถอัปโหลดได้ตรงนี้ควรสังเกตดีๆ เมื่อเลือกไฟล์แล้วเราก็ทำการอัปโหลด แล้วเราก็รอเวลาสักครู่

8 เสร็จแล้วเราก็จะได้ Template ของเราเรียบร้อย

วันพุธที่ 11 กุมภาพันธ์ พ.ศ. 2558

วิธีการติดตั้ง Beautiful jQuery slider

วิธีติดตั้ง 


Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ







ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด  ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว


*{ margin: 0; padding: 0;} 
.anythingSlider{ width: 760px; height: 360px; position: relative; margin: 0 auto 15px;} 
.anythingSlider .wrapper1{ width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; } 
.anythingSlider .wrapper1 ul{ width: 99999px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; } 
.anythingSlider ul li{ display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; } 
.anythingSlider .arrow{ display: block; height: 200px; width: 67px; background: url(http://upic.me/i/pv/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; } 
.anythingSlider .forward { background-position: 0 0; right: -20px; } 
.anythingSlider .back { background-position: -67px 0; left: -20px; } 
.anythingSlider .forward:hover{ background-position: 0 -200px; } 
.anythingSlider .back:hover { background-position: -67px -200px; } 
/* For Specific Slides */ 
#textSlide { padding: 10px 30px; } 
#textSlide h3 { font: 20px Georgia, Serif; } 
#textSlide h4 { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; } 
#textSlide ul { list-style: disc; margin: 0 0 0 25px; } 
#textSlide ul li { display: list-item; } 
#quoteSlide{ padding: 30px; } 
#quoteSlide blockquote { font: 16px Georgia, Serif; /*text-align: center;*/ color: #444; margin: 0 0 10px 0; } 
/*#quoteSlide p{ text-align: center; }*/ 
#thumbNav { position: relative; top: 323px; text-align: center; } 
#thumbNav a{ color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(http://upic.me/i/0b/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; } 
#thumbNav a:hover { background-image: none; } 
#thumbNav a.cur { background: #e0a213; } 
#start-stop{ background: green; background-image: url(http://upic.me/i/0b/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; } 
#start-stop.playing { background-color: red; } 
#start-stop:hover { background-image: none; } 
/* Prevents*/ 
.anythingSlider .wrapper1 ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; } 
.anythingSlider .wrapper1 ul ul li { float: none; height: auto; width: auto; background: none; }


ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง Java Script ซึ่งทำโดยค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="http://hackublox.googlecode.com/files/jquery.easing.1.2.js"></script> 
<script src="http://hackublox.googlecode.com/files/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript"> 
function formatText(index, panel) {
return index + "";
}

$(function () {

$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});

$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6); 
});
});

</script>


ขั้นที่ 3 ในขั้นนี้เป็นการวางตำแหน่งของ Garelly ด้วย HTML ซึ่งวางได้หลายตำแหน่งแล้วแต่ความต้องการ เช่น

ถ้าต้องการให้ Anything Slider อยู่ถัดจากส่วนหัวของหน้าและอยู่ด้านล่าง Menu bar (Navigation bar) ก็ให้ค้นหาโค้ด 
<div id='content'>

แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว


<Div class="anythingSlider"> 
<div class='wrapper1'> 
<ul> 

<li><img src="http://upic.me/i/2z/slidecivil1.jpg" alt="" height='317' width='680'/></li> 

<li><div id="textSlide"> 
                   <img src="http://upic.me/i/m8/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" width='250' height='250'/> 
                   <h3>หัวข้อของข้อความทางซ้าย</h3> 
                   <h4>หัวข้อรองทางซ้าย</h4> 
                    <ul> 
                        <li>รายการที่ 1</li> 
                        <li>รายการที่ 2</li> 
                        <li>รายการที่ 3</li> 
                        <li>รายการที่ 4</li> 
                        <li>รายการที่ 5</li> 
                    </ul> 
</div></li>

<li><img src="http://upic.me/i/ns/slideenv1.jpg" alt="" height='317' width='680'/></li> 

<li><img src="http://upic.me/i/0t/slidecivil2.jpg" alt=""  height='317' width='680'/></li> 

<li><div id="quoteSlide"> 
                    <blockquote>ใส่ข้อความอย่างเดียว</blockquote> 
                    <p> - <a id='perma' href='http://hackublog.blogspot.com '>Hackublog</a></p> 
</div></li>

<li><img src="http://upic.me/i/bi/slideenv2.jpg" alt="" height='317' width='680'/></li>

</ul> 
</div>         
</Div>

ให้แก้โค้ดสีน้ำเงินเป็นข้อความหรือภาพที่คุณต้องการและบันทึกแม่แบบ ถือว่าจบขั้นตอน

หมายเหตุ หากต้องการเพิ่มจำนวนภาพ(หรือข้อความ) ให้มากกว่า 6 ภาพ ก็แก้ค่าตัวเลข (6) ในขั้นที่ 2 แล้วเพิ่มโค้ดต่อไปนี้ลงไปอีกให้เท่ากับจำนวนที่เพิ่มขึ้น

ตัวอย่างโค้ดภาพ
<li><img alt=''  src='ใส่URLของรูป' height='317' width='680'/></li>

ตัวอย่างโค้ดข้อความ
<li><div id="quoteSlide"> 
                    <blockquote>ใส่ข้อความอย่างเดียว</blockquote> 
</div></li>

ตัวอย่างโค้ดข้อความและภาพ
<li><div id="textSlide"> 
                   <img src="ใส่URLของรูป" alt="" style="float: right; margin: 0 0 2px 10px;" width='250' height='250'/> 
                   <h3>หัวข้อของข้อความทางซ้าย</h3> 
                   <h4>หัวข้อรองทางซ้าย</h4> 
                    <ul> 
                        <li>รายการที่ 1</li> 
                        <li>รายการที่ 2</li> 
                        <li>รายการที่ 3</li> 
                        <li>รายการที่ 4</li> 
                        <li>รายการที่ 5</li> 
                    </ul> 
</div></li>

ตัวอย่างโค้ดที่ฉันใช้ใน DEMO

<Div class='anythingSlider'> 
<div class='wrapper1'> 
<ul> 
<li><img alt='' height='317' src='http://upic.me/i/st/buenos_aires.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/8g/3402757021_45a780d660.jpg' width='680'/></li>
<li><div id='textSlide'> 
                   <img alt='tomato sandwich' height='250' src='http://upic.me/i/m8/251356.jpg' style='float: right; margin: 0 0 2px 10px;' width='250'/> 

                    <h3>หัวข้อของข้อความทางซ้าย</h3> 
                   <h4>หัวข้อรองทางซ้าย</h4> 
                    <ul> 
                        <li>รายการที่ 1</li> 
                        <li>รายการที่ 2</li> 
                        <li>รายการที่ 3</li> 
                        <li>รายการที่ 4</li> 
                        <li>รายการที่ 5</li> 
                    </ul> 
</div></li> 
           
<li><img alt='' height='317' src='http://upic.me/i/hs/3403568620_cf6cf793b7.jpg' width='680'/></li>              
<li><img alt='' height='317' src='http://upic.me/i/93/beatifulmollusc.jpg' width='680'/></li> 
<li><div id='quoteSlide'> 
                    <h4>ไอน์สไตน์</h4> 
                    <blockquote>ไอน์สไตน์ เกิดเมื่อวันที่ 14 มีนาคม ปี คศ. 1879 ที่เมืองอูล์ม ทางตอนใต้ของประเทศเยอรมันนี บิดาของไอน์สไตน์เป็นชาวยิว มีชีวิตในวัยเด็กเหมือนเด็กทั่วไป มีการกล่าวกันว่าจุดที่ทำให้ไอ น์สไตน์มาสนใจวิทยาศาสตร์อย่างมากคือเข็มทิศ ในขณะนั้นเขามีอายุได้ 5 ปี และกำลังนอนป่วยอยู่บนเตียง บิดาได้นำเข็มทิศมาให้เล่น เขาใส่ใจและสนใจอยากรู้ว่าทำไมเข็มทิศจึงชี้ไปทาง ทิศเหนือ และตั้งแต่นั้นมาเขาเริ่มสนใจทาง คณิตศาสตร์และฟิสิกส์</blockquote> 
                    <a href='http://www.pccpl.ac.th/~tech/Obec/digital_library/snet2/mathematicians/einstein.htm' id='perma'>อ่านต่อ</a> 
</div></li>               
<li><img alt='' height='317' src='http://upic.me/i/qc/ben_beatiful.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/mx/columbia.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/ok/mostbeatiful.jpg' width='680'/></li> 
<li><img alt='' height='317' src='http://upic.me/i/j7/premier.jpg' width='680'/></li> 
</ul> 
</div>         
</Div>

วันจันทร์ที่ 26 มกราคม พ.ศ. 2558

เมืองในฝัน

" เมืองในฝัน "

เมืองออร์แลนโด รัฐฟลอริดา สหรัฐอเมริกา

สวนสนุกแฮร์รี่ พอตเตอร์ หรือ The Wizarding World of Harry Potter (เดอะวิซาร์ด เวิร์ลด์ ออฟ แฮร์รี่ พอตเตอร์) ดินแดนเวทย์มนต์จำลองชื่อดัง ซึ่งเป็นส่วนหนึ่งของ Islands of Adventure (ไอส์แลนด์ส ออฟ แอดเวนเจอร์) ที่ตั้งอยู่ในพื้นของยูนิเวอร์แซล ออร์แลนโด รีสอร์ต รัฐฟลอริดา สหรัฐอเมริกา

ประวัติ

วันที่ 31 พฤษภาคม พ.ศ. 2550 ยูนิเวอร์แซลสตูดิโอได้ทำสัญญาซื้อลิขสิทธิ์กับวอร์เนอร์บราเธอร์ส และ เจ. เค. โรว์ลิ่ง ในการสร้างสวนสนุก แฮร์รี่ พอตเตอร์ขึ้นบนพื้นที่ของยูนิเวอร์แซล ออร์แลนโด รีสอร์ต โดยทางสวนสนุกเริ่มเคลียร์พื้นที่ในปลายปี พ.ศ. 2550 และเริ่มก่อสร้างเมื่อต้นปี พ.ศ. 2551

วันที่ 15 กันยายน พ.ศ. 2552 ทางสวนสนุกกำหนดวันกำหนดเปิดสวนสนุกแฮร์รี่ พอตเตอร์จะมีขึ้นในฤดูใบไม้ผลิ พ.ศ. 2553 ล่วงมาถึงวันที่ 25 มีนาคม ปีต่อมา ทางสวนสนุกได้ประกาศเป็นที่แน่นอน ว่ามีกำหนดเปิดสวนสนุกในวันที่ 18 มิถุนายน รายละเอียดของสวนสนุกปรากฏอยู่ในดีวีดีและบลู-เรย์ของแฮร์รี่ พอตเตอร์กับเจ้าชายเลือดผสม

การก่อสร้างสวนสนุกแฮร์รี่ พอตเตอร์ ทางสวนสนุกได้เชิญทีมงานผู้สร้างภาพยนตร์มาช่วยในการออกแบบและควบคุมการก่อสร้าง ภายใต้การควบคุมของสจ๊วต เครก หัวหน้าฝ่ายออกแบบงานศิลป์ และยังได้เจนี เทมิเม หัวหน้าฝ่ายเครื่องแต่งกาย กับอะแมนดา ไนต์ หัวหน้าฝ่ายเมกอัป เป็นผู้ช่วยออกแบบเครื่องแต่งกาย แต่งหน้า ทำผม ให้กับพนักงานและผู้คนที่อยู่ในรูปภาพ โดยมี เจ. เค. โรว์ลิ่งเป็นที่ปรึกษาเพื่อให้แน่ใจว่างานประพันธ์ของเธอถูกถ่ายทอดออกมาเป็นอย่างดี อาทิ การเข้าร่วมประชุมกับหน่วยงานของสวนสนุก และการทดลองชิมบัตเตอร์เบียร์

ในงานเปิดตัวของสวนสนุก บอนนี่ ไรท์ (จินนี่ วีสลีย์) ทอม เฟลตัน (เดรโก มัลฟอย) กับฝาแฝดเจมส์และโอลิเวอร์ เฟลส์ป (เฟร็ดกับจอร์จ วีสลีย์) ได้ตอบรับคำเชิญและจะมาร่วมงานครั้งนี้ด้วย และมีแนวโน้มว่า เจ. เค. โรว์ลิ่ง ก็อาจจะมาด้วยเช่นกัน