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

Xem Demo

☼ Bắt đầu thủ thuật này

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>

=> Trước tiên các bạn nên tải các File Js về TẠI ĐÂY sai đó Upload lên host riêng để sử dụng lâu dài.


<script type="text/javascript" src="http://namknablog.googlecode.com/files/Jquery1.3.2.js"></script>


<script type="text/javascript" src="http://namknablog.googlecode.com/files/recent_jcarousel_yahoo.js"></script>


<script type="text/javascript">

jcarousel.setup({

iner',
 beltclass: 'belt

galleryid: 'cont
a',
 contentclass: 'content',

500, wraparound:true, wrapbehavior:'pushpull', persist:false},

contentbehavior: {speed
:

defaultbuttons: {enable: false, moveby: 1, leftnav: ['', -10, 300], rightnav: ['', -10, 100]},

statusvars: ['firstnum', 'lastnum', 'totaltnum'],
 contenttype: ['inline']
})
</script>


width: 

<style type='text/css'>
.allcontainer {
font-size:12px;
font-family:arial;
color:#090404;

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;

n-top:0px;
w

padding:0px;
marg

iidth: 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;}

{text-shadow:1px 1px 1px #ccc;color:#000;}
.content h2 

.content h2 
aa:hover{color:#666;}

.containerImg{float:left;
margin-right:5px;

bsolute;
lef

padding:2px;
border: 1px solid #ccc;}
.jcarousel .belt{
position: 
at: 0;
top: 0;
}
.jcarousel .content{
float: left;
overflow: hidden;

h: 20px;
height: 24px;
f

margin: 0px 6px 5px 5px;
width: 312px;
}
.prev{
margin-top:-5px;
wid
tloat:right;
padding:6px;

6.googleusercontent.com/-hessCUkLH14/TkNckajRUzI/AAAAAAAAAf4/ACR9tMA6ZS4/nav.png) 0px 0px no-repeat;}
.next{
margin-top:-5px;
w

background: url(https://l
hidth: 27px;
height: 24px;
float:right;
padding:6px;
background:
 

AAAAAf4/ACR9tMA6ZS4/nav.png)
 -32px 0px no-repeat;}
</style>

url(https://lh6.googleusercontent.com/-hessCUkLH14/TkNckajRUzI/AAA

A

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();

6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";
imgwidth = 80; 

imgr[0] = "http://l

h//độ 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;

ét";
showPostDate 

text = "Nhận 

x= 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://namkna.blogspot.com/"; //thay thành địa chỉ blog của bạn


</script>


div class="allcontainer">


<<span id="container-paginate">

<img

https://lh3.googleusercontent.com/-NEniU-ywjyM/TkOcjWA2QLI/AAAAAAAAAgU/Ksr677PeioI/opencircle.png"
data

src=
"-over="https://lh5.googleusercontent.com/-dYVb8IRGIlw/TkOcjcIMvJI/AAAAAAAAAgU/lVbrLDaOdQ0/graycircle.png"

e.png"
 data-moveby="2" /></span>

<div style="float: right;text-align:right;">
<span
 style="margin-bottom: -8px

data-select="https://lh3.googleusercontent.com/-eAd5my2yXHs/TkOcju5B0KI/AAAAAAAAAgU/4nBRatFY7cM/closedcirc
l;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://namknablog.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://namknablog.googlecode.com/files/re_jcarousel_yahoo_allpost.js

Nếu bạn muốn di chuyển phần phân trang (các nút tròn) xuống phía dưới các bài viết thì bạn di chuyển đoạn code bên dưới (ở bước 7).


<span id="container-paginate">

<img 

ttps://lh3.googleusercontent.com/-NEniU-ywjyM/TkOcjWA2QLI/AAAAAAAAAgU/Ksr677PeioI/opencircle.png"
 
dat

src="
ha-over="https://lh5.googleusercontent.com/-dYVb8IRGIlw/TkOcjcIMvJI/AAAAAAAAAgU/lVbrLDaOdQ0/graycircle.png"
 

ng"
 data-moveby="2" /></span>

data-select="https://lh3.googleusercontent.com/-eAd5my2yXHs/TkOcju5B0KI/AAAAAAAAAgU/4nBRatFY7cM/closedcircle.

p

Xuống phía dưới phần JS như bên dưới


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

<span id="container-paginate">

erco

<img
 
src="https://lh3.googleu

sntent.com/-NEniU-ywjyM/TkOcjWA2QLI/AAAAAAAAAgU/Ksr677PeioI/opencircle.png"


ta-over="https://lh5.googleusercontent.com/-dYVb8IRGIlw/TkOcjcIMvJI/AAAAAAAAAgU/lVbrLDaOdQ0/graycircle.png"
 

d
a

ta-select="https://lh3.googleusercontent.com/-eAd5my2yXHs/TkOcju5B0KI/AAAAAAAAAgU/4nBRatFY7cM/closedcircle.png"
 

d
adata-moveby="2" /></span>



</div>