Bài đăng mới hơn Bài đăng cũ hơn Trang chủ

Quảng Cáo/ Thông Báo của lớp báo k32

Tổng số Khách

Thứ Ba, 28 tháng 8, 2012

Tạo nút button bằng css

Nút button được ứng dụng khá nhiều trên các blog có thể làm nút home link, nút RSS... bạn cũng có thể sử dụng để làm menu cho blog. Có nhiều cách để tạo nút bạn có thể dùng phần mềm hoặc tạo trực tuyến từ các trang web. Hôm nay không cần phần mềm hay hổ trợ của web, mình xin chia sẻ cách để bạn có thể tạo nút bằng css dùng để ứng dụng cho blog mình. Thủ thuật này sẽ hình thành nên một nút dạng hình chữ nhật và có hiệu ứng khi rê chuột.
Các bạn cso thể dê chuột vào buttun ở bên dưới để xem demo.

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Chèn code bên dưới vào trước thẻ  ]]></b:skin>
.button{
background: #00ccff; /*màu nền của nút*/
border: 3px #00ccff outset;
padding: 0 2px;
text-decoration: none;
font: bold 10px Verdana; /*kích thước của text*/
color:#ff0000; /*màu text*/
}

.button:hover {
border-style: inset;
background: #33ffff; /*màu nền của nút khi rê chuột*/
padding: 2px 3px 0 5px;
color:#000099; /*màu text khi rê chuột*/
}

.button:visited {
background: #00ffff; /*màu nền của nút sau khi click chuột*/
color:#ff6600; /*màu text khi đã click chuột*/
}

.button:active{
color: white;
}

- Bạn chỉ việc dựa vào chú thích và chỉnh sửa lại cho phù hợp, sau khi chỉnh sửa xong nhớ xóa đi các dòng chú thích màu xanh để không bị lỗi code.

5- Save template lại

Để tạo nút cho link trong bài đăng hay trên blog, bạn chỉ việc thêm và link đó lệnh "class="button" như bên dưới.
<a class="button" href="http://www.viettin365.com/2013/04/hien-thi-bai-viet-trang-chu-ep-mat.html">Viettin365</a>

Chúc bạn thành công
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: ,

Thứ Năm, 23 tháng 8, 2012

2 chương trình chuyển file PDF sang Word giữ font tiếng Việt tốt

(Viettin365.com) - Trong quá trình sử dụng các file PDF chắn hẳn có lần bạn cần trích xuất nội dụng trong file PDF sang Word để thuận tiện trong việc chỉnh sửa và chia sẻ. AnyBizSoft PDF to Word Converter và PDF Converter là 2 chương trình chuyền đổi từ file PDF sang doc và docx rất tốt, đặc biệt trong việc nhận diện tiếng Việt có dấu.
Nếu bạn là một tín đồ của mạng xã hội lớn nhất hành tinh Facebook và muốn ‘ăn, ngủ’ cùng Facebook thì ứng dụng PDF Converter là một lựa chọn thú vị, ứng dụng này chạy trên nền web nên bạn không cần cài thêm bất cứ chương trình nào khác.
Một số điều cần lưu ý trước khi bạn sử dụng PDF Converter cũng như các công cụ chuyển đổi file trực tuyến:
-  Giới hạn kích thước file upload lên là 2 MB.
-  Khi bạn sử dụng ứng dụng này chúng sẽ yêu cầu truy cập vào một phần nhỏ dữ liệu cá nhân bạn trên FB, vì thế trong lúc xác nhận quyền có được thực thi trong tài khoản FB của bạn hay không thì nhớ chọn Allow.
-  Không nên sử dụng các công cụ chuyển đổi file trực tuyến nếu các tài liệu này bí mật hay nhạy cảm, mặc dù các nhà phát triển chương trình cho hay sẽ xoá tài liệu gốc lưu trong cache server sau xx giờ, thường là 24 giờ, nhưng không có cách nào để kiểm chứng điều đó.
Đầu tiên bạn login FB rồi truy cập địa chỉ http://apps.facebook.com/pdf-converter/ 
PDF Converter sẽ yêu cầu quyền truy cập tài khoản FB của bạn. Chọn Allow để tiếp tục.
Bấm nút Browse để duyệt tới file cần chuyển đổi
Sau khi chuyển đổi thành công bạn nhấn vào Download để tải file Word về máy và một email được gởi tới mail bạn cung cấp link download dự phòng.
AnyBizSoft PDF to Word Converter 4.0
Chương trình sử dụng khá đơn giản, các format văn bản (hình ảnh, font chữ, màu sắc, các bố cục…) trên file pdf vẫn được giữ nguyên sau khi đã chuyển đổi… chính là những ưu điểm không thể bỏ qua của phần mềm này.
Tải về và cài đặt tại: http://www.htwares.com/windows/business/office-suites-tools/anybizsoft-pdf-to-word-converter/
Dung lượng 11,4 MB
Dung lượng: 13MB.Tương thích: Windows XP/Vista/7/8.
Trong giao diện chương trình, bạn nhấn vào nút Add PDF File rồi duyệt đến file PDF cần chuyển đổi, bạn có thể chọn nhiều file cùng lúc bằng cách quét chọn các file đó, rồi bấm Open.
Mặc định chương trình sẽ chuyển tất cả các trang có trong file PDF sang Word, nhưng trường hợp bạn chỉ muốn chuyển một vài trang thôi hay các trang lẻ như 3,5,7… thì bạn tick chọn vào Page: e.g. (1,3,5,7-10) tại mục Selected Pages.
Tại mục Output Setting bên dưới, nhấn nút ‘…’ tại mục Customize để chọn vị trí lưu file sau khi chuyển đổi.
Sau khi thiết lập xong, bạn nhấn vào nút Convert màu xanh bên dưới để chương trình bắt đầu chuyển đổi, quá trình chuyển đổi diễn ra khá nhanh, file xuất ra nằm tại mục Status, bấm vào liên kết này để mở file.
AnyBizSoft PDF to Word Converter giữ font tiếng Viết khá tốt
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Thứ Tư, 22 tháng 8, 2012

Liên kết và tùy biến liên kết cho blog/web

Khi bạn vào trang web nào đó, Bạn sẽ thấy trong trang của họ có các link liên kết. Các link này thường có màu khác với màu chữ chung để độc giả dễ phân biệt. Có trang màu link thay đổi khi click chuột hoặc dê chuột qua link đó, cũng có trang màu link không thay dổi khi click vào đó hoặc di chuột qua nó.

Tất cả hiệu ứng link liên kết  đều có một cấu chúc chung cơ bản như bên dưới.
a:link{
color:blue; /*màu chữ link khi chưa dê chuột hoặc click vào*/
}
a:visited{
color: red; /*Màu chữ link đã xem rồi*/
}
a:hover{
color:orange; /*Màu chữ link khi dê chuột vào */
}
a:active{
color:red; /*Màu chữ link sau khi click */
}

Tùy biến link!

Từ cấu trúc trên ta có thể tùy biến thêm như:
1- Thêm gạch chân khi ai đó di chuột qua bạn chỉ cần thêm một trạng thái là Text-decoration:underline vào thẻ a:hover vào giữa hai dấu ngoặc {}
a:hover{
color:orange;
text-decoration:underline;
}
- Bỏ dấu gạch chân cho link thì bạn thay underline thành none như bên dưới (Trường hợp này áp dụng khi thẻ a:hover bạn để underline và bạn muốn một class nào đó không gạch chân ví dụ cho thẻ #sidebar.
#sidebar a:hover{
color:orange;
text-decoration:none;
}
- Làm tương tự với các thẻ còn lại.
2- Thên nền backgroud khi dê chuột qua:
a:hover {
color: orange;
text-decoration:underline;
background-color: #dddddd; /* Mã màu nền */
}
3 -Thay đổi con trỏ khi ai đó di chuột qua đường link. Bạn thử đổi con trỏ thành dấu chấm hỏi (biểu tượng của giúp đỡ - helf).
a:hover {
color: orange;
text-decoration:underline;
background-color: #dddddd; /* Mã màu nền */
cursor: help; 
}
Một vài trạng thái con trỏ khác bạn cũng có thể dùng:
auto
crosshair
help
move
pointer
text
wait
e-resize
ne-resize
n-resize
nw-resize
s-resize
se-resize
- Bạn nên cẩn thận khi sử dụng những trạng thái của con trỏ trên trang web bởi vì nếu bạn dùng không đúng cách có thể làm cho người đọc nhầm lẫn và khó hiểu.
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: ,

Tạo menu bằng hình ảnh với hiệu ứng Rock & Roll

Tạo menu bằng hình ảnh với hiệu ứng Rock & RollTiếp theo các thủ thuật tạo menu hôm nay mình chia sẻ với mọi người thủ thuật tạo menu bằng hình ảnh với nhiều menu con bên trong, với thủ thuật này chúng ta sẽ có được hiệu ứng lăn (roll) hình ảnh của menu khi bạn rê chuột. Hiệu ứng này trông cũng khá là đẹp mắt và menu trông cũng không qua rờm rà mà vẫn chứa được nhiều thư mục con bên trong. Bạn có thể xem demo bên dưới để thấy rỏ hiệu ứng của thủ thuật này.


Demo Menu ngang        Demo Menu dọc (đứng

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/jquery.min.v1.4.1.js"></script>
<style type="text/css">
.menu{
font-family: arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#f0f0f0;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.item2{position:relative;
background-color:#f0f0f0;
float:left;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;}
.link{
position:absolute;
width:48px;
height:48px;
left:2px;
top:2px;

}
.icon_home{
background:transparent
 
url(https://lh3.googleusercontent.com/-0-xRezGdhDk/Tj5h1B4UhqI/AAAAAAAAAew/2Eb5bnKu2wo/home.png)
 no-repeat top left;
}
.icon_mail{
background:transparent 
url(https://lh3.googleusercontent.com/-I9atwak6dys/Tj5h1dD3wzI/AAAAAAAAAew/FsY3BEwB7jA/mail.png)
 no-repeat top left;
}
.icon_help{
background:transparent 
url(https://lh6.googleusercontent.com/-XkkIV29Vl0E/Tj5h1PW_EaI/AAAAAAAAAew/L1dkyfYxPsA/help.png)
 no-repeat top left;
}
.icon_find{
background:transparent 
url(https://lh6.googleusercontent.com/-6VT_BeB1pBM/Tj5h1EmDzVI/AAAAAAAAAew/-wUcKlfqY0Q/find.png)
 no-repeat top left;
}
.icon_photos{
background:transparent 
url(https://lh6.googleusercontent.com/-61-sXFx6Cvs/Tj5h1nF90EI/AAAAAAAAAew/rpGO2Bgqs68/photos.png)
 no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
padding:0px;
background:transparent;
display:none;
}
.item_content h2{
color:#333;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:16px;
margin:0px;
padding:0px;
text-transform: uppercase;
}
.item_content a{
margin-right:7px;
margin-top:0px;
color:#333;
text-shadow: 1px 1px 1px #333;
text-decoration:none;
font-size:13px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}

</style>
- Nếu trong template của bạn đã có file jquery.min.js ở trên thì không cần phải thêm code JS này.

5. Chèn tiếp code bên dưới vào trước thẻ </body>
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/quangvietmkt-blogspot-menu-doc/rockroll_menu.js"></script>
Lưu ý: Bạn có thể Download 2 File Js trên và các File ảnh về TẠI ĐÂY sau đó Upload lên host riêng để tránh bị die File
6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào nó 1 trong 2 code bên dưới.

a. Code phong cách menu ngang


<div class="menu">
<div class="item2">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Trang chủ§</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item2">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Liên hệ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item2">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Hỗ trợ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item2">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Tìm kiếm</h2>

<input type="text" />
<a href="">Go</a>

</div>
</div>


<div class="item2">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Hình ảnh</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>
b. Code phong cách menu đứng 
<div class="menu">
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Trang chủ§</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Liên hệ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Hỗ trợ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Tìm kiếm</h2>

<input type="text" />
<a href="">Go</a>

</div>
</div>

<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Hình ảnh</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

</div>

- Bạn thay # trong code thành link của menu tương ứng với tên các Item của nó.

8. Cuối cùng save tiện ích lại

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

Tạo menu bằng hình ảnh với hiệu ứng Rock & Roll

Tạo menu bằng hình ảnh với hiệu ứng Rock & Roll
Tiếp theo các thủ thuật tạo menu hôm nay mình chia sẻ với mọi người thủ thuật tạo menu bằng hình ảnh với nhiều menu con bên trong, với thủ thuật này chúng ta sẽ có được hiệu ứng lăn (roll) hình ảnh của menu khi bạn rê chuột. Hiệu ứng này trông cũng khá là đẹp mắt và menu trông cũng không qua rờm rà mà vẫn chứa được nhiều thư mục con bên trong. Bạn có thể xem demo bên dưới để thấy rỏ hiệu ứng của thủ thuật này.


» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/quangvietmkt-blogspot-menu-doc/jquery.min.v1.4.1.js"></script>
<style type="text/css">
.menu{
font-family: arial;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.item{
position:relative;
background-color:#f0f0f0;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}
.item2{position:relative;
background-color:#f0f0f0;
float:left;
width:52px;
margin:0px 5px;
height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;}
.link{
position:absolute;
width:48px;
height:48px;
left:2px;
top:2px;

}
.icon_home{
background:transparent
 
url(https://lh3.googleusercontent.com/-0-xRezGdhDk/Tj5h1B4UhqI/AAAAAAAAAew/2Eb5bnKu2wo/home.png)
 no-repeat top left;
}
.icon_mail{
background:transparent 
url(https://lh3.googleusercontent.com/-I9atwak6dys/Tj5h1dD3wzI/AAAAAAAAAew/FsY3BEwB7jA/mail.png)
 no-repeat top left;
}
.icon_help{
background:transparent 
url(https://lh6.googleusercontent.com/-XkkIV29Vl0E/Tj5h1PW_EaI/AAAAAAAAAew/L1dkyfYxPsA/help.png)
 no-repeat top left;
}
.icon_find{
background:transparent 
url(https://lh6.googleusercontent.com/-6VT_BeB1pBM/Tj5h1EmDzVI/AAAAAAAAAew/-wUcKlfqY0Q/find.png)
 no-repeat top left;
}
.icon_photos{
background:transparent 
url(https://lh6.googleusercontent.com/-61-sXFx6Cvs/Tj5h1nF90EI/AAAAAAAAAew/rpGO2Bgqs68/photos.png)
 no-repeat top left;
}
.item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px;
padding:0px;
background:transparent;
display:none;
}
.item_content h2{
color:#333;
text-shadow: 1px 1px 1px #fff;
background-color:transparent;
font-size:16px;
margin:0px;
padding:0px;
text-transform: uppercase;
}
.item_content a{
margin-right:7px;
margin-top:0px;
color:#333;
text-shadow: 1px 1px 1px #333;
text-decoration:none;
font-size:13px;
}
.item_content a:hover{
color:#0b965b;
}
.item_content input{
border:1px solid #ccc;
padding:1px;
width:155px;
float:left;
margin-right:5px;
}

</style>
- Nếu trong template của bạn đã có file jquery.min.js ở trên thì không cần phải thêm code JS này.

5. Chèn tiếp code bên dưới vào trước thẻ </body>
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/rockroll_menu.js"></script>
Lưu ý: Bạn có thể Download 2 File Js trên và các File ảnh về TẠI ĐÂY sau đó Upload lên host riêng để tránh bị die File
6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào nó 1 trong 2 code bên dưới.

a. Code phong cách menu ngang


<div class="menu">
<div class="item2">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Trang chủ§</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item2">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Liên hệ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item2">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Hỗ trợ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item2">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Tìm kiếm</h2>

<input type="text" />
<a href="">Go</a>

</div>
</div>


<div class="item2">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Hình ảnh</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>
b. Code phong cách menu đứng 
<div class="menu">
<div class="item">
<a class="link icon_home"></a>
<div class="item_content">
<h2>Trang chủ§</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item">
<a class="link icon_mail"></a>
<div class="item_content">
<h2>Liên hệ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item">
<a class="link icon_help"></a>
<div class="item_content">
<h2>Hỗ trợ</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

<div class="item">
<a class="link icon_find"></a>
<div class="item_content">
<h2>Tìm kiếm</h2>

<input type="text" />
<a href="">Go</a>

</div>
</div>

<div class="item">
<a class="link icon_photos"></a>
<div class="item_content">
<h2>Hình ảnh</h2>

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>

</div>
</div>

</div>

- Bạn thay # trong code thành link của menu tương ứng với tên các Item của nó.

8. Cuối cùng save tiện ích lại

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

Người đăng: vào lúc Không có nhận xét nào:
Nhãn: ,

Thứ Tư, 8 tháng 8, 2012

Chuyển khung comments form lên trên nhận xét với thread comment

Mặc định blogspot thì tất cả các khung nhận xét đều nằm bên dưới của các nhận xét đã được xuất bản. Bài viết này Viettin365 sẽ hướng dẫn các bạn cách để di chuyển khung đăng nhận xét lên trên các nhận xét đã được xuất bản trong mẫu thread comment mới của blogger(cách làm tương tụ như với mẫu cũ của blogger.
Ảnh minh họa:




☼ Cách chuyển khung comment lên trên các nhận xét đã đăng:

1- Đăng nhập vào Blog
2- Vào mẫu (template)
3- Chọn Chỉnh sử HTML (Edit HTML)
3- Bấm chuột vào một vị trí bất kỳ trong khung chỉnh sửa HTML => Bấm tổ hợp phím Ctrl+F để mở hộp tìm kiếm nội tuyến và tìm đoạn code như bên dưới:
<p class='comment-footer'>
  <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='threaded-comment-form'/>
  <b:else/>
    <data:post.noNewCommentsText/>
  </b:if>
</p>
- Hãy cắt đoạn code đó sau đó dán vào trong Notepad hoặc Microshoft Word để sử dụng cho bước tiếp theo.
4- Tiếp tục kéo lên trên một chút bạn sẽ thấy đoạn code như sau:
<div class='comments' id='comments'>
- Ngay lập tức dán đoạn code bạn đã cut ở bước 3 vào sau đoạn code trên. Xem ảnh minh họa:

Người đăng: vào lúc Không có nhận xét nào:
Nhãn: ,

Widget bài viết ngẫu nhiên dạng list từ 1 nhãn nhất định

Ứng dụng của thủ thuật Random Posts : Tạo widget bài viết ngẫu nhiên từ 1 nhãn nhất định
Đây là một thủ thuật hòan tòan tương tự với thủ thuật tạo các bài viết ngẫu nhiên cho blog, chỉ khác là mở rộng riêng cho từng nhãn. Nếu blog bạn có một đề tài, chuyên mục nào đó nổi bật, bạn có thể tạo 1 widget random các bài viết từ nhãn (chuyên mục đó). Thủ thuật này được  Fandung thực hiện sau đây mình sẽ giới thiệu lại cho các bạn. Mình đã làm thử và thành công rùi


Ví dụ như ở blog của mình, mình có thể tạo một widget hiển thị các bài viết ngẫu nhiên của nhãn "Thủ Thuật Blog", xem hình minh họa bên dưới:

Ảnh minh họa: 
Ứng dụng của thủ thuật Random Posts : Tạo widget bài viết ngẫu nhiên từ 1 nhãn nhất định
Để thực hiện, bạn chỉ cần tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:

<div id="random-posts"></div>
<script type="text/javascript">

function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
  indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
  maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
  var entry = json.feed.entry[indexPosts[i]];
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.title = entry.title.$t;
  for (var j = 0; j < entry.link.length; ++j) {
      if (entry.link[j].rel == 'alternate') {
          a.href = entry.link[j].href;
          break;
      }
  }
  a.appendChild(document.createTextNode(entry.title.$t));
  li.appendChild(a);
  ul.appendChild(li);
}
container.appendChild(ul);
}

</script>
<script src="http://viettin365.com/feeds/posts/summary/-/Blogspot-tips?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>
- Chú ý :

+ var maxEntries = 10; : dòng này để thiết lập số bài viết sẽ hiển thị
+ http://viettin365.com/ bằng URL địa chỉ blog của bạn. 
+ /feeds/posts/summary/-/Blogspot-tipps : thay code màu đỏ bằng nhãn bạn muốn hiển thị (lưu ý, các nhãn có kí tự khỏang trắng phải thay thế kí tự khỏang trắng bằng %20)
(ví dụ nếu là labe Blog Yahoo thì bạn phải đánh là  Blog%20Yahoo)

Chúc thành công!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: ,
Đăng ký: Bài đăng (Atom)

Widget#2

Widget#5

Widget#4

primaryBottomSidebar

Footerpages

Trang

Bottom Navi

Được tạo bởi Blogger.

Người theo dõi

TIÊU ĐIỂM