Trang chủ \ 10:00

Gắn hình ảnh cho bài đăng mới nhất

new redCó nhiều cách để tạo sự khác biệt cho bài đăng mới nhất. Trước đây mình đã hướng dẫn Tạo mầu nền riêng cho bài đăng mới nhất nhưng có vẻ nó khó thực hiện với những bạn chưa biết nhiều về Blogger template. Hôm nay mình sẽ hướng dẫn một cách khác để tạo sự khác biệt cho bài đăng mới nhất bằng cách sử dụng một hình ảnh hiển thị bên cạnh bài đăng này. Cách thực hiện khá đơn giản cũng gồm 2 bước.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#Blog1{position:relative}

Bước 2: Tìm thẻ <a expr:name='data:post.id'/> và thêm vào sau nó 1 trong những đoạn mã sau, mỗi đoạn mã ứng với 1 hình ảnh hiển thị bên cạnh bài đăng mới nhất.

new red
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='http://lh6.ggpht.com/-y_rejrDQrhE/TdDxPUTgjkI/AAAAAAAAAAA/_Dfl3S5JmN8/s1600/new-red.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

new yellow
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='http://lh6.ggpht.com/-pG2m_3JyLo0/TdDxPfAUhBI/AAAAAAAAAAA/i0ZKRhq6xZA/s1600/new-yellow.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

new green
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='http://lh4.ggpht.com/-qTcLvOO5hdI/TdDxPfuad3I/AAAAAAAAAAA/60_x0QWuFdc/s1600/new-green.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

new blue
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='http://lh3.ggpht.com/-is-KZ8wrOqQ/TdDxPdhpkiI/AAAAAAAAAAA/SP_hO89h8GY/s1600/new-blue.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

new blue light
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='http://lh3.ggpht.com/-g6hEm4LaYgI/TdDxPcYNa8I/AAAAAAAAAAA/SAWFvTPj92w/s1600/new-blue-light.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

new black
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='http://lh3.ggpht.com/-ocqy0CHPkaw/TdDxPVEFaXI/AAAAAAAAAAA/iX1zSVVpYs8/s1600/new-black.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

new gray
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='http://lh3.ggpht.com/-avRhNLyRJMs/TdDxPSDdVbI/AAAAAAAAAAA/n_Ro8Xgo_Jw/s1600/new-gray.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

Ảnh được hiển thị góc trên bên trái của bài đăng mới nhất. Bạn cần chỉnh lại giá trị của thuộc tính topleft ở bước 2 để hình ảnh được hiển thị phù hợp với template đang dùng. Nếu có thể, hãy design một hình ảnh cho riêng mình và thay thế cho hình ảnh của thủ thuật trên.

Thủ thuật này không dựa vào giá trị thời gian nên khi duyệt theo label sẽ không gắn hình ảnh cho bài đăng mới nhất, có vẻ còn gượng ép khi nói "tạo sự khác biệt cho bài đăng mới nhất"!
Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

Chia sẻ

94

Nhận xét
1

Khà...khà...sức mạnh của CSS position là đây:)

Reply
2

:D Mở rộng thêm hiển thị ở các trang Archive,Label,...thì tuyệt

Reply
3

Sao phải khổ sở post từng đoạn code thế nhở, chỉ việc quăng mấy cái link ảnh ra để anh em tự xử :)

Reply
4

Bác Duy đã bắt đầu chăm hơn rồi :))

Reply
5

@Noct Chỉ là copy/paste thôi mà bác, cho bài viết có vẻ dài dài chứ thằng nhác chảy thây như em cái gì rút gọn được là rút hết :D

@Tien Nguyen Tranh thủ ngày nghỉ làm một bài, lâu rồi k có bài mới, sắp tới có khi còn ngủ "đông" dài dài. Bài này tính gửi qua bên bác vì em có bài viết về vấn đề này rồi, mà qua bác thấy bài mới ra lò liên tục cứ gọi là dồn dập :)

Reply
6

Cái "Tạo mầu nền riêng cho bài đăng mới nhất" mình thấy mức độ làm tương đương với cái này, chẳng cái nào khó hơn đâu, sao Duy lại nói là Cái đó khó hơn. Cái khó là nghĩ ra code thôi :)

Reply
7

@Hải yến À, nó tùy vào từng template, cách kia dễ xung đột code do làm tới 3 cái <b:include data='post' name='post'/>. Nếu hiểu được cách làm thì dễ tùy biến hơn. Cái khó là cách để mình trình bày thủ thuật, phải tìm xem ID, thẻ nào có trong hầu hết template để viết thủ thuật.

Reply
8

hic, sao blog của mình chỉ hiện thị chữ new vạy ta: các bác xem thử: http://vnmediafire.blogspot.com/

Reply
9

@Hoàng Giang Sai mất địa chỉ ảnh, đã chỉnh lại. Cái số người đang đọc viết bằng js của bạn hài k chịu được =))

Reply
10

hi hi. ảo thôi mà. để tăng hưng phấn cho người xem nhưng mà nó chạt loạn xạ. bạn co code nào hay ko?

Reply
11

@Duy Pham Em ở Shopkienthuc nhưng chỉ biết viết bài thôi, mấy cái code đó bác Đức lo hết, nên em chả hiểu gì lắm

Reply
12

DuyPham có thể giúp mình cái này đc ko: tsao mình chỉnh số bài viết trên trang chủ là 8 bài mà nó chỉ hiện có 3 bài nhỉ? Cả site của mình có hơn 40 bài mà :(

Reply
13

@Funny Những bài đăng đó quá dài vì sử dụng nhiều hình ảnh, Blogger đã tự ngắt trang. Bạn cần vào chỉnh sửa lại những bài đăng đó và thêm readmore.

Reply
14

@Duy Pham

Thanks DuyPham, cho tớ hỏi thêm 1 điều nữa: không hiểu sao bài ở page 1 của tớ thì hiển thị bình thường, có hình thumbnail và có read more, nhưng sang page 2, page 3 thì nó toàn hiện luôn cả bài :( Liệu có phải nguyên nhân cũng như trên ko bạn?

Reply
15

@Funny Không thấy hiện tượng như bạn nói :-? Bạn đăng nhận xét không gõ trực tiếp ở đây mà paste hay sao toàn bị vào spam vậy.

Reply
16

Mình đăng nhận xét ở đây mà :(( Gõ chứ có paste ở đâu đâu? Bạn sang blog của mình thì thấy ngay! Page 1 mình hiện đúng số bài mà mình đặt (18 bài), nhưng sang page 2 lại chỉ có 7 bài! Rất lạ nhé :(

Reply
17

@Funny Tìm trong template dòng postperpage=7 và thay bằng số bài bạn muốn hiển thị trên 1 trang.

Reply
18

@Duy Pham


Mình làm được rồi! Cảm ơn DuyPham nhiều lắm :)

Reply
19

bác Duy ơi, em ko tìm thấy #Blog1{position:relative} bác ạ, phải làm sao giờ bác

Reply
20

@Linh Dung VnMart Cái đó là phải tự thêm vào chứ bạn, đọc kỹ các bước mình viết nhé :)

Reply
21

Hi duy, cậu có thể hướng dẫn làm cái tiện ích bài viết xem nhiều trong tháng giống cậu không thanks

Reply
22

Chào DuyPham!
Mình muốn nhờ DP 1 việc liên quan đến cái theme của mình nhé:
- Mình đang dùng theme này: http://astronova-besttheme.blogspot.com/

- Vấn đề là: cái tiêu đề bài viết của mình toàn bị lỗi font tiếng Việt! Mình đã vào template để chỉnh loạn xạ hết phần font lên mà ko đc! DP có thể xem giúp mình ko?
Đây là lỗi font: http://www.anhtructuyen.com/?di=7130303027212

Cảm ơn DP nhé!

Reply
23

@Minh Quân Bạn xem ở đây http://blog.duypham.info/2010/12/trich-dan-dang-title-cho-bai-pho-bien.html

Reply
24

Theme mà cậu Abel dùng thì font của nó là sử dụng Cufon để render, và cái font đó lại không hỗ trợ Unicode tiếng Việt. Chỉ còn cách đổi font khác thôi.

Reply
25

@AbelPhần tiêu đề bài viết của template đó dùng js để chèn font-family. Hãy thử thay tất cả steelfish thành Arial xem được không.

Reply
26

@Noct

Thay theme khác à bạn :( Chán quá! Mãi mới tìm đc 1 theme ưng ý! Nhìn cái Cufon ấy mà chả hỉu cái j!

Reply
27

@Duy Pham

Mình đã thay rùi, mà ko đc :(

Reply
28

Sao Duy không thêm cái Tiện ích Đếm online để anh em biết tình hình Blog thử coi :))

Reply
29

@Abel : không cần phải thay temp đâu : tìm trong template 2 dòng "div class='title'" và xóa nó đi (cả thẻ đóng của nó nữa) là được. Còn nếu muốn chỉ định cụ thể tiêu đề bài viết là font gì, size bao nhiêu thì thêm css cho nó.:)

Reply
30

@Nguyễn Đức Những thứ linh tinh k cần thiết mình k dùng, cá nhân mình thấy cái đếm online cũng vậy :). Tạm thời đang đặt histats để xem số lượng người dùng IE6 là bao nhiêu, vì để hiển thị giống nhau trên mọi trình duyệt mà những hiệu ứng mới của CSS3 mình ít sử dụng.

Reply
31

@iTechPlus

Mình xóa đi thì ở homepage chả hiện Title của mỗi bài nữa :(

Reply
32

@Abel : chắc bạn xóa luôn cả code bên trong của nó rồi chứ gì.=)) Mình có nói thế đâu nhỉ:))

Reply
33

@AbelXóa đoạn này trong template đi:

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {

Cufon.replace('.title,.inpost h3,.sidebar1 h2,.sidebar2 h2,h3#comments,#respond h3 ', { fontFamily: 'steelfish' });

jQuery(".fblock a").hover(function() {

jQuery(this).next("span").stop(true, true).animate({opacity: "show", top: "-35"}, "slow");

}, function() {

jQuery(this).next("span").animate({opacity: "hide", top: "-50"}, "fast");

});

});
//]]>
</script>


Tìm tiếp trong template dòng sau


.sidebar2 h2 {
background:#0b0b0b;
height:20px;
padding:10px;
font-family: Arial,Tahoma,Century gothic, sans-serif;
color:#bbb;
font-size:20px;
border-bottom:1px solid #2F2F2F;


Thay padding:10px; bằng padding:10px 5px;
font-size:20px; bằng font-size:16px;

Đây là mình làm trên template Astronova nguyên mẫu chưa chỉnh sửa gì.

Reply
34

2 người comment kiểu gì mà toàn bay vào spam @-)

Reply
35

Xóa luôn Cufon cho nó gọn nhỉ, thay thế bằng Google Webfont cho nó đẹp.
Mà theme của besttheme.net chuyên nhét nguyên cả mớ code javascript trong xml, bọ của Google nó mà lạc vào chắc hết đường ra luôn =))

Reply
36

@iTechPlus

Hi, xin lỗi! Mình ko đọc kĩ :D

Reply
37

@Duy Pham

Hi, mình làm đc rùi! Thanks DP nhiều nhé :)

Reply
38

so creative my friend :)

Reply
39

@DuyPham : chả hiểu sao nữa, comment bên Noct cũng bay vào spam không à.:((

Reply
40

@Beben Koben Welcome you back, Beben :)

Reply
41

DuyPham cho mình hỏi chút nữa nha :)

Khi mình chèn video từ youtube vào blogspot thì giao diện của video là giao diện chung, sẽ như thế này:
http://www.anhtructuyen.com/?di=1413035411618

Giờ có cách nào tạo style riêng cho video, để nó trở thành như thế này ko nhỉ:
http://www.anhtructuyen.com/?di=013035411613

Thanks DP nhiều!

Reply
42

@Abel Bạn xem bài viết này nhé http://hontap.blogspot.com/2010/02/shortcode-hoan-thien-e-chen-nhac-vao.html

Reply
43

Lâu chưa có bài mới nhỉ :(

Reply
44

Thanks DP, mình làm đc rùi :)

Reply
45

DuyPham! xin mạo muội hỏi duy là mem của Yahoo 360 Plus với nick name là " KEM " phải không nhỉ ?
Tò mò.. thấy mặt quen quen

Reply
46

@NAD Bận quá bác ạ, dạo này già rồi ngồi máy tính ít hơn, mà đang bị tình trạng khô mắt, giờ ngồi máy tính có 1 tiếng là đỏ mắt mất rồi :(

@Kệ Sách Nhỏ Mình k dùng blog yahoo bạn ạ, mấy cái như Yahoo, Zing mình thấy nhí nhố chỉ dành cho tuổi teen :D. Nick name trên mạng chỉ dùng mỗi Ducky

Reply
47

zị hả, quả thật thì blog plus giống con nit :-SS


Minh có thể trao đổi liên kết được không nhỉ?

Reply
48

Duy Send cho mình cái Template của bạn được không ? Nếu được gửi cho mình : nguyenduc308.268@gmail.com. Thank

Reply
49

Duy ơi ! Không biết duy có ý định share template đang sử dụng không ? mình rất thích theme này nhất là cái menu " chủ đề " đúng là quá đẹp. Duy có thể share cho mình ko ? qua tính hỏi share thì lại có người hỏi trước rùi...hy vọng Duy đồng ý ! hihi
Nếu được thì Duy gửi cho mình qua địa chỉ email : lh@quangtruyen.co.cc nhé.

Reply
50

Mình sẽ share free mọi thứ trừ template đang dùng.

Reply
blog tải miễn phí luận văn 25/4/11 18:15
51

èo..chán... :((
vậy ăn cắp được không ?

Reply
52

hí hí. đùa tí.
chứ tui cũng đang làm một cái. dù sao cũng biết một chút chút về CSS, cái menu đấy thấy hay hay.. hihi

Reply
53

@Blog tải miễn phí luận văn Nếu biết về CSS thì hoàn toàn viết được menu đó thôi, còn ăn cắp thì thoải mái, nó cũng k phức tạp gì nhưng cái này mình tự viết nên có view source mà áp dụng nguyên xi thì mình nhận ra ngay thôi.

Reply
54

Ợ, tối nay hơi say @-) Say nên nói thật lòng, mình thấy chán cộng đồng Blogger Việt rất k tôn trọng vấn đề bản quyền. Nhiều blog có nhiều thủ thuật nhưng mình chỉ thích những blog ít thủ thuật, đơn giản là phần lớn blog đó tự viết ra. K ai có thể tự nghĩ ra tất cả những thủ thuật hiện đang có trên mạng, vào blog nào mà có hết những thủ thuật đó thì chỉ là ăn cắp, ăn cắp mà k ghi nguồn thì đáng :-t

Reply
55

Câu nói hay nhất trong tuần, mặc dù hơi say :))

Reply
56

Thôi em đọc truyện đây, k lát nữa lại phát ngôn ra mấy câu mà mai tỉnh lại ước gì mình k nói :D

Reply
57

Tranhung09Blog Đồ họaHoc lai o toHuyTrung.NetHỗn tạp BlogTuT365.ComRuaBien.NetVì Sao NhỏNoct BlogHuynh Nhat HaShop Kiến ThứcMinh Mèo's BlogTRAIDATMUI.com
ÁM CHỈ BLOG NÀO ĐÂY ?

Reply
58

Cái menu của cậu quả thật có ý tưởng mới lạ. mình có học qua một chút CSS nhưng quả thật thì cũng hơi khó. làm hoài mà méo sẹo. trên trình duyệt IE thì không hiển thị. hic. chắc bó tay.
Đang ngâm cứu cái menu hover cho bên blog plus. lâu quá cũng không cho ra đời sản phẩm gì.

Reply
59

Nghe đồn Yahooplus sắp đóng cửa để nhường chỗ cho cái dịch vụ blog mới là Yahoo Extra hay Mega gì đó :))
Các bạn trẻ sắp được 1 phen nhộn nữa rồi :))

Reply
60

=)) May mình k xài yahoo, cứ đổi xoành xoạch thế này thì đúng là ai dám chơi

Reply
61

Thành thực không dám spam nhưng thực tình đang rất cần sự trợ giúp của các Pro Blogger như bác. Em mới tạo diễn đàn Cộng đồng Blogger Việt Nam để giúp những người mới tham gia Blogger cũng như cung nhau chia sẻ,đoàn kết lại các Blogger. Bác với các bác khác có thời gian qua giúp xây dựng Cộng đồng nhá. :)

http://blogger.forumvi.net/
Cảm ơn các bác rất nhiều.
Thành thực xin lỗi Duy Pham vì đã spam. :(

Reply
62

Cũng bó tay cái blog Yahoo rồi, cùi đến nổi khi 1 blogger xóa bài viết trên blog thì toàn bộ hệ thống bị đóng băng. không tin nổi cái thèn yahoo ni được.

Reply
63

Ko biết bài ko có hình mà mình muốn hiện hình thì làm sao ta?

Reply
64

bác ơi cho em hỏi làm sao để hiển thị bài Đăng toàn bộ mà không có chữ readmore hay đọc thêm khi mới vao trang chủ. ý mình là hiển thị nguyên bài đăng không có chữ readmore.

Reply
65

@kjro-pjka Template bạn đang dùng auto readmore js. Muốn k có chữ readmore thì bạn loại bỏ đoạn js đó đi.

Reply
66

@Độc chiêu Blog Hỏi thế này thì mình cũng chịu, k hiểu bạn muốn hiện hình gì? ở đâu?

Reply
67

Hình mặc định cho những bài ko có hình ấy, nhìn có nó đồng bộ, chứ có cái có, có cái ko :)

Reply
68

@Độc chiêu Blog Vậy thì bạn hỏi k đúng nơi rồi. Blog bạn đang áp dụng auto readmore js và phiên bản đó chưa có tùy chọn hiển thị ảnh mặc định cho bài k có ảnh.

Reply
69

:)) ,blog của bác đọc mãi không chán,cái nào cũng muốn thử nhưng nó chạy chậm nên dùng từng cái một thoai.Đa tạ pác

Reply
70

Gắn ảnh cho bài viết mới trong cả ngày thì hay quá
Đây chỉ gắn cho một bài viết sau cùng
Bác chỉ em cách gán cho cả ngày với

Reply
71

@Lamkan Studio Muốn vậy phải dùng js gọi feed bạn ạ, mình ngại đụng đến cái feed này nên k phát triển thêm nữa :D

Reply
72

thanks bạn chủ blog chia sẽ.đúng cái mình đang cần

Reply
Nặc danh 14/11/11 12:14
73

mình muốn hình chử new hiển thị bên phải thì chỉnh code chổ nào,bạn giúp mình nhé,cám ơn

Reply
74

Mình k có đoạn mã này: expr:name='data:post.id'/> trong phần chỉnh sửa HTML @-)

Reply
75

@pvmhienChọn mở rộng mẫu tiện ích.

Reply
76

Nhận xét này đã bị tác giả xóa.

Reply
77

Hi Master Duy,
how can i make badge appear also on item page & just for the first item.
thanks to answer

Reply
78

Sorry, my tuts being stolen and I will don't share freely Blogger xml tut.

Reply
79

sorry duy but i'm not stealing or sharing your tools
i liked your design
and i decide to make one like yours i'm learning that's all.
besides i don't have objectif sell my templates inspires from yours.
thanks

Reply
80

so how can i make badge appear also on item page & just for the first item.
thanks to answer

Reply
81

Cái này hơi khác bác đang dùng nhỉ?
Bấm vào bài mới nhất thì không còn cái đó nữa!!!

Reply
82

Đúng vậy, mình định update thêm nhưng ghét cái thái độ 1 số blog lấy những code Blogger XML của mình về nhưng k ghi nguồn, làm như đó là code họ sắp xếp ra được. Blogger XML k có nhiều câu lệnh, khác biệt chỉ ở chỗ vận dụng thuật toán cho nó mà thôi. Blogger XML 1 khi đã share thì k bảo vệ được mã nguồn.

Reply
83

Cái copy nứ chắc nói mình chứ gì!!hihi
Bây giờ mình đang làm lại Blog khác và copy có ghi nguồn!

Reply
84

Nhiều thằng cha đi ăn cắp còn ghi: ghi rõ nguồn khi copy từ blog này nữa chớ.

Làm thế mình đọc cũng còn chịu hết nổi

Reply
85

Thôi mà bác. update thêm đi mà. hjx. Kết nó quá ak`.
Mà bác cho em xài cái ảnh mới nhẩt của bác nha.hi. Không cho thì em đổi!! :D

Reply
86

Oài oài, hùi này đi luợn mà không kiếm đuợc kái gì cho vào blog. Các bác đồng loạt nghỉ ngơi ư ?

Reply
87

Mình sẽ trở lại trong tháng 7. Thời gian này đang bận quá :D

Reply
88

Bằng lòng với hiện tại ddie NLN, phát triển về mặt nội dung cho tốt vào :)

Reply
89

em ko tìm thấy cái thẻ <...> ở bước anh ơi : (

Reply
90

em ko tìm thấy cái thẻ ở bước 2 anh ơi?

Reply
91

cái này kiểm tra nếu ở trang chủ và là post đầu tiên thì show hình, để ý một tí để viết lại cho hợp với template

Reply
92

Cảm ơn bạn Duy Pham nhiều nhé. Nhiều tiện ích của bạn thực sự hiệu quả với blog của mình. Một lần nữa cảm ơn bạn ;)

Reply
93

Em thấy có nhiều template ở phần trang chủ bài đăng của họ có hiện thêm chữ Download và Demo rất đẹp bên cạnh ảnh thumbnail. Anh xem ảnh bên dưới nhé.
https://lh3.googleusercontent.com/-Vz6qNx8xroI/UQT4aIp-J2I/AAAAAAAADKs/gz9QfPJsGgs/s500/1.jpg

Anh có thể chỉ cách làm cho em với được không?
DEMO: templates.linhdungvn.com

Reply
94

mình muốn gắn vào thumbnail thì làm sao? bạn chỉ mình với :D

Reply

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.