Hôm nay thế giới tin học online sẽ giới thiệu cho các bạn cách hiển thị bài viết theo nhãn như hình demo trên.

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị theo 3 cột thẳng hàng, bài viết mới nhất sẽ nằm trên cùng, phía trên là hình đại diện, phía dưới là tiêu đề bài viết...Nếu bạn muốn xem hết các bài viết trong nhãn này thì bấm vào Xem tất cả.... ở phía dưới cùng.

Trước tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.

<style type="text/css">

    #itechplus-rc-3cot {width:300px;}

    table#itechplus-rc-3cot {border:1px solid #ccc;}

    #rc-3cot {padding:0 8px;width:30%;}

    #rc-3cot p{padding:0;margin:0 0 5px 0;}

    #rc-3cot img {margin:8px 0 2px; height:60px; width:50px; border:1px solid #ccc; padding:1px;}

    #rc-3cot a:link {font:normal 12px Times new roman;}

    #itechplus-rc-3cot h2 {

    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgISL7fSADGOpOxzkz0sjQsGNsKfvObVhDfAFznzQ8mcUlYNA0NkXsGsThgvfspuCxn48D3NsJuoAT_E1XHgFAxezC398xMP4mdli2YMZbJSv_QZQRPjGuo9lWQg1fDL40skEBFs1o8cwg/s1600/04.png) no-repeat top left;

    padding:5px 0 14px 15px;

    font:bold 13px Verdana;

    margin:0px;

    color:#fff;

    }

   

</style>

<script type="text/javascript">

    home_page = "http://thegioitinhoconline.com/";

    label = "WIN 7";

    numposts = 9;

    sumTitle = 24;

    colortitle = "#333";

    imgr = new Array();

    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFxnlwytwYoAHEDNKWe9ET9bqNzOUABii1lQzTqhLhp1Jd61KxdMIvc3ef1r5aj8zFEbufLc2T9UVPw-uvMvzwUOddlDi37hXapcOHOIjFI3jAoyPcLqO1nyejTLKdL6HjM4E1rtiw0c/";

    showRandomImg = true;

   

</script>

<div id="itechplus-rc-3cot">

<h2>

Seo Blogspot</h2>

<script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript">

</script>

<div style="float: right; margin: 0; padding: 3px;">

Xem tất cả<a href="http://www.thegioitinhoconline.com/search/label/Seo%20BlogSpot"> SEO blogspot »</a></div>

</div>

Bây giờ, bạn thay đổi các đường link màu xanh (http://www.thegioitinhoconline.com/search/label/Seo%20BlogSpot) là địa chỉ trang nhãn mà bạn muốn hiển thị, thay đổi các số màu đỏ theo ý muốn của bạn:

* Width: 300px (chiều rộng của tiện ích).

* Height: 60px width: 50px (chiều cao và chiều rộng của ảnh đại diện)

* Background: url http://3bp......png (link hình thanh ngang của tiêu đề)

* Home_page: địa chỉ blog của bạn

* Label: Tên nhãn muốn hiển thị

* Numposts=9: Số bài muốn hiển thị

* SumTitle=24: Số ký tự của tiêu đề bài đăng.

* Colortitle: Màu tiêu đề bài đăng

* Thủ thuật Windows 7: Tiêu đề tiện ích

và bấm LƯU lại là xong

Đây là cách hiển thị bài viết theo nhãn trong blog mà thegioitinhoconline.com đã xác thực nên các bạn  hãy.

LƯU Ý: Các bạn phải điền thật chính xác địa chỉ trang nhãn của bạn ở các dòng màu xanh và ở Label, nếu không nó sẽ bị lỗi và không hiển thị được.

Chúc các bạn thành công.

Read more…

   Thông thường khi bạn thêm tiện ích phía dưới bài đăng thì những tiện ích này sẽ có chiều rộng bằng với chiều rộng của bài đăng, điều này gây nhiều bất tiện khi bạn muốn chèn nhiều tiện ích có chiều ngang nhỏ hơn như tiện ích Recent Posts mà mình giới thiệu. Do vậy hôm nay Mình sẽ giới thiệu cho các bạn cách cho thêm 2 cột thêm tiện ích phía dưới bài đăng.

Thực ra đây là một thủ thuật đơn giản tương tự như thủ thuậtchia header thành 2 phần, chỉ thêm một vài đoạn code CSS là bạn có thể làm được điều này, nên hôm nay tôi sẽ hướng dẫn các bạn cách tạo\chèn 2 cột widget vào main-wrapper trong Blogger template.

Ảnh minh họa:

Tìm hiểu thêm!

- Thủ thuạt này là chúng ta sẽ thêm 2 cột thêm tiện ích vào bên dưới phần main, 2 cột này có kích thước tùy chọn và cùng nằm trên một hàng.

- Thủ thuật này hoàn toàn khác với thủ thuật chia main thành 2 phần mà Mình đã giới thiệu vì nó không can thiệp vào phần CSS và HTMLcủa bài đăng.

- Có 2 cách để thực hiện thủ thuật này, hôm nay Namkna xin giới thiệu cả 2 thủ thuật cho các bạn.

Cách 1: Dùng các số tuyệt đối (Các này hơi phức tạp đòi hỏi có chút am hiểu về CSS).

Cách 2: Dùng số tương đối (Cách này được xem là dễ thực hiện hơn).

Sau đây chúng ta sẽ đi tìm hiểu tường tận 2 cách:

Cách 1: Dùng các số tuyệt đối (Các này hơi phức tạp đòi hỏi có chút am hiểu về CSS).

1. Vào Mẫu => Chỉnh sửa HTML
2. Chèn đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>

#Tinhoconline2column-wrapper{width:530px;float:left;word-wrap:break-word;overflow:hidden}
#Tinhoconline2columnleft-wrapper{width:260px;float:left;word-wrap:break-word;overflow:hidden}
#Tinhoconline2columnright-wrapper{width:260px;float:right;margin-left:10px;word-wrap:break-word;overflow:hidden}
.Tinhoconline2column .widget{background:#fff;border:1px solid #ccc; height:300px; overflow:hidden; margin:5px 0; padding:10px}
.Tinhoconline2column h2{background:#333;color:#fff;line-height:1.4em;padding:2px 10px;margin-bottom:1em}

Tùy chỉnh:

• width:530px : chiều rộng của widget (Lưu ý không lớn hơn chiều rộng của bài đăng trên blogspot của bạn. Ví dụ chiều rộng phần bài đăng trên blog của bạn là 520px thì bạn nên để width trong khoảng nhỏ hơn hoặc bằng 520 px).
• width:260px : chiều rộng của 2 cột widget (Lưu ý tổngchiều rộng của 2 Widget này phải nhỏ hơn chiều rộng của Widget tổng tức là 260 + 260 phải nhỏ hơn 530)
• height:300px : chiều cao của 2 cột widget (Bạn có thể đặt tùy ý nhưng không nên qua lớn như thế sẽ rất sấu)

(Nếu Bạn cảm thấy khó để thay đổi các thông số thì bạn có thể tham khảo cách 2 ở bên dưới).

3. Tiếp tục, tìm trong template đoạn code sau :

<div id='main-wrapper'>

- và chèn ngay sau nó đoạn code bên dưới :>

<div id='Tinhoconline2column-wrapper'>
<div id='Tinhoconline2columnleft-wrapper'>
<b:section class='Tinhoconline2column' id='Tinhoconline2columnleft' preferred='yes'/>
</div>
<div id='Tinhoconline2columnright-wrapper'>
<b:section class='Tinhoconline2column' id='Tinhoconline2columnright' preferred='yes'/>
</div>
<div style='clear:both'/>
</div>

4. Lưu mẫu lại. Bây giờ bạn có thể trở lại Phần tử trang và chèn vào đó bất kỳ widget nào bạn thích.

- Lưu ý nếu trong phàn tử trang xuất hiện thành một cột thảng như bên dưới bạn đừng lo cứ thêm tiện ích vào quay lại trang chủ sẽ thấy ngay.

Cách 2: Dùng số tương đối 

- Cách này được xem là dễ thực hiện hơn. Cách này gọi là khác nhưng trên thực tế tương tự như cách trên, tuy nhiên mình sử dụng số tương đối (%) thay cho con số tuyệt đối (px) nên các bạn không phải tùy chỉnh nhiều như cách trên

1. Vào Mẫu => Chỉnh sửa HTML
2. Thêm đoạn code sau trước thẻ ]]></b:skin>

#magazine-left2 {width: 45%;float: left;}
#magazine-right2 {width: 45%;float: right;}

3. Tìm đoạn code sau:

<div id='main-wrapper'>

Thêm vào sau nó đoạn code bên dưới:

<b:section class='sidebar' id='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section> <b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;">
</div>

Lưu ý với mẫu của blogger!

Với các blog sử dụng mẫu SIMPLE của blogger không có thẻ

<div id='main-wrapper'>

Thì các bạn thêm vào sau thẻ:

          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Chúc thành công!

Read more…