- calocnuongMới tham gia
- Tổng số bài gửi : 15
Được cảm ơn : 3
Ngày gia nhập : 17/05/2011
Tùy chỉnh rút gọn bài viết blog
19/5/2011, 10:37 am
sau khi mò mẫm điên và nhờ sự giúp đỡ của admin mình đã có thể rút gọn dc bài viết Áp dụng cách này bài viết sẽ tự động rút gọn theo cách bạn muốn
Vào thiết kế>>>Chỉnh sửa HTML, chèn đoạn code sau trước
Lưu lại. Rồi tiếp tục chọn ô Mở rộng Mẫu Tiện ích, kiếm đọan sau
bấm Ctrl + F, kiếm data:post.body sẽ nhanh hơn
Ta xóa đoạn đó, thay vào code này
Lưu là ok ra xem blog thấy gọn gàng hơn
Giờ sẽ chỉ các bạn tùy chỉnh chữ Đọc Thêm . Chúng ta chỉ chỉnh sửa dòng sau ko cần chỉnh nguyên đọan,à nếu ko thích chữ đọc thêm thì xóa chữ đó gõ gì tùy thích
- Theo cách trên thì khi bấm vào "Đọc thêm" thì bài load trang vừa bấm, để khi bấm vào thì mở trang mới ta xóa code trên copy dòng này
Lưu ok
- Giờ chỉnh kích cỡ lớn nhỏ, Tô đen code cần chỉnh trên, copy paste code này. Ở cái phần 100% là chỗ tùy ý tăng giảm chữ theo mong muốn. Ví dụ: chữ nhỏ thì chọn 90%, lớn thì 120% vậy đó
- ÁP dụng 2 cái cùng lúc
- Giờ ta sẽ thêm màu chữ, để dc màu thì chọn Phần đăng bài mới mục Viết ta gõ chữ bất kì tô đen lên màu rồi sang Chỉnh sửa HTML sẽ hiện dòng màu Ví du tớ làm màu cam, đây là mã tớ có dc ở phần đăng bài, có thể làm gì tùy thích
Về thiế kế chỉnh sửa nào, mã trước của chúng ta là đoạn này
giờ thêm màu vào
Tèng téng teng chữ màu xanh quen thuộc đã màu cam như ý muốn
- Áp dụng 3 cách trên cùng lúc
Đoạn code trên có chữ đậm rồi đó, đây mã đậm, nếu ko thích đậm thì xóa
nhớ lưu lại sau khi làm. Good luck Tham khảo thêm cách nâng cao của Admin
http://forum.bloggervn.tk/t48-topic#143
Vào thiết kế>>>Chỉnh sửa HTML, chèn đoạn code sau trước
- Code:
</head>
- Code:
<script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery-1.2.3.pack.txt?attredirects=0' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery.extractor.txt?attredirects=0' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 450, // default is 100
expandEffect: 'fadeIn',
expandText: '', // default is '....'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
Lưu lại. Rồi tiếp tục chọn ô Mở rộng Mẫu Tiện ích, kiếm đọan sau
- Code:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
bấm Ctrl + F, kiếm data:post.body sẽ nhanh hơn
Ta xóa đoạn đó, thay vào code này
- Code:
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Đọc Thêm....</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
Lưu là ok ra xem blog thấy gọn gàng hơn
Giờ sẽ chỉ các bạn tùy chỉnh chữ Đọc Thêm . Chúng ta chỉ chỉnh sửa dòng sau ko cần chỉnh nguyên đọan,à nếu ko thích chữ đọc thêm thì xóa chữ đó gõ gì tùy thích
- Code:
<a expr:href="data:post.url">Đọc Thêm....</a>
- Theo cách trên thì khi bấm vào "Đọc thêm" thì bài load trang vừa bấm, để khi bấm vào thì mở trang mới ta xóa code trên copy dòng này
- Code:
<a expr:href='data:post.url' target='_blank'>Đọc thêm...</a>
Lưu ok
- Giờ chỉnh kích cỡ lớn nhỏ, Tô đen code cần chỉnh trên, copy paste code này. Ở cái phần 100% là chỗ tùy ý tăng giảm chữ theo mong muốn. Ví dụ: chữ nhỏ thì chọn 90%, lớn thì 120% vậy đó
- Code:
<span style='font-size:100%;'><a expr:href='data:post.url'>Đọc Thêm....</a></span>
- ÁP dụng 2 cái cùng lúc
- Code:
<span style="font-size:100%;"><a expr:href='data:post.url' target='_blank'>Đọc thêm...</a></span>
- Giờ ta sẽ thêm màu chữ, để dc màu thì chọn Phần đăng bài mới mục Viết ta gõ chữ bất kì tô đen lên màu rồi sang Chỉnh sửa HTML sẽ hiện dòng màu Ví du tớ làm màu cam, đây là mã tớ có dc ở phần đăng bài, có thể làm gì tùy thích
- Code:
<span style="color: #f1c232;">Đọc thêm...</span>
Về thiế kế chỉnh sửa nào, mã trước của chúng ta là đoạn này
- Code:
<a expr:href="data:post.url">Đọc Thêm....</a>
giờ thêm màu vào
- Code:
<a expr:href="data:post.url"><span style="color: #f1c232;">Đọc thêm...</span></a>
Tèng téng teng chữ màu xanh quen thuộc đã màu cam như ý muốn
- Áp dụng 3 cách trên cùng lúc
- Code:
<span style="font-size:100%;"><a expr:href='data:post.url' target='_blank'><span style="color: #f1c232;">Đọc thêm...</span></a></span>
Đoạn code trên có chữ đậm rồi đó, đây mã đậm, nếu ko thích đậm thì xóa
- Code:
<b:if cond='data:blog.pageType != "item"'></b:if>
nhớ lưu lại sau khi làm. Good luck Tham khảo thêm cách nâng cao của Admin
http://forum.bloggervn.tk/t48-topic#143
Re: Tùy chỉnh rút gọn bài viết blog
19/5/2011, 2:17 pm
Rất hay, rất chi tiết và dễ hiểu. Cảm ơn bạn đã chia sẻ.calocnuong đã viết: sau khi mò mẫm điên và nhờ sự giúp đỡ của admin mình đã có thể rút gọn dc bài viết Áp dụng cách này bài viết sẽ tự động rút gọn theo cách bạn muốn
Vào thiết kế>>>Chỉnh sửa HTML, chèn đoạn code sau trước(bấm Ctrl+F kiếm /head cho nhanh)
- Code:
</head>
- Code:
<script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery-1.2.3.pack.txt?attredirects=0' type='text/javascript'/>
<script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery.extractor.txt?attredirects=0' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 450, // default is 100
expandEffect: 'fadeIn',
expandText: '', // default is '....'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
Lưu lại. Rồi tiếp tục chọn ô Mở rộng Mẫu Tiện ích, kiếm đọan sau
- Code:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
bấm Ctrl + F, kiếm data:post.body sẽ nhanh hơn
Ta xóa đoạn đó, thay vào code này
- Code:
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Đọc Thêm....</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
Lưu là ok ra xem blog thấy gọn gàng hơn
- calocnuongMới tham gia
- Tổng số bài gửi : 15
Được cảm ơn : 3
Ngày gia nhập : 17/05/2011
Re: Tùy chỉnh rút gọn bài viết blog
19/5/2011, 3:28 pm
coi bên www.fandung.com có 1 bài chèn hình làm biểu tượng đọc thêm cho đẹp
bạn nào giỏi PTS thì có làm chèn vào blog. Ví dụ như
Trước khi thực hiện việc này, bạn cần tạo 2 ảnh dạng nút nhấn (kiểu buttom):
+ Ảnh 1 : là ảnh sẽ hiển thị khi ta chưa rê chuột vào.
+ Ảnh 2 : là ảnh sẽ hiển thị khi ta rê chuột vào.
Và một gợi ý nho nhỏ, ta nên tạo 2 ảnh có cùng 1 màu, và ảnh 1 có màu sậm hơn, ảnh 2 có màu nhạt hơn, khi đó ta rê chuột vào sẽ có cảm giác ảnh bị mờ đi, trông cũng khá đẹp.
Lưu ý : 2 ảnh phải có đồng nhất về kích thước cũng như đồng nhất về khung ảnh, tức là các điểm ảnh tương tự nhau phải nằm ở những vị trí tương tự nhau. Khi đó ta rê chuột vào sẽ không tạo ra cảm giác ảnh bị dịch chuyển. (Phần này thiêng về thiết kế đồ họa). Và nếu ảnh để background thì phải cho trùng với background của bài viết. Tốt nhất không nên dùng background cho ảnh.
Và sau đây là cách thực hiện:
1. Đăng nhập blog.
2. Vào thiết kế.
3. Vào chỉnh sửa HTML
4. Nhấp chọn mở rộng tiện ích.
5. Chèn đọan code CSS bên dưới lên trên dòng
Chú ý:
- Đọan width, height kích thước hình
- thay 2 link hình bạn link ảnh 1,2
6. Tìm xóa đọan code sau :
7. Thay đoạn này.
Rồi lưu lại là dc
bạn nào giỏi PTS thì có làm chèn vào blog. Ví dụ như
Trước khi thực hiện việc này, bạn cần tạo 2 ảnh dạng nút nhấn (kiểu buttom):
+ Ảnh 1 : là ảnh sẽ hiển thị khi ta chưa rê chuột vào.
+ Ảnh 2 : là ảnh sẽ hiển thị khi ta rê chuột vào.
Và một gợi ý nho nhỏ, ta nên tạo 2 ảnh có cùng 1 màu, và ảnh 1 có màu sậm hơn, ảnh 2 có màu nhạt hơn, khi đó ta rê chuột vào sẽ có cảm giác ảnh bị mờ đi, trông cũng khá đẹp.
Lưu ý : 2 ảnh phải có đồng nhất về kích thước cũng như đồng nhất về khung ảnh, tức là các điểm ảnh tương tự nhau phải nằm ở những vị trí tương tự nhau. Khi đó ta rê chuột vào sẽ không tạo ra cảm giác ảnh bị dịch chuyển. (Phần này thiêng về thiết kế đồ họa). Và nếu ảnh để background thì phải cho trùng với background của bài viết. Tốt nhất không nên dùng background cho ảnh.
Và sau đây là cách thực hiện:
1. Đăng nhập blog.
2. Vào thiết kế.
3. Vào chỉnh sửa HTML
4. Nhấp chọn mở rộng tiện ích.
5. Chèn đọan code CSS bên dưới lên trên dòng
- Code:
]]></b:skin> :
- Code:
.readmore-fd {
width: 101px;
height: 24px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(link ảnh 1);
}
.readmore-fd:hover {
background-image:url(link ảnh 2);
}
Chú ý:
- Đọan width, height kích thước hình
- thay 2 link hình bạn link ảnh 1,2
6. Tìm xóa đọan code sau :
- Code:
<div class='post-body entry-content'>
<data:post.body/>
<span class='rmlink'><a expr:href='data:post.url'>Read More...</a></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
7. Thay đoạn này.
- Code:
<div class='post-body entry-content'>
<data:post.body/>
<span class='rmlink'><a class='readmore-fd' expr:href='data:post.url'/></span>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Rồi lưu lại là dc
- huynhngoclong
- Tổng số bài gửi : 1
Được cảm ơn : 0
Ngày gia nhập : 21/09/2011
Re: Tùy chỉnh rút gọn bài viết blog
21/9/2011, 10:10 am
Cái này không áp dụng cho blogspot.com ah?
Re: Tùy chỉnh rút gọn bài viết blog
11/10/2011, 11:49 am
Cái này áp dụng cho blogger mà bạn. Không biết bạn vướng chỗ nào ?huynhngoclong đã viết:Cái này không áp dụng cho blogspot.com ah?
- beokute_doremon
- Tổng số bài gửi : 1
Được cảm ơn : 0
Ngày gia nhập : 14/10/2011
Re: Tùy chỉnh rút gọn bài viết blog
14/10/2011, 3:07 pm
mình chèn vào mà ko thấy nó thay đổi gì cả bạn ạ!(
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|