Cách thêm tiện ích Recent Posts (Bài mới đăng) cho blogspot
Hello các bạn,
Hôm nay mình copy bài này về cho bạn nào có nhu cầu thêm recent post cho bogspot của bạn đỡ phải nhọc công tìm kiếm nhé. (Tại mình cũng mò mẫm nhiều thấy ưng mỗi cái này). Đẹp và chuyển động mượt mà nhờ hiệu ứng cuộn jQuery.
Các bạn xem demo tại đây nhé. (Phía bên phải trang có ngay đấy).
OK, let's start.
Bước 1:
Vì widget này dùng jQuery nên trước hết bạn cần add thư viện jQuery vào blog của mình. (Bỏ qua bước này nếu blog của bạn đã có thư viện jQuery)
- Đăng nhập Blogger.com và phần quản trị blog của bạn và chọn mục MẪU
- Click vào chỉnh sửa HTML
- Tìm trong mẫu của bạn code </head> .(Bạn nhấp chuột vào trong template rồi bấm ctr+f rồi điền vào </head> là ra ngay)
- Tiếp theo bạn copy đoạn code dưới đây và paste vào trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> - Lưu lại mẫu
- Tiếp tục đến với bước 2 :D
Vẫn trong mục quản trị blog của bạn, thực hiện như sau:
- Chọn phần bố cục
- Thêm tiện ích
- Cửa sổ mới hiện lên, bạn kéo xuống và chọn phần Html/JavaScript
<style type="text/css" media="screen">
<!--
#santosh143-widget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#santosh143-widget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
font-family: Tahoma,Arial,verdana, sans-serif;
}
#santosh143-widget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTx4xDHPfblS8gKRMFQXpSSBAVQzg0eygU3bLfLh9IJe_mLOtzDw0juTMfGSqLu00qSnEZzwG2-pRiJCZsPNC10Fti7FLDetSzfIN0s6gQM4vHk2jEJqjvApvRnGiXWD1uoktBB97Kg8/s1600/santosh143.com-post.jpg) repeat-x;
border: 1px solid #ddd;
font-family: Tahoma,Arial,verdana, sans-serif;
}
#santosh143-widget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
font-family: Tahoma,Arial,verdana, sans-serif;
}
#santosh143-widget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#santosh143-widget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#santosh143-widget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}
/* ========== Scrolling Recent Posts Widget ======== */
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzKTzD7plO4X2lHGc6LxTYGxkAA6skXH9xg6W8hwyq7UHPd7HNLAZiPNRwwRp7b0K2v8sFblo2C-fQyGj3d0Q05d2vKlT_S7S_Us-JJkoASF0qYr41-yobkOnbqATdkQJ0-kHvWsYT68/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzKTzD7plO4X2lHGc6LxTYGxkAA6skXH9xg6W8hwyq7UHPd7HNLAZiPNRwwRp7b0K2v8sFblo2C-fQyGj3d0Q05d2vKlT_S7S_Us-JJkoASF0qYr41-yobkOnbqATdkQJ0-kHvWsYT68/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzKTzD7plO4X2lHGc6LxTYGxkAA6skXH9xg6W8hwyq7UHPd7HNLAZiPNRwwRp7b0K2v8sFblo2C-fQyGj3d0Q05d2vKlT_S7S_Us-JJkoASF0qYr41-yobkOnbqATdkQJ0-kHvWsYT68/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzKTzD7plO4X2lHGc6LxTYGxkAA6skXH9xg6W8hwyq7UHPd7HNLAZiPNRwwRp7b0K2v8sFblo2C-fQyGj3d0Q05d2vKlT_S7S_Us-JJkoASF0qYr41-yobkOnbqATdkQJ0-kHvWsYT68/s1600/santosh143.com-no-thumbnail.png.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzKTzD7plO4X2lHGc6LxTYGxkAA6skXH9xg6W8hwyq7UHPd7HNLAZiPNRwwRp7b0K2v8sFblo2C-fQyGj3d0Q05d2vKlT_S7S_Us-JJkoASF0qYr41-yobkOnbqATdkQJ0-kHvWsYT68/s1600/santosh143.com-no-thumbnail.png.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://nguoitamsu.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="santosh143-widget">
<script src='http://santosh143.googlecode.com/svn/spyeffect.js' type='text/javascript'></script>
</div>
<div helvetica="helvetica" id="mashable" sans-serif="sans-serif" style="background: #EBEBEB; border-image: initial; border-top: 1px solid white; border: 1px solid #EBEBEB; font-size: 10px; padding: 1px 8px 1px 3px; text-align: right;">
</div>
----------------------------------------------------------
Nhớ thay link màu đỏ bằng link blog của bạn.
intervalspy=4000;Thay đổi thời gian Scroll. tính bằng ms
numposts = 10; Số bài viết muốn scroll.
limitspy=4;Số lượng bài viết hiển thị trong widget.
Độ rộng của widget thì các bạn thay đổi ở width trên css đầu đoạn code nhé.
----------------------------------------------------------
Chúc các bạn thành công và nhớ khoe blog xinh đẹp nhé.
Thân ái và quyết thắng.
Ai mua chung cư alo hotline mình nhé, giới thiệu cũng đc :D
Website mua bán chung cư : www.chonmuacanho.com
Nếu các bạn cần sửa máy tính tại nhà, Hãy đến với dịch vụ sửa máy tính tại nhà của Trường Thành bạn nhé!
Trường Thành chuyên: Sửa máy tính tại nhà, sửa máy in tại nhà, , sửa chữa laptop đổ mực máy in tại nhà, sửa máy tính tại nhà hà nội chuyên nghiệp, giá rẻ
Trường Thành Computer
Địa chỉ: 72 Nguyến Trãi–Thanh Xuân– Hà Nội
Hotline: 096.888.1491 - Phone: 04.66.86.1911
Mail: pctruongthanh@gmail.com
Khiếu nại kỹ thuật viên: 096.398.7509 - Mr.Thành
