.jpg)
Home » Archives for tháng 4 2012
Tạo thumb cho bài đăng phổ biến
08:22 |" Ức chế quá với cái thumb, bé tý xíu thế này, xấu thật... "
Đã bao giờ bạn phải thốt lên như thế này chưa. Định dạng mặc định của ảnh trong Blog và PopularPosts là 72x72. Nhiều bạn không thích với định dạng này nhưng vẫn phải cố sử dụng như một sự ép buôc. Nhưng nếu dân tình kêu ca nhiều thì chắc Google cũng phải nghĩ đến giải pháp cho một cái biến ảnh ban đầu. Chờ thì hơi sốt ruột.
Mình đã tìm ra một quy luật rất hay muồn chia sẻ cùng các bạn, nếu các bạn để ý link thumb này sẽ có định dạnh như sau.
Hãy chú ý đến phần mình bôi đỏ, đó chính là định dạng mà Google quy định. Nếu bạn thay thử các con số khác vào số 72 ta sẽ được các hình ảnh tương ứng với kích cỡ đó. Và nó là hình vuông.
Kích thước tối đa là 2000px.
Từ đó mình viết lên một hàm convertThumb có chức năng tương ứng createSummaryAndThumb, sử dụng thì chắc không khó. Áp dụng với cả 2 widget mà Blogspot đã cho. Mình nghĩ ưu điểm của hàm này so với hàm của các Blogger nước ngoài sẽ nhanh và tốt hơn.
Hàm convert :
function converthumb(img,s,w,h,url,tit){
if(Number(s) > 2000){s = 2000;}
img = img.replace(/s72/gi,"s"+s+"");
if(url != "" || tit != ""){
data = '<img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/>';
}else{
data = '<a href="'+url+'" rel="'+tit+'"><img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/></a>';
}
document.write(data);
}
Các biến truyền vào :
Sử dụng
- Đầu tiên bạn copy và save với định dạng file convert.js sau đó up lên host nào đó.
1. Blog
VD: mình muốn lấy ảnh 800, rộng 300, cao 250
<b:if cond='data:post.thumbnailUrl'>
<script>
converthumb("<data:post.thumbnailUrl/>","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<img src="http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg" width="300" height="250"/> <!-- nếu không có thumb sẽ hiển thị ảnh này -->
</b:if>
2. PopularPosts
Tương tự:
<b:if cond='data:post.thumbnail'>
<script>
converthumb("<data:post.thumbnail />","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<a class='poster' expr:rel="data:post.title" expr:href='data:post.href'>
<img expr:alt="data:post.title" border='' height='250px' src='http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg' width='300px'/>
</a>
</b:if>
Theo yêu cầu của netdohoa.com
Chúc các bạn thành công !
Đã bao giờ bạn phải thốt lên như thế này chưa. Định dạng mặc định của ảnh trong Blog và PopularPosts là 72x72. Nhiều bạn không thích với định dạng này nhưng vẫn phải cố sử dụng như một sự ép buôc. Nhưng nếu dân tình kêu ca nhiều thì chắc Google cũng phải nghĩ đến giải pháp cho một cái biến ảnh ban đầu. Chờ thì hơi sốt ruột.
Mình đã tìm ra một quy luật rất hay muồn chia sẻ cùng các bạn, nếu các bạn để ý link thumb này sẽ có định dạnh như sau.
VD : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Zcw6fgw1fmWyOk-suqsW42enOngMhRDdk71TLDqbVVxbnNxDi07Ag7Shc6v4WcqKqnXQ08730DKYs7ygTWTqi7iNFB5nTm2h3PO8qufv5PfoqY-6AroI2j8Il3h4WP6NOaht1K6h178/s72-c/xem-phim-Giay+thuy+tinh-maphim.net.JPG
Hãy chú ý đến phần mình bôi đỏ, đó chính là định dạng mà Google quy định. Nếu bạn thay thử các con số khác vào số 72 ta sẽ được các hình ảnh tương ứng với kích cỡ đó. Và nó là hình vuông.
Kích thước tối đa là 2000px.
Từ đó mình viết lên một hàm convertThumb có chức năng tương ứng createSummaryAndThumb, sử dụng thì chắc không khó. Áp dụng với cả 2 widget mà Blogspot đã cho. Mình nghĩ ưu điểm của hàm này so với hàm của các Blogger nước ngoài sẽ nhanh và tốt hơn.
Hàm convert :
function converthumb(img,s,w,h,url,tit){
if(Number(s) > 2000){s = 2000;}
img = img.replace(/s72/gi,"s"+s+"");
if(url != "" || tit != ""){
data = '<img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/>';
}else{
data = '<a href="'+url+'" rel="'+tit+'"><img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/></a>';
}
document.write(data);
}
Các biến truyền vào :
- img là link của các biến sau : data:post.thumbnailUrl (Blog), data:post.thumbnail (PopularPosts)
- s : kích thước bạn muốn convert từ 72 sang.
- w : chiều rộng của ảnh được hiển thị.
- h : chiều cao của ảnh được hiển thị.
- url : là link truyền vào data:post.href (PopularPosts), data:post.url (Blog)
- tit : tiêu đề truyền vào data:post.title (cả 2)
- s : kích thước bạn muốn convert từ 72 sang.
- w : chiều rộng của ảnh được hiển thị.
- h : chiều cao của ảnh được hiển thị.
- url : là link truyền vào data:post.href (PopularPosts), data:post.url (Blog)
- tit : tiêu đề truyền vào data:post.title (cả 2)
Sử dụng
- Đầu tiên bạn copy và save với định dạng file convert.js sau đó up lên host nào đó.
1. Blog
VD: mình muốn lấy ảnh 800, rộng 300, cao 250
<b:if cond='data:post.thumbnailUrl'>
<script>
converthumb("<data:post.thumbnailUrl/>","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<img src="http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg" width="300" height="250"/> <!-- nếu không có thumb sẽ hiển thị ảnh này -->
</b:if>
2. PopularPosts
Tương tự:
<b:if cond='data:post.thumbnail'>
<script>
converthumb("<data:post.thumbnail />","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<a class='poster' expr:rel="data:post.title" expr:href='data:post.href'>
<img expr:alt="data:post.title" border='' height='250px' src='http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg' width='300px'/>
</a>
</b:if>
Chúc các bạn thành công !
Tạo lại header cho chuẩn Seo
12:32 |Như các bạn đã biết BlogSpot giờ không thua kém các người anh em cùng họ. Phần mô tả đã cung cấp đầy đủ đến tận các bài viết con (item).. Nhưng nhiều bạn chưa biết cách vận dụng hết các chức năng đó. Trong phần đầu tiên này mình sẽ giới thiệu về phần "Mô tả", có thể coi đây là tóm tắt nội dung của bài viết, giúp cho các rotbot có thể tìm kiêm dễ dàng.
Đầu tiên, các bạn vào phần Cài đặt >> Tuỳ chọn tìm kiếm >>
- Bật phần mô tả lên, nội dung mà bạn gõ vào chính là phần mô tả ở trang home.
- Để hiện phần mô tả cho trang con thì làm như thế nào.
- Bạn copy một đoạn trong bài viết và dán vào dây.
Bạn có thể viewsource trang sau để thấy rõ :
Nhưng câu hỏi đặt ra như sau, nhiều khi bạn quên không copy, hay với data 1k bài viết có sẵn của bạn phải làm sao để có 1k mô tả. Bạn phải đi copy cho từng bài :((..Phát ốm luôn. !
Mình sẽ chỉ các bạn các fix sau đây.
Copy và thay thế đoạn code bạn đang có nằm giữa <head> và <b:skin>
Các từ khoá màu đỏ là phần bạn sẽ thay.
= > Cho dù bạn có quên copy thì bạn vẫn có một mô tả, nhưng để có 1 mô tả đẹp thì bạn nên copy một đoạn nhỏ vào mô tả tìm kiếm. Và giờ có 1k bài viết bạn cũng chả lo ngại gì.
Thêm một lưu ý rằng dòng lệnh :
rất quan trọng với blogspot, nếu có trót lỡ bỏ thì bạn hay thêm nó vào, nếu không bạn sẽ mất một vài index đấy ;)) . Nó bao gồm cả biến : data:blog.metaDescription (mình hay dùng nó thay cho data:post.snippet).
Bài viết sau chắc mình sẽ giới thiệu một số page 404 độc độc, nghịch nghịch một chút. Giờ cũng muộn rồi nên ngừng gõ ở đây.
Chúc các bạn thành công !
Đầu tiên, các bạn vào phần Cài đặt >> Tuỳ chọn tìm kiếm >>
- Bật phần mô tả lên, nội dung mà bạn gõ vào chính là phần mô tả ở trang home.
- Để hiện phần mô tả cho trang con thì làm như thế nào.
- Bạn copy một đoạn trong bài viết và dán vào dây.
Bạn có thể viewsource trang sau để thấy rõ :
Nhưng câu hỏi đặt ra như sau, nhiều khi bạn quên không copy, hay với data 1k bài viết có sẵn của bạn phải làm sao để có 1k mô tả. Bạn phải đi copy cho từng bài :((..Phát ốm luôn. !
Mình sẽ chỉ các bạn các fix sau đây.
Copy và thay thế đoạn code bạn đang có nằm giữa <head> và <b:skin>
<b:include data='blog' name='all-head-content'/>
<!-- title, keyword -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content=' nhập các từ khoá của bạn ' name='keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title>Thủ thuật <data:blog.pageName/> | 24h online </title>
<b:else/>
<title><data:blog.pageName/> - Teteit </title>
</b:if>
<meta name="keywords" expr:content="data:blog.pageName + " nhập các từ khoá của bạn "" />
</b:if>
<!-- meta -->
<meta name="robots" content="index, follow" />
<meta content="index, follow" name="GOOGLEBOT" />
<meta content="index, follow" name="yahooBOT" />
<meta name="author" content="suzuki_aka"/>
<!-- mota -->
<b:if cond='data:blog.metaDescription == ""'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta name="description" expr:content="data:blog.pageName + " nhập các mô tả chung, hoặc từ khoá "" />
</b:if>
</b:if>
<!-- title, keyword -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content=' nhập các từ khoá của bạn ' name='keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title>Thủ thuật <data:blog.pageName/> | 24h online </title>
<b:else/>
<title><data:blog.pageName/> - Teteit </title>
</b:if>
<meta name="keywords" expr:content="data:blog.pageName + " nhập các từ khoá của bạn "" />
</b:if>
<!-- meta -->
<meta name="robots" content="index, follow" />
<meta content="index, follow" name="GOOGLEBOT" />
<meta content="index, follow" name="yahooBOT" />
<meta name="author" content="suzuki_aka"/>
<!-- mota -->
<b:if cond='data:blog.metaDescription == ""'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<meta name="description" expr:content="data:blog.pageName + " nhập các mô tả chung, hoặc từ khoá "" />
</b:if>
</b:if>
Các từ khoá màu đỏ là phần bạn sẽ thay.
= > Cho dù bạn có quên copy thì bạn vẫn có một mô tả, nhưng để có 1 mô tả đẹp thì bạn nên copy một đoạn nhỏ vào mô tả tìm kiếm. Và giờ có 1k bài viết bạn cũng chả lo ngại gì.
Thêm một lưu ý rằng dòng lệnh :
<b:include data='blog' name='all-head-content'/>
rất quan trọng với blogspot, nếu có trót lỡ bỏ thì bạn hay thêm nó vào, nếu không bạn sẽ mất một vài index đấy ;)) . Nó bao gồm cả biến : data:blog.metaDescription (mình hay dùng nó thay cho data:post.snippet).
Bài viết sau chắc mình sẽ giới thiệu một số page 404 độc độc, nghịch nghịch một chút. Giờ cũng muộn rồi nên ngừng gõ ở đây.
Chúc các bạn thành công !
Mẹo vặt trong thiết kế Template Blogspot
05:18 |Đối với các Blogger ưa “táy máy” thì việc “vọc” code không những là thú vui mà còn là sự đam mê, là nơi cho những ý tưởng đầy sáng tạo thỏa sức bay bổng.
Không những vậy, nó thậm chí còn có thể mang lại lợi nhuận không nhỏ một khi bạn đã trở thành một Pro Blogger Designer, bằng việc bán Template, bán back-link,…
Tuy nhiên, để trở thành một Pro Blogger Designer không phải một sớm một chiều mà được. Và trong bài viết bên dưới, iTechPlus sẽ giới thiệu đến các bạn mới gia nhập Blogspot, một số mẹo nhỏ cơ bản trong quá trình thiết kế Template cho riêng mình.
1. Xóa thanh Navbar :
Thanh Navbar là thanh chứa các công cụ như Tìm kiếm, theo dõi, chia sẻ, báo cáo lạm dụng,…xuất hiện phía trên cùng của Blog.
Cách loại bỏ : chèn dòng code bên dưới trước thẻ đóng </b:skin>
.Không những vậy, nó thậm chí còn có thể mang lại lợi nhuận không nhỏ một khi bạn đã trở thành một Pro Blogger Designer, bằng việc bán Template, bán back-link,…
Tuy nhiên, để trở thành một Pro Blogger Designer không phải một sớm một chiều mà được. Và trong bài viết bên dưới, iTechPlus sẽ giới thiệu đến các bạn mới gia nhập Blogspot, một số mẹo nhỏ cơ bản trong quá trình thiết kế Template cho riêng mình.
1. Xóa thanh Navbar :
Thanh Navbar là thanh chứa các công cụ như Tìm kiếm, theo dõi, chia sẻ, báo cáo lạm dụng,…xuất hiện phía trên cùng của Blog.
Tạo button cho phép bạn ẩn/hiện nội dung
01:07 |
Chỉ với 1 dòng lệnh kết hợp với các thẻ div là bạn có thể tạo 1 button cho phép ẩn hiện nội dung của bạn khi click vào nó. Thủ thuật này ta thường thấy trong các forum ,web , blog...Các bạn xem đoạn code sau đây nhé.
Top Hot
