Thứ Sáu, 1 tháng 5, 2015

Làm sao để tích hợp Responsive vào blogspot?

Ngày nay blogspot đang phổ biến nhất hiện nay vì ưu điểm của nó là tiện lợi, giá rẻ, dễ quản lý, và nhu cầu tất yếu của Blogspot là tích hợp giao diện mobi cho blogspot được người dùng đặt lên hàng đầu. Vì phần lớn người dùng hoặc khách hàng của họ quá bận rộn và thường xuyên online bằng điện thoại hoặc ipad. Các bạn có thể xem hình dưới là giao diện sau khi đã được tích hợp Responsive được hiển thị trên tất cả thiết bị.
Làm sao để tích hợp Responsive vào blogspot?
Làm sao để tích hợp Responsive vào blogspot?
Vì lý do này nên mình hướng dẫn các bạn cách tích hợp Responsive vào website hoặc blogspot
Tất cả những thao tác sau các bạn thực hiện trên templates blogspot cần tích hợp. Đăng nhập vào phần quản trị blogspot > Mẫu > Chỉnh sửa HTML.
Bước 1 : Trên templates blogspot các bạn tìm giúp mình thẻ <head> và thêm thẻ meta sau ngay dưới nó.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
Bước 2 : Tiếp tục thao tác trên templates blogspot của mình các bạn tìm đến thẻ ]]></b:skin>, tức là nơi lưu trữ css của blogspot và thêm đoạn code css này vào bên trên thẻ ]]></b:skin>.
@media screen and (max-width : 1280px) {/* CSS FOR NETBOOK AND DESKTOP ------------*/}
@media screen and (max-width : 1024px) {/* CSS FOR TABLETS ------------*/}
@media screen and (max-width : 768px) {/* CSS FOR SMALL TABLETS ------------*/}
@media screen and (max-width : 640px) {/* CSS FOR IPHONE ------------*/}
@media screen and (max-width : 480px) {/* CSS FOR MOBILES ------------*/}
@media screen and (max-width : 320px) {/* CSS FOR SMALL OLD MOBILES ------------*/}
Hai đoạn code này sẽ hỗ trợ nhau giúp khi bạn vào bất cứ thiết bị nào thì main blogspot của bạn sẽ co giản hợp lý mà không bị vỡ khung như các trường hợp thường gặp.

Thứ Tư, 29 tháng 4, 2015

Các PHP framework hay và thông dụng trong thiết kế web

5 PHP Framework được đánh giá là tốt và phổ biến nhất hiện nay:

1. The Zend Framework

Zend là một [framework] PHP mạnh mẽ , an toàn hơn, đáng tin cậy và cho phép các ứng dụng Web 2.0 và service web. Framework này ban đầu được xây dựng bởi ngôn ngữ lập trình web PHP. Nó được làm giàu với các API từ các nhà cung cấp hàng đầu như Google, Amazon, Yahoo, Flickr vv mà làm cho nó sự lựa chọn cho các doanh nghiệp lớn.

Trên thực tế, Zend có khá là nhiều bạn có thể hy vọng tìm thấy một framework PHP tốt trong đó. Nó mạnh mẽ, nhanh chóng và khả năng mở rộng. Nhu cầu đối với các nhà phát triển Zend là to lớn và biết làm thế nào để sử dụng Zend là giống như có một sự đảm bảo rằng bạn sẽ không bao giờ ra khỏi công việc.

Trang chủ: http://framework.zend.com/ 
Tài liệu: http://framework.zend.com/docs/ 
Download: http://framework.zend.com/downloads/latest 
Zend Framework có 1 cộng đồng phát triển rộng lớn, và nó tập trung vào các ứng dụng web theo phong cách 2.0. Vì được phổ biến rộng rãi, và có 1 cộng đồng người dùng tích cực, Zend được gọi là “Công ty PHP”. Zend là 1 trong những framework phổ biến nhất hiện nay. Nó có các tính năng mạnh mẽ, thường được sử dụng cho các công ty lớn, và bạn cần phải có lượng kiến thức khá sâu rộng về PHP để có thể sử dụng được nó. 

2. CakePHP Framework
CakePHP là một framework phổ biến cho phát triển ứng dụng web. Đơn giản của nó để tìm hiểu rằng cung cấp một cấu trúc cơ bản của tổ chức, giữ cho toàn bộ ứng dụng của nhất quán và hợp lý. Nó có thể xử lý mọi khía cạnh, từ yêu cầu ban đầu của người dùng tất cả các cách để cuối cùng vẽ được một thiết kế web. Và kể từ khi khuôn khổ theo các nguyên tắc của MVC, nó cho phép bạn dễ dàng tùy biến và mở rộng hầu hết các khía cạnh của ứng dụng của bạn.
Trang chủ: http://www.cakephp.org 
Tài liệu:http://book.cakephp.org/2.0/en/index.html 
Download: https://github.com/cakephp/cakephp/tags

3. CodeIgniter framework
Hiện nay, CodeIgniter cũng là một sự lựa chọn của hầu hết các nhà phát triển PHP. Nó tương đối dễ dàng để tìm hiểu. Tính năng khôn ngoan, CodeIgniter là khuôn khổ mạnh mẽ như Zend và Cake. Mục tiêu chính của nó là để cho phép bạn phát triển các dự án thiết kế web nhiều hơn, nhanh hơn bạn có thể, bằng cách cung cấp một tập các thư viện phong phú cho các nhiệm vụ thông thường, cũng như một giao diện đơn giản và cơ cấu hợp lý để truy cập vào các thư viện. CodeIgniter cho phép bạn sáng tạo tập trung vào các dự án của bạn bằng cách giảm thiểu số lượng mã cần thiết cho một công việc nhất định.
Trang chủ: http://www.codeigniter.com/ 
Tài liệu : http://ellislab.com/codeigniter/user-guide/ 
Download: http://codeigniter.com/downloads/

4. Seagull 
Seagull cũng là 1 PHP framework tốt phục vụ cho việc xây dựng thiết kế web và các GUI. Nó là 1 framework cực kỳ dễ sử dụng cho cả những người mới mới làm quen với lập trình PHP đến những chuyên gia trong lập trình PHP. Với những người mới làm quen với lập trình PHP, Seagull cung cấp 1 thư viện các mẫu ứng dụng có thể được tùy chỉnh để phù hợp với nhu cầu của bạn. Đối với các chuyên gia PHP, Seagull cung cấp các tùy chọn máy chủ, bao gồm các phương pháp hay nhất, tiêu chuẩn, và modular codebase – giúp các lập trình viên xây dựng các ứng dụng web một cách nhanh chóng và dễ dàng. Seagull có một cộng đồng phát triển rộng lớn và nhiều tài liệu hướng dẫn hỗ trợ. 
Trang chủ website: http://www.seagullproject.org/
Link download:      http://seagullproject.org/download/ 
Link tài liệu:           http://seagullproject.org/docs/ 

5. Symfony Framework

Một khuôn khổ PHP hoàn chỉnh được thiết kế để tối ưu hóa sự phát triển của các ứng dụng web. Symfony được viết hoàn toàn bằng ngôn ngữ lập trình web PHP. Nó đã được kiểm tra kỹ lưỡng trong các dự án thực tế, và thực sự là sử dụng cho các thiết kế web bán hàng thương mại điện tử có nhu cầu cao. Nó tương thích với hầu hết các công cụ cơ sở dữ liệu có sẵn, bao gồm cả [MySQL], PostgreSQL, Oracle, và Microsoft SQL Server. Nó chạy trên nền tảng Unix và Windows. 
Trang chủ: http://www.symfony-project.com/ 
Tài liệu:http://www.symfony-project.org/doc/1_4/ 
Download: http://symfony.com/download#legacy

Thứ Hai, 27 tháng 4, 2015

Hướng dẫn vô hiệu hóa js mặc định cho blogspot

Đây là vấn đề thường gặp khi bạn là một thiết kế hay là bạn chỉnh sửa cho blogspot của mình, khi thêm css vào blog nhưng mà nó không như ý muốn. bởi vì js mặc định nó đã làm điều đó làm bạn khó chịu.JS mặc định ở đây là những đoạn js ở cuối blog khi bạn ctrl + U.

Những link js mặc đinh thường có dạng như sau :
<script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); </script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3186034670-widgets.js"></script>
< script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Cũng lưu ý một điều cho các bạn là newbi, nếu bạn không biết gì về css thì đôi khi blog sẽ bị vỡ khung khi làm điều này nên rất xấu xí :))
Vậy chúng ta bắt đầu thực hiện nhé, đăng nhập vào templates blogspot tìm đến các thẻ sau : 
<html>
<head>
 ... 
</head>
<body>
 ... 
</body>
</html>
Và thay thế chúng bằng
<html>
&lt;head&gt;
 ... &lt;/head&gt;
&lt;body&gt;
 ... &lt;!--<head/>--&gt;
&lt;!--<body/>--&gt;
&lt;/body&gt;
</html>
Trong đó ... là code trên blog của các bạn.

Như vậy là đã xong, nhưng đôi khi làm việc này thì các bạn mất quyền kiểm soát comments blog, có nghĩa là bạn không thể xóa comments trên blogspot được, nếu bị như vậy các bạn làm như sau : 

Thêm đoạn code này vào phầm css của blog bạn
div.blog-admin, div.pid-xxxxxxxxx { display:block; }
span.blog-admin, span.pid-xxxxxxxxx { display:inline; }
Trong đó bạn thay xxxxxxxxx thành ID blog của bạn. Mọi việc tới đây dường như có vẻ đã ổn, và các bạn có thể kiểm tra kết quả như hình dưới.
Hướng dẫn vô hiệu hóa js mặc định của blogspot
Hướng dẫn vô hiệu hóa js mặc định của blogspot

Chủ Nhật, 26 tháng 4, 2015

Code hiện tổng bài đăng cho blogspot

Đây là đoạn code giúp hiển thị tổng số bài đăng, có nghĩa là blog của bạn có tất cả bao nhiu bài viết, và đây cũng là một thủ thuật rất là đơn giản nhưng mà có một bạn yêu cầu nên mình chia sẻ cho tất cả cùng làm.
Code hiện tổng bài đăng cho blogspot
Code hiện tổng bài đăng cho blogspot

Để làm điều này các bạn làm theo hai bước sau :

Bước 1: Các bạn vào phần bố cục thêm tiện ích HTML/Javascript và dán vào đó đoạn code dưới
Hiện có : <script type="text/javascript">
// Posts Count :: http://www.thuthuatblogger.org/function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}
</script>
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showpostcount"></script> bài đăng

  • Thay link blog thành link blogspot của bạn
  • Sửa chữ hiện có và bài đăng theo ý các bạn
Bước 2 : Lưu tiện ích lại và xem thành quả của bạn vừa làm đc nhé. Chúc các bạn online vui vẻ.

Thứ Sáu, 17 tháng 4, 2015

Yếu tố quan trọng nhất để làm seo cho blogspot/blogger

Để làm seo cho blogspot nói riêng hay là blogger nói chung thì mình thấy rất nhiều bạn chú ý đến giao diện hay theme chuẩn SEO mà bỏ qua những điểm quang trọng khác của SEO. Bài viết này mình bày tỏ quan điểm seo của mình những yếu tố nào quan trọng nhất để có một blog chuẩn seo.
Yếu tố quan trọng nhất để làm seo cho blogspot/blogger
Yếu tố quan trọng nhất để làm seo cho blogspot/blogger

Những yếu tố quang trọng nhất trong seo mà những người làm seo cần chú ý đến

  • Kiên nhẫn : SEO là cần đến sự kiên nhẫn và chờ đợi, khi bạn seo một từ khóa nào đó hay seo một blogspot hay một website thì ngay lập tức hay 1,2 ngày không thể nào nó lên top cho bạn ngay được, phải có thời gian 1 hay 2 tuần, có khi cả tháng.
  • Bài viết chuẩn seo : là bài viết do bạn tự tay bạn viết, không sai chính tả, 3 đến 4 dòng phải xuống dòng, không được lặp đi lặp lại từ khóa quá nhiều, không được coppy bài viết người khác. (Việc này rất khó với newbi nên thường thì các bạn thường hay nãn và bỏ cuộc)
  • Trao đổi blacklink : Thường xuyên trao đổi liên kết qua lại với các blogger khác, đăng bài lên các diễn đàn và liên kết link về blog hay website của mình.
  • Tối ưu các thẻ meta và title cho code và hình ảnh : Đối với wordpress thì việc này thì có plugins làm hết rồi, riêng đối với blogspot thì hơi rắc rối chút xíu các bạn có thể tham khảo tại đây.
  • Chọn một templates tối ưu seo tốt : việc này hơi khó đối với newbi, khi seach google thì có rất nhiều templates blogspot hay wordpress chuẩn seo, nhưng thật ra thì 80% trong số đó thì chả chuẩn mấy, bởi vì người viết ghi như vậy để câu veiw thôi. Nếu bạn có tiền thì hãy thuê người thiết kế cho mình một mẫu cho riêng mình, còn nếu bạn không có điều kiện nên chọn cho mình một mẫu giao diện mặc định và thêm các tiện ích cần thiết để blog của bạn tối ưu tốt hơn.
Trên đây là 5 yếu tố mà theo quan điểm của riêng mình là nếu các bạn làm được mình nghĩ blogspot hay website của bạn ắc hẳng có thứ hạng cao trên kết quả tìm kiếm google.

Kết luận : Trong việc seo cho blogspot hay website các bạn đừng bỏ thời gian quan tâm những yếu tốt bên ngoài nhiều quá, hãy để thời gian chăm sóc blog và đầu tư vào bài viết của mình, cách bố trí từ khóa...Riêng mình đã từng seo vài từ khóa chỉ nhờ bài viết, và nó vẫn lên top google bình thường các bạn nhé.

Thứ Năm, 16 tháng 4, 2015

Tự động thêm thẻ alt và title image cho blogspot giống như wordpress

SEO là vấn đề muôn thuở đối với một blogger cũng như một seoer, có nhiều bạn hỏi mình đối với wordpress có plugins tự động thêm thẻ alt và title cho hình ảnh vậy đối với blogspot không dùng đến plugins thì phải làm sao. Và mình viết bài này để hướng dẫn cho các bạn cách làm sao để làm được việc đó.
Tối ưu thẻ alt và title cho blogspot bằng javascrips
Tự động thêm thẻ alt và title image cho blogspot giống như wordpress
Thưa với các bạn là đối với blogspot thì ngoài cách seo cho hình ảnh bằng cách điền thẻ alt và title thủ công thì chúng ta còn có một cách giúp tự động thêm thẻ alt và title hình ảnh cho blogspot giống hệt khi sử dụng plugins đó là bằng cách sử dụng scripts.

Vậy cách làm như nào?

Để làm được việc này các bạn đăng nhập vào phần quản trị blogspot, chỉnh sửa templates blogspot, tìm đến thẻ </body> và thêm đoạn code sau trên thẻ </body> nhé.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {$('img').each(function(){var $img = $(this);var filename = $img.attr('src')$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));});});</script>
<script type='text/javascript'>
$(document).ready(function() {$('img').each(function(){var $img = $(this);var filename = $img.attr('src')$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));});});
</script>
Cuối cùng là lưu templates blogspot lại và việc cần làm bay giờ để kiểm tra được thành quả bạn làm thì hãy thử đăng một bài viết có hình ảnh mà ko chèn thẻ alt và title thủ công như mọi khi và xem thử kết quá. Hồng tin rằng bạn sẽ thấy nhạc nhiên cho mà xem.

Kết luận : Theo Hồng nghĩ thì việc seo (tối ưu) hình ảnh cho blogspot là khá cần thiết, nếu các bạn không muốn sài scripts thì làm thủ công cũng được. Vì những hình ảnh của riêng bạn lại có thẻ alt và title thì được google rất xem trọng và giúp blogspot của bạn có thứ hạng cao trên công cụ tìm kiếm google.

Thứ Tư, 15 tháng 4, 2015

JQuery và CSS lên đầu trang siêu đẹp cho blogspot

Lên đầu trang hay còn gọi Black To Top là một tính năng khá cần thiết cho blogspot hay wedsite, bởi vì đối với những bài viết có độ dài khủng thì việc lăn chuột hay cuộn thanh trượt rất là phiền phức đối với người đọc.
JQuery và CSS lên đầu trang siêu đẹp cho blogspot
JQuery và CSS lên đầu trang siêu đẹp cho blogspot
Vậy làm sao để thêm tính năng này vào blogspot? Hôm nay Thuthuatblogger.org sẽ giúp các bạn làm điều này với 2 cách đó là dùng JQuery và CSS cho các bạn lựa chọn nhé.

Cách thứ nhất : Dùng JQuery

Bước 1 : Đăng nhập vào templates blogspot -> Mẫu -> Chỉnh sửa HTML
Bước 2 : Dán đoạn code sau trên thẻ đóng </body>
<style type='text/css'> #bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;} #bttop:hover{border:1px solid #ffa789;background:#ff6734;} </style> <div id='bttop'>BACK TO TOP</div> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
Bước 3 : Lưu mẫu (templates) lại và quay lại trang chủ blogspot xem kết quá

Cách thứ hai : Dùng CSS

Bước 1 : Đối với cách dùng CSS các bạn có thể làm bước 1 như ở bước dùng  JQuery là thêm code vào cuối templates blogspot. Hoặc có thể đơn giản hơn là các bạn vào Bố cục -> Thêm tiện ích HTML
Bước 2 : Ở đây hộp thoại mở ra các bạn dán vào đoạn code bên dưới
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UJADUoGyLP5BvGyO9_WQk-3RPocwMqfJd8LqnUa8TBobxUjr0yn18N6y6_Tep0Vo0SDpLqkP-hd5UpWApOcvrcQxZADfkU5R_xw9xRV3plmt_MFfDHs2Vsj1y7qw7fCjfpv2CYLezw/s1600/go-to-top.png"/></a>
Bước 3 : Các bạn có thể thay link ảnh bằng bất cứ link ảnh nào các bạn thấy đẹp nhé, lưu tiện ích lại và xem thành quả vừa làm được..
Kết luận : Đối với cách hướng dẫn trên thì các bạn có thể thay chữ Back to Top thành bất cứ chữ gì bạn thích, đây là một tiện ích rất phù hợp với các blogspot hay wedsite tin tức đem lại sự thân thiện cho người đọc.