Trang chủ \22.4.13

Auto readmore cho Blogger 2013

Trước đây mình đã giới thiệu Auto readmore không sử dụng javascript cho Blogger với khả năng tăng tốc cho blog và thân thiện với các bộ máy tìm kiếm. Một trong những nhược điểm mình nhận được qua nhận xét của các bạn là hình ảnh hơi nhỏ. Dùng javascript có thể nâng cao kích cỡ ảnh mà không làm ảnh bị nhòe, tuy nhiên vì tiêu đề là không sử dụng javascript nên mình không cập nhật thêm. Trong bài này mình sẽ hướng dẫn một auto readmore mới mà hình ảnh được giữ nguyên kích cỡ ban đầu và tuyệt vời hơn nữa là cũng không cần đụng chạm đến javascript.

auto readmore

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}

Bước 2: Thay thế toàn bộ <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='dp-thumbnail'>
   <b:if cond='data:post.firstImageUrl'>
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
   <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
    <b:else/>
     <span>No thumbnail</span>
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Hình ảnh phải được lưu trên Picasa, video từ Youtube. Tự động hiển thị thông báo với bài viết không có hình ảnh và video.

Hướng dẫn thủ thuật Blogger, Blogspot

42

Nhận xét
1

Nếu muốn cho hình ảnh về phía bên trái, hình vuông và chữ tràn sang bên phải thì phải làm thế nào hả Duy, mình đã áp dụng thử nhưng hình ảnh lại ở phía bên trên bài viết.
Cảm ơn Duy nhiều.

Reply Xóa nhận xét
3

Ở dòng đầu thêm float:left là được đó bạn rồi bỏ mấy cái dòng khác đi

Thủ thuật này hay quá, cho to ảnh mà ko bị nhòe, tùy biến dễ dàng hơn
tks DuyPham

Reply Xóa nhận xét
41

Muốn tiện ích Auto readmore blogger có ảnh sang trái hoặc sang phải thì làm như sau: float:left; margin: 0 6px 6px 0; nhé các bạn

Reply Xóa nhận xét
2

Cám ơn bác vì cái Auto read more 2013 cho blogger.

P/S: Bác có thể share em cái hình newest được không. Thanks bác

Reply Xóa nhận xét
9

Nó đây https://lh5.googleusercontent.com/-BYd9xeI4mNo/UTrX_TcFFhI/AAAAAAAABnc/4vO2VU6Fn24/w81-h48/newest.png

Reply Xóa nhận xét
19

Cám ơn bác Duy. Bữa nào bác share luôn full template duy phạm nào :D. Hoặc bán cho em cũng được.

Reply Xóa nhận xét
4

Duy xem cho mình cáu blog này đi, mình muốn dòng trích dẫn dịch sang phải 1 đoạn để khỏi dính vào cái thumbnail thì làm như nào nhỉ, thank Duy :D
http://thegioidulieu.blogspot.com/

Reply Xóa nhận xét
5

Thêm margin-right:10px cho thumbnail là dc

Reply Xóa nhận xét
7

Hỏi duypham ngoài lề 1tí, và câu hỏi thật sự lại không liên quan. Mong DP thông cảm và nếu giúp được thì mình cám ơn. Mình có sử dụng cái tiện ích ẩn/hiện chatbox bên trang noct-lan: http://noct-land.blogspot.com/2011/01/hien-chat-box-ver-2.html
Và mình muốn cái khung chatbox đó hiện ra trước và khi mình click đóng khung thì khi đó mới đóng được không bạn.

Reply Xóa nhận xét
8

Ở css bạn xóa thuộc tính display:none; đi.

Ở hàm gb_setInitBehaviour sửa lại thành
function gb_setInitBehaviour(){
gb_obj.isHidden = false;
gb_setOpacity(gb_obj, "1");
}

Reply Xóa nhận xét
10

Đã thực hiện thành công. Thanks DP rất nhiều

Reply Xóa nhận xét
11

Viết 1 bài về slide bài đăng đi bạn :P

Reply Xóa nhận xét
12

bác có nhiều cái mới mắt hi, chúc bác luôn bình an và ngày luôn blog luôn phát triển nhé

Reply Xóa nhận xét
13

Welcome <data:post.firstImageUrl/> :D

Reply Xóa nhận xét
Nặc danh 29/4/13 19:45
14

Nhận xét này đã bị quản trị viên blog xóa.

Reply
15

Thường thì 1 người muốn tham gia post bài cùng Blog của ai đó thì phải được người đó gửi lời mời vào Email. Liệu có thủ thuật nào để người khác làm 1bước đăng ký và mình vào xác nhận hoặc tự động xác nhận cho làm thành viên luôn không nhỉ?
Đây cũng lại là vấn đề ngoài lề của bài đăng này và DP cũng đã nói là kô làm theo yêu cầu, nên nếu thấy phiền thì DP kô trả lời hoặc xóa đi cũng được.hihi.

Reply Xóa nhận xét
16

Cái này thì mình chịu, mình chỉ biết hiện giờ muốn mời ai cộng tác viên cần biết email với tài khoản Blogger người đó rồi gửi lời mời và có xác nhận từ email đó.

Reply Xóa nhận xét
17

Cái chán của Blogger là chỗ này nhỉ, híc. Cảm ơn bạn nhé @@

Reply Xóa nhận xét
18

Nói chung là phải biết nhau mới dám cho người khác đăng trên blog mình .....

Reply Xóa nhận xét
20

Bác ch hỏi trước kia không dùng cái Auto readmore không sử dụng javascript cho Blogger mà dùng cái này dc hk ?

Reply Xóa nhận xét
21

Được, bạn đưa mình đoạn code nằm trong thẻ <b:if cond='data:post.firstImageUrl'> để mình sửa lại cho.

Reply Xóa nhận xét
22

èo.. tưởng làm ik vậy là dc chớ.. ai dè... ^^
vậy để 2 ngày nữa t ra Net mới edit dx :-(
h đag online dc ^^
mà bác làm bài hd chèn h1 vào title với ^^ vs lại hd seo toàn tập cho blogspot nữa. hk bik sao cái blog (wap) củ t nó hk hiện title trên google. đã.làm đủ mọi cách.

Reply Xóa nhận xét
24

Hướng dẫn chèn H1 bên http://www.bloggerplus.net có nói rồi đấy, bạn qua đó tìm.

Còn title blog bạn mình vẫn thấy có trên Google mà, chỉ k có description thôi. Bạn nên thêm tag description này cho blog và mỗi lần viết bài thêm desc này trong phần đăng bài.

Reply Xóa nhận xét
25

Copy cái nào ra đây @@ Nhìu cái ata:post.firstImageUrl' quá...

Reply Xóa nhận xét
26

Vào chỉnh sửa HTML -> chuyển đến tiện ích -> Blog1 -> tích chọn mở rộng cái hàm có id là post và tìm ở đây nhé.

Reply Xóa nhận xét
27

Cảm ơn bạn, thử xem có được không

Reply Xóa nhận xét
28

Các huynh cho em hỏi chút ạ
Em có cái template download trên mạng mà không biết làm sao để chuyển nó thành của mình (Không phải là bản quyền)
Mà chuyển một số file trong template thành của mình cho nó hoạt động ổn định
Vì lần trước em có dùng một cái trên mạng nhưng một thời gian bị lỗi (hình ảnh) chắc là bị xóa trên host của họ
Vậy các huynh cho em hỏi? muốn nó thành của mình thì phải chuyển những file nào trong template thành của mình.
Hiện tại em mới biết chuyển mỗi file .js sang google code.

Không biết cần chuyển file nào sang nữa không (và chuyển sang host nào)
Hình ảnh thì chuyển vào photobucket hay là piccasa?

Reply Xóa nhận xét
29

hình thì cứ tìm file png...jpg mà thay....nói chung bạn cứ tìm cái nào http:... cái nào thay được thì thay....
thỉnh thoảng có file css... cũng đưa lên googlecode được
còn ảnh hả...mình toàn đưa lên google bằng cách đăng ảnh tong bài viết và lấy link

Reply Xóa nhận xét
30

Thanks huynh, có lẽ người làm tem cũng làm như huynh, đưa ảnh lên bài viết rồi lấy link, một ngày kia, xóa bài viết, thế là song cái tem em down về :(,

Reply Xóa nhận xét
31

ko phải... ảnh thì lưu trong tài khoản chứ ko lưu trong bài viết... vì vậy xóa bài viết không ảnh hưởng... chỉ mất khi đã quá lâu hoặc tài khoản bị block.
file .js thì có thể host hết bandwich
nói tóm lại khi bạn lấy tem nào thì nên chuyển hết những cái cần chuyển thành của bạn

Reply Xóa nhận xét
32

Anh Duy và các huynh vào blog này:
http://tt-test-blog.blogspot.com/
xem giùm xem cái Readmore. Ở đây có 2 bài post: Một bài có hình thì nó co lại hình nhỏ góc trái.
Một bài không có hình thì nó đẩy nội dung về phía hình nhỏ
Vậy làm thế nào để khi blog đăng một bài không có hình thì nó sẽ ra một cái hình mặc định như kiểu "No Image Yet" như blog của anh Duy ở đây ạ: giống như ở bài
Sitemap for Blogger của anh Duy ý. Các huynh chỉ giùm em nhé.

Reply Xóa nhận xét
33

không sử dụng js sẽ làm cho trang web load nhanh hơn, cảm ơn bạn nhiều

Reply Xóa nhận xét
34

Muốn cho hình về bên trái,cái tiêu đề và trích dẫn về bên phải thì làm sao vậy DP,cái tiêu đề vẫn nằm trên trích dẫn nha

Reply Xóa nhận xét
35

anh Duy ơi em làm giống vậy mà sao nó ko thay đổi gì hết vậy.em làm nhều lần vẫn vậy

Reply Xóa nhận xét
Nặc danh 14/7/13 19:51
36

Nhận xét này đã bị quản trị viên blog xóa.

Reply
37

i try it, but it didn't work. can you explain once more ?

Reply Xóa nhận xét
38

Dùng cái recent post không js của bác Hà áp dụng cái này được không bác. Phải dùng js replace ảnh không hay như cái này!

Reply Xóa nhận xét
Nặc danh 29/12/13 15:37
39

Của m làm rồi mà nó ko ra http://vrth2013.blogspot.com/

Reply Xóa nhận xét
40

tiện ích này thì bỏ cái mô tả đi như nào thế bác

Reply Xóa nhận xét
42

thủ thuật của Duy Phạm là số 1!!!!

Reply Xóa nhận xét

Đăng nhận xét

Cancel