SlideShow cho Blogger

Cũng giống như một số Slideshow tự động trình chiếu các bài viết gần đây đã chia sẻ ở các bài trước.Tiện ích này chỉ khác về hình thức nghĩa là bình mới rượu cũ,nó thay đổi cách bố trí vị trí của tiêu đề và phần tóm tắt trích dẫn.

Chỉ thêm một chức năng mới là có thể trình chiếu cho các bài viết ngẫu nhiên(Random posts)
Xem thử DEMO

Làm Thế Nào Để Thêm Tiện Ích Này Vào Blogger?

Có 3 bước cần làm là
Thêm CSS
Thêm Javascript
Thêm HTML
Để đơn giản ta gộp 3 công đoạn trên thành 1 lần thêm 1 tiện ích HTML/Javascrip
Thêm này<style type="text/css">
#slide-container {
height: 360px;/* Chiều cao */
position: relative;
width: 480px;/* Chiều rộng */
}

#slider {
height: 360px;/* chiều cao */
left: 25px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 480px;/* Chiều rộng */
font-family: calibri;
}

.slide-desc {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKs-9-jQGieJmgmn5fj-Jp-bSuUUTVcJNWPYaL7LSTz1GDYYxDAzQRLWQu1hOin_3Cdea1aB5GXXuoxIosyX5MCcyc_VqVPpLs60syhb57pPgjwCfREA2PfTYWBXjw-kMrPXzEZYBkPyV/s1600/darkbg.png) repeat scroll 0 0;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0px;
text-align: left;
top: 0;
width: 200px;
z-index: 99999;
}

.slide-desc h2 {
display: block;
}

.crosscol .widget-content {
position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
margin: 0;
padding: 0;
list-style: none;
}

#slider2 {
margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
width: 480px;
height: 360px;
overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
display: block;
width: 30px;
height: 77px;
position: absolute;
left: -30px;
text-indent: -9999px;
top: 71px;
z-index: 1000;
}

#nextBtn, #slider1next {
left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
display: block;
height: 77px;
left: 0;
position: absolute;
top: 132px;
width: 30px;
z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZzssKc3eaZd_jYQOX64qVPl4ZmBvVJzL_xZOO8QetEYXpr0X6ZLNQxwPV04M8hV-_q6HyMwbYivwKCoFd3JaZNGO1MJf6eoiyS9uQq52ytc2SOFOxTUspZOENEEOv6uFE0E0ylNn41WzE/s1600/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZ1ASAK5rSewT_jY_iXPGkXcaaujTwsG-b9A-u-piQzIJGsii0mdzq2XwDm1prMBlNELd84uMBnf5SVtajI8eS37efMUYlFmi1X8ljs5ZEEkg15d3KR5xLs0lM8f8B4vtEM8TVNtSEymY/s1600/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
margin: 1em 0;
padding: 0;
height: 28px;
}

ol#controls li {
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
line-height: 28px;
}

ol#controls li a {
float: left;
height: 28px;
line-height: 28px;
border: 1px solid #ccc;
background: #DAF3F8;
color: #555;
padding: 0 10px;
text-decoration: none;
}

ol#controls li.current a {
background: #5DC9E1;
color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
outline: none;
}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://blogdautocrazy.googlecode.com/files/easySlider1.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<div id="slider">
<script style="text/javascript" src="http://blogdautocrazy.googlecode.com/files/easySlider.js"></script>
<script style="text/javascript">
var numposts_gal = 6;//Số bài trình chiếu
var numchars_gal = 50;//Số ký tự trích dẫn
var random_posts = false; // random posts.Nếu để chế độ Random thì đổi false thành true
</script>

<script src="http://huongtoicongnghe.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Thay http://huongtoicongnghe.blogspot.com/ thành URL Blog của bạn
Nếu blog đã có thư viện jquery thì bỏ đi đoạn<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>