Monday, January 14, 2013

Tùy biến nút Read More của Blogspot

Tùy biến nút Read More của Blogspot - by: http://namkna.blogspot.com/
Những ai đang dùng chức năng Read More (đọc thêm) mặc định của Blogger sẽ nhận ra là nó không được đẹp cho lắm, Trước đây mình đã hướng dẫn các bạn Xóa bỏ dòng chữ read more (đọc thêm bài viết) tuy nhiên nhiều người vẫn thích để lại dòng chữ này nhưng cần thay đổi cho đẹp hơn, vì vậy trong bài này Namkna sẽ hướng dẫn cách tùy biến sao cho trông bắt mắt hơn.




» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .

5.
Tìm dòng code có dạng sau:
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

- Thay thế toàn bộ đoạn ở trên bằng:

<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Đọc tiếp</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>
</b:if></b:if><div class='clear'/>

 - Thay chữ Đọc tiếp thành chữ mà bạn muốn như: Đọc thêm bài viết, xem thêm,...
6. Tiếp theo, chèn đoạn CSS sau phía trên thẻ ]]></b:skin>


Save template lại và xem kết quả.
- P/s: Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmore script cũng hoàn toàn có thể  áp dụng code này.
Chúc thành công!
Theo: noct

Xóa bỏ dòng chữ read more (đọc thêm bài viết)

Xóa bỏ dòng chữ read more (đọc thêm bài viết) - by: http://namkna.blogspot.com/
Theo yêu cầu của bạn Khải mình xẽ upload cho các bạn cách xóa bỏ dòng chữ Read more vè đọc thêm bài viết cho Blog. nó giúp cho Blog của bạn thực sự giống một webblog hơn trong mắt mọi người. Cách này đặc biệt hiệu quả với các mẫu template free các bạn download trên mạng về, các mẫu này không thể bỏ bằng cách bình thường được:
Các bạn có thể xem hình Demo trước và sau khi chỉnh sửa
Xóa bỏ dòng chữ read more (đọc thêm bài viết) - by: http://namkna.blogspot.com/
Các bước thực hiện các bạn làm như sau:
1- Vào thiết kế (Design)
2- Chỉnh sửa HTML (Edit HTML)
3- Mở rộng tiện ích mẫu 
Sau đó các bạn tìm đến đoạn Code có dạng tương tự như sau:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmore-wrap'>
<a class='readmore' expr:href='data:post.url'>read more &#187;</a>
</div>
</b:if>
</b:if>
 
Bạn thêm ký tự <!-- --> vào 2 đầu của phần chữ màu xanh bên trên, khi đó các bạn được như sau 
 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmore-wrap'>
<!-- <a class='readmore' expr:href='data:post.url'>read more &#187;</a> -->
</div>
</b:if>
</b:if>
 
Tiếp theo các bạn tìm đến đoạn code sau

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
 
làm tương tự như với code trên

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<!-- <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> -->
</div>
</b:if>
 
Lưu Template lại và xem thành quả!

Loại bỏ chức năng Read more khỏi các trang tĩnh (static page)

Loại bỏ chức năng Read more khỏi các trang tĩnh (static page) - by: http://namkna.blogspot.com/
Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nút Read More và ảnh đại diện là một phần quan trọng tạo nên diện mạo đẹp cho Blog của bạn. Tuy nhiên kể từ khi Blogger phát hành đặc tính tạo trang tĩnh (New Page/ static page) thì thủ thuật Read More gặp vấn đề đối với các trang tĩnh. Thông thường các trang tĩnh dùng để tạo các trang About, Contact…

- Khi bạn mở trang tĩnh thì nó hiển thị Read More, khi click chuột vào liên kết Read More vẫn không hiển thị toàn bộ nội dung bài viết. Để giải quyết vấn đề này thì cần phải loại bỏ chức năng Read More có ảnh đại diện ra khỏi các trang tĩnh.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến dòng code sau (Ctrl F)
<div class='post-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink'
style='float:right;padding-top:20px;'><a
expr:href='data:post.url'> Read more …
"<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div
 
=> Không phải template nào cũng có đoạn code như trên, chỉ tìm tương tự thôi. Chủ yếu là có 3 dòng tô đỏ.
6. Thêm đoạn mã dưới đây vào sau dòng <div class='post-body'>
 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
 
7. Và thêm thẻ đóng </b:if> vào trước dòng <div style='clear: both;'/>
- Nếu không có dòng thì tìm dòng:

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
- Và thêm vào trước (hay sau nó cũng được) thẻ đóng </b:if> 
=> Toàn bộ phần mã sau khi thực hiện có dạng như sau:
<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/> 
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink'
style='float:right;padding-top:20px;'><a
expr:href='data:post.url'> Read more …
"<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
 
Những dòng đánh dấu màu xanh là phần được thêm vào theo thủ thuật này.
- Ý nghĩa của toàn bộ phần mã này như sau: Đối với các trang tĩnh (static page) thì hiển thị toàn bộ nội dung bài viết; không hiển thị chức năng Read more ở các trang bài viết (item) và đối với các trang bài viết (item) thì hiển thị toàn bộ nội dung bài viết. Như vậy chức năng Read more đã được loại bỏ hoàn toàn khỏi các trang tĩnh một cách triệt để.
Chúc thành công!

Tạo Readmore trong Blogger ves 1

Tạo Readmore trong Blogger ves 1
Để tạo đoạn phân cách Readmore, chúng ta nhấn vào nút More (có hình trang giấy ngăn đôi), nếu chuyển sang kiểu soạn thảo HTML, sẽ thấy có thẻ <!--more--> được chèn vào vị trí đó. Khi đó, phần phía trên thẻ <!--more--> này sẽ được hiển thị ở trang chủ và các trang category, phần còn lại sẽ chỉ xem được khi vào xem 1 bài viết. Cách làm này có 1 điểm lợi là giữ được định dạng HTML.

Chức năng Scrip:
- Nếu trong bài viết của bạn có thẻ <!--more--> (), nó sẽ lấy đó làm dấu phân cách, phần trước thẻ đó sẽ được hiển thị ở trang chủ và giữ nguyên định dạng HTML, phần sau đó chỉ hiển thị khi đọc 1 bài viết.

- Nếu trong bài viết của bạn không có thẻ <!--more-->, thì script sẽ tự động sinh ra đoạn văn bản thu gọn ở trang chủ như script auto readmore thông thường. Lúc này định dạng HTML sẽ không còn (hình ảnh thumbnail vẫn được duy trì).
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5.
Tìm đến thẻ </head> và chèn đoạn mã sau vào ngay trước đó:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function strip(s,n){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,n-1).join(' ')}
function createSummary(id) {
var p = document.getElementById(id), content = p.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
p.innerHTML = content.split(/<!--\s*more\s*-->/)[0];
} else {
var imgTag = '', img = p.getElementsByTagName('img');
if (img.length >= 1) {
imgTag = '<img class="thumb" src="'+img[0].src+'" />';
}
p.innerHTML = imgTag + strip(content, 125) + '...';
}
}
//]]>
</script>
</b:if>
 
6. Thêm đoạn CSS dưới vào trước thẻ ]]></b:skin>.
.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}

 
- Bạn có thể tùy biến số từ hiển thị (trong trường hợp tự động sinh đoạn văn bản thu gọn) ở trong đoạn code trên (thay số 125 bằng số tùy ý bạn).

7. Tìm thẻ <data:post.body/> và thay thế bắng đoạn mã sau:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>createSummary(&quot;p<data:post.id/>&quot;);</script>
<a expr:href='data:post.url' title='Đọc tiếp'>Đọc tiếp &amp;rarr;</a>
<b:else/>
<data:post.body/>
</b:if>
 
Lưu template lại và xem kết quả
Chúc thành công!

Tạo Auto Readmore với Cutter.js

Tạo Auto Readmore cho Blogger với Cutter.js
Cutter.js giúp ta giữ lại được mô tả gốc với các thẻ HTML như in đậm, in nghiêng, màu chữ...


☼ Các bước thực hiện thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa HTML
3. Chọn mở rộng mẫu rồi chèn đoạn sau phía trên </head>
 
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px }
</style>
<script src='http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/cutter.js'/>
</b:if>

 
Trong đó: 
  • width:100px: là chiều rộng ảnh đại diện
  • height:100px là chiều cao của ảnh đại diện
Tiếp tục tìm đến đoạn <data:post.body/> và thay thế nó bằng đoạn sau:


<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById(&quot;<data:post.id/>&quot;);
Cutter.run(snippet, snippet, 40);
</script>
<b:else/><data:post.body/></b:if>
<div class='clear'/>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>
 
Thay snippet, 40 thành số ký tự mô tả muốn hiển thị
Lưu ý:  Cutter.js sẽ lấy 40 kí tự đầu tiên trong bài đăng để hiển thị ra trang chủ do vậy nên nếu không có ảnh nào được chèn giữa 40 kí tự này thì sẽ không có ảnh thumbnail, bạn cần lưu ý điều này và nên đặt một tấm ảnh lên trên cùng của bài đăng để làm ảnh đại diện ở trang chủ.

Friday, March 16, 2012

Tiện ích bài viết mới cuộn ngang với 2 nút điều khiển

Được một bạn yêu cầu tạo một tiện ích bài mới với 2 nút điều khiển cuộn qua lại giống với tiện ích "NỔI BẬT" của trang web vn.news.yahoo.com, hôm nay mình chia sẻ cùng mọi người thủ thuật này. Với thủ thuật này thì chúng ta có thể trình diễn bài viết cuộn theo hàng ngang với 2 nút điều khiển qua lại hiệu ứng bằng JQuery trông khá mướt. Để không mất thời gian chúng ta sẽ đi ngay vào thủ thuật này, và muốn thấy rỏ hơn thì bạn có thể xem demo trước khi thực hiện thủ thuật này.

Xem Demo
☼ Bắt đầu thủ thuật này
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head> hoặc trước thẻ </head>
=> Trước tiên các bạn nên tải các File Js về TẠI ĐÂY sai đó Upload lên host riêng để sử dụng lâu dài.
-
 5. Save template lại và trở về phần tử trang (Page Elements)
6. Chọn thêm tiện ích (Add a Gadget)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
-
 
8. Cuối cùng save tiện ích lại

Nếu muốn hiển thị cho tất cả bài viết trên blog bạn thay file JS (re_jcarousel_yahoo-label.js) thành link bên dưới.
http://namknablog.googlecode.com/files/re_jcarousel_yahoo_allpost.js
Nếu bạn muốn di chuyển phần phân trang (các nút tròn) xuống phía dưới các bài viết thì bạn di chuyển đoạn code bên dưới (ở bước 7).
-
-Xuống phía dưới phần JS như bên dưới
Chúc bạn thành công
theo: TDM.

Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Auto readmore với thumbnail trên Blogger dùng Script - Style 1
Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.
Thêm 1 điểm nữa là tiện ích lấy ảnh trong Album Picsa làm ảnh thumbnail, Với những hình ảnh không thuộc host Picasa của google sẽ không lấy được thumbnail. Do vậy bạn hãy Upload trực tiếp ảnh của mình lên blog khi post bài nha.

Bạn có thể xem Demo sẽ rõ hơn  : Demo for Post
Ảnh minh họa:
Auto readmore với thumbnail trên Blogger dùng Script - Style 1
☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (process)
4- Click chọn Mở rộng tiện ích mẫu 
5- Tìm (Ctrl +F) thẻ bên dưới:

<data:post.body/> 
- Và thay nó bằng đoạn mã sau đây:-
6- Thêm đoạn mã dưới đây vào sau thẻ <head> (hoặc đặt trước thẻ </head>):
-

Trong đó bạn thay đổi các thông số cho phù hợp với blog của bạn nha:
  • summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
  • summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
  • img_thumb_height chiều cao của hình đại diện (pixel).
  • img_thumb_width chiều rộng của hình đại diện (pixel).
7- Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.
Nếu bạn sợ sử dụng scrip sẽ làm blog bạn chậm thì bạn có thể xem bài viết tạo autoread more không sử dụng Javarscrip Tại đây

Tạo Auto readmore không sử dụng javascript cho Blogger

Tạo Auto readmore không sử dụng javascript cho Blogger - by: http://namkna.blogspot.com/
Blogger đã có readmore tuy nhiên nó khá thủ công, với blog đã có nhiều bài viết thì việc tạo readmore cho từng bài là rất vất vả và blogger thường tìm đến với auto readmore javascript. Auto readmore javascript thực ra chỉ hiển thị một phần bài viết qua hàm document.write, nội dung cả bài viết vẫn được trình duyệt tải về. Nhược điểm của nó là không thân thiện với các bộ máy tìm kiếm và các công cụ dịch trực tuyến, ngoài ra với bài viết dài nếu không dùng thêm readmore của Blogger thì sẽ gặp lỗi phân trang do Blogger tự ngắt trang. Thủ thuật auto readmore mình giới thiệu sau đây hoàn toàn mới, không sử dụng javascript mà dùng các câu lệnh do chính Blogger cung cấp. Nó sẽ cải thiện tốc độ blog của bạn khi duyệt các trang kiểu index, archive do chỉ tải về trích đoạn nội dung của bài viết.
Tạo Auto readmore không sử dụng javascript cho Blogger - by: http://namkna.blogspot.com/
Hình minh họa
 Cách thực hiện: Mình sẽ giới thiệu 2 cách thực hiện về cơ bản đều gốngn hau cả. các bạn xem bên dưới nha:
Cách 1: Theo Duypham
Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh. Có 2 dạng hiển thị hình ảnh là bên trái hoặc bên phải.
1. Hiển thị hình ảnh bên trái:
Thêm đoạn mã dưới đây vào bên trên thẻ  ]]></b:skin> :
.post-thumbnail{float:left;margin-right:20px}
2. Hiển thị hình ảnh bên phải:
Thêm đoạn mã dưới đây vào bên trên thẻ   ]]></b:skin> :
.post-thumbnail{float:right;margin-left:20px}
Bước 2: Thêm đoạn mã auto readmore. Có 4 dạng auto readmore để lựa chọn.1. Auto readmore với hình ảnh:
Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:
-
2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:
Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:
-
 3. Auto readmore với hình ảnh. Không readmore với bài viết mới nhất:
Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:
-
 4. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh. Không readmore với bài viết mới nhất:
Thay thế  <data:post.body/>  bằng đoạn mã dưới đây:
-
 
Việc hiển thị trích đoạn nội dung bài viết là thông qua thẻ  <data:post.snippet/>  của Blogger. Như đã từng đề cập tới ở bài đăng trước đoạn trích dẫn của Blogger chỉ gồm 140 ký tự (Blogger vừa update, số lượng ký tự của thẻ <data:post.snippet/> ở widget Blog giờ đây ít hơn số lượng ký tự của thẻ <data:post.snippet/> ở widget PopularPosts), khá là ngắn và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.

Hình ảnh được lấy thông qua lệnh data:post.thumbnailUrl. Đây là đường dẫn ảnh thứ nhất trong bài viết đã được Blogger resize về kích thước 72x72 pixels. Cần chú ý là ảnh của bài viết phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện. Thủ thuật trên đã thêm thuộc tính alt là tiêu đề bài viết cho hình ảnh, nó giúp tăng khả năng SEO cho blog của bạn.

Trước khi thực hiện thủ thuật auto readmore này bạn cần loại bỏ đoạn mã auto readmore javascript nếu đang dùng nhé.
Cách 2: theo thuthuatblogger.
- Cách này có ưu thế là căn đều 2 bên của văn bản nhìn xẽ đẹp hơn.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
Đặt đoạn code sau đây trước dòng  ]]></b:skin> .
-
 
- Thay float:left; thành float:right; nếu muốn nó hiển thị bên phải
Bước 2. Tìm  <data:post.body/>  và thay nó bằng đoạn code bên dưới.
-
 
Lưu Template là OK.
Điểm chú ý trong code  cách 2 có tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).
Chúc thành công!

Auto readmorre với thumbnail cho blogspot sử dụng javarscipt - Style 2

Hôm nay namkna hướng dẫn các bạn thủ thuật auto readmore (Tự động tóm tắt bài viết cho Blogspot) với cách hiển thị hoàn toàn khác so với thủ thuật trước đây. Thủ thuật lần này sẽ giúp các bạn có thể tùy chỉnh vị trí ảnh thumbnail, tiêu đề bài viết, ngày tháng đăng bài, tên tác giả và phần mô tả theo ý bạn. Ảnh thumb sẽ được float về bên trái và tiêu đề, nội dung hay thông tin bài viết được đưa về phía bên phải trông chuyên nghiệp hơn và dễ dàng tùy chỉnh theo ý mình.
Xem Demo: Demo for post
Ảnh minh họa:
Auto readmorre với thumbnail cho blogspot sử dụng javarscipt - Style 2

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML) - tiếp tục
4. Chọn mở rộng mẫu tiện ích
 5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin> 
-

- Trong đó:

  • font-size:16px: Là tiêu đề của bài viết trong auto readmore
  • color:#d7034e là màu chữ đọc thêm (đọc tiếp, readmore)
6. Chèn tiếp code bên dưới vào trước thẻ </head>
-

-Trong đó:
        + Thay 500 là số ký tự hiển thị.
        + Link ảnh màu xanh là ảnh sẽ xuất hiện khi bài viết của bạn không có ảnh đại diện. Bạn có thể thay thế bằng link ảnh khác. Nếu vẫn dùng ảnh đó thì hãy tải về Tại đây (hoặc Tại đây) sau đó Upload lên blog và thay link vào để tránh ảnh bị die khi mình xóa.
7. Tiếp theo bạn hãy tìm đến dòng code bên dưới

<data:post.body/>
8. Thay thế code vừa tìm được thành đoạn code bên dưới:
-

9. Cuối cùng là save lại và kiểm tra thành quả nha.

Thursday, March 15, 2012

Auto readmore phong cách video

Auto readmore phong cách video cho blogspot

Auto readmore phong cách video cho blogspot
Từ trước đến nay các blog về phim ảnh chư có tieenmj ích read mỏe riêng. bài viết này namkna giới thiệu tiện ích Auto readmore dành riêng cho các blog chuyên về phim ảnh. Tiện ích được mình convert từ templte johny-jazzytube.
Các bạn có thể xem Demo tại trang chủ theo link dưới:

XEM DEMO

=> Tiện ích này có gì đặc biệt?

1- Tự động biến link video thành trình chơi nhạc mà không cần phải lấy mã nhúng embeb ở trên trang youtobe (tiết kiệm thời gian phải không nào)
2- Tự động lấy ảnh mặc định của video thành ảnh thumbnail (không lấy ảnh upload trên blog và các host ngoài trang youtobe nha)
3- Tích hợp nút like cho từng video trên trang chủ. Bạn có thể xem ở demo hoặc hình ảnh minh họa bên dưới. (rất tiện phải không)

=> Cách tiến hành:

1- Đăng nhập vào blog
2- Chọn Mẫu
2- Chọn thêm tiện ích => Chọn mở rộng tiện ích mẫu
3- Tìm thẻ:
<data:post.body/>
- Thay thế thẻ đầu tiên tìm thấy thành:

4- Thêm đoạn code bên dưới trước thẻ ]]></b:skin>



5- Thêm đoạn code bên dưới vào sau thẻ ]]></b:skin> 


6- THêm code bên dưới trước thẻ </head>

Khi đăng bài bạn chỉ cần dán link youtobe vào bài viết thgeo cấu trúc sau:

Link + endofvid
Ví dụ mình có link là:
http://www.youtube.com/watch?v=De4Cl6f4VJs
thì ta sẽ dán link như sau vào bài viết:
http://www.youtube.com/watch?v=De4Cl6f4VJsendofvid 

Like và +1 để ủng hộ

 

© 2013 Blog Tổng Hợp. All rights resevered. Designed by Templateism

Back To Top