• 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

Tùy biến Bài viết mới nhất có ảnh đại diện không dùng Javascript

18
29/01/2011

Sau khi đọc bài viết về tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List, bạn Itechplus có ý muốn bố cục tiện ích này theo kiểu: Bài viết đầu tiên có ảnh đại diện, tiêu đề và đoạn trích dẫn, còn những bài viết tiếp theo hiển thị dạng list (chỉ tiêu đề mà thôi). Tôi nhận thấy ý kiến này rất hay và bắt tay vào nghiên cứu ngay.

Theo cách tùy biến tiện ích Bài viết mới nhất theo bố cục ở trên thì phải dùng đến hai tiện ích Blog List. Tức là tiện ích Blog List 1 chỉ hiển thị duy nhất 1 bài viết (1 URL) gồm ảnh đại diện, tiêu đề bài viết và đoạn trích dẫn, còn tiện ích Blog List 2 hiển thị một số bài viết tiếp theo dưới dạng list tiêu đề bài viết. Tuy nhiên chúng ta cần biết rằng đối với tiện ích Blog List nếu áp dụng các URL cho chính blogspot của mình thì chỉ áp dụng được cho 1 tiện ích Blog List mà thôi. Nếu như vậy thì ý tưởng trên không thể hiện thực hóa được chăng?

Không. Rất may là tôi đã phát hiện ra một cách có thể khắc phục được trở ngại này. Đối với tiện ích Blog List 2, tôi sử dụng URL là dạng rút gọn bằng dịch vụ rút gọn URL của Google. Bằng cách này, mặc dù URL chính vẫn từ blogspot của mình nhưng qua dịch vụ rút gọn URL thì nó sẽ trở thành URL từ trang web khác cho nên sẽ áp dụng được cho tiện ích Blog List 2. Thế là khúc mắc đã được xử lý hoàn toàn và bây giờ chúng ta có thể bắt đầu cài đặt tiện ích này. Bạn có thể xem Demo dưới đây.


Bước 1. Tạo tiện ích Blog List 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 đề là Bài viết mới nhất.

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/?start-index=1

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn rồi nhấn SAVE để lưu tiện ích.

Bước 2. Tạo tiện ích Blog List 2.

Trước khi tạo tiện ích Blog List 2, bạn cần mở trang Goo.gl. Sau đó dán URL bên dưới (thay huynh-nhat-ha bằng tên blogspot của bạn) vào khung dán URL rồi nhấn Shorten để có URL rút gọn. Bạn copy URL rút gọn rồi lưu lại.

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



Tiếp tục rút gọn URL:

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

rồi đến

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



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

Cứ như thế cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích thì dừng lại. Lúc này bạn có một list URL rút gọn đặt theo thứ tự ở trên.

Tiếp tục trên sidebar của Blogger, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Bạn không cần điều chỉnh gì ở mục Title, chỉ cần tick chọn Title of most recent item.

Nhấn ADD TO LIST. Bạn lần lượt Add tất cả các URL rút gọn theo thứ tự ở trên, xong rồi nhấn SAVE để lưu tiện ích.

Lúc này có thể thấy tiện ích BlogList1 có tiêu đề Bài viết mới nhất nằm ở dưới tiện ích BlogList2 có tiêu đề mặc định là My Blog List (Danh sách Blog của tôi). Việc cần làm là hoán đổi vị trí của 2 tiện ích này, bạn kéo tiện ích có tiêu đề My Blog List xuống dưới tiện ích có tiêu đề Bài viết mới nhất. Nhấn nút SAVE trên đầu thanh Navbar để lưu các bước thực hiện.



Bước 3. 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='Bài viết mới nhất' 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' 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='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- đoạn trích dẫn bài viết -->
<div class='RPsummary'><data:item.itemSnippet/></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bạn cần thay URL_ảnh đại diện_mặc định bằng URL đến ảnh đại diện mặc định cho trường hợp bài viết không có ảnh. Bạn có thể dùng ảnh riêng của bạn rồi upload lên chính Blogspot để lấy URL, hoặc bạn có thể dùng ảnh này.

Tiếp tục dùng từ khóa BlogList2 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList2' locked='false' title='My Blog List' 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. 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.

<!-- I just hide the title of the widget
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
yes it's hidden -->
<div class='widget-content'>
<div class='recentposts-ha2' 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='RPcontent2'>
<!-- tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết -->
<div class='RPtitle2'>
<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>
</div>

Bước 4. Đặt đoạn code sau đây 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;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#123}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:50px}
.recentposts-ha .RPtitle a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#CDE;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}
.recentposts-ha .RPsummary{clear:both;color:#999;font-family:Arial;font-size:12px;text-align:justify}
.recentposts-ha2 .RPcontent2{padding:5px}
.recentposts-ha2 ul{border-bottom:1px dotted #555;list-style-type:none;margin:0;padding:0}
.recentposts-ha2 ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha2 ul li:hover{background-color:#123}
.recentposts-ha2 .RPtitle2 a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha2 a:hover{color:#CDE;text-decoration:none}
#BlogList2 {margin-top:0px}
#BlogList2 h2 {display:none}

Lưu Template là OK. Chúc bạn thành công và hy vọng bạn hài lòng với tiện ích này. :44)

{18 bình luậnAdd yours ?}

11:54:00, 30 thg 1, 2011

Cuối năm dọn dẹp mấy cái này qua 1 bên , chuẩn bị tinh thần đón năm mới thôi anh Hà ơi :66)

Reply
07:47:00, 31 thg 1, 2011

chúc bạn chén tết ngon miệng

Reply
07:40:00, 3 thg 2, 2011

Wow ! Cám ơn Hà nhiều nhé ! Chưa test nhưng nhìn demo rất đúng ý mình. Năm mới chúc Hà và những người thân yêu sức khỏe dồi dào, vạn sự như ý nhé ! Happy New Year !!! :66)

Reply
15:39:00, 3 thg 2, 2011

Năm mới Tân mão chúc bác và gia đình tài lộc, an khang thịch vượng! Năm mới sức khỏe và may mắn!

Reply
17:36:00, 3 thg 2, 2011

Chúc anh Hà năm mới an khang thịnh vượng, sức khỏe dồi dào để ra nhiều thủ thuật "độc" cho blogger :65)

Reply
22:49:00, 3 thg 2, 2011

chúc bạn năm mới thành công trên mọi lĩnh vực

Reply
18:17:00, 4 thg 2, 2011

Năm mới anh khai bút bằng thủ thuật rất hay. Cảm ơn anh rất nhiều.

Reply
18:03:00, 6 thg 2, 2011

Nice tut ! :)

Reply
11:24:00, 8 thg 2, 2011

Chào Hà,

Anh xem blog của em và đã áp dụng một vài thủ thuật bổ ích vào blog của anh.

Anh có vấn đề này nhờ em hướng dẫn cách khắc phục

Mỗi lần truy cập vào blog, trên trang chính chỉ thể hiện 4 bài viết, trong khi tại phần blog post a chọn 10 bài. Chỉ khi click vào phần bài đăng cũ hơn thì blog a hiển thị đủ 10 bài viết.

Anh làm mọi cách vẫn không được.

Chờ hồi âm của em.

Cảm ơn em nhiều.

Mr.Thành
http://goldandforex-goldandforex.blogspot.com/

(ghi chú: a post đề nghị vào phần liên hệ nhưng ko được, thông cảm nhé)

Reply
12:08:00, 8 thg 2, 2011

Bác Hà ăn tết xong trốn biệt luôn rồi cái theme convert cho em xong chưa nhỉ

Reply
黃日河
AUTHOR
14:49:00, 8 thg 2, 2011

Xin chào Mr Thành, thì ra Mr Thành tư vấn đầu tư vàng à. Mình cũng từng làm nghề này, hiện nay đang ẩn dật, là một chuyên gia sóng Elliott đấy, đã từng thu nạp rất nhiều học trò tại Sài Gòn. Có thể Mr T với mình cùng tuổi đấy.

Về việc đặt số bài viết trên trang chính, có thể vào Settings (Cài đặt) >> Format (Định dạng) chọn số bài đăng trên trang chính rồi nhấn SAVE SETTINGS để lưu cài đặt. Nếu muốn giới hạn số bài viết trên các trang Label thì đọc bài này

Reply
15:08:00, 8 thg 2, 2011

@Minh Quân Đang bận design cái blog tự học chữ Hán, năm mới nên phải ra lò cái gì mới chứ, nhưng sẽ k quên viết thủ thuật mới cho Blogger đâu. Sẽ tranh thủ giải đáp hết ý kiến của mọi người. Ăn tết xả láng nên bữa nay mùng 6 ngày tốt mới lên bờ lốc nè.

MQ muốn convert cái theme nào hè, quên mất tiêu rồi. Đúng là sau cái tết là quên hết. =))

Reply
20:14:00, 8 thg 2, 2011

mình cũng có nhờ convert cái blog sao cho giống cái e-phim.net nữa :51)

Reply
20:34:00, 8 thg 2, 2011

Cậu convert cho tớ cái theme PassionDuo Theme (3 Colors)
LINK: http://wphacks.com/free-premium-wordpress-themes/ cậu kéo xuống tìm cái theme đó và download cái màu xanh lá cây , convert nhớ để read more tùy chỉnh và hiệu ứng như wordpress và phải có biến ( chỉnh sửa của blogger) nha và tạo cái icon cho người post và day nữa chứ và thêm một icon hiển thị số comment nhé
P/S : Xóa cái lằn gạch xanh ở sidebar nhé
Em sợ bác ko làm quá vì đòi hỏi cao :D

Reply
17:51:00, 9 thg 2, 2011

khi nào bác convert dc cái e-phim.net thì báo cho em biết với nhé. cám ơn bác nhiều

Reply
17:53:00, 9 thg 2, 2011

khi nào convert dc cái e-phim.net ,bác báo cho em biết với nhé. thank bác nhiều

Reply
17:38:00, 28 thg 6, 2011

Tại sao lại phải ạo 2 và nhiều bloglist vậy bác ?
Mình thấy tạo một cái rồi cứ thế add feed vào là được mà ?

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

Phải tại 2 cái BlogList mới được chứ, bài viết đầu tiên có định dạng riêng nên phải dùng 1 BlogList riêng, các bài còn lại theo 1 BlogList.

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