Chùa hòe nhai

Hiển thị các bài đăng có nhãn thủ thuật blogspot. Hiển thị tất cả bài đăng

Thứ Hai, 21 tháng 2, 2011

Một kiểu phân trang đẹp cho blogspot

Unknown

(Huynh Nhat Ha's Blog) -- Hiện nay trên cộng đồng Blogger có khá nhiều kiểu phân trang khác nhau cho blogspot. Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình. Bạn có thể dùng từ khóa “phan trang” để tìm trên blog này một số kiểu phân trang cho blogspot.

Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây tôi xin giới thiệu một kiểu phân trang cũng khá đẹp.

Xem Demo.

Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

.showpageOf{background:#006666;margin-right:3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpagePoint{background:#FFF;border:1px solid #006666;margin:0 3px;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a,.showpageNum a:visited{background:#006666;margin:0 3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a:hover,.showpageNum a:active{background:#FFF;border:1px solid #006666;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;text-decoration:none}

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.

Bạn có thể điều chỉnh số bài viết hiển thị ở mỗi trang tại tham số postperpage=7.

Bước 3. Tìm bất kỳ dòng nào như thế này 'data:label.url'

Rồi thay thế nó bằng dòng 'data:label.url + "?&max-results=7"'

Lưu Template là OK.

Read more »

Tạo Read More tự động không dùng Javascript

Unknown

No comments

(Huynh Nhat Ha's Blog) -- Phần lớn các blogspot hiện nay đều áp dụng thủ thuật tạo Read More tự động để hiển thị các bài viết mới nhất trên trang chủ, các trang nhãn và lưu trữ theo định dạng gồm ảnh đại diện và phần mô tả tóm tắt bài viết. Và chúng ta đều biết thì thủ thuật này phải dùng đến Javascript nên ít nhiều cũng ảnh hưởng đến tốc độ load trang.

Một bữa nọ ghé sang thăm blog của bạn Duy Phạm thấy có bài viết Auto readmore không sử dụng javascript cho Blogger. Tôi thấy tò mò nên đọc xem. Thì ra thủ thuật này tùy biến từ code của tiện ích Popular Posts của Blogger. Tôi nhận thấy đây cũng là một cách hay và cũng muốn phổ biến cho cộng đồng Blogger Việt. Tuy nhiên code của tôi khác một chút so với code của bạn Duy Phạm. Hy vọng với nỗ lực của Duy Phạm và Huỳnh Nhật Hà, từ nay cộng đồng Blogger sẽ phổ biến thuật ngữ Auto Readmore without Javascript.

Dưới đây là hình minh họa kết quả sau khi áp dụng thủ thuật này.

Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)

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>.

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

Bằng dòng

.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}

Điểm chú ý trong code của tôi 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).

Read more »

Tạo bài viết liên quan kèm ảnh Thumbnails cho blogspot

Unknown

No comments

Thủ thuật hiển thị bài viết liên quan kèm ảnh Thumbnails ở đây thể hiện một cách chuyên nghiệp hơn. Bài viết này được lấy từ 1 số nguồn trên internet trong khi lang thang .

relatedpost tipblogspot Tạo bài viết liên quan kèm ảnh Thumbnails cho blogspot

Đầu tiên: Đăng nhập vào blog –> Bố cục –> Chỉnh sửa HTML -> Mở rộng mẫu tiện ích
Sau đó tìm đến thẻ </head>

Chèn đoạn code dưới đây trước nó nhé:

<!–Related Posts with thumbnails–>
<b:if cond=’data:blog.pageType == "item"’>
<style type=”text/css”>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src=’http://xemtruyenhinh.110mb.com/relatedthumbs21.js’ type=’text/javascript’/>
</b:if>
<!–Related Posts with thumbnails–>

Tiếp theo: Tìm đến đoạn code tương tự sau:

<div class=’post-footer-line post-footer-line-1′>

Thay thế bằng đoạn code dưới :

<!– Start Related Posts with Thumbnails–>
<b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’>
</b:if>
<b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"’ type=’text/javascript’/></b:if></b:loop><a href=’http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html’ style=’display:none;’>Related Posts with thumbnails for blogger</a><a href=’http://www.bloggerplugins.org/’ style=’display:none;’>blogger tutorials</a>
<script type=’text/javascript’>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle=”Related Posts“;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
</b:if>
<!– End Related Posts with Thumbnails–>

Chú ý: var maxresults=5; số 5 là giá trị max số bài viết hiển thị
Save lại —> kiểm tra kết quả thế nào nhé !
Chúc các bạn thành công !

Read more »

Tạo Pop-under Ads hiển thị quảng cáo cho Blogger

Unknown

No comments

Chắc hẳn bạn đã gặp nhiều trường hợp khi truy cập vào một địa chỉ nào đó thì các quảng cáo tự hiện ra trên một hay hàng loạt trên các cửa sổ khác. Đây là dạng quảng cáo Pop-Up Ads, hình thức này gây khó chịu cho đa số các Blogger. Tuy nhiên, đôi khi bạn có nhu cầu đặt ads để quảng cáo một dịch vụ nào đó, vậy hãy dùng Pop-under Ads.
- VnBlognet [dot] com: Không như Pop-up Ads, hình thức Pop-under Ads chỉ trượt kèm theo trỏ chuột, và người đọc hoàn toàn có thể tắt nó một cách dễ dàng.
Nếu bạn muốn tạo Pop-under ads, hãy thực hiện các bước dưới đây.

Truy cập vào Blogger:
- Truy cập vào Blogger Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Chỉnh sửa HTML (Edit HTML) – (không cần Mở rộng Mẫu tiện ích). .
Chèn code CSS vào Blog:
- Tìm (Ctrl – F) thẻ ]]></b:skin> trong template, và thay thế nó bằng đoạn code sau:

#popad{
padding:5px;
border:1px solid #999;
background:#eee;
width:X px;
}
#popad_footage{
width:X px;
height:Y px;
background:url(Link hình ads) top left no-repeat;
}
#popad_footage a{
display:block;
width:X px;
height:Y px;
text-indent:-600px;
overflow:hidden;
}
#popad.dynamic #popad_footage{
width:X px;
height:Y+Z px;
background:url(Link hình ads có kèm nút Close) top left no-repeat;
}
#popad.dynamic #popad_footage a#popad_close{
color:#ddd;
height:Z px;
}
#popad.dynamic{
position:absolute;
top:3em;
right:15%;
}
html>body #popad.dynamic{
position:fixed;
}
]]></b:skin>
<script src=’http://boyprodx.110mb.com/BlogTools/popundermagic.js’ type=’text/javascript’/>

- Lưu mẫu (Save) lại template
Chèn code HTML vào Blog
- Bạn vào Bố cục (Layout) >> Phần tử trang (Page Elements) và tạo 1 phần tử HTML với nội dung :

- Lưu (Save) lại phần tử và kiểm tra kết quả.
Hiệu chỉnh các thông số hiển thị trong code CSS:
Các giá trị :
- X : Chiều rộng ads.
- Y : Chiều cao ads.
- Z : Độ dài khoảng cách từ nút Close tới ads.

Tạo Pop under Ads hiển thị quảng cáo cho Blogger

(Hình minh họa: Giá trị XYZ)
Để biết được chính xác các giá trị này, đơn giản nhất hãy bật chế độ xem Title trong PC.

Bật chế độ xem Title
Thiết lập vị trí xuất hiện của ads trên Blog :
- #popad.dynamic{position:absolute;top:3em;right:15%;} : Ads sẽ cách phía trên 3em và bên phải 15% chiều rộng trình duyệt.
Kết quả như hình bên dưới hoặc Demo tại đây (Bạn có thể View Source để hiểu thêm về đoạn code).

Nguồn : Boyprodx Blog

Read more »

Chùa hòe nhai

About

Thứ Hai, 21 tháng 2, 2011

Một kiểu phân trang đẹp cho blogspot

Tạo Read More tự động không dùng Javascript

Tạo bài viết liên quan kèm ảnh Thumbnails cho blogspot

Tạo Pop-under Ads hiển thị quảng cáo cho Blogger

Bài viết mới nhất

Blog Top mười

Blog Archive

Người theo dõi

Blogger templates