Theo yêu cầu của bạn Đăng Hiển (danghienit.blogspot.com)

[FD's BlOg] - Bài viết sẽ hướng dẫn các bạn tạo 1 box nhỏ chứa các bài viết liên quan tới bài đang đọc (giống như trang vietnamnet.vn). Để tránh trùng lặp với tiện ích các bài liên quan ở phía dưới của bài viết, thủ thuật này mình sẽ dùng tiện ích các bài ngẫu nhiên từ nhãn để truy xuất cho box này.

Thủ thuật này chỉ hiện thị tốt nhất cho các bài viết có 1 nhãn , nếu 1 bài viết có nhiều nhãn thì các bài hiển thị trong box này cũng sẽ tăng theo. Ví dụ ta thiết lập cho 1 nhãn hiển thị trong box là 4 bài, thì với 2 nhãn ta sẽ có 8 bài.

Hình ảnh minh họa từ trang vietnamnet.vn
(xem trực tiếp ở đây)

Và đây là hình ảnh mình thực hiện cho blog test

☼ Bắt đầu thực hiện thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script src='http://data.fandung.com/js/rp-posts.js' type='text/javascript'/>

<script type='text/javascript'>
var maxEntries = 4;
</script>

<style type='text/css'>
#rp-pre {
float:right;
width:150px;
padding-left:10px;
}

#rp-content {
border:1px solid #bbb;
background:#eee;
}

#rp-title {
text-align: center;
background:#bbb;
font-weight:bold;
color:#F95107;
margin:3px;
padding-bottom:2px;
}

#rp-posts {
position:relative;
left:-20px;
}

#rp-posts a {
background: url(http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif) no-repeat left;
padding-left:13px;
}

#rp-posts ul li {
list-style :none;
}
</style>

- Code : var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.
- Trong hình minh họa, box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right; thành float:left;

5. Tiếp tục di chuyển xuống phía dưới trong code template, tìm đoạn code bên dưới:

<data:post.body/>

6. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='rp-pre'>
<div id='rp-content'><div id='rp-title'>Bài liên quan</div>
<div id='rp-posts'/></div></div>

<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999&quot;' type='text/javascript'/>
</b:loop>

</b:if>

7. Save template.

☼ 1 lời khuyên nhỏ:
- Khi chèn box vào bài viết (nằm bên phải) ta sẽ thấy các chữ sẽ không đều (nếu ta chưa chỉnh), như hình minh họa bên dưới:

- Để khắc phục điều này bạn chỉ cần căn đều 2 bên cho khối văn bản này là được, và ta sẽ được kết quả như hình bên dưới:

Do thủ thuật này dùng tới file JS, và nó được chèn vào ngay đầu bài viết, nên phần nào cũng sẽ ảnh hưởng tới tốc độ load bài viết.

Chúc các bạn thành công.

Read more…

Theo yêu cầu của bạn Ngân (www.blogtruyen.com)

[FD's BlOg] - Ở bài viết này mình sẽ giới thiệu 2 thủ thuật để tạo hiệu ứng mô tả cho các liên kết trong bài viết. Đó là sử dụng CSS và cách 2 là dùng Javascript . Và bài viết này sẽ thực hiện dưới dạng thủ công.

Do thủ thuật này đơn giản nên mình sẽ đưa hình minh họa, không có demo.

Hình minh họa:

Dùng CSS

Dùng Javascript

Sau đây là code của thủ thuật và ưu khuyết điểm của việc dùng 2 cách trên:

a. Cách dùng CSS :
- Cách thực hiện :

+ chèn đoạn code bên dưới vào trước thẻ đóng </head> trong code template:

.mota-kvn{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota-kvn:hover{
background-color: transparent;
z-index: 50;
}

.mota-kvn span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota-kvn span img{
border-width: 0;
padding: 2px;
}

.mota-kvn:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}

+ Thực hiện cho liên kết trong bài viết:
ví dụ ta có liên kết như bên dưới :

<a href="link">Link 1</a>

và ta sẽ thêm code vào như bên dưới:

<a class="mota-kvn" href="link">Link 1<span>{NỘI DUNG CỦA PHẦN MÔ TẢ}</span></a>

- Ưu điểm là có thể thêm thuộc tính CSS vào trong các thẻ của phần mô tả.
- Nhược điểm :
+ vị trí xuất hiện sẽ là cố định.
+ không dùng được thẻ span trong phần mô tả, nếu dùng nó sẽ như thế này :

Code của hình minh họa sẽ là như thế này :

<a class="mota-s2" href="#">Link<span>test cai coi <span style="font-weight:bold;">blog FD</span&gt;</span></a>

- Thẻ span màu đỏ là thẻ để chứa phần mô tả, nếu bạn dùng 1 thẻ span khác (thẻ span màu xanh) trong thẻ này thì sẽ bị lỗi như trên, tức nó sẽ hiểu là 1 mô tả nhỏ trong phần mô tả lớn.

b. Cách dùng Javascript:
- Cách thực hiện : xem ở đây
- Ưu điểm : hiển thị đẹp và di chuyển theo chuột khi ta rê chuột vào liên kết.
- Khuyết điểm: không dùng được các kí tự " và ' trong phần mô tả, nên sẽ không thêm được thuộc tính CSS vào trong các thẻ ở phần mô tả. Do đó phần mô tả sẽ chỉ đơn thuần là văn bản, sẽ không thêm hình ảnh vào được.

Chúc các bạn thành công.

Read more…