Rao Hot

Rao Hot
Rao vặt Hot nhất

Hiển thị các bài đăng có nhãn Code HTML. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Code HTML. Hiển thị tất cả bài đăng

Thứ Bảy, 31 tháng 1, 2015

Tạo bài viết liên quan cho Blogger (Blogspot) - Phần 2


Bài viết này mình sẽ hướng dẫn các bạn cách thêm chức năng hiển thị các bài viết liên quan (theo Labels) vào cuối mỗi bài viết.
Thủ thuật này đã hạn chế được vài nhược điểm cũng như thêm những chức năng mới mà các bài viết về chủ đề "Related Post for Blogspot" trên mạng chưa có, ví dụ:
- Hiển thị hình ảnh đại diện cho mỗi bài viết liên quan.
- Hoạt động tốt với Labels tiếng Việt.
- Không hiển thị bài viết đang xem trong danh sách bài viết liên quan.
- Hiển thị ngày viết bài và số nhận xét kèm theo.
Có 2 kiểu hiển thị bài viết liên quan để bạn chọn:

Kiểu 1: Danh sách bài viết liên quan hiển thị theo hàng dọc

1. Thêm đoạn mã CSS dưới đây vào phía TRÊN ]]></b:skin>:

2. Thêm đoạn mã dưới đây vào ngay SAU <div class='post-footer'>:


Kiểu 1: Danh sách bài viết liên quan hiển thị theo hàng ngang

1. Thêm đoạn mã CSS dưới đây vào phía TRÊN ]]></b:skin>:

2. Thêm đoạn mã dưới đây vào ngay SAU <div class='post-footer'>:


Cuối cùng, bấm Lưu mẫu để hoàn thành.
Vài lưu ý:
- Nếu không tháy hiển thị bài đăng liên quan, bạn có thể dán đoạn code ở bước 2 vào vị trí sau

</b:if>

{dán code ở bước 2 vào đây}

</b:includable>

<b:includable id='postQuickEdit' var='post'>
- Giá trị số 6 trong code trên là số bài viết liên quan tối đa được hiển thị. Các bạn có thể thay đổi thành giá trị khác.
- Nếu bạn không muốn hiển thị ngày đăng với số nhận xét kèm theo thì tìm và xóa:

Hướng dẫn tạo vùng hiển thị doạn text hay code cho blog


Vùng hiển thị đoạn text hay code là nơi (area) mà tác giả muốn lưu trữ, hay chứa trong đó thông tin để người đọc có thể copy, sao chép.
Thông thường vùng hiển thị này để lưu những đoạn text hay các đoạn mã code cho khách viếng thăm sao chép nội dung.
Để thực hiện được điều này, bạn có thể sao chép code sau:

<p align="left">
<textarea name="code" rows="6" cols="40" onclick="this.select()">
Đây là đoạn văn bản hay code cần hiển thị
</textarea>
</p>

Ví dụ:


Chú ý;
rows="6" biểu thị chiều cao của vùng hiển thị, bạn có thể tuỳ ý thay đổi chỉ số này tuỳ thuộc vào chiều cao cần thiết cho vùng hiển thị.
cols="40" biểu thị chiều rộng của đoạn văn bản, chỉ số này được thay đổi tuỳ thuộc vào chiều rộng mà bạn cần thể hiện.

XayWeb.com

Thứ Hai, 19 tháng 5, 2014

Một số code Biểu tượng Yahoo chèn trên web


Lưu ý: thay YAHOO_ID_HERE bằng nick chát yahoo của bạn


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=2" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=2"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=5" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=5"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=6" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=6"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=7" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=7"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=8" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=8"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=9" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=9"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=10" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=10"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=11" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=11"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=12" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=12"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=13" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=13"></a>



<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=14" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=14"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=15" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=15"></a>


<a xhref="ymsgr:sendim?YAHOO_ID_HERE" mce_href="ymsgr:sendim?YAHOO_ID_HERE" border="0"><img xsrc="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=16" mce_src="http://opi.yahoo.com/online?u=YAHOO_ID_HERE&t=16"></a>

Chèn Video từ Youtube với chế độ Auto Play


Video ở chế độ Auto Play ( tự động chạy)

Muốn cho Video của bạn khi chèn vào Blog sẽ tự động chạy thì chú ý đoạn code ở phần 1. Trong đoạn code trên, bạn thay :
 

en&fs=1 bằng 
en&autoplay=1, như vậy, bạn đã tạo lệnh Auto Play cho code HTML trên rồi đấy, khá đơn giản phải không bạn.
 Sau khi thay vào ta được code dưới đây:
 Code
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/N_WP1VOlAUI&hl=en&autoplay=1&color1=0x234900&color2=0x4e9e00"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/N_WP1VOlAUI&hl=en&autoplay=1&color1=0x234900&color2=0x4e9e00" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Code phóng to ảnh khi đặt chuột vào ảnh hoặc chữ


1Code CSS
<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>

2.Code html
<a class="thumbnail" href="#thumb"><img src="Linkanhnho.jpg" width="100px" height="66px" border="0" /><span><img src="Linkanhto.jpg" /><br />Chú thích về ảnh.</span></a>
<a class="thumbnail" href="#thumb"><img src="Linkanhnho.jpg" width="100px" height="66px" border="0" /><span><img src="inkanhto.jpg" /><br />Chú thích về ảnh?</span></a>
<br />
<br />

<a class="thumbnail" href="#thumb">Tên ảnh<span><img src="Link anh.gif" /><br />Chú thích về ảnh</span></a>