Aug 22, 2014

Hiện là mạng xã hội toàn cầu lớn nhất hiện nay, có thể nói là nhà nhà Facebook, người người Facebook, chính vì vậy việc thêm bình luận (comment) của Facebook cho blogspot là rất cần thiết, vừa tạo được nơi bình luận, chém gió cho mọi người, vừa dễ đưa bài viết tới người đọc bởi hiệu ứng lan truyền của nó. Hôm nay, mình xin hướng dẫn các bạn cách thêm khung chat, comment của Facebook cho từng bài viết vào blogspot.

Jun 27, 2014

Nếu bạn để ý thì ở các trang báo điện tử, các bài viết luôn có phần xem trước có nội dung là một phần của bài viết, rồi có link đọc thêm để ai muốn đọc toàn bài thì mới click vào. Theo mặc định khi viết bài với blogspot thì không như thế, bài của của bạn sẽ trưng ra toàn bộ, chứ không có đọc thêm, đọc nếm gì cả :) 

                                    Đọc Thêm---->


Chính vì thế gây bất tiện ở 3 chỗ: 
  • Trang web sẽ tải chậm hơn vì nó sẽ phải tải cả bài thay vì chỉ tải phần tóm tắt. Đặc biệt là trong trường hợp khi phần nội dung có nhiều ảnh...Cả bài viết thông thường sẽ có dung lượng tính ra byte gấp 3 - 4 lần phần tóm tắt, có khi lên tới 6 - 7 lần.
  • Trang web trông không gọn gàng và khó theo dõi, bởi vì khi ấy người đọc khó xem toàn blog để tìm ra bài viết mà họ cảm thấy thích đọc.
  • Bạn sẽ khó biết được người đọc quan tâm đến bài viết nào hơn, bởi vì họ chỉ cần kéo chuột để đọc cả bài thay vì click vào bài cụ thể để đọc.
Thực ra ăn to nói lớn vậy chứ, để thu gọn bài viết lại không có gì khó khăn cả, có một mẹo rất đơn giản, nó nằm ngay trong phần viết bài của blogspot, đó chính là " dấu ngắt nhảy
Dấu ngắt nhảy

Bạn muốn ngắt bài viết ở chỗ nào thì click vào chỗ đó, rồi nhấn vào dấu ngắt nhảy. Sẽ có một đường gạch ngang chấm chấm màu xám biểu thị phần xem trước của bài viết. 


Biểu thị phần xem trước
Như vậy là thành công rồi... Tất nhiên với từng bài viết bạn đều phải tự tay đặt dấu ngắt cụ thể ở chỗ nào. 
Mới đầu khi đặt dấu ngắt nhảy, nếu không khéo hay xảy ra tình trạng là khoảng cách giữa phần xem trước của bài và phần còn lại hơi gần hoặc hơi xa quá, cái này bạn nghịch chút là sửa được ngay. Chúc bạn có một trang blog đẹp hơn.


Bạn muốn trang blogspot của mình có một tên miền đẹp hơn - mà bạn mới mua ở một nhà cung cấp dịch vụ tên miền nào đó. Thế thì bạn đang ở đúng nơi - mình sẽ hướng dẫn bạn cách trỏ trang blogspot đó về tên miền mới của bạn. 

Trước tiên bạn vào phần Cài đặt > Địa chỉ blog > Thêm tên miền tùy chỉnh, sau đó bạn thêm tên miền của bạn vào. Tên miền bạn điền vào phải có dạng www.tenmiencuaban.com hoặc blog.tenmiencuaban.com hoặc xyz-abc-gi-thi-tuy-ban.tenmiencuaban.com, nếu bạn chỉ điền tenmiencuaban.com vào thì nó sẽ báo lỗi. 

Sau đó Google sẽ cung cấp 2 thông số cho bạn để sang phần tên miền mới mua điền vào đó. Nó sẽ có kiểu như thế này: 

www                 ghs.google.com cái này thì được cấp giống nhau
jeevnrlhyzklm        gv-h6kxyzklmuib.dv.googlehosted.com còn cái này mỗi blog một khác bạn nhé - blog của bạn chắc chắn sẽ khác

Rồi, giờ thì đăng nhập vào phần quản trị domain của bạn để cấu hình như sau: 

Cấu hình tên miền

Riêng phần @ bạn phải chú ý, trước đây chỗ này bạn điền 4 IP có dải như sau: 

216.239.32.21 
216.239.34.21 
216.239.36.21 
216.239.38.21 

Nhưng ở VN mình blogspot đôi khi khó truy cập nên dải IP này không hiệu quả nữa - nếu bạn vẫn điền những IP này thì domain dạng www.tenmiencuaban.com thì có thể vào được nhưng dạng không có 3w là tenmiencuaban.com thì sẽ không vào được. Giờ bạn chỉ cần điền IP như trên:  74.125.128.121 là sẽ OK thôi. 

Tiếp đến bạn quay ra phần blog để lưu lại, sau đó tick vào phần Chuyển hướng tenmiencuaban.com đến www.tenmiencuaban.com. Để khi bạn gõ không có www nó vẫn đến tên miền có www hoặc subdomain nào khác mà bạn chọn (chẳng hạn blog.tenmiencuaban.com). 

Chuyển hướng không có www về có www
Click vào hình để thấy rõ hơn
Bạn lưu lại lần nữa là thành công. Rồi bạn chờ - nhanh thì 5 phút mà chậm thì vài tiếng để DNS cập nhật - và bạn sẽ có kết quả như mong đợi :))

Theo mặc định biểu tượng của blogspot trên tab trình duyệt sẽ là chữ B màu trắng trên nền màu cam - thông thường thì bạn sẽ muốn thay đổi biểu tượng này để tạo cá tính riêng cho trang web.

Cách làm như sau, đầu tiên là vào phần Bố cục:
Vào bố cục
Tiếp đến nhấn vào liên kết chỉnh sửa của Favicon:
Chỉnh sửa favicon

Một cửa sổ mới bật ra - nhấn vào Chọn tệp tin để chọn hình đại diện từ máy tính của bạn - bạn nhớ phải chọn hình vuông có độ lớn không quá 100KB: 

Chọn hình vuông có kích thước dưới 100KB

Cuối cùng nhấn Lưu là thành công.
Thanh điều hướng
Theo mặc định Blogspot tạo thanh điều hướng ở vị trí trên cùng trong blogspot, điều này đôi khi gây ảnh hưởng không tốt đến các giao diện muốn chuyên nghiệp hơn. Hôm nay Blog Mạng Lưới Toàn Cầu sẽ trình bày cho bạn thủ thuật nhỏ để loại bỏ thanh này. 

Đầu tiên là vào phần Bố cục:
Vào bố cục
Bước 2 vào phần Thanh điều hướng, nhấn chỉnh sửa:
Chỉnh sửa thanh điều hướng
Một cửa sổ mới mở ra, bạn tiến hành bước 3 - cũng là bước cuối cùng, chọn Tắt rồi nhấn Lưu:
chọn Tắt rồi nhấn Lưu


Zoom ảnh có nhiều cách, trong đó chủ yếu dựa vào CSS3 hoặc Jquery và đôi khi là cả hai. Nếu xài Jquery bạn có các hiệu ứng zoom rất đẹp, xài CSS3 thì hiệu ứng tuy không bằng nhưng bù lại code rất đơn giản - miễn phí và không đòi hỏi tải thư viện khá nặng có thể làm chậm đi tốc độ lướt web. 

Chúng ta sẽ áp dụng 2 thuộc tính của CSS3: 
  • transform: scale(x,y)  -  theo đó x, y là các giá trị ta muốn phóng lên theo trục x và y, thường thì ta để x = y để bức ảnh được phóng to mà vẫn giữ nguyên tỉ lệ. Chẳng hạn transform: scale(2,2) sẽ làm bức ảnh phóng to lên 2 lần
  • transition: all 1s ease  -  theo đó chúng ta sẽ làm bức ảnh được phóng to dần dần trong khoảng thời gian 1s chứ không bụp một cái to lên luôn (hơn Thánh Gióng!)
Và giờ là code mẫu:
img {
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
img:hover {
transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
}
Đoạn code trên có nghĩa là mọi hiệu ứng chuyển đổi sẽ diễn ra trong vòng 1s, hiệu ứng sẽ xảy ra khi hover qua ảnh và làm bức hình tăng kích thước lên 1.5 lần. Các tiền tố -webkit, -moz, -o, -ms là để phù hợp với các trình duyệt khác nhau.