Bình thường khi xem bài viết ở các trang như trang chủ, trang nhãn, trang lưu trữ blog (gọi chung là kiểu trang index) các bài viết sẽ hiển thị không theo một quy cũ nào hết. Chúng hiển thị theo cách viết của bạn khi đăng bài. Bài viết này namkna sẽ hướng dẫn các bạn cách tóm tắt bài viết ở trang chủ một cách tự động thành 2 cột song song (hay còn họi là Auto readmore width thumbnail 2 colum) không sử dụng javarscripts (được namkna cải tiến từ style 1).
¤ Một số ưu điểm.
» Không ảnh hưởng đến tốc độ lòa của blog vì không dùng javarscrips (xét theo khía cạnh nào đó còn giúp tăng tốc blog vì nó thu nhỏ ảnh thumbnail và tóm tắt lại nội dung bài viết ở trang chủ của bạn.
» Bố cục gồm 2 cột bài viết xép thẳng hàng.
» Ảnh thumbnail và tiêu đề bài viết + mô tả nằm trên cùng một hàng. Ảnh thumbnail có kích thước tối đa 72x72 nếu muốn rộng hơn hãy xem Auto readmore resize thumbnail.
» Phần mô tả hiển thị bằng mã CSS do vậy không bô đen được.
VIEW DEMO
¤ Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ ]]></b:skin> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.)
- Dán code bên dưới sau thẻ ]]></b:skin> vửa tìm được.
- Dán code bên dưới sau thẻ ]]></b:skin> vửa tìm được.
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style type='text/css'> .post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px 'Arial', serif;margin:1.0em 0 .75em;line-height:1.3em;} .post-snippet:before{content:attr(data-snippet);} h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0} h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none} .post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:45.8%;height:95px;} .post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma} .post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left} .post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0} .post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;} .post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56} .post-thumbnails{float:right;margin-left:20px;} </style> </b:if></b:if>5. Tìm dòng code:
<data:post.body/>- Thay thế thành code bên dưới.
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div class='post-snippet' expr:data-snippet='data:post.snippet'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> </b:if>6- Tìm đoạn code như bên dưới (nằm ngay trên đoạn ở bước 5)
<h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3>- Thay thế nó thành:
<!-- anh thumbnail trang chu --> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/> <b:else/> <img alt='no image' class='post-thumbnails' height='72px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDcQdc1qnWZo_4P4VyvmGbmTRQSsvq2fhO1ByISXjBit4ZqyKzs3HUmOtyhGvHDP6T20HVzWvJOp2OdiLut66PmyrqCxM3UYX99r6l4cIURcueBA2ZG6pMPjcsEzxJUqTZgBbedKBgssob/' width='72px'/> </b:if> </b:if> </b:if> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.title'> <h2 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h2> </b:if> <b:else/> <h1 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h1> </b:if>
7- Lưu mẫu lại và xem kết quả nha.
¤ Cài đặt số bài hiển thị.
- Bạn vào cài đặt => bài dăng và nhận xét.
- Tại mục hiển thị tối đa bạn chỉnh số bài cần hiển thị lại cho phù hợp.
- Lưu ý bạn nên để số bài là số chẵn vì tiện ích có 2 cột nếu để số lẻ sẽ bị hụt nha.
Nhận xét
Home » Blogspot Readmore » Blogspot-tips » Bài viết đang xem:
Trả lờiXóaBnaj namka cho hỏi cái breadcrumbs của bạn làm như nào vậy
Của bạn đây:
Xóahttp://namkna.blogspot.com/2013/01/breadcrumbs-multiple-labels-for-blogger.html
Cái này thật là hữu ích
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaCommnet của bạn sẽ bị xóa vì vi phạm điều khoản commnet.
XóaCho mình hỏi là muốn tự động lấy ảnh đầu tiên trong post đó làm thumnail thì dùng code gì?
Trả lờiXóaThủ thuawtj này tự động lấy ảnh đầu tiên làm thumbnail đó. Nếu ảnh đầu tiện không phải từ host picasa hoặc youtobe nó sẽ lấy ảnh kế tiếp. Lưu ý chỉ hiện thumbnail khi ảnh đó được upload trực tiếp lên blog, google picasa hoặc youtobe
XóaBoor xung code:
Trả lờiXóa/*read more */
.item-thumbnail {float:left;margin-right:15px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;float:right}
.jump-link:hover{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
http://signaturekitchen.blogspot.com/2013/06/bep-tong-trang-high-gloss.html
Trả lờiXóanam kha xem thu cai cot recent .. sao no chi hien xem them o cuoi dong .. khong hien bai viet ..
thanks
Với blog đó bước 5 thay cả đoạn sau:
Xóa<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
em cũng làm như vậy nhưng cũng ko được anh ạ
Xóaanh vào đây kiểm tra giúp em
khanhquocbui.blogspot.com
Đó là trang demo của em phải không,, Trang đó số bài còn hơi ít. Với lại nếu không phải trang chính thì em gửi mẫu vào face hoặc mail anh thêm trực tiếp cho.
XóaEm gửi rồi < quockhanh.abc@gmail.com >
XóaĐã trả lời em rồi đó. Check mail đi nha.
Xóaa Nam ới a xem chỗ nào chỉnh cho cái khung trong một bài nó dài ra vậy ?
Trả lờiXóaA xem blog này nhé http://gamedinhvn.blogspot.com/
Với e nhìn cái chỗ theo chuyên mục khi e chèn nó như bị du ra a xem giúp e nhé.. thank a
Em chỉnh lại độ rộng và cao của ảnh trong đoạn code sau:
Xóa.thumb{float:left;width:135px;height:75px;border:2px solid #5B5B5B;border-radius:3px;margin-right:5px;padding:1px;vertical-align:middle}
Để chỉnh dộ rộng và cao của bài viết em tìm đoạn:
.post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:45.8%;height:95px;}
Trong đó:
width:45.8%; là dộ rộng tương đối của bài viết. Nên chỉnh cho đúng nếu không sẽ không thành 2 hàng mà chỉ hiển thị một hàng.
height:95px là chiều cao của khung. Em nên chỉnh lớn hơn để phần nội dung không bị ẩn nha,
Thank a Nam e chỉnh được rùi nhưng khi e kéo dưới không thấy chỗ nó đánh số để qua các trang khác.... e nghĩ nó bị kéo nên đây
Trả lờiXóahttps://lh5.googleusercontent.com/-5LL05fZCMx4/UbisYWQP1KI/AAAAAAAAAHc/tFEKo4F5XZI/h120/dd.jpg
Trời ơi hình ảnh của em nhỏ quá anh không thể tháy gì hết :)
XóaAnh thấy có lỗi là em không dùng nút readmore khi đăng bài em hãy dùng nó nha.
Namkna ơi! Hiện tại mình đang xài readmore của blogger (không hiện hình ảnh) với dạng wiget bài viết mới nhất 2 cột. Cho mình hỏi CSS nào quy định phần mô tả tất cả là chữ thường, CSS quy định số từ được hiển thị và CSS quy định chiều cao của khung chứa mỗi bài (hiện chiều cao của khung chứa mổi bài nó không đồng đều, nhìn xấu lắm).
Trả lờiXóa1 Readmore cần chú ý:
Xóa- Chỉ hiển thị các hình ảnh từ youtube.com, google album Picasa, ảnh tải trực tiếp lên blog. Không hiện các ảnh đi copy hoặc tải lên host khác.
- Chỉ hiện ảnh trước dấu ngắt <!--more-->
- Ảnh giữ nguyên kích cỡ nếu không tùy chỉnh lại CSS và XML.
2- vè câu hỏi CSS nào quy định phần mô tả tất cả là chữ thường, CSS quy định số từ được hiển thị và CSS quy định chiều cao của khung chứa mỗi bài (hiện chiều cao của khung chứa mổi bài nó không đồng đều, nhìn xấu lắm). thì phải xem blog bạn như thế nào thì mới có thẻ tùy biến được vì mỗi mẫu có một ID và class khác nhau. => Hãy để lại URL blog bạn nha.
đây là link blog của mình http://annyngoc.blogspot.com/ . Đang học cách làm theme nhưng mà khó quá, không dễ như yahoo blog :( .Mà namkna cho mình xin cái code chỉnh kích cỡ ảnh ở phần readmore luôn nhe :D
XóaBlog yahoo chỉ có tùy biến trên CSS thông qua các module. Nói chung nó là cái đơn giản nhất. Khi đã quyên với nó chuyển sang nền tảng này cũng không quá khó. Vì blogger ngoài tùy biến CSS còn có thể tùy biến cả XML.
Xóachỉnh kích cỡ ảnh ở phần readmore
- Vào Chỉnh sửa HTML => Và tìm đoạn code sau:
.post {
width:48%;
float:left;
margin:0px 3px 5px 0px ;
padding:5px;
background:#eee; /* màu nền của bài viết*/
}
THêm vào sau nó đoạn code bên dưới:
.post img {width:250px !important;height:150px !important;padding:0;clear: both;}
Trong đó:
150px là chiều cao của bức ảnh.
250px là chiều rộng của bức ảnh.
ui ui...Namkna cho mình xin CSS quy định phần mô tả tất cả là chữ thường, CSS quy định số từ được hiển thị và CSS quy định chiều cao của khung chứa mỗi bài luôn nữa nhé!hihi
XóaBlog của bạn thực chất chỉ là thu nhỏ phần bài viết ở trang chủ thôi bạn ak. Nó không phải autoreadmore nên một số thứ phải làm thủ công.
Xóa1- Giới hạn ký tự hiển thị thì khi đăng bài bạn hãy sửa dụng dấu ngắt <!--more--> (chính biểu tượng tờ giấy xé đôi trên trình soạn thảo văn bản đó).
2- ĐỐi với màu chữ cớ chữ. bạn sửa đoạn code sau:
.post {
width:48%;
float:left;
margin:0px 3px 5px 0px ;
padding:5px;
background:#eee; /* màu nền của bài viết*/
}
Thành:
.post {
width:48%;
float:left;
margin:0px 3px 5px 0px ;
padding:5px;
background:#eee; /* màu nền của bài viết*/
font-family:Arial !important;
font-size:12px !important;
text-transform:none !important;
}
Trong đó:
font-family:Arial; là phông chữ bạn có thể sử dụng một số phông tiếng việt khác như: Georgia, Tahoma,Century gothic, sans-serif;
font-size:12px là cỡ chữ hiển thị.
text-transform:none !important; là quy định chữ thường. bạn có thể sửanone thanh uppercase để quy định là chữ in hoa.
chỉ biết nói 2 chữ cám ơn thôi ^^ . Bạn đúng là 1 blogger rất tận tình hướng dẫn mọi người về thủ thuật :D
XóaKhông có gì. Nếu bạn muốn học hỏi thêm về CSS thì hãy xem bài viết này nha: CSS căn bản trong thiết kế blogspot
Xóaem làm giống anh chỉ nhưng khi lưu mẫu nó báo lỗi ở bước 6 như vậy nè
Trả lờiXóaThe element type "div" must be terminated by the matching end-tag "</div>".
Anh cập nhật lại code rồi em xem lại đi nha.
XóaChào Bạn!
Trả lờiXóaMình đã áp dụng theo cách của Bạn nhưng 2 cột của mình không giống như của Bạn! Chúng bị lệch và tiêu đề và hình ảnh không nằm chung một hàng. Vậy là sao hả Bạn??
Có thể bạn chưa làm bước 6 nên mới có 2 phần tiêu đề và hình ảnh. muốn biết cụ thể hãy để lại URL blog cho mình nhà,
XóaNếu bạn không tạo các bản sao lưu thì không có cách nào khác đâu bạn ak.
Trả lờiXóaNgoài ra bạn có thể tải bản gốc tem của bạn về và upload lên nếu bạn tải nó trên mạng về,
Nhận xét này đã bị tác giả xóa.
Trả lờiXóamình đang cần gỡ read more trên trang của mình gấp -mà anh nam thì bận- ai có thể giúp mình được khong ?
Trả lờiXóasite ủa mình :http://vinet360.blogspot.com/
Hãy áp dụng để được trợ giúp nha bạn,
Trả lờiXóahttp://videogamehl.blogspot.com/
Trả lờiXóacậu ơi cậu xem giúp tớ nhé của tớ phần body nó hơi lệch hix
Mình thấy nó vẫn bình thường mà bạn >?????????
XóaThứ nhất nếu xem theo trang chủ thì em chỉ cần vào Cài đặt +> Bài đăng và nhận xét +> sau đó tại mục Hiển thị tối đa ? em chọn 10 hay 200 bài trên trang chính tùy em nha,
Trả lờiXóaThứ 2 Nếu muốn cả trang nhãn cũng vậy thì em cần phải chỉnh sửa lại đoạn code tiện ích phân trang của em: cùng với kết hợp thêm bài viết này: Sửa lỗi không phân trang theo nhãn
Em phải chỉnh lại cả tiện ích phân trang của em nha. ở 2 đoạn này này em:
Trả lờiXóavar postperpage=6;
var numshowpage=4;
cô rất thích kiểu này NAm Kha ơi
Trả lờiXóabài này có áp dụng cho blog spot được không Nam Kha
Trả lờiXóabÀI NÀY DAnh cho blogspot mà cô :)
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaNam giúp minh chút nhé, mình đã làm như hướng dẫn nhưng nó vẫn không hiện đúng ý .
Trả lờiXóaBạn xem Blog của mình coi nó bị vấn đề gì, giúp mình với.
www.quàtết.com
bạn hãy gỡ bỏ tiện ích cũ trước khi áp dụng nó nha bạn.
Xóanhờ anh chỉ em gỡ bõ tiện ích cũ trang http://tailieuft.blogspot.com/ giúp em với
Trả lờiXóatiện ích này có phân trang luôn à anh - vì cái tiện ích cũ em không gỡ được nên không làm được - em share quyền quản trị vào tavannam01@gmail.com - nhờ anh gỡ tiện ích cũ rồi add tiện ích này giúp em nhá , trang em là : http://tailieuft.blogspot.com/
Trả lờiXóaTiện ích này không có phân trang kèm theo em ak. Tuy nhiên nếu e muốn anh có thẻ thêm luôn vào trong blog cho e,
XóaE mời đi để anh vào xác nhận nha.
em đã mời anh ở (tavannam01@gmail.com )
Trả lờiXóatrang : http://tailieufx.blogspot.com/
anh vào đồng ý đi !!
Xin lỗi em mấy hôm rồi anh có việc bận nên không thể xác nhận được. E vui lòng gửi lại lời mời cho anh nha. Lời mời cũ hết hiệu lực rồi.
Xóakhông phải trang demo anh à là trang tài liệu của em
Trả lờiXóavâng- em đã gửi lại ạ
anh vui lngf gỡ tiện ích cũ ra rùi thêm mới giúp em - giúp em phân trang với
Trả lờiXóagia sư thành phố vinh : em đã mời anh rùi nhé - hiển thị dưới tên chủ này
Trả lờiXóaCho a tên trang nha, nhiều trang quá e ak,.
Xóaanh nam ơi
Trả lờiXóasao blog có dạng
http://tailieu.dungs.com/
lại không xác minh được trang google.com/webmasters/tools
anh giúp em với
Được chứ em. E kiểm tra xem e đã xác nhận chủ sở hữu đối với trang đó chưa nha.
XóaTên trang của em là : "Chia sẽ tài liệu - đề thi "
Trả lờiXóaLink blogger:http://tailieufx.blogspot.com/
link conver : http://tailieu.duy3s.com/
Anh vào xem chỉnh em tí nhé (em đã share quyền admin cho anh rùi đó)
<nhờ anh vào tháo tiện ích cũ ra - bỏ tiện ích mới vào -
nhớ bỏ tiện ích phân trang như demo em với
cảm ơn anh trước !!!!!!!
Nam à ! Mình muốn làm mẫu này nhưng mà ko có mô tả, chỉ có thumbnail và tiêu đề thôi thì phải làm khác như trên ở chỗ nào ? Cảm ơn bạn trước nhé !
Trả lờiXóablog demo của mình tan nát quá ! giờ nó bị co lung tung hết lên http://c37bachabca.blogspot.com/ . trong khi đó phần bài viết thì chỉ hiện mỗi tiêu đề !
Trả lờiXóaKhông muốn có mô tả thì bạn xoá đoạn bên dưới đi:
Xóa<div class='post-snippet' expr:data-snippet='data:post.snippet'/>
Hình như là tiện ích javascript phân trang của mình đánh nhau với tiện ích này nên nó bị co lên che hết ở từng trang bài viết. Giờ không biết tìm code phân trang ở đâu. Nếu bỏ tiện ích phân trang thì phải làm như thế nào để nó phân trang cho dạng autoreadmore 2 cột này ? Mong Nam giúp đỡ !
Trả lờiXóaBạn thêm vào trước đoạn: <div class='blog-pager' id='blog-pager'> đoạn mã sau:
Xóa<div style='clear: both;'></div>
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaCảm ơn Nam rất rất nhiều ! Mình làm được rồi ! thêm thẻ trên thì hiện tượng phân trang đã chống tràn vào phần bài viết ! Còn khi vào từng bài viết thì bài viết bị width:45.8%;height:95px quy định nên gần như bị biến mất ! Mình đã cho phần code ở bước 4 vào sau phần thẻ ]]></b:skin> , trước phần CSS của blog và đã trở lại như cũ. Lúc này thẻ <b:if> mới phát huy tác dụng. Mình thông báo cho mấy bạn nếu có làm bị gặp rắc rôi thì xem comment của mình nhé ! Cảm ơn Nam rất nhiều ! :)
Trả lờiXóaTrong bài mình ghi đặt sau thẻ ]]></b:skin> mà :)
Xóa:D đọc ko kĩ lao đầu vào làm luôn :))
XóaNam có cách nào giúp triển khai hình ảnh có snippet như tran này http://batdongsanmoi.vn/ (Phần nhãn "chung cư" có: Giá, vị trí, loại hình, chủ đầu tư). Mình đếm kí tự chưa đến 140 kí tự. Hình ảnh thumbnail thì mình làm được như thế rồi. Khoai mỗi phần sumary thôi. Trong bài viết thì ko có mô tả đó trong những dòng đầu tiên của bài viết đó. Hay là trong bài viết có thẻ ẩn các kí tự này đi, các chữ khác thì đè lên trên ?
XóaChào b, mình muốn liên kết với blog của b, mình đã đặt banner blog của bạn trên blog của mình. Nếu b ko chê blog mình và có hứng thú thì kết nối cho vui, bạn xem banner của blog bạn trên blog mình tại đây: aliensf.blogspot.com. Ảnh 320.100 nhé, nếu ko ưng ảnh đó thì b gửi link ảnh khác...
Trả lờiXóanếu b ok thì chỉ cần giật tiêu đề blog của mình: Pes edit by Aliensf cùng link blog là đc...
Trả lờiXóaem muốn thay cái cũ của em bằng cái này - nhưng không thể thay được - anh thay giúp em tí được không !!!
Trả lờiXóaem đã mời anh làm quản trị : trang : duy3s.com