Hiện nay có rất nhiều blog để hiển thị 2 chế độ dạng danh sách gồm hình ảnh thu nhỏ, tiêu đề bài viết và phần mô tả của bài viết (list) và dạng ảnh thu nhỏ và tiêu đề của bài viết (grid), bài viết này mình sẽ hướng dẫn các bạn một cách nhanh gọn của under-88 để có thể làm được thủ thuật đó với hiệu ứng từ thư viện Jquery mượt mà khi chuyển đổi mà không hề phải tải lại trang web hay blog của bạn.
Các bạn có thể xem ảnh minh họa bên dưới (do đây là hình ảnh động do vậy nếu không xem được bạn hãy bấm vào đây để tải hình ảnh về máy để xem nha):
Hoặc xem demo để thấy rõ hơn về thủ thuật này nha:Các bạn có thể xem ảnh minh họa bên dưới (do đây là hình ảnh động do vậy nếu không xem được bạn hãy bấm vào đây để tải hình ảnh về máy để xem nha):
VIEW DEMO
» Thêm hiệu ứng loadding chỵ ngang giống trang youtube cho blogspot.
1- Đăng nhập vào Blog => chọn mẫu » Chọn chỉnh sửa HTML2- Tìm một trong 2 đoạn code có dạng như bên dưới.
<b:section class='main' id='main' showaddelement='yes'>hoặc:
<b:section class='main' id='main' showaddelement='no'>- Ngay lập tức thêm vào trước nó đoạn code bên dưới:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='switch'>
<div class='switch-left'>
<span style='color: #CC0000;'>Recent</span> Post
</div>
<div class='switch-right'>
<a class='bar_view' href='#'>Grid</a>
<a class='dat_view' href='#'>List</a>
</div>
</div>
</b:if>
</b:if>
3- Tìm đoạn một trong các đoạn code có dạng như bên dưới:<div class='post hentry uncustomized-post-template'>Hoặc:
<div class='post hentry'>- Và thêm class bar cho nhó như bên dưới:
<div class='post bar hentry uncustomized-post-template'>
hoặc:<div class='post bar hentry'>
- với một số blog đoạn này có thể hơi khác do vậy nếu không tìm thấy thì hãy comment để mình chỉ giúp nha.
4- Dán đoạn code bên dưới vào trước thẻ đóng </head> trong blog của bạn.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='https://dl.dropboxusercontent.com/u/66256041/Recent-posts/namkna.blogspot.com/switch-display.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ /** * jQuery switch * * active class active pada switch grid atau list * update by denddy gustiana * http://under-88.blogspot.com/ * https://plus.google.com/109783772548428705949 * */ jQuery(document).ready(function () { var $box=jQuery(".post"), $bar=jQuery("a.bar_view"); $dat=jQuery("a.dat_view"); $dat.click(function () { $box.removeClass("bar"); jQuery(this).addClass("active"); $bar.removeClass("active"); jQuery.cookie("dat_style", 0); return false }); $bar.click(function () { $box.addClass("bar"); jQuery(this).addClass("active"); $dat.removeClass("active"); jQuery.cookie("dat_style", 1); return false }); if(jQuery.cookie("dat_style")==0) { $box.removeClass( "bar"); $dat.addClass("active") } else { $box.addClass("bar"); $bar.addClass("active") } });//]]> </script>
Như đã nói ở trên thủ thuật này hiển thị dựa trên thư viện Jquery do vậy nếu blog của bạn đã có file jquery rồi thì hãy xóa đoạn màu xanh đi nha.
5- Dán đoạn code bên dưới vào sau thẻ ]]></b:skin><b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style> /*FONT PT Sans Narrow*/ @font-face { font-family:'PT Sans Narrow'; font-style:normal; font-weight:400; src:local('PT Sans Narrow'),local('PTSans-Narrow'), url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff'); } /* CSS Untuk Tombol Switch*/ .switch { border-bottom:5px solid #CC0000; height:35px; color:#444; margin:0 10px; padding:5px 9px; text-transform:uppercase; } .switch-left { width:360px; float:left; margin:0 auto; padding-top:5px; font:20px PT Sans Narrow; text-shadow:1px 1px 0 #000; color:#AAA; } .switch-right { width:120px; float:right; margin:0 auto; padding-top:10px; } .switch a { border:1px solid #999; font:11px Arial; padding:3px 8px 3px 25px; text-transform:none; color:#aaa; } a.bar_view { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKs_DoT03BlscIFW1O5CVDQ6M5I5Z1Xp3GOCqNkhEXdcrAlbIIym9De1-zlhyphenhyphenq2K4jBzY7q1c7jt37wWjhHbTpDQwIaKj4kNO1Tfj2RCMYpU9l1UWmNZjgWEnvwG10BxYhQjiMRr8aZQp/s1600/drid.gif) no-repeat 3px center; } a.dat_view { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1OFbNqD7vqVBXzgS9rtrvn3vVjMOk-_YwRvC5JK8fc55uhft9kvt6jRzzXy36e87FPVQKlUPBKvfiNEgR22ivSiNQ-Vr9Y-YIZ6LDBZcJBgOFV9COpZSNW2P_YnjO3nC3XD-MBh5VkFKL/s1600/listed.gif) no-repeat 3px center; } .switch a.active { background-color:#aaa; border:1px solid #999; color:#111; cursor:default; } /* CSS Bar untuk bagian grid */ .bar { background-color:rgba(0,0,0,0.3); border:1px solid #000; box-shadow:0 0 0 1px #333; -moz-box-shadow:0 0 0 1px #333; -webkit-box-shadow:0 0 0 1px #333; -o-box-shadow:0 0 0 1px #333; display:inline; float:left; height:160px; list-style:none; margin:10px 0 0 9px; overflow:hidden; padding:2px 3px 5px; position:relative; text-align:center; width:160px; } .bar h3 { height:30px; border:0 none; line-height:8px; margin:0 5px 5px; padding:2px; text-shadow:1px 1px 0 #000; } .bar h3 a { font:14px PT Sans Narrow; text-align:center; line-height:16px; } .bar h3 a:hover { color:#c1541a; } .bar .post-body { background:none; height:245px; overflow:hidden; width:167px; padding:0; margin:0 0 .3cm; } .bar img { float:left; height:110px; margin:0 18px; width:110px; } </style> </b:if></b:if>Hãy tùy chỉnh lại để cho phù hợp với blog của bạn nha, vì đoạn code trên viết cho blogdemo nên chó một số phần không hợp với nhiều blog khác nhau. Chủ yếu là chỉnh các phần in đậm mà mình đã đánh giấu nha..
Nhận xét
bị lỗi a ơi . nó loạn hết lên
Trả lờiXóaBạn kiểm tra lại các bước mình hướng dẫn nha. Nhất là bước 3 vì một blog thường có 2 đoạn ở bước đó giống nhau bạn chèn nhầm là không thể hiện thị được đâu :)
XóaMình làm theo hướng dẫn của bạn nhưng không hiểu sao phần grid bị tràn
XóaCho mình link blog bạn đang áp dụng thủ thuật này để mình kiểm tra và đưa ra giải pháp cho bạn nha.
Xóahttp://japantoyvn.blogspot.com/
XóaĐây bạn, nó bị tràn tùm lum hết.
bạn đang dùng mẫu Simple của blogger, mẫu đó có một số đoạn CSS đường viền nên khi áp dụng thủ thuật này sẽ sảy ra hiện tượng như bạn nói, Cách chỉnh sửa trải qua khá nhiều bước rích rắc một comment không thể nói hết được. Cách nhanh nhất là bạn để mình chỉnh cho, bạn có thể mời mình làm quản trị mình sẽ chỉnh cho bạn nha. mail mình là
Xóatavannam01@gmail.com
Mình add rồi nhé. Có gì bạn pm cho mình qua mail. Mail mình là lamngoctu1801@gmail.com
Xóabạn kiểm tra lại lời mời đi, mình vào mail không thấy gì hết đâu.
Xóabạn ơi tại sao mình làm thì từ bài đăng cũ và trang cũ lại ngang hàng với các hình ảnh của ô bài viết khi hiển thi dưới dạng Grid
Trả lờiXóaMÌnh muốn từ bài đăng cũ và trang chủ hiện ở dưới các ô Grid thì làm thế nào
Hiện tại mình vào blog của bạn thì thấy bạn đang sử dụng tiện ích phân trang của abufahan bạn hãy chuyển đoạn code của tiện ích đó xuống trước thẻ < /body > nha :)
Xóatình hình là mình tìm ko thấy cái code để chèn chữ "bar" làm ntn đây bạn ơi
XóaVới 2 trang Đặc sản LaSon trâu gác bếp thì bạn tìm đoạn code có dạng như sau"
Xóa<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
rồi thay thế nó thành:
<div class='post bar hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Làm như thế nào để có dạng List giống như blog của bạn vậy. Ảnh to tự nó thu nhỏ lại
Trả lờiXóaDạng đó phải tùy biến lại toàn bộ mã CSS và XML hiện tại mình chưa chia sẻ bạn ak.
XóaChào Nam Ta,
Trả lờiXóaCảm ơn bài viết của bạn rất hữu ích. Mình đã áp dụng thành công cho blog của mình www.att-vn.com Tuy nhiên mình muốn thay đổ một chút: khi hiển thị dưới dạng GRID, tiêu đề các bài đăng của mình có độ dài ngắn khác nhau nó làm cho hình ảnh hiển thị không thẳng hàng ngang trong các box. Vì vậy mình muốn chuyển hình ảnh lên trên và Tiêu đề xuống dưới. Như vậy thì các hình ảnh trong các box sẽ dàn hàng ngang thẳng và đẹp hơn. Mong bạn chỉ dãn giúp mình.
cảm ơn bạn nhiều.
Tuấn
Bố cục của 2 phần GRID và LISt giống nhau về cơ bạn. Mình có thể làm như bạn nói tuy nhiên nếu phần GRID mà tiêu đề xuống dưới thì phần LIST tiêu đề cũng nằm dưới nội dung bài viết đó bạn ak. Chỉ cần đẩy thẻ h1 xuống là được thôi (nếu bạn muốn mình sẽ hướng dẫn).
XóaTheo mình để khắc phục hiện tượng đó bạn nên giữ nguyên bố cục như vầy và thay đổi chiều cao của thẻ tiêu đề h1 cố định nha bạn.
Ví dụ:
.post h1{height:80px}
Như vầy thì tiêu đề ngắn hay dài nó cũng chỉ nằm trong một ô như vầy thôi hình ảnh không bị đẩy.
chưa có read more mà áp dụng cái này vào blog thì có được ko anh?
Trả lờiXóaĐược chứ em. Anh đang dùng demo bằng blog chưa có readmore thôi.
XóaTình hình là e đã làm được nhưng mà thật sự là khi chuyển từ dạng List sang dạng Grid nó quá là xấu đi a ạ, đây là link web của e, a có thể giúp e chỉnh lại cho đẹp và đồng bộ với web e dc ko ạ !!!
Trả lờiXóahttp://hiad2.blogspot.com/
Tất nhiên là được. Em có thể gửi mẫu hoặc mời a làm quản trị thông qua mail tavannam01@gmail.com nha,.
Xóacủa mình không có code của bước 3 bạn ơi, giúp m với
Trả lờiXóaĐoạn đó blog nào cũng có bạn ak. Hiện tại bạn có quá nhiều blog bạn để lại trang bạn muốn hỏi ở đây để mình kiểm tra nha.
Xóabạn xem http://cachlamgiau24.blogspot.com không có bước 3,,,
Trả lờiXóaBlog của bạn nó là đoạn này nha:
Xóa<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Bạn sửa thành:
<div class='post bar hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
-p/s Hiện tại bạn đang sử dụng tiện ích recent post homepage nên thủ thuật này bạn chỉ thấy tác dụng khi xem theo nhãn thôi nha (bài viết ở trang chủ của bạn hiện đã được ẩn)
Anh Nam Ta cho em hỏi, cái trang blog của em đã có readmore rồi, h em chèn code của anh dô mak nó hk hiển thị như trên, nó vẫn giữ nguyên cái cũ, anh giúp dùm em với, Em cảm ơn.
XóaEm kiểm tra lại vị trí chèn bar nha. Vì một blog có 2 đoạn như anh nói ở bước 3 đó.
XóaBlog của bạn nó là đoạn này nha:
Trả lờiXóa<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Bạn sửa thành:
<div class='post bar hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaMình không tìm thấy hai em này
Trả lờiXóaWeb cua mjnh ko co 2em trong buoc 3 nay !
Pan giúp mjnh gap nha ! Mjnh dag can gap !
Webiste cua minh : pimmada-software.blogspot.com
Email : Pimmada.software@gmail.com
Cám ơn bạn, Mình đã làm được, giờ chỉ còn việc Fix lại cho đẹp thôi. nhưng giờ mình muốn chỉnh cho nó hiện 3 cột thành 2 cột thì chỉnh thông số nào vậy bạn?
Trả lờiXóaWeb của mình là http://www.aoquanonline.com/.
Cám ơn bạn đã chia sẻ
bạn chỉnh lại các thuộc tính width và height của hình ảnh trong các class:
Xóa.switch-left
.switch-right
Và của hình ảnh trog thẻ:
.bar img
Làm sao để mặc định là xem ở dạng list vậy anh?
Trả lờiXóaAdmin ơi cho tớ hỏi một chút hơi liên quan tới bài này:
Trả lờiXóaĐây là blog của tớ: Blog
Cái template đang dùng mặc định có có sẵn dạng grid và list này rồi. Nay tớ muốn nó chỉ hiện dạng list thôi nên đã cài mặc định hiện list. Nhưng mỗi lần vào trang nó đều hiện dàng Grid trước, load xong xuôi hết rồi mới chuyển sang dạng list. Giờ tớ muốn loại bỏ hoàn toàn kiểu xem dạng grid này thì phải làm sao đây? Nếu có thể ad sang blog rồi cho tớ hướng giải quyết với nhé! Cảm ơn trước!
:-<
Nhận xét này đã bị tác giả xóa.
XóaGiờ muốn loại bỏ hẳn thì chỉ cần gỡ toàn bộ code của tiện ích đó ra khỏi blog, tuy nhiên đoạn js đó liên quan tới rất nhiều phần khác nên nếu loại bỏ thì bố cục trang của bạn sẽ vỡ đó.
XóaVậy đành phải sống chung với lũ rồi :(
XóaCó thể sử dụng mẫu khác do bạn tự thiết kế mà :)
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaDo khi thêm tiện ích recentpost ở trang chủ bạn đã xoá đoạn code của bài viết đi.
Xóa1. Bạn tìm đoạn có dạng như bên dưới:
<div class='post hentry'>
2. Và thêm vào sau nó đoạn code sau:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
Nhận xét này đã bị tác giả xóa.
Xóađã thêm mà nó vẫn như cũ b à....hic
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaBạn kiểm tra mail đi mình đã thêm cho bạn rồi đó.
XóaNhận xét này đã bị tác giả xóa.
Xóaà, đc rồi, b đã fix luôn lỗi lặp lại bài đăng...thank rất nhiều.....tiếc là m mắc đi làm kế toán , chắc chắn khi có time m cũng học hỏi lập trình tk web để đc giỏi bằng 1 nửa của b......chúc b sức khỏe
Trả lờiXóaRất vui vì giúp được bạn.
Xóacảm ơn bạn.Mình đã làm được.Nhưng blog của mình giờ các ô nó chuyển sang màu xám và do chữ nhiều quá lên trong ảnh thì chữ chiếm mất 2/3 rồi.Bạn có cách nào chuyển nền trong ô sáng lên và chữ nhỏ giúp mình được ko? bạn check giúp mình nhé.Cảm ơn bạn!
Trả lờiXóablog của mình là www.khoahoc50k.blogspot.com
bạn chỉnh lại phần font-size:30px ở đoạn bên dưới:
Xóa#content h2{color:#222;text-align:left;font-size:30px; font-family: "Lato" "Myriad Pro", "Arial", sans-serif;padding:0;margin:0;line-height: 1.1;padding-right:25px;}
Anh ơi em muốn làm bài viết dạng Grid như này nhưng sau khi thực hiện các bước theo hướng dẫn thì không được, các ô ảnh không thẳng hàng và có hiện tượng lệch dòng. Anh vui lòng chỉ giúp em, e đã gửi mail cho a nhưng không thấy hồi âm. Chân thành cảm ơn anh.
Trả lờiXóaBạn nhắn cho mình blog của bạn nhé, mình sẽ vào xem thử!
Xóabạn có thể chỉ cho mình không? Blog mình sau khi sử dụng nó không ngay hàng mà lệch từ từ xuống
Trả lờiXóaOk bạn, nhưng gửi cho mình đường link blog của bạn nhé !
Xóahttp://bloggoicam.blogspot.com/
Xóabạn chỉ mình giúp. cám ơn bạn
cho mỉnh hỏi sao blog của mình lại sắp xếp bậc thang chứ khong theo hàng và chỉ cho minh cách chỉnh lại . Thanks
Trả lờiXóablog cua minh này http://giayhanghieu2015.blogspot.com/
Bạn ơi cho mình hỏi tí được hok. Mình mới dùng template trên mạng để tạo blogspot bán quần áo. Dạng grid mỗi dòng 5 mẫu, nhưng hình bị méo mó rất xấu. Mình muốn mỗi dòng 3 mẫu thì chỉnh sao? Nếu mình muốn chỉnh kích thước mỗi mẫu thì ở chỗ nào? Còn nếu mình muốn mỗi mẫu hiển thị kích thước to nhỏ khác nhau để ko méo hình thì làm sao? Với lại chèn code như thế nào để khi click vào hình sẽ link đến chi tiết sản phẩm chứ ko phải chỉ hiện tấm hình thôi? Mình đang mày mò chứ ko rành, Thankss bạn nhìu lắm <3
Trả lờiXóacó thể đổi màu nền trong ô không anh, e muốn đổi từ màu xám thành trắng
Trả lờiXóablog của e http://mymiublog9.blogspot.com/
XóaCho mình hỏi, sau khi làm xong nếu mình muốn chọn dạng List làm mặc định mình phải làm như thế nào :)
Trả lờiXóaMình muốn nó hiện 4 hình thì phải thay đổi thông số nào vậy Nam? Demo hiện có 3 hình à
Trả lờiXóabạn ơi sao mình tạo thì nó ra có 2 cột, mình muốn 3-4 cột thì làm sao được bạn, bạn chỉ mình với nhé
Trả lờiXóaad ơi blog của e trong phần main nó bị thế này làm sao cho thẳng hàng dc ad
Trả lờiXóahttp://notebookmmo.blogspot.com/ e mới đổi theme mới nên nó bị thế
ad ơi blog của e trong phần main nó bị thế này làm sao cho thẳng hàng dc ad
Trả lờiXóahttp://notebookmmo.blogspot.com/ e mới đổi theme mới nên nó bị thế
bạn ơi sao mình làm y nguyên mà dạng lưới nó không theo từng ô mà nó thành thanh ngang hết bạn nhỉ. mong bạn chi giúp. cảm ơn bạn
Trả lờiXóa