Cách up hình lên facebook chất lượng cao nhất

Nếu bạn hay up hình lên Facebook chắc sẽ nhận ra một điều là: Facebook làm giảm chất lượng hình đáng kể. Hình sau khi up lên Facebook xấu hơn hình gốc từ trong máy tính rất nhiều. Hôm nay mình sẽ hướng dẫn các bạn cách để up hình lên Facebook với chất lượng cao nhất có thể. Do Facebook nén hình của chúng ta trong quá trình upload nên việc giảm chất lượng là điều không tránh khỏi, nhưng ta vẫn có cách up hình sao cho ít bị mất chất lượng nhất.

Công thức up hình đẹp nhất là: .PNG + 2048 px

Hình lớn nhất mà Facebook giữ có chiều ngang là 2048px, nếu bạn up hình có chiều ngang lớn hơn 2048px thì nó sẽ tự resize xuống còn 2048.
Hình 2048px cho chất lượng hình đẹp nhất, 960px đẹp nhì. Hình 800px hay 1024px đều xấu hơn 960px. Nghĩa là: kích thước ảnh to không phải là yếu tố để up hình đẹp lên Facebook.
Hình lưu dưới dạng .PNG đẹp hơn hình .JPG. Lý do: Hình PNG là chuẩn không nén (hoặc nén rất ít), còn hình JPG là đã nén rồi. Nếu up hình PNG lên Facebook thì ảnh chỉ bị nén một lần, còn nếu up hình JPG đã nén, Facebook sẽ nén thêm một lần nữa làm cho ảnh bị nén 2 lần, tương đương với việc mất 2 lần chất lượng.

Vậy câu hỏi đặt ra là: Nên chọn up hình 960 hay 2048? Mỗi kích thước đều có 1 nhược điểm (960 bị noise, 2048 hơi bệch màu) nhưng 2048 hơn 960 ở chỗ, nếu xem trên màn hình Retina của iPad 3/4 thì khác biệt là cực kỳ lớn (còn xem trên máy tính thì không có nhiều khác biệt).

Mình đã thử xem hình 960 và 2048 trên iPad 3 thì thấy hình 2048 sắc nét và rõ hơn 960 rất nhiều, vì iPad 3/4 có thể load hình full size, đúng với độ phân giải màn hình của máy là 2048 px chiều ngang. Khi zoom hình lên 100% thì khác biệt đó càng dễ thấy hơn.

Nên up hình .JPG hay .PNG?
File PNG bị nén ít hơn JPG nên chất lượng sẽ cao hơn khi up lên Facebook. Tuy nhiên, khi thử nghiệm thực tế thì file PNG không khác JPG là mấy. Mình cũng thử up nhiều hình khác nhau thì thấy ở một số trường hợp nhất định, file PNG cho màu đúng hơn thực tế, còn màu sắc của file JPG thì hơi nhạt mặc dù không nhiều, phải soi rất kỹ mới thấy được.

Tuy nhiên, file PNG không nén có kích thước rất lớn, một file JPG 2048px chỉ nặng khoảng 1,5MB nhưng nếu lưu ở dạng PNG thì sẽ lên tới 16MB.

Để tiết kiệm dung lượng đĩa cứng và thời gian xử lý hình, mình khuyên nên dùng JPG, còn nếu bạn là người ưu tiên cái đẹp, chỉ chơi với loại đẹp nhất thì hãy chọn PNG.

Như vậy, kết luận như sau:

Công thức up hình đẹp nhất (xem đẹp trên cả máy tính và iPad Retina):

Lưu file .PNG + kích thước chiều ngang 2048 px

Công thức đẹp nhì (chỉ xem đẹp nhất trên máy tính nhưng tiết kiệm được dung lượng file):

Lưu file .PNG + kích thước chiều ngang 960 px

Cách đưa hình ảnh vào liên kết bài đăng cũ hơn, mới hơn

Trong giao diện của blogspot, sẽ có 3 liên kết nằm cuối mỗi bài viết, đó là Trang Chủ, Bài viết cũ hơn, bài viết mới hơn. Để thay đổi những liên kết này thành các nút bấm trông đẹp mắt hơn, ta làm như sau:

- Đăng nhập Blogspot
- Vào Chỉnh sửa code HTML ( sửa Templates)
- Tìm code sau:

<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

- Chú ý đoạn code mày đỏ.
- Đó là những code mà chúng ta sẽ thay
- Lần lượt thay:

<data:newerPageTitle/> thành  <img alt='Next' border='0' src='{ link hình 1}' title='Next'/>
<data:olderPageTitle/> thành <img alt='previous' border='0' src='{ link hình 2}' title='previous'/>
 <data:homeMsg/> thành <img alt='home' border='0' src='{ link hình 3}' title='home'/>

 - Vậy là xong, hãy lưu Templates và xem kết quả.

* Ở đây tôi giới thiệu 3 nút cơ bản :

                              

Ngoài ra các bạn có thể tự tạo ra những nút đẹp hơn để thay vào.

Phóng to ảnh cho Blogger bằng Lightbox effect

Hiệu ứng Lightbox giúp bạn có thể xem ảnh một cách dễ dàng trên blogger. Trang web cũng load nhanh hơn nếu như có nhiều hình ảnh. Khi xem một bức ảnh gốc sẽ không bị chuyển sang trang khác.
Để tạo hiệu ứng này phải sử dụng jQuery Lightbox plugin

HƯỚNG DẪN
- Đăng nhập Blogger, vào phần chỉnh sửa Templates
- Tìm trong templates ]]></b:skin> và chèn vào trước nó đoạn code sau

/* LightBox by azmobi.net */
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#666}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}

- Chèn đoạn mã sau đây vào trước </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/s/6h56pf8v1jvsoij/lightbox.min.js" type="text/javascript"></script>

- Vậy là xong.

CÁCH SỬ DỤNG.
- Để có hiệu ứng Lightbox Effect thì bạn nên tạo bài viết có hình theo code mẫu sau

<a href="link file ảnh gốc"><img src="link file hình thu nhỏ thumbnail" /></a>

LƯU Ý
- Để Lightbox Effect hoạt động bạn phải vào: Cài đặt >> Bài đăng và nhận xét >> Hiển thị hình ảnh với hiệu ứng Hộp đèn >> Chọn Không (NO)

Đặt quảng cáo để kiếm tiền cho Website

Hiện giờ có khá nhiều mạng quảng cáo, cả trong và ngoài nước. Bạn sẽ phân vân không biết nên chọn mạng nào thì hiệu quả nhất. Nếu website đạt khoảng trên dưới 2000 lượt truy cập mỗi ngày thì nên chọn CPX24.COM.

Với mạng này, đăng ký rất đơn giản. Chỉ cần đặt code vào website để tính lượng truy cập trên web mình và nhận tiền. Nếu mỗi ngày được khoảng hơn 2000 lượt truy cập từ Việt Nam thì bạn có thể kiếm gần 0.5 USD.
Tuy nhiên họ không chấp nhật traffic từ Thái Lan và Trung Quốc.
Minimum Payout qua Paypal là 0.5 USD. Thời gian thanh toán 2-3 tuần từ lúc request.

Đây là bảng thống kê trong giao diện của CPX24

Khi Total cash available trên 0.5 thì sẽ hiện ra mục (Request cashout). Nhấp vào đó, rồi điền số tiền muốn thanh toán và địa chỉ email của paypal để họ chuyển tiền.

Và đây là số tiền họ đã thanh toán qua Paypal

Để bắt đầu hãy bấm ĐĂNG KÝ và điền đầy đủ thông tin.
Với CPX24 không cần duyệt web, đăng ký chèn code vào web là họ bắt đầu tính traffic.

Tạo Search Box đẹp cho Blogger bằng JSON Script

Blogger ngày nay đã trở nên phổ biến đối với mọi người, để có một website đẹp, ngoài giao diện bắt mắt thì chức năng tìm kiếm cũng khá quan trọng. Bài viết này sẽ hướng dẫn cho các bạn tạo ra một Search Box đẹp, và tìm kiếm chính xác hơn là chức năng Search mặc định.

Với cách này, khung Search sẽ hiện ra ngay trang bạn đang xem mà không bị chuyển trang.

HƯỚNG DẪN:

- Mở Editor HTML của Templates đang dùng:
- Chèn vào trước ]]></b:skin>  đoạn code sau:

#search-form-feed {
  width:200px; /* search box */
  float:right;
  position:relative;
  margin:4px 10px 4px 10px;
  padding:0 0;
  font:normal normal 11px Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  display:block;
  width:100%;
  border:2px solid #bbb;
  background-color:white;
  padding:5px 5px;
  font:normal bold 13px Tahoma,Arial,Sans-Serif;
  color:#ccc;
  margin:0 0;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:10px;
  -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#feed-q-input:focus {
  border-color:#0D6786;
  color:#333;
  outline:none;
  -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  right:0;
  z-index:999;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#search-result-container mark {
  background-color:yellow;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  color:#0D3E71;
  font-weight:bold;
  font-size:12px;
  display:block;
}

#search-result-container a:hover {
  color:#052748;
}

#search-result-container h4 {
  margin:0 0 10px;
  font:normal bold 12px Arial,Sans-Serif;
  color:#B50001;
}

#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0 0;
}

#search-result-container li {
  margin:0 0 1px;
  padding:7px 8px;
  list-style:none;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px 2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:999;
  background-color:#0D6786;
  color:white;
  padding:3px 5px;
  margin:-2px 0 0;
  font:normal bold 10px Arial,Sans-Serif;
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
  display:none;
}

- Sau đó tạo một Widget HTML hoặc tìm nơi muốn đặt Search Box chèn script này vào:

<div id="search-form-feed">
    <form action="/search" onsubmit="return updateScript();">
        <input name="q" type="text" value="Tìm kiếm..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/>
    </form>
    <div id="search-result-container"></div>
    <div id="search-result-loader">Loading...</div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
    url: "http://www.azmobi.net/", // URL Blog
    numPost: 9999, // Số lượng tối đa các kết quả
    summaryPost: true, // 'true' Nếu bạn muốn hiển thị mô tả của bài viết
    summaryLength: 400, // Số ký tự tóm tắt hiển thị cho bài viết
    resultTitle: "Kết quả tìm kiếm", // Kết quả tìm kiếm
    noResult: "No result", // Mô tả 'không tìm thấy'
    resultThumbnail: true, // 'true' Hiển thị hình thu nhỏ bài viết
    thumbSize: 40, // Kích thước hình thumbnail
    fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdasWsn8FfOXjmosUqoXbqXfvaKWzitbJ8fqdhHIpFoaTJXicM-npb7auVvFEYzf_Fs6FXAvDbSCZAU2dXMMKMqhYnwNQ8zpxyU9LCoMBqqbOrBMpYIR7ZYl9YIDELlY-J64is8FjHaxBE/s72/no-image-72x72.png" // Hiển thị Thumbnail nếu bài viết không có hình
};
//]]>
</script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/q5w06d47r395tlw/blogger-quick-search.js"></script>

- Nhớ thay đổi URL Blog của bạn, đoạn màu vàng.