Pages

Banner 468 x 60px

 

Thứ Ba, 1 tháng 11, 2011

Trình diễn bài viết mới dạng Scroll ngang bằng Mootools

0 nhận xét

» 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 language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>

<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/mootools.1.11.js"></script>

5. Chèn tiếp code CSS vào trước thẻ ]]></b:skin>
#NewsTicker_horizontal{
border:solid 1px #ccc;
width:600px;
height:200px;
}
#NewsTicker_horizontal h1{
padding:6px;
margin:0;
background:#616D7E;
color:#fff;
font-size:11px;
font-weight:bold;
}
#NewsHorizontal {
width: 600px;
height: 200px;
display: block;
overflow: hidden;
position: relative;
}
#TickerHorizontal {
width: 600px;
height: 140px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerHorizontal li {
width: 280px;
border-right:1px solid #ccc;
text-align: left;
font-size: 12px;
margin: 0;
padding: 6px 10px;
float: left;
height: 162px;
display: inline;
}
#TickerHorizontal li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerHorizontal li a:hover {
color: #666;
text-decoration:underline;
}
#TickerHorizontal li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerHorizontal li .NewsFooter{
display: block;
color: #000;
font-size: 10px;
margin: 0px 0px 0px 70px;
}

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 code bên dưới
<div id="NewsTicker_horizontal">
<h1>CÁC BÀI VIẾT MỚI NHẤT</h1>
<div id="NewsHorizontal">
<script src="http://nguyenhoangnam.googlecode.com/files/Horizontal_re-post.js.txt" language="javascript">
</script>
</div></div>
<script src="http://nguyenhoangnam.googlecode.com/files/Ticker_Horizontal.js.txt" type="text/javascript"></script>

8. Save tiện ích lại là xong

Nếu bạn muốn bài viết hiển thị theo từng nhãn thì bạn hãy thay code bên dưới
http://nguyenhoangnam.googlecode.com/files/Horizontal_re-post.js.txt

thành code sau
http://nguyenhoangnam.googlecode.com/files/Horizontal_re-label.js.txt


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



Read more...

Tiện ích Recent Video Youtube cho Blogspot

0 nhận xét

» 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://nguyenhoangnam.googlecode.com/files/recent_video.js"></script>
<style type='text/css'>
.recentvideo {
padding:5px 2px 2px 0px;
font-size:12px;
line-height:1.2em;
display:block;
background:#eee;
width:100%;
min-height:59px;
border:1px solid #ddd;
margin-bottom:5px;}
.recentvideo a{
font-weight:bold;
text-decoration:none;
color:#333;}
.recentvideo a:hover{
color:#666;
text-decoration:underline;}
.datetextcm {
font-size:11px;
color:#333;
}
.recent_thumb {
border:1px solid #fff;
margin-right:5px;
margin-top:-5px;
float:left;
width:60px;
height:60px;
padding:2px;
float:left;
}
.recent_thumb:hover {
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:&quot;alpha(opacity=70)&quot;;
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
}
</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script type="text/javascript">
var numposts = 5; //số bài viết hiển thị trong tiện ích
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
</script>
<script src="http://www.traidatmui.com/feeds/posts/default/-/LabelName?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Bạn hãy thay (http://www.traidatmui.com) thành địa chỉ blog của bạn và tên nhãn (LabelName) video tương ứng.

7. Save tiện ích lại

Tuy nhiên ở trên mình chỉ cho hiển thị theo từng nhãn riêng biệt, nếu blog của bạn chỉ chuyên về video và muốn hiển thị cho toàn bộ bài viết thì bạn thay đoạn code Script ở cuối của bước 6 thành code bên dưới.
<script src="http://www.traidatmui.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Ở đây mình chỉ hướng dẫn bài viết hiển thị dạng cơ bạn, thời gian tới mình sẽ test và kết hợp một số hiệu ứng cho tiện ích Recent Video này. Nếu bạn có gì không rỏ hay phát hiện lỗi gì thì có thể để lại comment bên dưới để chúng ta có thể trao đổi để hoàn thiện hơn.

» Cập nhật ngày 14/06/2011

Hiện tại mã nhúng của Youtube có chút thay đổi nên file JS ở trên không phù hợp nữa nên ảnh đại diện sẽ không hiển thị được và nay mình cập nhật lại file JS lại để các bạn có thể sử dụng thủ thuật này.

Tuy nhiên, nếu link trong mã nhúng của Youtube có dạng http://www.youtube-nocookie.com/v/xPIbuTx7ENU?fs=1&hl=en_US thì các bạn cứ sử dụng file JS cũ ở trên. Còn nếu link có dạng http://www.youtube.com/v/2ZZRtzCl6Gg?version=3&hl=en_US&rel=0 thì bạn sẽ dùng file JS bên dưới thay cho file JS (recent_video.js) ở trên.
http://nguyenhoangnam.googlecode.com/files/recent_video_youtube.js

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



Read more...

Tiện ích Recent Posts tự động scroll với nút Stop/Play bằng mootools

0 nhận xét

» 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 language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
dcmcolor = "#000033";
dcmsize = "1";
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>

<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/mootools.1.11.js"></script>

5. Chèn tiếp code CSS vào trước thẻ ]]></b:skin>
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:350px; /* độ rộng của tiện ích*/
height:430px; /* chiều cao của tiện ích*/
}
#NewsTicker h1{
padding:6px;
text-align:center;
margin:0;
background:#dfe9d5;
color:#000000;
font-size:12px;
font-weight:bold;
}
#NewsVertical {
height: 375px; /* chiều cao của nội dung tiện ích*/
display: block;
overflow: hidden;
position: relative;
}
#controller{
cursor:pointer;
padding:5px 5px 0px 5px;
font-size:11px;
color:#666;
margin-left: 265px;
}
#play_scroll_cont{display:none;}
#TickerVertical {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
display: block;
color: #333333;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 6px 6px 6px;
float: left;
border-bottom:1px solid #ddd;
}
#TickerVertical li .NewsTitle{
color: #000000;
font-size: 12px;
font-weight:bold;
margin:0px;
}
#TickerVertical li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerVertical li a:hover {
color: #666;
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerVertical li .NewsFooter{
display: block;
float:right;
color: #000000;
font-size: 10px;
margin:6px 0px 0px 0px;
}

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 code bên dưới
<div id="NewsTicker">
<h1>CÁC BÀI VIẾT MỚI NHẤT</h1>
<div id="controller">
<div id="stop_scroll_cont"><a id="stop_scroll"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJzrlLs2Hol7gQ_iOpJ5mtCwq3d9scwpQ3sm7Z-wUBR2-SE2a20eijHcdQGtO2vphXX-QrKqRr7W_kBUJmo572QGeD6aUGqe_T63dwxqKAUZ5t1JrS4n9CbluFx-v7cqidJNLiiJCF5N5/" width="14" height="14" border="0" align="absmiddle" /></a> Stop scroll</div>
<div id="play_scroll_cont"><a id="play_scroll"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg205L7bE_WB-bZlWii_5gLBhpv1iIDCjXk3EDn7OWU8ORBDd5VCqlu18FJwxz9-oWssecAeaNn5CZ0AcMKW_xY4VZFhTDM3PFzC3SNoOs_Ur-2Ehv76buTmFMIIofyT2c_zyk6yu_ajG4J/" width="14" height="14" border="0" align="absmiddle"/></a> Play scroll</div></div>

<div id="NewsVertical">
<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/re_post_autoscroll.js.txt"></script>

</div></div>

<script language="javascript" type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/newsticker.js.txt"></script>

8. Save tiện ích lại là xong

Nếu bạn muốn bài viết hiển thị theo từng nhãn thì bạn hãy thay code bên dưới
http://nguyenhoangnam.googlecode.com/files/re_post_autoscroll.js.txt

thành code sau
http://nguyenhoangnam.googlecode.com/files/re_label_autoscroll.js.txt

Đối với file re_post_autoscroll.js thì bạn không cần quan tâm đến nhãn bài viết vì nó sẽ tự động hiển thị các bài viết mới nhất cho toàn blog của bạn.

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



Read more...

Hiển thị bài viết dạng sách cho các bài viết trên Blogspot

0 nhận xét

» 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://nguyenhoangnam.googlecode.com/files/jquery.min.v1.4.1.js.txt"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<script src="http://nguyenhoangnam.googlecode.com/files/booklet.js" type="text/javascript"></script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.booklet{
font-family:arial;
color:#000;
position:relative;
margin:0 auto 10px;}
.booklet .b-page {
left:0; top:0;
position:absolute;
overflow:hidden;
padding:0;}
.booklet .b-counter {
bottom:10px; position:absolute;
display:block; width:25px;
height:20px;
color:#444;
text-align:center;
font-family:Times New Roman;
width:90%;
border-top:1px solid #ddd;
text-align:center;
font-size:12px;
padding:5px 0 0;
-moz-box-shadow:0px -1px 1px #fff;
-webkit-box-shadow:0px -1px 1px #fff;
box-shadow:0px -1px 1px #fff;
opacity:0.8;}
.booklet .b-wrap-left {
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TdRn953dcOI/AAAAAAAAAVU/qFJBY_wrq-I/left_bg.jpg) no-repeat top left;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right {
background:#efefef url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TdRm3ykflwI/AAAAAAAAAVM/ytRwxWkJajU/right_bg.jpg) no-repeat top left;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.book_wrapper{
margin:0 auto;
padding-top:50px;
width:900px; /*độ rộng của tiện ích*/
height:545px; /*chiều cao của tiện ích*/
position:relative;
background:transparent url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TdRm3wDuM9I/AAAAAAAAAVQ/nrkqJemJEo0/bg.png) no-repeat 9px 27px;
}
.book_wrapper h2:hover{
color:#ccc;
}
.book_wrapper h2{
color:#000;
margin:0px 2px 0px 10px;
font-size:12px;
padding-bottom:7px;
}
.datetext {
font-size:11px;
margin-left:30px;
}
.authorpost{
font-size:11px;
margin-left:0px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gMXztZWnAGo1ZmfH2HPy8-wnMqPS9TwXvA4dp5zyd8VmKzYavJ42Ia2hmDihsoxOpmzbsKU598fRx-HTx1RjEh4mFBPfg59akU5JJ-EeAO2mgayEJEJojznTg80OIaFZrabgqMpEwXcF/") no-repeat 0px 0px transparent;
padding:3px 0px 0px 18px;
}
.book_wrapper p{
text-indent: 0.5cm;
font-size:12px;
line-height:1.4em;
margin:3px 5px 5px 4px;
}
.book_postimage {
float:right;
margin-bottom:10px;
width:370px; /*độ rộng của ảnh bài viết*/
height:200px; /*chiều cao của ảnh bài viết*/
padding:2px;
border:1px solid #fff;
}
a#next_page_button,a#prev_page_button{
display:none;
position:absolute;
width:41px; /*độ rộng của nút next*/
height:40px; /*chiều cao của nút next*/
cursor:pointer;
margin-top:0px;
top:50%;
background:transparent url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TdRm3TRDFsI/AAAAAAAAAVI/if2yHXGb58s/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-5px;
}
a#next_page_button{
right:-5px;
background-position:-41px -40px;
}
a#next_page_button:hover{
background-position:-41px 0px;
}
a#prev_page_button:hover{
background-position:0px 0px;
}
.loading{
width:160px;
height:56px;
position: absolute;
top:50%;
margin-top:-28px;
right:135px;
line-height:56px;
color:#fff;
padding-left:60px;
font-size:15px;
background: #000 url(https://lh6.googleusercontent.com/_9-sNIAfGhKg/TdRm2-dm4fI/AAAAAAAAAU8/OuqqRuq8S6E/ajax-loader.gif) no-repeat 10px 50%;
opacity: 0.7;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

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 code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiLruOJaFGXMl0y2-uhCN2RhNTo_azzMyJg30Va154hwdtOeD-6J1772tl8EtCLPKNDjUo5nnbW7i3Dz8o8wNKiP4EP6IWUO_T1VgaFEdXHyPGAB_9x9088rfWG_5ApkEO1alMao8O9aQ/";
showRandomImg = false;
aBold = true;
text = "Comments";
showPostDate = true; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSE
summaryPost = 670; //số ký tự hiển thị phần tóm tắt bài viết
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
numposts =15; //số bài viết hiển thị, ở đây mình chỉ mặc định số bài viết tối đa là 15
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Loading pages...</div>
<div id="mybook" style="display:none;">
<script src="http://nguyenhoangnam.googlecode.com/files/book-label.js" type="text/javascript"></script>
</div></div><div></div>


Bạn dựa vào các hướng dẫn để tùy chỉnh lại cho phù hợp, ở đây mình chỉ hướng dẫn chỉnh sửa những phần cơ bản. Nếu có thắc mắc hay cần giúp đỡ thì bạn vui lòng để lại comment bên dưới mình sẽ tranh thủ giúp bạn.

8. Save tiện ích lại

Nếu muốn hiển thị cho toàn bộ bài viết trên blog thì bạn thay file JS (book-label.js) ở trên thành link bên dưới
http://nguyenhoangnam.googlecode.com/files/book-allpost.js


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



Read more...

Recent Video Youtube với hiệu ứng Scroll ngang cho Blogspot

0 nhận xét

» 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 trước thẻ </head>
<script src=" http://nguyenhoangnam.googlecode.com/files/JQuery.eva1.2.3.js.txt" type="text/javascript"></script>
<script type="text/javascript" src="
http://nguyenhoangnam.googlecode.com/files/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="
http://nguyenhoangnam.googlecode.com/files/JQ.jCarouselLite.js.txt"></script>
<script type="text/javascript" src="
http://nguyenhoangnam.googlecode.com/files/jCarouselLite_videoytbfixed.js"></script>
<script type="text/javascript">
$(function() {
$(".jCarouselLite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 500, //tốc độ scroll
auto:5000, //thời gian tự động scroll
visible:5, //số bài viết hiển thị
scroll:5, //số bài viết 1 lần scroll qua
easing: "easeinout"
}); });
</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.jCarouselLite {
float: left;
position: relative;
isibility: hidden;
left: -5000px;
}
.carousel a.prev{
float: left;
width: 23px;
height: 143px;
margin-right:-6px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE3q5ZzA97wCBxFgCxPFeEe3oB35dFo2m44bs5fxF7Ynu51LnKWEaNA12Y5cDG1Keq7TmpHgvoxIUY77Nop_fp4UA1vcf_aWeETyILXqT-xqjcP1BYzJERIwswJel8GwzcVr5BBB5u2-_/) left 60px no-repeat;
}
.carousel a.next {
float: left;
margin-left:-6px;
width: 23px;
height: 143px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Lkt3fbAQJoyxrAYvW40aW_oGF_QfKiMXMIR3fqFq4i2dpaMUCWLYVgY98DQhJohjN6gcbMe0_NFgynqi2c3S4ZcMnIMW9rVpd7ltGy792X0mJgdnW4LrqYkBEhujDidLj69VFLCLXg3f/) right 60px no-repeat;
}
.recentvideo-youtube {
float:left;
padding:0px 3px 5px 2px;
font-size:11px;
line-height:1.2em;
display:block;
width:114px;
height:145px;
background:#fff;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border:1px solid #ddd;
margin-right:3px;
text-align:center;}
.recentvideo-youtube a {
font-weight:bold;
text-decoration:none;
color:#333;}
.recentvideo-youtube a:hover{
color:#666;
text-decoration:underline;}
.datetextcm {
font-size:11px;
color:#333;
}
.video_thumb {
border:1px solid #fff;
margin-left:2px;
margin-top:1px;
float:left;
width:105px;
height:90px;
padding:2px;
float:left;
}
.video_thumb:hover {
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:"alpha(opacity=70)";
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Chọn thêm tiện ích (Add a Gadget)
8. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script type="text/javascript">
var numposts = 10; //số bài viết tối đa hiện thị trong tiện ích
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
label = "Xem hai"; //tên nhãn bài viết của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="carousel">
<a href="#" class="prev"></a>
<div class="jCarouselLite">
<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs\"><\/script>");</script>
</div>
<a href="#" class="next"></a>
</div>

9. Save tiện ích lại là xong

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



Read more...

bài viết mới cuộn ngang với 2 nút điều khiển

0 nhận xét

» 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> hoặc trước thẻ </head>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/Jquery1.3.2.js.txt"></script>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/recent_jcarousel_yahoo.js.txt"></script>
<script type="text/javascript">
jcarousel.setup({
galleryid: 'container',
beltclass: 'belt',
contentclass: 'content',
contentbehavior: {speed:500, wraparound:true, wrapbehavior:'pushpull', persist:false},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['', -10, 300], rightnav: ['', -10, 100]},
statusvars: ['firstnum', 'lastnum', 'totaltnum'],
contenttype: ['inline']
})
</script>

<style type='text/css'>
.allcontainer {
font-size:12px;
font-family:arial;
color:#090404;
width: 640px; /*độ rộng của tiện ích*/
padding-top:6px;
background:#fff; /*màu nền của tiện ích*/
}
.jcarousel{
position: relative;
order-top: 1px solid #333;
overflow: scroll;
padding:0px;
margin-top:0px;
width: 640px;
height: 185px; /*chiều cao của phần nội dung*/
}
.content h2 {
font-size:13px;line-height:1.2em;background:transparent;
margin:0px;}
.content h2 a{text-shadow:1px 1px 1px #ccc;color:#000;}
.content h2 a:hover{color:#666;}

.containerImg{float:left;
margin-right:5px;
padding:2px;
border: 1px solid #ccc;}
.jcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.jcarousel .content{
float: left;
overflow: hidden;
margin: 0px 6px 5px 5px;
width: 312px;
}
.prev{
margin-top:-5px;
width: 20px;
height: 24px;
float:right;
padding:6px;
background: url(https://lh6.googleusercontent.com/-hessCUkLH14/TkNckajRUzI/AAAAAAAAAf4/ACR9tMA6ZS4/nav.png) 0px 0px no-repeat;}
.next{
margin-top:-5px;
width: 27px;
height: 24px;
float:right;
padding:6px;
background: url(https://lh6.googleusercontent.com/-hessCUkLH14/TkNckajRUzI/AAAAAAAAAf4/ACR9tMA6ZS4/nav.png) -32px 0px no-repeat;}
</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Chọn thêm tiện ích (Add a Gadget)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeiLruOJaFGXMl0y2-uhCN2RhNTo_azzMyJg30Va154hwdtOeD-6J1772tl8EtCLPKNDjUo5nnbW7i3Dz8o8wNKiP4EP6IWUO_T1VgaFEdXHyPGAB_9x9088rfWG_5ApkEO1alMao8O9aQ/";
imgwidth = 80; //độ rộng của ảnh trong tiện ích
imgheight = 75; //chiều cao của ảnh trong tiện ích
showRandomImg = false;
aBold = true;
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
summaryPost = 350; //số ký tự hiển thị phần tóm tắt bài viết
numposts =20; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>

<div class="allcontainer">
<span id="container-paginate">
<img src="https://lh3.googleusercontent.com/-NEniU-ywjyM/TkOcjWA2QLI/AAAAAAAAAgU/Ksr677PeioI/opencircle.png" data-over="https://lh5.googleusercontent.com/-dYVb8IRGIlw/TkOcjcIMvJI/AAAAAAAAAgU/lVbrLDaOdQ0/graycircle.png" data-select="https://lh3.googleusercontent.com/-eAd5my2yXHs/TkOcju5B0KI/AAAAAAAAAgU/4nBRatFY7cM/closedcircle.png" data-moveby="2" /></span>

<div style="float: right;text-align:right;">
<span style="margin-bottom: -8px;margin-right:10px;"><span id="firstnum"></span> - <span id="lastnum"></span> / <span id="totaltnum"></span> </span><a href="javascript:jcarousel.stepBy('container', 2)" class="next"></a><a class="prev" href="javascript:jcarousel.stepBy('container', -2)"></a></div>

<script src="http://traidatmui-tips.googlecode.com/files/re_jcarousel_yahoo-label.js" type="text/javascript"></script></div>

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

Nếu muốn hiển thị cho tất cả bài viết trên blog bạn thay file JS (re_jcarousel_yahoo-label.js) thành link bên dưới.
http://nguyenhoangnam.googlecode.com/files/re_jcarousel_yahoo_allpost.js.txt

Nếu bạn gặp rắc rối vui lòng để lại comment bên dưới mình sẽ giải đáp giúp bạn.

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



Read more...

Bài viết mới tự động cuộn ngang với 2 nút điều khiển như vnexpress.net

0 nhận xét

» 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 src="http://nguyenhoangnam.googlecode.com/files/JQuery.eva1.2.3.js.txt" type="text/javascript">
</script>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/JQ.jCarouselLite_fixed2.js"></script>

<script type="text/javascript">
$(function() {
$(".jQCarouselLitevn").jQCarouselLitevn({
vnNext: ".vnenext",
vnPrev: ".vneprev",
speed: 500,
auto:5000,
visible:5, //số bài viết hiển thị
scroll:5, //số bài viết 1 lần cuộn qua
easing: "easeinout"
}); });
</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
.jQCarouselLitevn {
float: left;
position: relative;
left: -5000px;
background: #e3e4e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPbUxE7Ar9YO1lrgdD4HqBbeM3Mzzy8KRZMpZmzCxcKSPFJM4FDls2Nx-S3AQMoS3qLdkYpoeA6Awu1nx9e4MkD9q03azmuaaoF0VXcTBIC55qbeg39tK7yW-V5t_QzaztbB9GWd5pdOs/) repeat-x 0px 1px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
height:120px;
}
.carousel a.vneprev{
float: right;
margin:8px 3px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhKqgJS2vWbhmHzNtyftOuyWEl3v882px83YeL_gtE0nhzhbOanqk8o9gIbJquml8ycW3sKnaq_A69gECccTW9MbWmDrlj6rGBsjWhX7_GM4Wf2bn3kfBqZInfWpXK4UDyHnUsnQOmuM/) -10px 0px no-repeat;
}
.carousel a.vnenext {
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhKqgJS2vWbhmHzNtyftOuyWEl3v882px83YeL_gtE0nhzhbOanqk8o9gIbJquml8ycW3sKnaq_A69gECccTW9MbWmDrlj6rGBsjWhX7_GM4Wf2bn3kfBqZInfWpXK4UDyHnUsnQOmuM/) 0px 0px no-repeat;
}
.re_hscrollpost {
font-family:arial;
float:left;
padding:0px 3px 5px 2px;
font-size:12px;
line-height:1.3em;
display:block;
width:200px;
height:87px;
border-right:1px dashed #ddd;
margin-top:-1px;
text-align:left;}

.re_hscrollpost a {
line-height:1.1em;
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#333;}
.re_hscrollpost a:hover{
color:#666;
text-decoration:underline;}

.re_hscrollimg {
border:1px solid #ccc;
margin-right:4px;
float:left;
width:80px;
height:83px;
padding:2px;
float:left;
}

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 code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = true;
summaryPost = 50; //số kí tự phần tóm tắt
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="carousel">
<div class="jQCarouselLitevn">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOEHPxJJdqfAPdRP7ACdz2NgFbI-KsmQEP7NwLBI9l3TJh7TLy0utyTQbEhD3X33vHTkwzVE_dRJmTkW4Bx8V0olI2qeukufaTwpUR9J78_yQ-RUcKTkCgBugqFx8zoOzJE6ceihLJzkw/" style="margin:0px 0px 0px 1px;"/>
<a href="#" class="vnenext"></a><a href="#" class="vneprev"></a>
<script src="http://nguyenhoangnam.googlecode.com/files/rescroll_label.js.txt" type="text/javascript">
</script>
</div> </div>

8. Save tiện ích lại là xong

Nếu muốn hiển thị cho tất cả bài viết bạn thay file JS (rescroll_label.js) trên thành file bên dưới
http://nguyenhoangnam.googlecode.com/files/rescroll_allpost.js.txt


» Cập nhật 12/10/2011

Như các bạn đã thấy với tiện ích ở trên chúng ta sử dụng khá nhiều file JS nên có thể gây một số xung đột với các code có sẵn trên blog của bạn và ảnh hưởng tốc độ load trang. Chính vì thế để có thể giúp các bạn dễ dàng sử dụng tiện ích này thì hôm nay mình xin cập nhật lại thủ thuật này với việc giảm số file JS, và dễ dàng thực hiện hơn. Các bước thực hiện như bên dưới:

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> hoặc trước thẻ </head>
<script type="text/javascript" src="http://nguyenhoangnam.googlecode.com/files/Jquery1.3.2.js.txt"></script>
<script language="javascript" type="text/javascript">
var currenttab = 1;
var maxtab = 3; // số tab cuộn qua ví dụ bạn có 15 bài thì chọn là 3, 20 bài chọn 4...
var round_t = setTimeout("roundHotNews()",5000); //thời gian bài viết tự động scroll
/* <![CDATA[ */ function slide_forward() {
currenttab++;
if (currenttab > maxtab) currenttab = 1;
if (currenttab <= maxtab) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}
function slide_backward() {
currenttab--;
if (currenttab < 1) currenttab = maxtab;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
clearTimeout(round_t);
}

function roundHotNews()
{
if(currenttab == 1) currenttab=2;
else if(currenttab == 2) currenttab=3;
else if(currenttab == 3) currenttab=1;
if (currenttab >= 1) {
var leftpx = (currenttab-1) * (-1040);
$('#slide_animation').animate({ left: leftpx }, 500);
}
round_t = setTimeout("roundHotNews()",5000); //thời gian bài viết tự động scroll
}/* ]]> */
</script>

<style>
.slideHighlight {
color:#000;
width: 1040px; /* độ rộng của tiện ích*/
background: #e3e4e5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPbUxE7Ar9YO1lrgdD4HqBbeM3Mzzy8KRZMpZmzCxcKSPFJM4FDls2Nx-S3AQMoS3qLdkYpoeA6Awu1nx9e4MkD9q03azmuaaoF0VXcTBIC55qbeg39tK7yW-V5t_QzaztbB9GWd5pdOs/) repeat-x 0px 1px;
-moz-border-radius-topright: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
height:120px;}
.slideHighlight .viewpost{float:left;width: 100%;height:120px;overflow:hidden;padding:0px;}
.slideHighlight .viewpost .view {float:left;width: 100%;height:120px;overflow:hidden;position:relative}
#slide_animation{left:0;position:absolute;top:0}
.slide{float:left;width:5000px;}
.vnscrollitem{
font-family:arial;
float:left;
padding:3px 3px 5px 4px;
font-size:12px;
line-height:1.3em;
display:block;
width:200px; /* độ rộng mỗi bài viết*/
height:87px; /* chiều cao của mỗi bài viết*/
border-right:1px dashed #ddd;
margin-top:-1px;
text-align:left;}

.slidebackward{
cursor:pointer;
float: right;
margin:8px 3px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhKqgJS2vWbhmHzNtyftOuyWEl3v882px83YeL_gtE0nhzhbOanqk8o9gIbJquml8ycW3sKnaq_A69gECccTW9MbWmDrlj6rGBsjWhX7_GM4Wf2bn3kfBqZInfWpXK4UDyHnUsnQOmuM/) -10px 0px no-repeat;
}
.slideforward {
cursor:pointer;
float: right;
margin:8px 15px 0px 0px;
width: 13px;
height: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhKqgJS2vWbhmHzNtyftOuyWEl3v882px83YeL_gtE0nhzhbOanqk8o9gIbJquml8ycW3sKnaq_A69gECccTW9MbWmDrlj6rGBsjWhX7_GM4Wf2bn3kfBqZInfWpXK4UDyHnUsnQOmuM/) 0px 0px no-repeat;
}
.vnscrollitem a {
line-height:1.1em;
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#333;}
.vnscrollitem a:hover{
color:#666;
text-decoration:underline;}

.vnscrollitemimg {
border:1px solid #ccc;
margin-right:4px;
float:left;
width:80px;
height:83px;
padding:2px;
float:left;
}</style>

5. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeWHSp05Hbxt4Tfhm2FIwVjRyOMYAHtIOL79t3ld8_iO94mNszKq1Q9sLuN9ZEjHnO-34hyphenhyphenvIF9UpCaD4h0qZZ7gGInJXlEqkdR3R4JhAW2zvctM8lMod4tWLe3D_CAnoW3AUjlzK1jF5/";
showRandomImg = true;
aBold = true;
text = "";
showPostDate = true;
summaryPost = 50; //số kí tự phần tóm tắt
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="slideHighlight">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOEHPxJJdqfAPdRP7ACdz2NgFbI-KsmQEP7NwLBI9l3TJh7TLy0utyTQbEhD3X33vHTkwzVE_dRJmTkW4Bx8V0olI2qeukufaTwpUR9J78_yQ-RUcKTkCgBugqFx8zoOzJE6ceihLJzkw/" style="margin:0px 0px 0px 1px;"/>
<div onclick="slide_forward()" class="slideforward"></div><div onclick="slide_backward()" class="slidebackward"></div>
<div class="viewpost"><div class="view"><div class="slide" id="slide_animation">
<script src="http://nguyenhoangnam.googlecode.com/files/rescroll_label_new.js" type="text/javascript"></script>
</div></div></div></div>

6. Cuối cùng bạn save tiện ích lại là xong

Và mình cũng cung cấp cho các bạn file JS dành cho bạn muốn hiển thị bài viết cho toàn blog.
<script src="http://nguyenhoangnam.googlecode.com/files/rescroll_post_new.js" type="text/javascript"></script>

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



Read more...