Hiển thị các bài đăng có nhãn Kinh Nghiệm BlogGer. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Kinh Nghiệm BlogGer. Hiển thị tất cả bài đăng

Thứ Bảy, 11 tháng 5, 2013

Một chút không khí tết đến site bạn

Sắp đến tết nguyên đán (tết ta) hãy đem chút không khí tết đến site bạn chứ ;;)
Chỉ với một vài bước đơn giản là bạn đã có được một giao diện mới chào đón năm mới rồi :-j
Demo ảnh:



Hướng dẫn:
B1: Chèn đoạn code sau vào temp Extra.css
/*Cau doi tet*/
#caudoitet_trai{
position:fixed;
left:-10px;
top:-20px;
z-index:-999
}
#caudoitet_phai{
position:fixed;
right:-5px;
top:-20px;
z-index:-999
}
Bước 2:
Chèn đoạn code dưới vào temp header hoặc footer đều ok
<div id='caudoitet_trai'><img src="https://lh4.googleusercontent.com/-BhcjEFoEuPE/UO901251c_I/AAAAAAAAAEg/Jh-5l6nFkMo/s623/utehy.org---caudoitet_1.png" /></div>
<div id='caudoitet_phai'><img src="https://lh6.googleusercontent.com/-1Z33bDZglkc/UO9041vTheI/AAAAAAAAAEo/5PtnQ_kj8Jc/s623/utehy.org---caudoitet_2.png" /></div>

Thứ Sáu, 19 tháng 4, 2013

Blogger template: Thông tin công nghệ


Demo
Thông tin:
Nền tảng:Blogger
Tên Template:Thông tin công nghệ
Hướng dẫn:Template Settings Link Here
Tác giả:Vịnh Nguyễn
Designer URLDesigner Link Here
Thông tin khác:Đây là một theme blogger tùy chỉnh
 Mô tả:Template được thiết kế với mục đích phục vụ nhu cầu thông tin công nghệ cũng như mong muốn cung cấp các bài viết liên quan đến lãnh vực Công nghệ thông tin - Viễn thông cho bạn đọc Việt Nam. Sideba tự động lấy nhãn, seo thân thiện, tốc độ tải về nhanh... Sử dụng 2 hệ thống bình luận song song là blogger và facebook





Thứ Năm, 18 tháng 4, 2013

[Share] Template Mobile Blogger Đẹp (Fix Vỡ Khung)


Chào các bạn, ở hôm trước mình đã share 1 template blogger nhưng bị lỗi vỡ khung 
Hôm nay mình sẽ share bản đã fix lỗi và chỉnh sửa

[Share] Template Mobile Blogger Đẹp (Fix Vỡ Khung)
Demo Online: [Demo]
Hướng dẫn:

Cách 1:
Mẫu -> Sao lưukhôi phục -> import template có đuôi .xml
Cách 2:
Mở file .xml ra copy hết code trong đó vào
Mẫu -> Chỉnh sửa HTML -> Click vào ô Mở rộng mẫu tiện ích -> xóa hết code có trong đó đi -> Post hết code vừa copy ở file .xml vào
Tìm đến:

<script src=\"/feeds/posts/default/-/Teen Story?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>

Teen Story là tên label mà nó sẽ lấy bài viết hiển thì ở index
Note:
Đây là template mình lấy trên mạng từ các nguồn khác nhau mình chỉ edit lại cho đẹp và tối ưu hóa seo 1 chút thôi 
Ai có lòng thì cho mình xin 1 liên kết đến Sâu Ciu Blog để có hứng design tiếp nhé ,cám ơn các bạn ^_^

Chèn thêm khung "Thêm tiện ích" cho phần Header và Main

Thông thường mặc định mỗi theme của blogspot (trong phần bố cục) là chỉ có cho phép “Thêm tiện ích” ở Sidebar (2 bên blog) và ở phần footer (phía dưới blog), vì thế mà mỗi khi ta muốn chèn thêm các Tiện ích(widget) cho phần Main hoặc Header thì ta phải tạo các Tiện ích (widget) ở Sidebar hoặc ở footer rồi di chuyển tới chỗ cần hiển thị. Như vậy rất rườm rà. 

Bài viết hôm nay hình giới thiệu 1 mẹo nhỏ để chèn khung “Thêm tiện ích” vào 2 phần Header và Main, giúp cho chúng ta có thể add thêm các Widget trực tiếp lên 2 phần này.

Để thực hiện việc này, rất đơn giản, bạn thực hiện các bước sau:
1
 . Đăng nhập blog
2
 . Vào phần Chỉnh sửa Code HTML. (không cần nhấp vào mở rộng tiện ích)
3
 . Để chèn khung “Thêm tiện ích” vào phần Header, ta làm như sau:

Tìm đọan code sau:
<b:section class=’header’ id=’header’ maxwidgets=’2′ showaddelement=’no‘> 
(hoặc tìm code tương tự, nhưng phải là Header)
sau đó thay no bằng yes là OK.
4. Để chèn khung “Thêm tiện ích” vào phần Main, ta làm như sau:
Tìm đọan code sau:
<b:section class=’main’ id=’main’ showaddelement=’no‘> 
(hoặc tìm code tương tự, nhưng phải có id là Main hoặc tương tự)
sau đó thay no bằng yes là OK.
5Save template.
6
 . Xong
Có thể xem hình minh họa như bên dưới.
Trước khi chỉnh sửa:

Sau khi chỉnh sửa:

Hiển thị widget ở những trang nhất định part 1


Một thủ thuật blogger rất hay tiếp theo mình giới thiệu tới các bạn là thủ thuật HIỂN THỊ WIDGET (TIỆN ÍCH) Ở TRANG CHỦ HOẶC TRANG RIÊNG BIỆT, TRANG TÙY CHỌN.
- Thủ thuật này mình cũng chỉ biết tới khi mình thiết kế blogger cho Gối handmade nên các bạn có xem demo thì xem ở đó nhé. Những sản phẩm hiển thị đó mình chỉ cho hiển thị ở trang chủ. Ngoài ra các bạn có thể chỉ định cho nó hiển thị ở các trang các bạn muốn. Trên blog mình có Slide mình cũng làm 1 Widget và chỉ chi hiển thị ở trang chủ.
- Bắt đầu vào thủ thuật, thủ thuật này khá đơn giản. Điều quan trọng nhất là các bạn phải xác minh được widget (tiện ích) đó nằm ở đâu trong mẫu chỉnh sửa HTML. ^^ Cái này mình toàn dùng trình duyệt Chrome để xem thông tin phần tử là thấy. Mình ví dụ trên Blog gối handmade  mình nhé:
Xong phần xác định Widget. Tiếp theo các bạn vào Mẫu - Chỉnh sửa HTML và Click vào ô chọn "Mở rộng Mẫu Tiện ích"

  • Trường hợp 1: Chỉ hiển thị Widget (tiện ích) ở trang chủ. Các bạn tìm đoạn code mà thêm code màu đỏ, xanh như bên dưới:

<b:widget id='HTML1' locked='false' title='Sản phẩm có sẵn' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

  • Trường hợp 2: Hiển thị widget ở tất cả các bài viết, trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.pageType == "item"'>


  • Trường hợp 3: Chỉ hiển thị widget ở một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url == "URL của trang riêng biệt"'>


  • Trường hợp 4: Chỉ hiển thị widget ở các trang chính gồm trang chủ, các trang Label và Archive: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType == "index"'>



  • Trường hợp 5: Chỉ hiển thị widget ở các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.pageType == "archive"'>
  • Trường hợp 6: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType ! == "archive"'>

  • Trường hợp 7: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang bài viết: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.pageType ! == "item"'>

  • Trường hợp 8: Chỉ hiển thị widget ở tất cả các trường hợp trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == data:blog.homepageUrl'>

  • Trường hợp 9: Chỉ hiển thị widget ở tất cả các trang trừ một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt"'>

  • Trường hợp 10: Chỉ hiển thị widget ở tất cả các trang trừ hai trang riêng biệt nào đó trở lên: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url ! == "Url của trang đặc biệt 1"'>
<b:if cond='data:blog.url ! == "Url của trang đặc biệt 2"'>

  • Trường hợp 11: Nếu bạn muốn hiển thị một thứ gì đó ở trang chủ và một thứ gì đó khác ở tất cả các trang: Bạn sử dụng lệnh điều kiện như thế này:


<b:if cond='data:blog.url == data:blog.homepageUrl'>
Đây là điều cần hiển thị ở trang chủ
<b:else/>
Đây là điều không hiển thị ở trang chủ
</b:if>

  • Trường hợp 12: Chỉ hiển thị widget ở một trang nhãn: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:

<b:if cond='data:blog.url == "http://yourblogname.blogspot.com/search/label/Tennhan"'>

Trường hợp này chỉ hoạt động với tên nhãn không dấu như Blogger, CSS, Thuthuat, Thuvien (không dùng cho nhãn tiếng Việt). Đối với các nhãn có khoảng cách như Recent Posts thì phải đặt là Recent%20Posts (tức là thay khoảng cách bằng %20).
Các liên kết trang nhãn trong trường hợp này cũng không hoạt động được khi có đuôi ?max-results=
----------------------------

Ẩn hiện các bài viết thuộc một nhãn ở trang chủ Blogger

Như các bạn biết thì Blogger đã có tính năng tạo trang tĩnh (static page) để dùng tạo các trang giới thiệu, liên hệ, quy định sử dụng, chính sách riêng tư, diễn đàn, … Một đặc điểm đặc trưng của các trang tĩnh là không hiển thị trên trang chủ, các trang nhãn và lưu trữ. Tuy nhiên Blogger cũng giới hạn số trang tĩnh được tạo cho mỗi blogspot là 10 trang.




Sự giới hạn này cũng là một hạn chế. Khi tôi sử dụng hết 10 trang tĩnh này thì tôi nghĩ ra cách tạo một số trang bài viết cơ bản và làm sao để không cho chúng xuất hiện trên trang chủ, khi đó chúng sẽ giống như các trang tĩnh chính hiệu vậy.

Lấy ví dụ tôi viết một loạt bài viết có tiêu đề lần lượt là Bài viết số 1, Bài viết số 2, Bài viết số 3, Bài viết số 4, Bài viết số 5. Tôi đặt tên nhãn cho các bài viết này theo thông lệ mỗi khi tạo một bài viết. Ở đây tôi muốn Bài viết số 1 và Bài viết số 3 không được hiển thị ở trang chủ, vậy tôi đặt thêm một nhãn chung cho hai bài viết này là Z Label. Phải đặt như thế này để trong trường hợp 2 bài viết này được đặt nhiều nhãn (ví dụ Z Label, Nhãn 1, Nhãn 2, …) thì Z Label sẽ hiển thị ở cuối cùng. Thủ thuật của tôi là không cho nhãn Z Label xuất hiện trên trang chủ, khi đó Bài viết số 1 và Bài viết số 3 sẽ không xuất hiện ở trang chủ.

Để làm được như vậy, tôi đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ Backup Template). Bước này gọi là Bước 1.

Tìm dòng <b:includable id='main' var='top'>. Tính từ dòng này trở xuống vài dòng code tôi sẽ tìm thấy đoạn code giống hoặc tương tự như đoạn code bên dưới.



<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>

Tôi thay nó bằng đoạn code bên dưới.

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != "Z Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>

Lúc này tôi tìm thẻ đóng </b:includable> cho thẻ <b:includable id='main' var='top'>. Thẻ đóng này nằm ngay trước dòng 

<b:includable id='commentDeleteIcon' var='comment'>

Tôi đặt đoạn code bên dưới vào sau thẻ </b:includable> nói trên.

<b:includable id='printPosts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>

Lưu Template.

Như vậy Bước 1 đã giúp tôi ẩn một số bài viết thuộc một nhãn nhất định sao cho không hiện ở trang chủ. Một số điểm cần chú ý ở thủ thuật ở Bước 1 là các bài viết không có nhãn sẽ không hiển thị ở trang chủ, nhãn không hiển thị ở trang chủ phải là nhãn cuối cùng trong chuỗi các nhãn ở bài viết được lọc không cho hiển thị ở trang chủ và nếu tất cả các bài viết mới nhất đều thuộc về một nhãn muốn ẩn thì blog của bạn sẽ trống trơn không hiển thị bài viết nào (vì thế chỉ áp dụng thủ thuật này khi blog của bạn đã có nhiều bài viết được đăng).

Bước 2 là ẩn liên kết nhãn Z Label ở cuối (footer) bài viết để khi ta đọc đến Bài viết số 1 và Bài viết số 3 thì sẽ không nhìn thấy liên kết Z Label ở cuối bài viết.

Ở chế độ Edit HTML chọn Expand Widget Templates. Tìm đoạn code như bên dưới.

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

Thay nó bằng đoạn code bên dưới.

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;Z Label&quot;'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:if>
</b:loop>

Lưu Template là OK.

Từ thủ thuật này tôi luận suy ra một thủ thuật khác là chỉ hiển thị các bài viết thuộc một nhãn nào đó ở trang chủ. Ở Bước 1 thay vì sử dụng đoạn code được đánh dấu màu đỏ thì sử dụng đoạn code sau đây.

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Z Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>

Ở đây thay vì Z Label, bạn có thể đặt tên nhãn bất kỳ cho các bài viết mà bạn muốn ở trang chủ chỉ hiển thị các bài viết này mà thôi. Tiếp tục áp dụng Bước 2 như trên.

Cũng chính từ Bước 2, ta có thể luận suy ra một thủ thuật khác là chỉ hiển thị tiện ích ở các bài viết thuộc một nhãn nhất định nào đó. Trong đoạn code được đánh dấu màu xanh ở Bước 2, đặt đoạn code sau đây vào trước thẻ </b:loop>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:label.name == &quot;Nhãn 1&quot;'>
<style type='text/css'>
#HTML1 {display:block;}
</style>
</b:if>
</b:if>

Tiếp tục đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

<style type='text/css'>
#HTML1 {display:none;}
</style>

Ở đây HTML1 là id của tiện ích mà bạn muốn chỉ hiển thị ở các bài viết thuộc Nhãn 1. Thay Nhãn 1 bằng tên nhãn và thay HTML1 bằng id của nhãn mà bạn muốn áp dụng thủ thuật này.

Tôi viết bài này để trả lời câu hỏi của bạn Hieu Bo tại blog Bokute.com.

Bạn ấy hỏi như thế này:

Có cách nào để ẩn bài viết ở trang chủ một cách riêng lẻ không anh?

Ví dụ em có 3 bài viết : bài 1, bài 2, bài 3.

Em không muốn ẩn hết 3 bài mà chỉ muốn ẩn bài số 2 thôi có được không. Mà chỉ ở trang chủ thôi, còn khi xem bài số 2 ở trang xem chi tiết thì vẫn xem bình thường, có điều mình không muốn bài 2 hiện ở trang chủ.

Tôi hy vọng cá nhân bạn Hieu Bo sau khi đọc bài viết này sẽ cảm thấy hài lòng.

Tìm Hiểu Các Biến Blogger


<a expr:href='data:post.url'>  Là link liên kết đến bài  viết ở trang chủ
<data:post.snippet/> Là trích dẫn bài viết ở trang chủ
VD : <a expr:href='data:post.url'> Read More</a>

Hiển thị widget ở những trang nhất định



Trên blog bạn thường có nhiều Widget, và việc hiển thị chúng cũng làm mất thời gian khi load trang. Bây giờ mình giới thiệu cách tùy chỉnh cho nó hiển thị ở những nơi bạn muốn hiển thị. Nó sẽ giúp bạn có thể sắp xếp các widget ở các trang mà bạn muốn để trang blog hay web của bạn trông thẩm mĩ hơn. Để thực hiện thủ thuật này , trước tiên bạn phải xác định đượcWidget id của widget đó như hình bên dưới:

☼Bây giờ là cách để tùy chỉnh Widget đó:

1. Đăng nhập blog
2. Vào chỉnh sửa code HTML (edit code HTML)
3. Chọn mở rộng mẫu tiện ích (Expand Widget Templates).
4. Tìm đọan Widget id bạn muốn chỉnh (vd:HTML3)
Code thường có dạng mhư bên dưới

<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

☼ Sau khi đã biết được "Widget" đó thì chúng ta sẽ tùy chỉnh hiển thị chúng
bây giờ bạn hãy chọn nơi để hiển thị "Widget" đó, bạn chỉ việc thêm code màu đỏ vào đúng vị trí như bên dưới

I. Chỉ cho phép widget hiển thị ở trang chủ
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

II. Chỉ cho phép widget hiển thị ở từng bài viết:
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

III. Chỉ cho phép widget hiển thị ở những trang nhất định:
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "Link của bạn"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

Bạn hãy thay code màu xanh trên thành đường link mà bạn muốn widget đó hiển thị (ví dụ:http://www.traidatmui.com/2010/03/chen-google-translate-vao-blogger.html). Khi bạn chọn đường link như vậy thì khi bạn click đến link đó widget mới hiển thị, còn những đường dẫn khác widget đó sẽ không hiển thị

IV. Hiển thị ở trang label nhất định
<b:widget id='HTML4' locked='false' title='test 1' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == "http://www.traidatmui.com/search/label/Advanced blogger"'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>