Trang chủ
Để hiểu rõ hơn, các bạn bấm vào xem thử để trải nghiệm nhat
Đầu tiên, bạn đăng nhập vào Blog > Chọn Chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm, gõ vào hộp đó lệnh<head> và dán code phía dưới vào sau dòng lệnh <head>
<script src='http://traidatmui-tips.googlecode.com/files/content_slider.js' type='text/javascript'/>
Tiếp tục, bạn gõ vào ô dòng lệnh: ]]></b:skin> và dán code phía dưới vào trên dòng lệnh ]]></b:skin>
.sliderwrapper{
position: relative;
overflow: hidden;
border: 10px solid #000099;
border-bottom-width: 6px;
width: 400px; /*Độ rộng của khung*/
height: 250px; /*Chiều cao của khung*/
}
.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
padding: 5px;
background: #ddd; /*màu nền của khung chứa các nội dung bên trong */
width: 390px; /*Độ rộng của khung chứa các nội dung bên trong */
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 400px; /*Độ rộng của thanh phân trang bên dưới nội dung*/
text-align: center;
background: #000099; /*Màu nền của thanh phân trang bên dưới nội dung*/
padding: 5px 10px;
}
.pagination a{
padding: 0 5px;
border:1px solid #fff;
text-decoration: none;
color: #00007D; /*Màu text của thanh phân trang bên dưới nội dung*/
background: #ddd; /*Màu nền của text thanh phân trang bên dưới nội dung*/
}
.pagination a:hover, .pagination a.selected{
color: #fff;
background: #3333cc;
}
position: relative;
overflow: hidden;
border: 10px solid #000099;
border-bottom-width: 6px;
width: 400px; /*Độ rộng của khung*/
height: 250px; /*Chiều cao của khung*/
}
.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
padding: 5px;
background: #ddd; /*màu nền của khung chứa các nội dung bên trong */
width: 390px; /*Độ rộng của khung chứa các nội dung bên trong */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 400px; /*Độ rộng của thanh phân trang bên dưới nội dung*/
text-align: center;
background: #000099; /*Màu nền của thanh phân trang bên dưới nội dung*/
padding: 5px 10px;
}
.pagination a{
padding: 0 5px;
border:1px solid #fff;
text-decoration: none;
color: #00007D; /*Màu text của thanh phân trang bên dưới nội dung*/
background: #ddd; /*Màu nền của text thanh phân trang bên dưới nội dung*/
}
.pagination a:hover, .pagination a.selected{
color: #fff;
background: #3333cc;
}
Bạn có thể thay thế màu nền, kích thước khung...theo các chú thích ghi trong code
Cuối cùng, bấm Lưu mẫu và trở về thiết kế > thêm tiện ích HTML/Javacript rồi dán các code phía dưới vào
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Nội dung 1 muốn hiển thị nhập vào đây
</div>
<div class="contentdiv">
Nội dung 2 muốn hiển thị nhập vào đây
</div>
<div class="contentdiv">
Nội dung 3 muốn hiển thị nhập vào đây
</div>
<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây
</div>
</div>
<div id="paginate-slider1" class="pagination"></div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
<div class="contentdiv">
Nội dung 1 muốn hiển thị nhập vào đây
</div>
<div class="contentdiv">
Nội dung 2 muốn hiển thị nhập vào đây
</div>
<div class="contentdiv">
Nội dung 3 muốn hiển thị nhập vào đây
</div>
<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây
</div>
</div>
<div id="paginate-slider1" class="pagination"></div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
Bây giờ bạn nhập nội dung mà mình muốn hiển thị vào, code này có 4 nội dung, nếu muốn thêm nhiều nội dung hơn thì bạn copy code này
<div class="contentdiv">
Nội dung 4 muốn hiển thị nhập vào đây </div>
dán vào phía dưới sau mỗi dòng nội dung theo mẫu
Nguồn: Trai đất mũi
Thủ thuật computer
Kho phim, nhạc tổng hợp
Giaro1961-Ảnh động
Vudinhhao
Kimduccz
Achro-Ảnh động
Phamtuankietdn
CĐQTKD5A
BonsaiKutu
Karaoke online
Căn hộ của bạn
Blog'Thanh Truyền
Kiếm tiền trên mạng
vloghayvl
August Pink
GiapQb blog
Chính Trực Blog
Tin tức, giải trí, thủ thuật
Thủ thuật, điện tử, tin học...
Phố bất động sản
Căn hộ The Imperia
Vinet360Pro
Thi công bảng hiệu
Góc nhìn mới
Hoang Huu blog-Chia sẻ thủ thuật.
In PP giá rẻ
Shimi Blog
Blog Hà Công Quốc
Con tin Chúa ơi!
Avatar, tải game avatar
Tải game hay chơi game hot
In pp giá rẻ
DigitalOcean coupon
Thủ thuật máy tính
19 nhận xét:
Ví dụ ở trên chỉ để cho bạn tháy tiện ích thay đổi mà thôi, còn muốn làm y như của ví dụ này thì bạn phải tạo nhãn cho nó, bạn đọc thêm bài: HIỂN THỊ TIÊU ĐỀ CÁC BÀI TRONG NHÃN (KIỂU 1), sau đó chép HTML của nó dán vào là sẽ giống y ví dụ trên
Tôi rất sẳn sàng hỗ trợ bạn, bạn muốn trang trí Blog của bạn như thế nào thì cứ miêu tả cụ thể và gởi ID và password cho mình, mình sẽ làm theo yêu cầu của bạn
giúp mình với bạn ơi! muốn tạo hiệu ứng cho blogspot, mình làm theo hướng dẫn của bạn nhưng khong thanh cong!!!!!
Bạn muốn làm hiệu ứng nào, nêu cụ thể đi mình sẽ hướng dẫn cho bạn
Dũng có nick Gmail gửi cho mình để mình để mình cấp quyền quãn trị cho Dũng hổ trợ thêm cho mình về phần : Menu ngang xổ dọc, mặc định xuất bản bài đăng dạng có tiêu đề có tóm tắt có hình ảnh,...
Cám Ơn dũng Trước...
http://suyniemloichua.blogspot.com/
Địa chỉ mail của mình là dungheineken@gmail.com
Dũng Giúp Mình Phần Menu xổ dọc trước nha !
phần xuất bản bài đăng dạng thumb mình làm dược rồi !
Cám ơn Dũng trước nha !
Bạn phải gởi cho tôi giao diện Blog của bạn thì mình mới chỉnh sửa được (vì phải can thiệp vào mã nguồn HTML), còn bạn cấp quyền là để cho tôi đăng bài mà thôi, ngoài ra không chỉnh sửa gì được (vì bạn là quản trị mà)
Mình cấp quyền quãn trị cho Dũng rùi đó, trước tiên Dũng giúp mình tạo menu ngang xổ dọc nha, lần trước mình có làm theo nhưng nó không hoạt động được.
Bạn không hiểu rồi???!!!!
Quyền quản trị chỉ là để đăng bài thôi, ngoài ra không thể chỉnh sửa gì về giao diện được cả.
Để chỉnh sửa bạn lựa chọn 2 điều kiện sau:
1/ Gởi tôi giao diện bạn đang sử dụng.
2/ Hoặc là gởi tôi tên đăng nhập và password blog bạn cần chỉnh sửa (mail của tôi là dungheineken@gmail.com)
Trong thời gian hoàn thiện blog, mình có tạo mục trao đổi và thảo luận bên trang suyniemloichua. có gì cần trao đổi thì Dũng viết vào đó nha !để mình và Dũng tiện trao đổi !
Ok, mình đã trả lời cho Hoan rồi đó (trong mục trao đổi ở blog của Hoan)
Các ơn Dũng nhiều nhé !!! còn mục kia chắc có lễ từ từ làm cũng được!!!
Rất biết ơn vì sự nhiệt tình của Dũng !!!
Khi nào có việc cần giúp đỡ mình liên lạc với Dũng nha !!!
Ok, rất sẳn lòng
Chúc bạn vui
Anh à, mình gán nhãn vào dòng lệnh nào vậy Anh? chúc Anh một đêm thiệt ngon giấc và bình an luôn đồng hành cùng Anh!
Trước tiên em phải tạo nhãn cho bài viết, tiếp sau đó em phải dùng thủ thuật tạo các tiện ích chứa đựng nhãn, sau cùng copy mã tiện ích đó dán vào dòng lệnh màu đỏ : NỘI DUNG HIỂN THỊ NHẬP VÀO ĐÂY...
Đăng nhận xét