Ẩn tiên ích HTML cho blogspot

Thứ Sáu, 11 tháng 1, 2013

Blogger có cung cấp sẳn cho các bạn một số tiện ích để các bạn có thể gắn vào Blog như: Trang tìm kiếm, Người theo dõi, thống kê Blog, nhãn, trang...Trong số đó tiện ích HTML/Javacript có thể xem là tiện ích hữu dụng nhất, tiện ích HTML/Javacript dùng để chứa các mã HTML khác để tạo nên những Widget hữu dụng như: tạo đồng hồ, xem báo, lịch...với các code HTML tương ứng.

Với thủ thuật nhỏ dưới đây, các bạn có thể "hô biến" tiện ích này "biến mất" và cho nó "xuất hiện" ở một số trang trong Blog mà bạn muốn.

Đầu tiên, bạn cần phải xác định số thứ tự (ID) của HTML/Javacrip mà mình muốn làm thủ thuật. Cách xác định như sau: Bạn đăng nhập vào blog > chọn Bố cục và bấm vào chỉnh sửa  phía dưới của HTML/Javacript nào mà mình muốn để xem số thứ tự của HTML/Javacript đó.

Bạn xem ảnh hướng dẫn dưới đây nha:

Thường thì số thứ tự sẽ nằm cuối cùng ở địa chỉ HTML/Javacript.

Khi đã xác định được số thứ tự của tiện ích HTML/Javacript rồi, bạn đóng nó lại và bấm vào Mẫu =>Chỉnh sửa HTML, rồi dùng cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh </head> và copy các đoạn code tương ứng phía dưới dán trên dòng lệnh </head>.

- Ẩn HTML ở các trang bài viết:

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'> #HTML6 {display:none;}
</b:if>
</style>

- Ẩn HTML ở trang chủ:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> #HTML6 {display:none;}
</b:if>
</style>

- Ẩn HTML ở các trang hay nhãn:

<style type='text/css'>
<b:if cond='data:blog.url == "địa chỉ trang hoặc nhãn"'>
#HTML6 {display:none;}
</b:if>
</style>.

Bạn thay thế các chữ màu đỏ cho thích hợp với yêu cầu của bạn và bấm Lưu mẫu. Bây giờ bạn trở lại Blog để xem "thành quả" nha

Lưu ý: nếu muốn ẩn nhiều HTML thì bạn chỉ cần thêm các số thứ tự HTML vào phía dưới là xong. Ví dụ như: tôi muốn ẩn 3 HTML ở trang chủ thì thêm như sau:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>


#HTML6 {display:none;}

#HTML10 {display:none;}

#HTML4 {display:none;} 
</b:if>
</style>

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

-->Đọc thêm...

Đọc Thêm | nhận xét

Hiển thị bài viết trong cùng 1 nhãn (Kiểu 2)

Chủ Nhật, 6 tháng 1, 2013

Ảnh minh họa

Với thủ thuật này, các bài viết của toàn bộ trang Blog hoặc các bài viết trong cùng một nhãn được hiển thị trong một tiện ích được chia thành 2 cột riêng biệt: cột bên trái và cột bên phải.

Cột bên trái bao gồm 2 phần: Phần trên cùng (còn gọi là top-news) bao gồm một hình ảnh đại diện và tiêu đề kèm theo một số dòng mô tả của bài viết mới nhất mà bạn vừa mới đăng. Phần dưới (còn gọi là bottom-news) bao gồm 4 ảnh nhỏ và tiêu đề bài viết của 4 bài đăng kế tiếp (số lượng này bạn có thể tuỳ chọn).

Cột bên phải bao gồm các tiêu đề bài viết tiếp theo của Blog hoặc của một nhãn được sắp xếp từ trên xuống theo thứ tự thời gian (số lượng này bạn cũng có thể tuỳ chọn).

Mời bạn bấm vào đây để trải nghiệm trước thủ thuật này.

Đầu tiên, bạn đăng nhập vào blog > Chọn thiết kế > thêm tiện ích HTML/Javacript (nếu sử dụng giao diện mới thì bạn chọn Mẫu > thêm tiện ích HTML/Javacript), các bạn nào chưa biết cách thêm tiện ích HTML/Javacript thì xem tại đây, rồi dán code phía dưới vào.

<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 660px;
}
#top-news {
width: 460px;
height:166px;
padding:5px;
border:#bbb solid 1px;
background:#0000ff; / màu nền tiện ích/
font-size:12px;
}
#bottom-news {
width: 460px;
padding:5px;
}
#bottom-news-item {
width: 106px;
margin-right:9px;
float:left;
}
#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_C6zpD94Oemepskos9RIfR4qptgTxyLPcMPQ98AIEb3N4Ncy0kMdDOhpOF1DVLB3BJFMMqnNZ7n1EQWj33ibva4CeLxsGoC6lLBkfIzxXeTCYo2Rf3Uhc78VvgqGe24pDKUP9zzUKdiXO/s1600/1399304s1osheptmw.gif";
showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 105;
fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#ff0000"; /màu của text /
cmcolor = "#fff";
topcolor = "#fff";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4;
numposts = 15;
label = "";
home_page = "http://www.cdqtkd5a.blogspot.com/";
</script>
<script src="https://sites.google.com/site/dungheineken/all.txt" type="text/javascript"></script>

Bây giờ bạn chỉnh sửa các dòng lệnh màu đỏ theo ý thích của mình. Trong đó:

* Width (đầu tiên): là chiều rộng của cả tiện ích

* Width (thứ hai): là chiều rộng của top-news

* Width (thứ ba): là chiều rộng của bottom-news 

* Background: màu nền của top-news

* Imgicon: icon trước tiêu đề bài viết ở cột bên phải

* Topwidth: chiều ngang của ảnh ở top-news

* Topheight: Chiều cao của ảnh ở top-news

* Botheight: Chiều cao của ảnh ở bottom-news

* Botwidth: Chiều ngang của ảnh ở bottom-news

* cmcolor: màu của chữ

* Summary Post: số lượng từ của dòng mô tả bài viết mới nhất

* Summary Fontsize: Kích thước chữ của dòng mô tả bài viết mới nhất.

* Botnum: Số lượng ảnh và tiêu đề các bài viết ở bottom-news

* Numpost: Số lượng các bài viết hiển thị ở tiện ích (bao gồm các bài viết ở top-news, bottom-news và các bài viết ở cột bên phải)

* Label: tên nhãn (nếu sử dụng cho cả blog thì ô này bỏ trống, còn nếu sử dụng cho một nhãn thì bạn phải viết chính xác tên nhãn và tên nhãn này phải nằm trong dấu ngoặc kép nếu không thì tiện ích này sẽ bị lỗi và không hiển thị...).

* Home Page: Địa chỉ blog của bạn.

Cuối cùng bấm Lưu và trở về blog xem kết quả nha.

Mở rộng thêm:

Code trên tôi đang áp dụng cho toàn blog, vì vậy nếu muốn hiển thị cho một nhãn nào đó các bạn phải ghi chính xác tên nhãn ở dòng lệnh Label và thay thế dòng lệnh màu đỏ bằng dòng lệnh này:

https://dl.dropbox.com/u/66348944/only.txt

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

-->Đọc thêm...

Đọc Thêm | nhận xét (6)

Hiển thị bài viết trong cùng một nhãn (Kiễu 1)

Thứ Bảy, 16 tháng 6, 2012

Với thủ thuật này, số lượng các bài viết trong cùng một nhãn sẽ hiển thị (do bạn quyết định) thành 2 cột trong khung tiện ích. Mỗi bài viết sẽ hiển thị một hình đại diện nhỏ đi kèm với tiêu đề, khi bạn rê chuột vào một tiêu đề bất kỳ thì sẽ xuất hiện thêm một bảng nhỏ ghi ngày tháng xuất bản, số lượng comments và vài dòng tóm tắt của bài viết.

Ảnh minh họa

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn  Mẫu

Bước 4: Chỉnh sửa HTML => Tiếp tục (đồng thời bấm cặp phím Ctrl+F và gõ lệnh ]]></b:skin>

)

Bước 5: Chèn đoạn code dưới đây vào trước dòng lệnh ]]></b:skin>

/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 350px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}

Bạn điều chỉnh lại độ rộng cho phù hợp với blog của bạn rồi bấm LƯU lại. 

Sau đó vào thiết kế chọn thêm tiện ích => thêm HTML/Javacript, rồi dán đoạn code dưới đây vào

<script src="http://dl.dropbox.com/u/66348944/System_Tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Thuthuatnangcao"; /* nhãn bài viết */
home_page = "http://www.dungheineken.blogspot.com/"; /* địa chỉ blog của bạn*/
</script>
<div id="rc-posts-2-col"><h3>Thủ Thuật Nâng Cao</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://lh6.ggpht.com/_btztxrwc9ik/tsw3lpdf6yi/aaaaaaaage0/lkhkccqnwvw/loading-related.gif'/></div>
<script src="http://dl.dropbox.com/u/66348944/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Cuối cùng bấm Lưu lại là xong.

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

-->Đọc thêm...

Đọc Thêm | nhận xét (3)

Hiển thị bài viết giống trang tin247.com

Thứ Sáu, 15 tháng 6, 2012

Đối với những bạn lướt web nhiều chắc hẳn bạn đã từng vào trang tin247.com đọc tin và cũng đã thấy cách hiển thị bài viết trên trang đó. Trang web đó hiển thị bài đăng cho từng nhãn riêng và mỗi nhãn sẽ hiển thị một bài (dạng tóm tắt) và có thêm tiện ích bài viết liên quan trong cùng nhãn đó. Việc hiển thị bài viết như vậy chúng ta có thể ứng dụng nó vào trong blogspot. Mình xin chia sẽ cách để thực hiện thủ thuật này. DEMO

Ảnh minh họa

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn Bố Cục

Bước 4: Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào

<style>
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota a {
color:#ff0000;
}
.mota:hover{
color:#ff0000;
background-color: transparent;
z-index: 50;
}

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

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

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

.summerypost a {
color:#ff0000;
font-weight:bold;
}
.summerypost a:hover {
color:#000066;}

.summerypost {
color:#000;
font-family:arial;}

.readm a{
color:#ff0000;}
.readm a:hover{
color:#006633;}

.repost{
color:#3366ff;
font-family:arial;}

.repost a{
color:#0066cc;}
.repost a:hover{
color:#ff0000;}

</style>
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#ff0000";
bgTD = "";


imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb

imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 14; // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "";
titlecolor = "";
aBold = false;
icon = "";

text = "Nhận xét";

showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
poston = "Ngày đăng :";

minisummaryPost= 200; // số kí tự bạn muốn hiển thị cho phần tóm tắt bài viết
summaryPost = 350; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";


numposts = 8; //số bài viết hiển thị trong phần bài viết liên quan
label = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
home_page = "http://cdqtkd5a.blogspot.com/"; //Thay thành địa chỉ blog của bạn

</script>

<script src="http://data-traidatmui.appspot.com/scripts/tin247_post.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/tin247_related_post.js" type="text/javascript"></script>

Cuối cùng bấm Lưu lại là xong.

Các bạn thấy ở thủ thuật trên có một nhược điểm đó là bài viết bị lặp lại, bài viết đầu tiên sẽ lặp lại ở phần link bài viết liệt kê bên dưới và một nhược điểm khác là sử dụng 2 file JS. Điều này sẽ phần nào ảnh hưởng tới độ load của trang blog của bạn. Để khắc phục 2 nhược điểm trên mình xin chia sẻ file JS của thủ thuật này để bạn sử dụng. File dưới đây đã khắc phục được lỗi trên tránh tình trạng lặp lại bài viết. Bạn chỉ việc thay 2 file JS ở trên thành code bên dưới là xong.

Code 1:

<script src="http://data-traidatmui.appspot.com/scripts/tin247post_fixed.js" type="text/javascript"></script>

Ngoài ra bạn muốn cho nó hiển thị toàn blog thì thay đoạn code 1 thành đoạn code 2 dưới đây:

Code 2

<script src="http://data-traidatmui.appspot.com/scripts/tin247allpost_fixed.js" type="text/javascript"></script>

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

-->Đọc thêm...

Đọc Thêm | nhận xét (2)

Trình diễn bài viết trong cùng một nhãn (Kiểu 2)

Thứ Năm, 14 tháng 6, 2012

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị trong một khung hình chữ nhật được chia thành 2 cột, cột bên trái là hình đại diện và một số dòng giới thiệu của bài viết mới nhất, cột bên phải sẽ hiển thị hình đại diện và tiêu đề bài viết thứ hai, số còn lại sẽ hiển thị theo dạng List. Ngoài ra, ở trên cùng của khung còn hiển thị một số Tab để các bạn có thể theo dõi các nhãn khác....

Mời các bạn bấm vào xem thử

Ảnh minh họa

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn Bố Cục

Bước 4: Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào

<style type="text/css">
    .fl{float:left}
    .fr{float:right}
    .folder{width:550px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
    .folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(http://goo.gl/CyQBL) repeat-x}
    .folder-active{height:24px; padding:4px 10px; background:url(http://goo.gl/EgxmY) repeat-x; font-weight:bold}
    .link-folder:link, .link-folder:visited{color:#fff}
    .subfolder{height:24px; padding:5px 5px 0 15px; background:url(http://goo.gl/Z29yN) no-repeat}
    .folder-content{width:620px; background:#fff url(http://goo.gl/qy9iZ) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
    .folder-content p{margin:0}
    .folder-content ul{list-style:none; margin:0; padding:0}
    .folder-content li{padding:0 0 4px 6px; background:url(http://goo.gl/4OvNo) no-repeat 0 8px}
    .folder-topnews{width:270px; padding-right:10px}
    .folder-othernews{width:240px}
    .other-folder{margin:0}
    .img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
    .img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
    .xemthem{float:right; display:block; margin:0; padding:5px}
   
</style>

<div class="folder">
<div class="folder-title">
<div class="folder-active fl">
<a class="link-folder" href="http://cdqtkd5a.blogspot.com">Kiến Thức KD</a></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Khoinghiep">Khởi Nghiệp</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Marketing">Marketing-Sales</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/ChienLuoc">Chiến Lược</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Kynangmem">Kỹ Năng Mềm</a> | <a class="link-subfolder" href="http://cdqtkd5a.blogspot.com/search/label/Nhansu">Nhân Sự</a></div>
</div>
<div class="folder-content" id="tdHomeFolder2">

<script language="javascript">
    imgr = new Array();
    showRandomImg = true;
    summaryPost = 170; /* số ký tự phần giới thiệu bài viết mới nhất*/
    numposts2 = 5; /*số bài muốn hiển thị*/
    homepage = "http://cdqtkd5a.blogspot.com/"; /*thay thành địa chỉ blog bạn*/
    label = "Nhansu"; /*thay thành nhãn của bạn*/
   
</script>

<script src="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt" type="text/javascript">
</script></div>
</div>

Các bạn thay đổi các số màu đỏ theo ý muốn của bạn:

* Width: 550px (chiều rộng của tiện ích).

* Folder-topnews (width: 270px-chiều rộng của cột bên trái)

* Folder-othernews (width: 240px-chiều rộng của cột bên phải)

* Img-subject (chiều cao và chiều rộng của hình đại diện bên trái)

* Img-other (chiều cao và chiều rộng của hình đại diện bên phải)

và bấm LƯU lại là xong

LƯU Ý:

 - Nếu thay đổi chiều rộng của tiện ích thì các bạn phải thay đổi đồng thời chiều rộng của cột bên trái và bên phải luôn.

- Các bạn phải điền thật chính xác địa chỉ trang nhãn của bạn ở các dòng màu xanh và ở Label, nếu không nó sẽ bị lỗi và không hiển thị được.

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

Theo: dunghennesy

-->Đọc thêm...

Đọc Thêm | nhận xét

Trình diễn bài đăng mới nhất cho blogspot

Có nhiều cách để các bạn giới thiệu đến mọi người các bài đăng mới nhất trên Blog của mình. Tôi xin chia sẻ đến với các bạn một trong những tiện ích giới thiệu bài đăng mới nhất được tự động trình diễn trông khá đẹp và tự động cập nhật khi bạn đăng bài mới

Mời bạn xem thử tiện ích nha.

Ảnh minh họa

Để làm được như trên các bạn thực hiện theo các bước mình hướng dẫn dưới đây nha.

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn  Mẫu

Bước 4: Chỉnh sửa HTML => Tiếp tục (đồng thời bấm cặp phím Ctrl+F và gõ lệnh ]]></b:skin>

)

Bước 5: Chèn đoạn code dưới đây vào trước dòng lệnh ]]></b:skin>

.mod{
background:#eee; /*màu nền của tiện ích*/
border:3px solid #6D7B8D; /*đường viền của tiện ích*/
margin-bottom:0px;
width:523px; /*độ rộng của tiện ích*/
padding:0px;}
.glv{height:209px; /*chiều cao của tiện ích*/
overflow:hidden;}
.bd{position:relative;padding:4px 4px 4px 6px;}
.gl2-ct .ct{margin-left:0px;position:relative;}

.vpv{padding:0px;width:248px; /*độ rộng cảu phần bên trái của tiện ích*/
display:none;
position:absolute;
color:#000;
border-right:1px solid #5C5858;
}
.gl-title a {color:#0000ff; /*màu text của tiêu đề bài viết bên trái*/
font-size:13px;
font-weight:bold;}
.gl-title a:hover {color:#ff0033;}
.glv .on{display:block;}
.vimg{width:238px; /*độ rộng của ảnh bên trái*/
height:115px; /*chiều cao của ảnh bên trái*/
border:1px solid #fff;padding:2px;}
.glv ul.vpv-ft li{
list-style-type:none;}
.vpv-ft{
width:50%; /*độ rộng phần bên phải*/
position:absolute;
top:0px;
right:0px;
margin-top:5px;
text-align:left;}
.vpv-ft a{
color:#000099; /*màu tiêu đề bên phải*/
font-size:11px;
font-family:arial;
text-decoration: none;}
.vpv-ft a:hover{color:#ff0033;}
.vpv-ft li{
list-style-type:none;
min-height:40px;
cursor:pointer;
border-bottom:1px solid #5C5858;
position:relative;
text-align:left;}

.vpv-ft li.last{
border-bottom:0;
padding-bottom:5px;}
.vpv-ft li.first{
border-top:1px solid #5C5858;
padding-bottom:5px;}
.vpv-ft li.on{
background:#AFC7C7;
}

.vpv-ft img{
float:left;
width:34px; /*độ rộng của ảnh bên phải*/
height:30px; /*chiều cao của ảnh bên phải*/
margin:3px 4px 0px 2px;
padding:0px;}
.vpv-ft a{font-family:verdana;}
.glv .vpv-ft .on .imgpointer{display:block;}
.glv .vpv-ft .imgpointer{
display:none;
height:14px;
width:6px;
position:absolute;
left:-10px;
top:7px;} 

Các bạn chỉnh sửa các thông số và tông màu cho phù hợp với blog của mình, sau đó bấm Lưu mẫu và trở lại thiết kế=>Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = false;

fntsize = 12;
acolor = "";
aBold = false;

text = "comments";
showPostDate = true;

summaryPost = 80; //số ký tự hiển thị của bài viết tóm tắt bên trái
summaryFontsize = 12;
summaryColor = "";

numposts =5; /* số bài viết hiển thị*/
label = "Advanced blogger"; /*nhãn bài viết*/
home_page = "http://cdqtkd5a.blogspot.com/"; /*thay thành địa chỉ blog của bạn*/

</script>
<div id="gl2" class="mod glv"><div class="bd"><div id="gl2-vd"></div><div class="gl2-ct"><div id="gl2-ct1" class="ct on">
<script src="http://dl.dropbox.com/u/66348944/ya_glv_post.js" type="text/javascript">
</script></div>
<script src="http://dl.dropbox.com/u/66348944/ya_ct_post.js" type="text/javascript">
</script></div>
</div>
</div>

<script src="http://dl.dropbox.com/u/66348944/ya_jquery_03.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery_02.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery_01.js" type="text/javascript">
</script><script type="text/javascript">
(function() { new YAHOO.sea.fp.TodayVSet('gl2-ct1', true); })();
(function(){YAHOO.util.Event.addListener(window,'load',function(){window.setTimeout(function(){
},500);});})();
</script>

Cuối cùng bấm Lưu lại là xong
Chúc bạn thành công!!

-->Đọc thêm...

Đọc Thêm | nhận xét (1)

Trình diễn bài viết trong cùng một nhãn (Kiểu 1)

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị một hình ảnh đại diện phía trên, dưới hình ảnh là tiêu đề bài đăng. Và được trình diễn chạy tự động từ phải qua trái hay ngược lại.

Bạn bấm vào thẻ XEM THỬ để trải nghiệm trước.

Ảnh minh họa

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

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn  Mẫu

Bước 4: Chỉnh sửa HTML => Tiếp tục (đồng thời bấm cặp phím Ctrl+F và gõ lệnh ]]></b:skin>

)

Bước 5: Chèn đoạn code dưới đây vào trước dòng lệnh ]]></b:skin>

.bgcontent{background:#efefef; /*màu nền của tiện ích*/
height:140px; /*chiều cao của tiện ích*/
width:500px; /*độ rộng của tiện ích*/
}
#rc-content {
padding:4px;
width:500px; /*độ rộng của tiện ích*/
}
#rc-main {
width:110px;
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXfgP5zNLI/AAAAAAAAAGU/Dh1jYQZoSgM/main-bg.png) repeat-y;
}
#rc-top {
background:#fff url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXXff4uaqaI/AAAAAAAAAGQ/cj2q0Y_nb-A/top-bg.png) no-repeat top;
height:3px;
}
#rc-bottom {
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXffoEZMJI/AAAAAAAAAGM/JJSC-pSoUTk/bottom-bg.png) no-repeat bottom;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:70px;
}
.rc-thumbs IMG {
width:100px; /*độ rộng của ảnh thumbnail*/
height:70px; /*chiều cao của ảnh thumbnail*/
}
.rc-title {
height:48px;
padding:0px 3px 2px 3px;
line-height:1.3em;
font-size:11px;
font-weight:bold;
}
.rc-title a {color:#0000ff;}
.rc-title a:hover {color:#ff0033;}

Bấm Lưu mẫu và trở lại thiết kế=>Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào:

<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;">Thủ Thuật Nâng Cao</div>
<div class="bgcontent">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYMqSzqOPrDkxj54Mm5Q57SY-4HobJz23LjoijEN3hIOXCX79cM1M_WqPI5ynx00SHEwbdi8Ik41bkhPo00j4btgOQom-26ThX90G-y7o8gf3jWQveBoWCSczWW3GwJOBO0NAXRC6sSRAC/";
showRandomImg = true;
zaBold = false;
numposts = 20; //số bài trình diễn trong tiện ích
label = "Thuthuatnangcao"; //thay thành tên nhãn của blog bạn
summaryTitle = 40; //số ký tự của tiêu đề bài viết
home_page = "http://www.cdqtkd5a.blogspot.com/"; //thay thành địa chỉ blog bạn
</script>

<marquee align="center" direction="left" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="500">
<script src="http://dl.dropbox.com/u/66348944/rc_label.js" type="text/javascript">
</script>
</marquee></div>

<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="
http://cdqtkd5a.blogspot.com/search/label/Thuthuatnangcao "> Thủ thuật Nâng Cao &#187;</a></p>

Bây giờ bạn dựa theo các phần ghi chú trong code (màu đỏ) để chỉnh sửa lại cho phù hợp với ý thích của mình và Bấm lưu lại.

Nếu không muốn tiện ích này hiển thị các bài viết trong nhãn mà hiển thị hết cho các bài ở Blog thì bạn thay thế đoạn code sau:

<script src="http://dl.dropbox.com/u/66348944/rc_label.js" type="text/javascript">

 bằng đoạn code dưới đây:

<script src="http://dl.dropbox.com/u/66348944/rc_allpost.js" type="text/javascript">

và bấm Lưu lại là xong.

Lưu ý: Bạn phải điền chính xác tên nhãn, địa chỉ Blog của mình và quan trọng nhất là số bài trình diễn trong tiện ích phải bằng hoặc ít hơn số bài trong cùng một nhãn, nếu số bài trình diễn trong tiện ích nhiều hơn số bài hiện có trong nhãn thì hình ảnh sẽ không được hiển thị...

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

-->Đọc thêm...

Đọc Thêm | nhận xét