HAI THỦ THUẬT CẦN THIẾT CHO BLOGGER
I) MỞ LIÊN KẾT TRÊN BLOG
ở tab mới trong trình duyệt
(Bài đi chép của Noct Blog để tự học)
(Bài đi chép của Noct Blog để tự học)
Thông thường, nếu muốn người đọc không rời khỏi blog của mình khi click vào một liên kết bất kì thì chúng ta thường thêm thuộc tính target="_blank" trong link. Cách này có vẻ thủ công nên hơi bất tiện khi thực hiện cho hàng loạt liên kết trên blog. Có một số thủ thuật giúp mở tất cả link ở cửa sổ mới nhưng nhìn chung đều dựa vào javascript và chưa cơ động lắm khi muốn tùy biến. Nay mình giới thiệu một cách làm khác không sử dụng javascript mà dùng chính thuộc tính base trong HTML.
Chèn đoạn sau bên dưới thẻ <head> trong template:
<base target='_blank'/>Save lại, thế là tất cả link trên blog của bạn sẽ được mở ở tab mới trong trình duyệt web. Quá nhanh và đơn giản.
Mở rộng ra, khi ta kết hợp với các lệnh điều kiện <b:if> của blogspot thì sẽ dễ dàng tùy biến cho thủ thuật.
Ví dụ: Mở liên kết trên tab mới chỉ ở trang chủ thì ta chèn như thế này
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<base target='_blank'/>
</b:if>Đối với trang đọc bài thì thế này:
<b:if cond='data:blog.pageType == "item"'>
<base target='_blank'/>
</b:if>Đối với một trang bất kì :
<b:if cond='data:blog.url == "URL trang bất kì"'>
<base target='_blank'/>
</b:if>NL tôi đã áp dụng thêm <base target='_blank'/> và thêm đoạn mã <b: if ... cho "đối với một trang bất ký" thấy có hiệu quả rất tuyệt.
II) TẠO AUTO READMORE CHO BLOGGER
A/ với Cutter.js
Noct đã thử áp dụng Cutter.js trên Blogger, kết quả thu được là một thủ thuật tạo readmore tự động mới, NoiLieuhaha chép về blog để tiện tham khảo học tập.
Demo Khác với các thủ thuật Auto readmore từ trước đến nay, Cutter.js giúp ta giữ lại được các thẻ HTML như in đậm, in nghiêng, màu chữ...
Đầu tiên, bạn vào phần chỉnh sửa HTML của template, 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 == "index"'>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px }
</style>
<script src='http://noctsvn.googlecode.com/svn/trunk/cutter.js'/>
</b:if>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px }
</style>
<script src='http://noctsvn.googlecode.com/svn/trunk/cutter.js'/>
</b:if>
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 == "index"'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById("<data:post.id/>");
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 + "#more"'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>
<b:if cond='data:blog.pageType == "index"'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById("<data:post.id/>");
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 + "#more"'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == "index"'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>
Lưu lại và kiểm tra kết quả, bạn có thể thay đổi các giá trị như số kí tự (40) hoặc kích thước ảnh đại diện (100x100). Theo cơ chế hoạt động của Cutter.js thì nó sẽ cắt 40 kí tự đầu tiên trong bài đăng để hiển thị ra trang chủ và dĩ nhiên là giữ nguyên định dạng HTML. Cũng vì 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ủ. Tệp Cutter.js trong bài này đã được lược bỏ một số thứ không cần thiết cho gọn bớt (4kb), bạn có thể upload sang host khác hoặc chèn thẳng vào template.
B/ Tạo 'Read More' ver 2.0
BảnAuto Read More 2.0 này, có hỗ trợ hình đại diện, nó sẽ lấy ảnh đầu tiên trong bài viết làm ảnh đại diện.
Cài đặt:
Chú ý: với các blog đang sử dụng phiên bản read more 1.0 thì hãy gỡ bỏ code đó ra.
Nếu không biết cách gỡ thì hãy đọc lại bài hướng dẫn ở đây để truy ra code của nó mà xóa cho đúng.
Vào Template - Edit HTML, Expand widget, tìm đến thẻ <data:post.body/> và thay nó bằng đoạn code sau:
<b:if cond='data:blog.pageType != "item"'>
<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'><a expr:href='data:post.url'>-->đọc tiếp...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> Ngoài ra bạn còn phải cho đoạn code dưới đây vào phần HEAD (<head> ... </head>) của template:
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://qrbapa.blu.livefilestore.com/y1pgRKE9qwfLSkRPI5ryie6J5sEs3Zx9RGJm0n-0M3MsB9_zUp5O1JRae4pg0FHHRsZMS4J0HlRsWqpFNgE-HLkNA/summary-post-v20-test.js
' type='text/javascript'/> Các bạn hãy chú ý các thông số màu đỏ mà tôi đã đánh dấu:
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).
Hình dưới đây là ví dụ về hiển thị của read more tự động sau khi cài đặt:
Vào Template - Edit HTML, Expand widget, tìm đến thẻ <data:post.body/> và thay nó bằng đoạn code sau:
<b:if cond='data:blog.pageType != "item"'>
<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'><a expr:href='data:post.url'>-->đọc tiếp...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> Ngoài ra bạn còn phải cho đoạn code dưới đây vào phần HEAD (<head> ... </head>) của template:
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://qrbapa.blu.livefilestore.com/y1pgRKE9qwfLSkRPI5ryie6J5sEs3Zx9RGJm0n-0M3MsB9_zUp5O1JRae4pg0FHHRsZMS4J0HlRsWqpFNgE-HLkNA/summary-post-v20-test.js
' type='text/javascript'/> Các bạn hãy chú ý các thông số màu đỏ mà tôi đã đánh dấu:
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).
Hình dưới đây là ví dụ về hiển thị của read more tự động sau khi cài đặt:
Mục này NoiLieu đã chèn vào HTML Template nhưng không có tác dụng, chưa rõ sai ở đâu
( nguồn www.vietwebguide.com - có gì thắc mắc có thể hỏi ở đó)
GHI CHÚ TOÀN TẬP CỦA NOILIEU:
<base target='_blank'/> và phần mở rộng "đối với một trang bất kỳ"2) Thực hiện Auto Read More theo Cutter.js có kết quả nhưng đừng quên nhấn Expand widget để mở tìm kiếm (CTrl+F ) rồi dán <data:post.body/>, khi thấy máy tìm kiếm đánh dấu thẻ này thì thực hiện thay như hướng dẫn .
Thực hiện Auto Read More 2.0 không thành công có lẽ do không tìm hết được các thẻ <data:post.body/> để thay?
Cả hai phương pháp Auto Read More đều làm cho máy chạy rất chậm khi mở TRANG CHỦ, do đó tôi đã hoàn nguyên về Template ban đầu, thà rằng làm bằng tay mỗi khi viết bài còn nhanh hơn làm tự động mà chờ cả buổi máy mới đưa về trang chủ được. Có lẽ việc thêm tính năng này có khiếm khuyết nên nhà mạng Google mới không đưa vào mặc định cho blog chăng? Cụ nào có máy tính siêu hàng loại Core i7 và mạng thuê bao tốc độ siêu nhanh thì thực hiện có hiệu quả đấy.
3) Theo blogger HUAN DRUMS hướng dẫn: Có thể định dạng văn bản trong Comment và Reply bằng cặp thẻ <b> </b>; <i> </i> và liên kết tới vị trí khác bằng thẻ
<a href='Link'>Mô tả</a>
(thay Link bằng URL mình muốn dẫn tới, thay Mô tả bằng các từ đại loại như sau : BẤM VÀO ĐÂY , CLICK HEAR ......)
CHÚC CÁC BẠN THÀNH CÔNG
Cảm ơn cụ năm sớm đã cho một món quà quí quá, nhưng tôi hổng dám mô, bởi lẽ nó rối hơn canh hẹ, có khi còn mệt óc hơn cả món ni nuận của tôi. Vậy nên tôi lại phải nhờ Bà LTH xem xét hộ, rồi cài đặt thế nào tôi cũng chịu, chứ bẩu tôi làm thì thua luôn.
Trả lờiXóaChúc một năm thêm tuổi , thêm niềm vui mọi bề
Tôi cũng i tờ .. it về chuyện này,đem về chép để đây vì mới sang người ta còn có phong trào tìm hiểu chứ để lâu lâu muốn học không tìm đâu ra, rồi nó chìm luôn trong đống tài liệu là hết hơi. Năm mới chúc cụ nhiều cố gắng và mạnh khỏe, vui vẻ, hạnh phúc
Trả lờiXóaHIX HIX...THÀY ƠI! CON TÌM ĐƯỢC NHÀ THÀY RÙI. BÊN NÀY CON I TỜ LÉM NÊN ĐỌC MẤY CODE CHẢ HỈU GÌ. THÀY LÀM TRƯỚQC RÙI BÀY CON NHA THÀY
Trả lờiXóaBác toàn đi copỵ những bài của Hoa Tulip đem về nghiên cứu thôi mà! Không biết có làm được không. Cháu chịu khó mày mò, giỏi lắm đấy.
XóaVừa sang HTL, tìm được nhà Huan Drums, học được cách viết chữ đậm chữ thường, thử ở đây xem thế nào:
Trả lờiXóaVừa sang HTL, tìm được nhà Huan Drums, học được cách viết chữ đậm chữ nghiêng, thử ở đây xem thế nào
Chú SP khỏe toàn diện ạ! LL buồn ngủ rồi, ngày kia sang học tiếp ạ. Mai bận ạ!
Trả lờiXóaUi ui! Sang đây mà vẫn cứ SP là bị phạt đấy. Gu Gồ rất nghiêm LL ạ!
XóaMạng bên em 3G nhưng chậm lắm anh ạ, chắc em phải nâng cấp Laptop rồi mới thực hiện được các chỉ dẫn của anh.
Trả lờiXóaANH OI LÀM SAO ĐỂ RINH ĐC CÁI MÁY TẠO MÃ CỦA CHỊ NGUYỆT ÁNH???
Trả lờiXóaCái "máy" này bây giờ ít dùng rồi. Chỉ những người chế tác ảnh FLASH thì vẫn dùng để lấy đường link từ Fileden.com hoặc Ajiaz.com đưa về dán vào bài viết của MÌNH, còn dán vào comment thì không ổn. Thôi cứ tạm dùng ảnh động nhé. Anh cũng chưa tìm ra cách chèn ảnh FLASH vào comment.
Xóa