Widget SlideShow Tự Động Lấy Bài chuẩn HTML cho blgspot

12/14/2015

Tiện ích này hoàn toàn tự động lấy hình ảnh kèm tiêu đề bài viết và tổng số nhận xét của những bài mới trên blog.Ta cũng có thể trình chiếu ...

+ +

Tiện ích này hoàn toàn tự động lấy hình ảnh kèm tiêu đề bài viết và tổng số nhận xét của những bài mới trên blog.Ta cũng có thể trình chiếu theo bài mới của từng nhãn,ta chỉ việc sửa đổi đôi chút code cho phù hợp với blog của các bạn.
Widget SlideShow Tự Động Lấy Bài chuẩn HTML cho blgspot
Widget SlideShow Tự Động Lấy Bài chuẩn HTML cho blgspot

Nếu dùng cho toàn blog thì ảnh đại diện của mỗi bài viết nên để kích thước lớn thì khi lên hình ảnh không bị vỡ hạt(ảnh mới nét)
Để tiến hành tạo tiện ích này có 2 cách
Can thiệp vào template(chỉnh sửa HTML)
Không can thiệp vào template

Cách 1(chỉnh sửa HTML)

Đăng nhập Blog > Chọn chỉnh sửa HTML>Tìm tới thẻ ]]></b:skin> và dán đoạn CSS sau trước nó:
#slider,
#sliderContent,
#slider img {
width:420px; /* Chiều rộng slideshow */
height:270px; /* Chiều cao slideshow */
}

#slider {
margin:0 auto 10px;
border:2px solid white;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXtsG0P39nS8-_vC1SY2XkHihDFGZeXtjQ6U1R3ixoR1hn2VQt7WK4agJVGH3m8zEzFpBlYSub0KK-qffeDA1p-6cnfgEMQJsfpWkihAe5nvgtlkKEdpqFNJb17o2846LOmO1LoPB0KYu/s16/nivo-loading.gif') no-repeat 50% 50%;
position:relative;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
overflow:hidden;
}

#sliderContent {
position:absolute;
top:0;
left:0;
margin:0 0;
padding:0 0;
overflow:hidden;
}

#slider img {
border:none;
padding:0 0;
margin:0 0;
width:100%;
height:auto;
outline:none;
}

.sliderImage {
list-style:none;
margin:0 0;
padding:0 0;
width:100%;
display:none;
}

.sliderImage span {
position:absolute;
left:0;
right:0;
bottom:0;
height:auto;
font:normal 11px Arial,Sans-Serif;
color:white;
background-color:black;
opacity:.8;
filter:alpha(opacity=80);
padding:7px 10px 12px;
display:none;
}

.sliderImage span a {
font-size:12px;
font-weight:bold;
color:white;
text-decoration:none;
}
Tiếp tục tìm tới thể </head> và dán đoạn code sau trước nó: 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <script src='https://krdautocrazyblog.googlecode.com/files/S3Slider.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(window).bind('load', function() { $('#slider').css('background-image', 'none').s3Slider({ timeOut:3000 }); }); //]]> </script>

Lưu mẫu lại
Bây giờ là công việc thêm một tiện ích
Vào bố cục chọn thêm 1 tiện ích HTML/Javascript và dàn đoạn code sau vào và lưu lại
<script type="text/javascript">
var showPostDate_g = true,
slideOpenNewTab = false,
idMode = true,
slidebyLabels = false,//Nếu theo nhãn thì để true
slideLabelName = "Nhãn",
thumbWidth = 420,
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbATR_BPevz58ohRSEWpPgWE5R4OaR3rrX-hRktc7J_g_iLGTKKkpE5mgjN6_VC0OwHOIwgEUNfcqRP5P_g2Lvn4fM86DFzjR6W0Nb1bv6-QX1A_4j02bt1Stl5N_H_fL3NStg1LzA3Em/s88/dte-darkblue.png",//Ảnh đại diện khi bài ko có ảnh
text = "Comments",
numposts_g = 10,//Số bài cần trình chiếu
home_page = "http://www.ngocanhblog.com/";//URL Blog
</script>
<script src="https://krdautocrazyblog.googlecode.com/files/autoContent4s3Slider.js" type="text/javascript"></script>
Thay http://www.ngocanhblog.com/ thành URL blog của bạn
Để thay đổi kích thước SlideShow các bạn thay đổi thông số trong đoạn code sau
>#slider,
#sliderContent,
#slider img {
width:420px; /* Chiều rộng slideshow */
height:270px; /* Chiều cao slideshow */
}

Cách 2 (không can thiệp vào template)

Để thuận tiện cho những người tính tình sớm nắng chiều mưa lúc thích lúc không.Nên có thể gộp code vào 1 tiện ích nếu không thích thì xóa bỏ tiện ích không cần can thiệp vào template.
Vào bố cục chọn thêm một tiện ích HTML/Javascript và dán đoạn code sau vào rồi lưu lại
<style type="text/css">
#slider,
#sliderContent,
#slider img {
width:620px; /* Chiều rộng slideshow */
height:500px; /* Chiều cao slideshow */
}

#slider {
margin:0 auto 10px;
border:2px solid white;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXtsG0P39nS8-_vC1SY2XkHihDFGZeXtjQ6U1R3ixoR1hn2VQt7WK4agJVGH3m8zEzFpBlYSub0KK-qffeDA1p-6cnfgEMQJsfpWkihAe5nvgtlkKEdpqFNJb17o2846LOmO1LoPB0KYu/s16/nivo-loading.gif') no-repeat 50% 50%;
position:relative;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
overflow:hidden;
}

#sliderContent {
position:absolute;
top:0;
left:0;
margin:0 0;
padding:0 0;
overflow:hidden;
}

#slider img {
border:none;
padding:0 0;
margin:0 0;
width:100%;
height:auto;
outline:none;
}

.sliderImage {
list-style:none;
margin:0 0;
padding:0 0;
width:100%;
display:none;
}

.sliderImage span {
position:absolute;
left:0;
right:0;
bottom:0;
height:auto;
font:normal 11px Arial,Sans-Serif;
color:white;
background-color:black;
opacity:.8;
filter:alpha(opacity=80);
padding:7px 10px 12px;
display:none;
}

.sliderImage span a {
font-size:12px;
font-weight:bold;
color:white;
text-decoration:none;
}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='https://krdautocrazyblog.googlecode.com/files/S3Slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).bind('load', function() {
$('#slider').css('background-image', 'none').s3Slider({
timeOut:3000
});
});
//]]>
</script>
<script type="text/javascript">
var showPostDate_g = true,
slideOpenNewTab = false,
idMode = true,
slidebyLabels = false,//Nếu theo nhãn thì để true
slideLabelName = "Nhãn",
thumbWidth = 420,
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbATR_BPevz58ohRSEWpPgWE5R4OaR3rrX-hRktc7J_g_iLGTKKkpE5mgjN6_VC0OwHOIwgEUNfcqRP5P_g2Lvn4fM86DFzjR6W0Nb1bv6-QX1A_4j02bt1Stl5N_H_fL3NStg1LzA3Em/s88/dte-darkblue.png",
text = "Comments",
numposts_g = 10,//Số bài trình chiếu
home_page = "http://www.ngocanhblog.com/";//URL Blog
</script>
<script src="https://krdautocrazyblog.googlecode.com/files/autoContent4s3Slider.js" type="text/javascript"></script>
Ok vậy là các bạn có thể hoàn toàn thực hiện đc theo các bước trên mình hướng dẫn rồi đúng không nào .
Thủ thuật này mà các bạn nào làm trang blog về ảnh đẹp thì thật tuyệt vời .
Chúc các bạn có những widget đẹp và ấn tượng đối với trang web và độc giả của các bạn .
DMCA.com Protection Status

Chia sẻ:

Ngoc anh blog

Là một người yêu thích công nghệ thông tin và hiện đang là một Doctor Mobi, Đam mê blog.

Nhận cập nhật các bài viết mới của Ngocanhblog

Có thể bạn quan tâm

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ chữ in đậm
  • - Để viết chữ in nghiêng hãy sử dụng thẻ chữ in nghiêng
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).

:)
:~
;B
:|
8-)
:-((
:$
:X
:Z
:((
:-|
:-H
:P
:D
:o
:(
:+
:Q
;-P
;-D
;D
;O
;G
|-)
:!
:L
:-D
:;
;F
;-S
;-?
;-X
:-F
;L
;XX
:-bye
:wipe
:-dig
|o|
|-(
B-)
:-L
:-R
:-O
|-|
P-(
:--|
X-)
:*
;-A
8*
/-sl
/-f
/-lv
/-brk
/-cf
/-bd
/-st
/-wk
/-sh
/-v
/-tks
/-no
/-ok
Subscribe to: Post Comments (Atom)