• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Bài viết mới nhất cho nhãn không dùng Javascript

30
28/06/2011

Dạo này do bận viết bài phân tích tiền tệ nên mình không còn nhiều thời gian dành cho Blogspot. Tuy nhiên niềm đam mê lĩnh vực này cứ mãi thôi thúc mình cố gắng đóng góp chút gì đó cho cộng đồng. Và mình quyết định trở lại để cùng chia sẻ những thủ thuật về Blogspot với những người bạn thân mến trong cộng đồng Blogger Việt. Để kỷ niệm ngày trở lại, mình xin chia sẻ một thủ thuật, tuy không mới song cũng không cũ, đó là tiện ích Bài viết mới nhất cho nhãn không dùng Javascript.

Thực ra, tiện ích này được áp dụng từ thủ thuật Tiện ích Bài viết mới nhất không dùng Javascript áp dụng cho toàn blogspot mà mình đã vận dụng trước đây từ ý tưởng sử dụng tiện ích BlogList để tạo tiện ích bài viết mới nhất có ảnh đại diện.

Bạn có thể xem Demo tại trang chủ của blog này. Để tạo tiện ích này bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đặt theo tên nhãn cần áp dụng tiện ích.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

Rồi tiếp tục Add by URL thứ 2

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=2

rồi thứ 3

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

cứ thế cho đến khi nào bạn cần dừng lại (1,2,3,4… là số bài viết mới nhất hiển thị cho nhãn).

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn và Tên nhãn1 bằng tên của nhãn cần áp dụng, rồi nhấn SAVE để lưu tiện ích.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Tên nhãn 1' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

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

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha-main' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='RPnothumb' src='http://bit.ly/hGWr7r'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bước 3. Đặt code CSS bên dưới vào trước dòng ]]></b:skin>.

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#e2fcef}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:30px}
.recentposts-ha .RPtitle a{color:#069;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#AC0101;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}

Lưu Template là OK.

Cứ như vậy bạn có thể áp dụng cho nhiều nhãn và bạn sẽ sử dụng BlogList2, BlogList3, BlogList4, BlogList5…

Lưu ý nếu bạn áp dụng thủ thuật này tại những vùng có chiều rộng khá lớn (ví dụ phần Main) thì có thể bố trí các bài viết thành 2 cột, bạn chỉ cần thêm code CSS như thế này:

.recentposts-ha ul li {float: left;margin-right: 10px;width: 48%}

{30 bình luậnAdd yours ?}

03:35:00, 28 thg 6, 2011

Mình muốn dùng tiện ích này cho tất cả các bài thì làm sao ?? Từ các bài có label khác nhau đến các bài chưa được các thành viên bên mình đặt label ??

Reply
04:54:00, 28 thg 6, 2011

Đã áp dụng ý tưởng này cho template mới nhất :51)
Định viết 1 bài từ lâu nhưng nhường anh Hà vì dù sao nó cũng xuất phát từ tiện ích Blog List của anh mà thôi :53)

Reply
07:20:00, 28 thg 6, 2011

@ Ngankvn: Nếu dùng cho tất cả các bài thì ở bước 1 dùng các URL lần lượt thế này:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default?start-index=1

http://huynh-nhat-ha.blogspot.com/feeds/posts/default?start-index=2

http://huynh-nhat-ha.blogspot.com/feeds/posts/default?start-index=3

@Noct: Good, áp dụng để tạo những cái hay cho cộng đồng xài, cái gì có ích đều đáng quý mà.

Reply
10:20:00, 28 thg 6, 2011

quả thật bác Hà sáng tạo thật, mình sẽ mang cái này về ngâm xem

Reply
16:21:00, 28 thg 6, 2011

@ Admin : bác Hà ơi, mình bị tình trạng là : Google chỉ cho hiện tầm 2-3 bài/page ở trang chủ dẫn đến mất pagview (bị từ khi blogger áp dụng cái "autopagination"), nên khắc phục bằng cái propage của Fandung, tất cả bài hiện ra đều bằng java và feed, tốc độ rất kinh khủng

Bác có thể cải tiến thêm cái này để nó có phân trang và xem được toàn bộ bài bằng cách qua trang không ?

Reply
16:39:00, 28 thg 6, 2011

Hic, mình thử mà cả cái widget nó hiện có 3 bài à :62)

Reply
19:41:00, 28 thg 6, 2011

Thì cứ mỗi URL là 1 bài mà, muốn thêm bài thì add thêm URL:

...?start-index=4
...?start-index=5
...?start-index=6
...?start-index=7
vân vân và vân vân :51)

Reply
19:44:00, 28 thg 6, 2011

Ý của Ngan là cải tiến cái phân trang sẳn của Blogger ấy à, k dùng javascript?

Reply
19:58:00, 28 thg 6, 2011

Cụ thể như vầy : tháng 4 năm 2010, blogger tung ra đặc tính "autopagination" cho blogger, vì đặc tính này mà mình đã đi tìm cách từ bỏ blogger - chuyển qua web, nhưng chưa đủ vốn liếng đành thôi

Đặc điểm của nó là : blog nào đông truy cập, hoặc khác duy cập mạng cùi : load trang lâu, thì dựa vào đóa blogger sẽ đưa ra một số lượng bài ngẫu nhiên ở trang chủ, thường thì blog mình chỉ hiển thị 2-3 bà/page dù có chỉnh thế nào đi chăng nữa
Việc số lượng bài ở mỗi page là ngẫu nhiên dẫn đến tình trạng là : khi bấm qua trang, nó sẽ bị sót bài

Vừa ít bài ở trang chủ làm mất pageview rồi còn bị thêm cái sót bài khi qua trang nên mình đành dùng cái này của Fandung : http://www.fandung.com/2011/05/fdnav-phan-trang-cho-blogspot.html
Nó giải quyết đc tất cả, nhưng do là java, lại phải load feed, đọc rồi write ra, những lúc mạng yếu có khi tốn cả 3-4 phút để hiển thị

Không biết cái thủ thuật này của bác Hà có giải quyết đc không ?
Nếu ko giải quyết triệt để cũng ít nhất giúp mình làm sao mà khi vào trang chủ thì load thủ thuật này để hiện bài, bấm qua trang 2 mới chạy cái của Fandung ??

Reply
21:24:00, 28 thg 6, 2011

Giá mà có cái feed random thì làm cái tiện ích random posts no-java ngon luôn anh Hà nhỉ :51)

Reply
22:27:00, 28 thg 6, 2011

Hì được thế đủ bộ non-js thì tuyệt cú mèo :54)

Reply
22:31:00, 28 thg 6, 2011

Mình vừa cài, phải nói nó nhẹ kinh xì khủng, rất là khoái chí

Nhưng mừ .... nó cập nhật chậm quá, bên mình tầm 30 phút có một bài update, mà nó cứ hiện bài cũ hoài, nên gỡ roài

Reply
16:24:00, 30 thg 6, 2011

Lâu lắm mới qua blog bác Hà, lần này bác hà viết cái thủ thuật làm bộ Emoticons của bác noct đi

Reply
20:51:00, 30 thg 6, 2011

@ Minh Quân: Để làm bộ Emoticons như Noct thì làm như sau:

Bước 1. Chèn đoạn code bên dưới vào trước thẻ </head>.

<style type="text/css">
#comment-form .toggle{background:url(http://3.bp.blogspot.com/_U0QaeycS3vw/TTx4p7WF8AI/AAAAAAAAAIQ/PsKmkWrcnmg/s1600/toggle_bg.png) 0 6px no-repeat;cursor: pointer;padding:0 0 7px 20px;margin-top:10px}
.toggle_content{padding:10px 0 75px 25px;background: #E1E1E1;border: 1px solid #D7D7D7;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;margin-bottom:10px;width:553px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/3183162250/emoticon.js"></script>

Bước 2. Tìm đến dòng <b:includable id='comment-form' var='post'> và đặt sau nó bằng đoạn code bên dưới.

<h4 class='toggle'>Chèn Emoticons</h4>
<div class='toggle_content'>
<div class='emotion'>
<img src='http://4.bp.blogspot.com/_U0QaeycS3vw/TTXulENdJ0I/AAAAAAAAAFU/5f5vHw6N44c/smile.gif'/>:)
<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXukyT1l7I/AAAAAAAAAFM/DaidYAxkiNE/sad.gif'/>:(
<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuWpEsR_I/AAAAAAAAAEk/Sk9k2jnuoBg/big_smile.gif'/>:D
<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXupiotYpI/AAAAAAAAAFg/9CubAStMFH8/too_sad.gif'/>:((
<img src='http://4.bp.blogspot.com/_U0QaeycS3vw/TTXulAkWoKI/AAAAAAAAAFQ/dBLny2PpNZ8/sexy_girl.gif'/>=))
<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXuWVpzsQI/AAAAAAAAAEc/qFPgHPVhHkU/beat_brick.gif'/>b-(
<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXudYbX_ZI/AAAAAAAAAE0/b5kV-RL7vwg/haha.gif'/>:))
<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXupTbDhqI/AAAAAAAAAFY/t2FEzBP2o_8/still_dreaming.gif'/>:P

<img src='http://2.bp.blogspot.com/_U0QaeycS3vw/TTXueYItRjI/AAAAAAAAAFA/YwowCynCRzc/oh.gif'/>:-o
<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXupgwmyLI/AAAAAAAAAFc/jOuRJF9qUbU/sweet_kiss.gif'/>:*
<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXuk5-M_AI/AAAAAAAAAFI/BUtKFeXapyk/pudency.gif'/>:-ss
<img src='http://4.bp.blogspot.com/_U0QaeycS3vw/TTXueJ3uwII/AAAAAAAAAE8/_pyiQFH9hi0/nosebleed.gif'/>[-(
<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXukiq6NWI/AAAAAAAAAFE/cW28bc76C_k/ops.gif'/>@-)
<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXuWs6VdyI/AAAAAAAAAEg/z8NtmON52NY/beauty.gif'/>=d>
<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuW1baGrI/AAAAAAAAAEo/VbqO1JJKWC4/boss.gif'/>b-)
<img src='http://1.bp.blogspot.com/_U0QaeycS3vw/TTXuddaxMVI/AAAAAAAAAEw/_aCzrN-ygWY/doubt.gif'/>:-?
<img src='http://3.bp.blogspot.com/_U0QaeycS3vw/TTXudk-h5SI/AAAAAAAAAE4/i_BBD1qO0zs/look_down.gif'/>:->
</div></div>

Lưu Template. Có gì cứ tham khảo thêm ở Noct nhé.

Reply
00:33:00, 1 thg 7, 2011

Sao lại có jQuery ở đây :51)

Reply
07:33:00, 1 thg 7, 2011

Hi, thừa rồi, tớ lộn qua cái hiệu ứng toggle có jQuery. Có gì MQ contact với Noct nhé. :71)

Reply
11:07:00, 1 thg 7, 2011

Thanks bác mới vừa contact với bác Noct xong :71) sau một thời gian im hơi lặng tiếng cuối cùng bác Hà đã trở lại và nguy hiểm hơn rất nhiều :51)

Reply
13:41:00, 2 thg 7, 2011

Hi, MQ dùng từ "nguy hiểm" rất hay, tớ rất khoái từ này :74)

Reply
17:33:00, 2 thg 7, 2011

Sao anh không thay cái recent comment bằng tiện ích nguồn cấp nhỉ :51), nhanh hơn blog list đấy :65)

Reply
10:31:00, 3 thg 7, 2011

Nếu dùng nguồn cấp thì xài Recent Comments và Recent Posts dùng nguồn cấp luôn cho đồng bộ, anh vẫn thích xài BlogList hơn. :69)

Reply
08:46:00, 3 thg 8, 2011

Bạn ơi, sao tui không add list được ta. Có thể giúp mình được không.

Reply
08:50:00, 3 thg 8, 2011

Internet mà yếu là ADD URL k vào đó bạn ơi.

Reply
09:29:00, 3 thg 8, 2011

sáng nay sao blogger.com vào mãi không được nhỉ. :(

Reply
09:50:00, 3 thg 8, 2011

Đúng là hôm nay Blogger k ổn định mấy tiếng liền. Có thể đang bảo trì hay làm gì đó.

Reply
10:32:00, 3 thg 8, 2011

sáng giờ vào được có vài lần. mà vào rất chậm. không biết mạng Việt Nam có chặn blogger như chặn facebook không nữa.

Reply
19:54:00, 7 thg 9, 2011

Cái thủ thuật này em áp dụng, thế mà nãy vừa đăng bài mới thì không thấy nó cập nhật là sao anh Hà nhỉ!

Reply
20:03:00, 7 thg 9, 2011

Dạo này cái Feed cùi bắp của Blogger bị sao đó, tiện ích này phải đợi 15 đến 30 phút nó mới hiện ra, lúc trước k có chuyện này.

Reply
20:09:00, 7 thg 9, 2011

Có lẽ vậy, bây giờ em Refresh lại thì đã ok rồi anh ạ! hihi.

Reply
17:16:00, 30 thg 3, 2012

sao em chinh css khong duoc anh oi

Reply
14:45:00, 1 thg 10, 2015

Mình đã áp dụng. Thấy ổn. Cám ơn bạn vì đã đăng thông tin hữu dụng và hướng dẫn rõ ràng.

------------------------------------
Đầu thu DVB T2 – Xem tivi chuẩn HD miễn phí thuê bao tháng
Chuyên bán: Dau thu DVB T2 chính hãng.
Xem chi tiết tại: Đầu thu kỹ thuật số

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn