Beautiful jQuery Slider on Blogger

การสร้างสไลด์โชว์บน Blogger ทำได้หลายวิธี ซึ่งบทความที่ผมได้นำเสนอเกี่ยวกับการสร้าง Slide show บน Blogger ไปแล้วก็มีหลายบทความได้แก่
1.   Jd Gallery อีกหนึ่งสไลด์โชว์สวยๆ ของ JonDesign
2.   การ สร้างสไลด์จาก www.Slide.com
3.   วิธี ติดตั้ง jQuery Anything Slider บน Blogger
4.   วิธี ติดตั้ง jQuery image cube บน blogger
5.   วิธี สร้าง Draggable & Lightbox Image Garelly บน blogger
6.   วิธี สร้าง Interactive Picture โดยใช้ jQuery
7.   วิธี แสดงรายการสินค้าบน Blogger ด้วย jQuery Slick Content Slider
8.   สร้าง Slide show สุดสวยด้วย Java script
9.  สร้าง กระดานข่าว (Scroll News) ง่าย ๆ ด้วย JQuery

สำหรับบทความนี้ผมจะนำเสนอ Slide show อีกรูปแบบหนึ่งที่อาศัยการทำงานของ jQuery เรียกว่า Beatiful jQuery  Slider  ซึ่งสไลด์ชนิดนี้เป็นสไลด์ที่มีความกว้าง และใช้นำเสนอรูปภาพ และมีความสวยงาม  ดังนั้นผลลัพธ์ที่ได้ออกมาจึงเหมาะสำหรับนำไปติดตั้งในส่วนหัวของบล็อก สำหรับตัวอย่างการทำงานคุณสามารถดูได้จาก URL ด้านล่างครับ

วิธีสร้างบล็อก สอนทำบล็อก blogger blogspot

http://beautiful-jquery-sliders.blogspot.com

ขั้นตอนติดตั้ง Beatiful jQuery  Slider 

Login เข้าไปที่ blogger.com จากแผงควบคุมไปที่ >> การออกแบบ >> แก้ไข HTML  โดยไม่ต้องขยายแม่แบบเครื่องมือ

ใส่ Slide ในบล็อก สอนแต่งบล็อก

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

/*jQuery beatiful Slider EDIT by http://www.hackublog.com*/      
div.wrap1{       
width : 960px;       
margin : 0 auto;       
text-align : left;       
}       
div.wrap1 a{color:#ffffff;}       
div#top div#nav{       
float : left;       
clear : both;       
width : 960px;       
height : 52px;       
margin : 22px 0 0;       
background:url(http://upic.me/i/kg/navbg.png) 0 0 no-repeat;       
}       
div#top div#nav ul{       
float:left;       
width:700px;       
height:52px;       
list-style-type:none;       
}       
div#nav ul li{       
float:left;       
height:52px;       
}       
div#nav ul li a{       
border:0;       
height:52px;       
display:block;       
line-height:52px;       
text-indent:-9999px;       
}       
div#HackublogSlider{       
margin:-1px 0 0;       
}       
div#video-header1{       
height:683px;       
margin:-1px 0 0;       
}       
div#HackublogSlider div.wrap1{       
height:289px;       
background:url(http://upic.me/i/rr/headerbg960.png) 50% 0 no-repeat;       
}       
div#HackublogSlider div#slide-holder{       
z-index : 40;       
width : 960px;       
height : 289px;       
position : absolute;       
}       
div#HackublogSlider div#slide-holder div#slide-runner{       
top : 9px;       
left : 9px;       
width : 940px;       
height : 278px;       
overflow : hidden;       
position : absolute;       
}       
div#HackublogSlider div#slide-holder img{       
margin:0;       
display:none;       
position:absolute;       
}       
div#HackublogSlider div#slide-holder div#slide-controls{       
left : 0;       
bottom : 228px;       
width : 940px;       
height : 46px;       
display : none;       
position : absolute;       
background:url(http://upic.me/i/s3/slidebg.png) 0 0;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p.text{       
float:left;       
color:#fff;       
display:inline;       
font-size:10px;       
line-height:16px;       
margin:15px 0 0 20px;       
text-transform:uppercase;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav{       
float:right;       
height:24px;       
display:inline;       
margin:11px 15px 0 0;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a{       
float:left;       
width:24px;       
height:24px;       
display:inline;       
font-size:11px;       
margin:0 5px 0 0;       
line-height:24px;       
font-weight:bold;       
text-align:center;       
text-decoration:none;       
background-position:0 0;       
background-repeat:no-repeat;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a.on{       
background-position:0 -24px;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://upic.me/i/qa/sildenav.png);}       
div#nav ul li a{background:url(http://upic.me/i/kg/navbg.png) no-repeat;}


ขั้นที่ 2 ติดตั้ง jQuery และจาวาสคริปต์
ต่อเนื่องจากขั้นที่ 1 ค้นหาโค้ด </head> และวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>      
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type="text/javascript"/>       
<script type='text/javascript'>
//<![CDATA[
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};
//]]>
</script>

ขั้นที่ 3 กำหนดตำแหน่งและเรียกใช้ Beatiful jQuery  Slider

ต่อเนื่องจากขั้นที่ 2 การวาง HTML นั้นพิจารณาดังนี้
3.1 กรณีใช้แม่แบบจากการติดตั้งเอง

ให้ค้นหาโค้ด
<div id='content-wrapper'>
ซึ่งบางแม่แบบอาจพบโค้ดเป็น
<div id='content'>
เมื่อพบแล้วให้วาง HTML ก่อนหน้าหรือถัดจากโค้ดที่พบตามข้างต้น


3.2 กรณีใช้แม่แบบที่ออกแบบเองโดยใช้เครื่องมือของ Blogger in Draft
ให้ค้นหาโค้ด
<div class='fauxborder-left tabs-fauxborder-left'>
และวาง HTML ก่อนหน้าโค้ดที่พบตามข้างต้น


3.3 โค้ด HTML สำหรับติดตั้ง Beatiful jQuery  Slider 
<div id='HackublogSlider'>     
<div class='wrap1'> 
<div id='slide-holder'>     
<div id='slide-runner'>      
    <a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>       
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>        
      <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a>       
    <div id='slide-controls'>      
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>      
     <p class='text' id='slide-desc'/>      
     <p id='slide-nav'/>      
     </div>      
</div>      
</div> 
<script type='text/javascript'>     
if(!window.slider) var slider={};      
slider.data=[      
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}        
];      
</script>      
</div></div><!--/HackublogSlider-->

3.4 การเปลี่ยนรูป

การเปลี่ยนรูปให้เปลี่ยนได้ในชุดโค้ดสีเขียว  โดยการสร้างภาพที่มีขนาด 940 x 262 px แล้วฝากรูปไว้ที่รับฝากฟรี เช่น picasa,photobucket หรือ upic.me เป็นต้น จากนั้นนำมาแทนที่ URL ของภาพเดิม

<a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>         
      <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a> 

3.5 การใส่ Link ให้กับรูปภาพใน Slide
การใส่ Link ให้กับรูปภาพสามารถทำได้โดยใส่ URL ที่ต้องการลงไปใน Tag <a> เช่น
<a 'ใส่ Link ตรงนี้'><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>

3.6 การใส่คำอธิบาย
การใส่คำอธิบายแต่ละภาพให้ใส่ในชุดโค้ด
{"id":"slide-img-1","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},          
{"id":"slide-img-2","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-3","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-4","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-5","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-6","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},
{"id":"slide-img-7","client":"ใส่ Title","desc":"ใส่คำอธิบาย"}

3.7 การเพิ่มหรือลบจำนวนภาพ

ค่าดั้งเดิมที่ใส่ไว้คือ 7 ภาพ คุณสามารถลบหรือเพิ่มจำนวนภาพโดยเพิ่มชุดโค้ดดังนี้

ตัวอย่างถ้าผมต้อการเพิ่มจากเดิม 7 ภาพให้เป็น 10 ภาพ ผมก็จะต้องเพิ่มโค้ดเข้าไปอีก 3 ชุดได้แก่
<a href=''><img alt='' class='slide' height='262' id='slide-img-8' src='ใส่ URL ภาพที่8' width='940'/></a>           
<a href=''><img alt='' class='slide' height='262' id='slide-img-9' src='ใส่ URL ภาพที่9' width='940'/></a>           
<a href=''><img alt='' class='slide' height='262' id='slide-img-10' src='ใส่ URL ภาพที่10' width='940'/></a> 
และ
{"id":"slide-img-8","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},          
{"id":"slide-img-9","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},
{"id":"slide-img-10","client":"ใส่ Title","desc":"ใส่คำอธิบาย"}
โดยเพิ่มเข้าไปในโค้ดชุดเดิมในข้อ 3.3 ซึ่งจะได้โค้ดใหม่เป็น

<div id='HackublogSlider'>     
<div class='wrap1'> 
<div id='slide-holder'>     
<div id='slide-runner'>      
    <a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>       
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-8' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-9' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-10' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <div id='slide-controls'>      
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>      
     <p class='text' id='slide-desc'/>      
     <p id='slide-nav'/>      
     </div>      
</div>      
</div>
  
    <div id='slide-controls'>       
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>       
     <p class='text' id='slide-desc'/>       
     <p id='slide-nav'/>       
     </div>       
</div>       
</div> 
<script type='text/javascript'>     
if(!window.slider) var slider={};      
slider.data=[      
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-8","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-9","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-10","client":"nature beauty","desc":"add your description here"}
];     
</script>
</div></div><!--/HackublogSlider-->
หวังว่าคงถูกใจกันนะครับ และถ้าชอบบทความใดในบล็อกนี้ก็วานช่วยบอกต่อด้วยนะครับ ขอบคุณครับ


Credit Script : www.dreamcss.com
Hack and Edit For Blogger : Mr.Hackublog

ตอนนี้มีความคิดเห็น : 41 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. สวัสดีค่ะ
    ด้าร์ทำตามขั้นตอนตามอาจารย์แล้วค่ะ ใส่ทั้งหมด 10 ภาพ แต่ทำไมภาพขึ้นแค่ 2 ภาพเองค่ะ

  1. @ Dadar: โค้ดในขั้นที่ 3 มีความผิดพลาด แก้ไขโดย:
    1. คัดลอกโค้ดในข้อ 3.3 ไปใหม่
    2. เอาโค้ดในข้อ 3.3 ไปแทนที่โค้ดเดิม แล้วนำ URL ของภาพมาแทนที่ภาพเดิมที่ผมได้ทำไว้
    3. การเพิ่มโค้ดให้คัดลอกจากโค้ดเดิมที่ติดตั้งลงไปจากข้อ 3.3 แล้วเปลี่ยนชื่อตามที่ได้แนะนำไว้ใน 3.4 - 3.6 แต่อย่าคัดลอกโค้ดในข้อ 3.4 - 3.6 ไปใช้ดดยตรง

  1. อาจารย์ค่ะ ตอนนี้ทำได้แล้วค่ะ แต่ได้แค่ 7 ภาพ พยายามเพิ่ม ให้ได้เป็น 10 ภาพ ทำไม่ได้เลยค่ะ ยอมแพ้แล้ว อาจารย์อธิบายดีมากๆๆเลยค่ะ แต่ด้าร์คงฉลาดน้อยไปหน่อย แค่ทำตามยังเหนื่อยขนาดนี้ แล้วอาจารย์ทั้งคิดทั้งเขียนบรรยายคงเหนื่อยนะค่ะ แต่ยังไงก็เอาใจช่วยนะค่ะ สู้ สู้ ค่ะ
    ขอบคุณมากๆเลยนะ

  1. ขออณุญาติเอาไปใช้นะคับพี่ ขอบคุณคับ

  1. เย้...ทำได้ 10 ภาพแล้วค่ะ ผิดตรงตอนเพิ่มโค้ด คำอธิบาย คัดลอกไปแต่ไม่ได้ใส่ (,) ตรงท้ายสุดในภาพที่ 7 ค่ะ แก้ไขเป็นใส่(,)ตรงท้ายสุดในภาพที่ 7 แล้วภาพที่ 10 ก็ไม่ต้องใส่ (,)
    ด้าร์เข้าใจถูกไหมค่ะอาจารย์
    ขอบคุณค่ะ

  1. @ Dadar: เข้าใจถูกต้องแล้วครับ

  1. รูป jQuery Slider มันไม่โชว์เลยครับ พอจดโดเมน http://www.hackublog.com/2010/01/domain-blogspot-czcc-2.html ตามนี้แล้วภาพไม่ขึ้น พอไปตั้งที่บล็อกใช่แบบ http://maripai.cz.cc/ นี้ภาพขึ้น แบบนี้ http://www.maripai.cz.cc/ ภาพไม่ขึ้น ต้องใส่อะไรเพิ่มไหมครับ Template เดิมๆที่มีอยู่แล้วครับ สังเกตุได้ที่โลโก้ ขอบคุณมากๆครับของให้รวยๆๆครับ

  1. @ ta : ตอนที่ตั้งค่าโดเมนใน blogger ใส่ www เข้าไปด้วยหรือเปล่าครับ ส่วนสคริปต์ในบทความนี้ไม่ต้องตั้งค่าอะไรครับ

  1. สวัสดีค่ะ
    อยู่ๆทำไม beautiful j query slider ก็ไม่มีภาพ (เป็นจอดำ) ต้องแ้ก้ไขยังไงค่ะ ขอบคุณค่ะ

    http://fishhatcheryfarm.blogspot.com/

  1. @ บุญลาภฟาร์มปลา : จาวาสคริปต์ที่ผมฝากไว้กับ google code มีปัญหาครับ อาจจะโดนลบทั้งหมด เดี๋ยวผมจะหาที่ฝากไฟล์ใหม่ให้ครับ

  1. @ บุญลาภฟาร์มปลา : ให้เข้าไปแก้โค้ดโดยแทนโค้ด

    http://hackublog.googlecode.com/files/jquery-slider-scripts.js

    ด้วยโค้ดด้านล่างนี้ครับ

    http://sites.google.com/site/hackublog/home/server/jquery-slider-scripts.txt

  1. ขอบคุณมากค่ะ แก้แล้วก็ใช้ได้เลย ขอให้รวยนะค่ะ

  1. ทำได้แล้วครับ แต่ทำใมรูปม้นไม่อยู่ในตำแหน่งภายในกรอบ อ่ะครับ จะแก้ไขยังไรดี ขอบคุณครับ

  1. ทำได้แล้วครับ หัวข้อ div#HackublogSlider div#slide-holder div#slide-runner แล้วเข้าไปปรับได้ ตามต้องการเลย

    แล้ว ปรับเปลี่ยนเวลาสไล์ปรับตรงไหนเหรอครับ ขอบคุณครับ

  1. มีใครรับสร้างบล็อก สำหรับขายของได้มั้ยค่ะ คือไม่มีเวลาอ่ะคะ ทำงานสองที่ และงานนอกอีก เลย ไม่ได้ศีกษา
    รบกวนแนะนำหน่อยนะค่ะ
    ขอบคุณค่

    tapassaya@gmail.com

  1. ถามคับ คือ ผมจะปรับความกว้าง ความสูงเนี่ยต้อง ไปแก้ตรงไไหนคับ
    หรืออย่างไร ช่วยตอบด้วยๆๆๆๆ

  1. ผมจะย้ายตำแหน่งได้ยังไงอ่ะครับ

  1. สามารถนำไปใส่ในเว็ปไซด์ได้มั้ยคับ

  1. ลองทำตามแล้วเป็นจอดำครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ย้ายตำแหน่งยังไงครับ ตอนนี้มันอยู่ด้านบน บทความและ side bar

    อยากให้อยู่แนวเดียวกับ บทความ

  1. รบกวนอาจารย์ครับ ใส่ตัวนี้ได้แล้วแต่อยากลบสไลด์ตัวล่างออกมันบัง ยูทูบไม่รู้จะต้องแก้โค้ดตรงไหนบ้างครับ
    http://beginmotion.blogspot.com/

    template นี้ครับ
    https://www.box.com/s/38e513a99e0133ea03c7

    ขอบคุณครับ

  1. สวดยอดไปเลย สวยม๊ากๆๆๆๆ
    ผลงานคับ
    http://workinformations.blogspot.com/

  1. จะแก้ไขขนาดของเฟรมทำได้ยังไงครับ

  1. พี่ครับ ผมอยากให้รูปมันเลื่อนเร็วกว่านี้อะครับ ปรับตรงครับ

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

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ]]> ผมหาไม่เจอ ctrl f แล้ว ของผม blogger ตัวใหม่ ผมหา ในแม่แบบ >> แก้ไข html

  1. ผมมีปัญหาครับ ค้นหาโค้ดไม่เจอ ในขั้นตอนที่ 1 บล็อกเวอร์ชั่นใหม่ ช่วยด้วย ขอบคุณครับ

  1. หาไม่เจอเหมือนกันค่ะ ทำไงดีค่ะ ช่วยแนะนำทีค่ะ

    packmatethailand@Gmail.com

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ไปเจอเว็บนี้ค่ะ
    http://amazingslider.com/
    ลองเปิดดูคร่าวๆ ของเล่นเยอะมาก แต่ไม่รู้จะเอาไปใส่ blogger ได้ยังไง ช่วยดูหน่อยได้มั้ยค่ะ

  1. เข้าใจล่ะ เค้าขายค่ะ โหลดลงเครื่องแล้วลองทำดู save ยังไม่ได้เลย เอามาให้น้ำลายหกเล่น

  1. ใช้งานได้ดีเลยครับ ขอบคุณครับ ว่าแต่ ถ้ามีวิธีให้มันวนลูป เป็นวงกลม หรือ ถ้า กด จาก 7 ไป 3 ได้โดยไม่ต้องให้ภาพถอยกลับไหมครับ รบกวนขอคำแนะนำด้วยครับ

  1. ขอบคุณครับ

  1. ผมอยากเอา Background สีเทาๆด้านหลังภาพสไลด์ออกอ่าครับ แล้วใส่รูปอื่นเเทน ปรับตรงไหนหรอครับ

  1. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. เปลี่ยนเวลาให้สไลด์ ไวขึ้นตรงไหน ครับ ขอบคุณครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel