ทำปุ่มลูกศรด้านล่างเว็บ เพื่อไปยังด้านบนสุดของเพจ (back-to-top button)

เคยเจอไหมครับ เวลาเราเข้าเว็บไปแล้วเลื่อนอ่านลงไปสักพัก แล้วจะมีปุ่ม เขียนประมาณว่า "กลับไปบนสุด" หรือเป็นรูปลูกศรชี้ขึ้น ในที่นี้เรียกว่าปุ่ม back to top ก็แล้วกันครับ ใครอยากหาวิธีทำเพิ่มเติม แนะนำให้ Search google คำนี้เลยครับ back to top button

ส่วนบทความนี้อีกเช่นเคย แปะไว้กันลืม การทำปุ่ม back to top ครับ
เริ่มจากเราต้องแอด jquery.min.js มาก่อนครับในtag <header>

** jquery.min.js ไปหาโหลดเอาเองได้ทั่วไปนะครับ หรือจะใส่ลิงค์จากต้นทางอื่นๆ ก็ได้นะครับ **

<header>
.
.
<script src="jquery.min.js"></script>
</header>



ขั้นต่อมาให้ใส่โค๊ดตามนี้

<script type='text/javascript'>
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 200) {
            $('#scroll').fadeIn();
        } else {
            $('#scroll').fadeOut();
        }
    });
    $('#scroll').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
<a href="javascript:void(0);" id="scroll" title="กลับไปบนสุด" style="display: none;">Top<span></span></a>

<script>
var amountScrolled = 300;

$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
</script>

และให้ใส่ใน css ตามนี้
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
   opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

ภาพปุ่ม back-to-top อยู่มุมขวาล่าง

แค่นี้ครับ โดยที่ตัวอักษรสีแดง หมายถึง ถ้าเลื่อนลงไปกี่พิกเซล ปุ่มถึงจะโผล่มา กำหนดเองได้เลยครับ
ส่วนตัว css นั้นก็กำหนดสีสันของปุ่มได้ครับ แล้วแต่เลยครับ จบฮะ

ปรับขนาดความกว้างของ facebook like box ให้เป็น responsive

หลายท่านคงเคยทำเว็บแล้วใส่ไอ้เจ้า facebok like box ลงไป หน้าตามันก็ประมาณนี้ครับ

หน้าตาของ ไอ้เจ้าFacebook like Box

ซึ่งเป็นตัวที่ทำให้ผู้เข้าเว็บสามารถเห็น ช่องทางการเชื่อมต่อ Social media ของเว็บเราได้ครับ โค๊ดที่ทาง Facebook ใส่ให้มาก็ประมาณนี้ครับ

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>

ซึ่งสามารถกำหนดขนาดความกว้างของกรอบ like box ได้ตรงนี้ data-width="400" จะใส่เท่าไร ก็ว่ากันไปครับ แต่พอเราจะมาทำความกว้างให้เป็น % หรือทำให้มันเข้ากับเว็บที่รองรับ Mobile Responsive ไอ้จะใส่ไปตรงๆ แบบ data-width="100%" ผมลองแล้วครับไม่ได้ผล ไอ้ที่ได้ผลคือต้องใส่แบบนี้ครับ

<style>
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { max-width: 100% !important; }
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>

ใส่ไอ้ที่ผม hightlight สีแดงไว้ก่อนโค๊ด Facebook like box เข้าไป แค่นี้มันก็ยืดหดได้ตามใจแล้วครับ
ซึ่งหากใครสนใจเอาโค๊ด like box แบบนี้มาใส่ในเว็บนั้น ให้เข้าไปที่นี่ได้เลยครับ Facebook Page Plugin

การ Redirect 301 จาก abc.com เป็น www.abc.com

วันนี้จะมาเขียนกันลืมเก็บไว้เกี่ยวกับการ Redirect 301 ของเว็บไซต์ แบบ non-www ไปเป็นแบบ www
แล้วไอ้คำว่า Redirect301 นั้นก็หมายถึงจะนำค่าลิงค์ หรือ backlink ต่างๆ ของเรื่อง seo มั้ง (ผม seo แบบงูๆ ปลาๆ หน่ะ ไม่รู้จะอธิบายยังไง) ทำเว็บใหม่ทีไร มันจะเป็ดหน้าเว็บได้ 2 version ครับ 

• fashion2lady.com
• www.fashion2lady.com

เข้าเว็บแบบ non-www

เข้าเว็บแบบ www

จริงๆ แล้ว เซิจเอนจิน บางตัวมันมองไปเป็นคนละเว็บเลยนะครับ (แต่กระจอกมากสำหรับพี่ Google ครับ) แต่ทำเถอะครับไม่เสียหายง่ายๆ เลย

วิธีแก้ให้มันวิ่งไปที่หน้าแบบมี www อย่างเดียวทั้งเว็บมีแค่สองบรรทัดเท่านั้นเองครับ
ลองแก้ตามดู
1. เข้าไปที่ ftp ของเว็บ หาไฟล์ .htaccess (ส่วนใหญ่อยู่ path เดียวกับ index)
2. เปิดไฟล์เพื่อแก้ไข
3. เพิ่มตามด้านล่างเลยครับ

RewriteCond %{http_host} ^fashion2lady\.com$ [NC]
RewriteRule ^(.*)$ http://www.fashion2lady.com/$1 [R=301,L]

ตัวอักษรสีแดงก็คือชื่อเว็บของเราที่ต้องการเปลี่ยนครับ
และอีกอย่างนึงคือ หากให้หน้า fashion2lady.com/index.php เปลี่ยนเป็น www.fashion2lady.com/ เพื่อกันการ Duplicate ข้อมูลกันเองภายในเว็บไซต์ ให้เพิ่มไอ้นี่ไปอีกบรรทัดครับ

RewriteRule  ^index.php$ http://www.fashion2lady.com/ [R=301,L]


จบแล้วครับ สุดท้ายนี้
หากเราพิมพ์ fashion2lady.com ลงไป มันก็จะกลายเป็น www.fashion2lady ในช่อง address ทันทีครับ

จัดภาพให้กึ่งกลาง ง่ายๆ แต่ปวดกบาลครับ

ตามหัวข้อเลยครับ วันก่อนลองทำเว็บนึงดู ปรากฏว่า ต้องจัดภาพ <img> ให้อยู่กึ่งกลาง <div> ก็ไม่มีอะไรมากครับ จัดไปเลยลวกจิ้มเลยครับ

<div style="text-align:center;height:555px;">
      <img src="picture.jpg" />
</div>

มันก็กึ่งกลางนะครับ แต่เจ้ากรรม รอบนี้มันดันมีความสูงเข้ามาเกี่ยวข้องด้วยครับ ทำไงดีวะเนี่ย (height:555px;) มันกึ่งกลางแค่ซ้าย-ขวา แต่บน-ล่างมันดันไม่กึ่งกลางครับ ผมก็เลยไปหาวิธีมามากมาย หลายๆ เว็บ คือที่ต้องบอกว่ามากมายเพราะ ผมชอบโค๊ดอะไรที่มันง่ายๆ บรรทัดน้อยๆ อย่างว่าละครับ ขี้เกียจแถมความจำสั้นอีกต่างหาก เลยเอามาแปะไว้หน่อยกันลืม สำหรับคนที่ต้องการจะให้รูปภาพมันอยู่ตรงกลาง ทั้งบนล่างซ้ายขวาครับ แล้วจะบอกว่าวิธีนี้ใช้งานได้กับงานเว็บไซต์แบบ mobile responsive ที่สามารถยดหดก็ยังกึ่งกลางได้ครับ

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

ความหมายของโค๊ดด้านบนตามภาพเลยครับง่ายๆ

แค่นี้ละครับ ไปละครับ

เครดิตเว็บ stackoverflow