Bài viết mới với hiệu ứng trượt mềm mại

Demo hình ảnh

Live Demo

Translate to english

Tiện ích bài viết mới với hiệu ứng trượt nhẹ nhàng với nhiều tùy chỉnh của tác giả blog DTE. Bạn có thể tùy chỉnh ẩn hoặc hiện hình ảnh thu nhỏ, nhận xét, hiệu ứng trượt... và bạn có thể xem demo bên trên để hiểu rõ hơn về tiện ích thú vị này

Cách Thực Hiện

Rất đơn giản, bạn chỉ việc tạo một widget HTML/Javascript mới tại vị trí bạn muốn hiển thị widget này và sử dụng đoạn code sau

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style scoped="scoped">
.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  margin:0 auto;
}
.spy-outer h2 {
  margin:0;
  padding:5px 10px;
  background-color:#008800;
  background-image:-webkit-linear-gradient(#008800,#037103);
  background-image:-moz-linear-gradient(#008800,#037103);
  background-image:-ms-linear-gradient(#008800,#037103);
  background-image:-o-linear-gradient(#008800,#037103);
  background-image:linear-gradient(#008800,#037103);
  color:white;
  font:normal bold 12px/normal Helmet,Freesans,Sans-Serif;
  text-transform:none;
  text-shadow:0 1px 2px black;
}
.spy {
  margin:0;
  padding:0;
  font:normal normal 10px/12px Helmet,Freesans,Sans-Serif;
  color:#333;
  overflow:hidden;
}
.spy li {
  list-style:none;
  text-align:left;
  margin:0;
  padding:5px 7px;
  background-color:#AABD30;
  background-image:-webkit-linear-gradient(#AABD30,#9BB009);
  background-image:-moz-linear-gradient(#AABD30,#9BB009);
  background-image:-ms-linear-gradient(#AABD30,#9BB009);
  background-image:-o-linear-gradient(#AABD30,#9BB009);
  background-image:linear-gradient(#AABD30,#9BB009);
  border-top:1px solid #A7D101;
  border-bottom:1px solid #899D00;
  word-wrap:break-word;
  overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
  font-weight:bold;
  color:#409540;
}
.spy-header {
  font:normal bold 12px/14px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  display:block;
  color:yellow;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  /*
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  */
}
.spy-header:hover {
  color:white;
  text-decoration:underline;
}
.spy-summary {
  margin-top:5px;
  overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
  float:right;
  margin:0 0 2px 7px;
  padding:0;
  width:72px;
  height:72px;
  border:4px solid #899D00;
  background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1EIwEvc1x6xRxEbvuwxAa3V7SVBTyiB-nSlhtb9-66V7DAqQYuT9C5dgmKhnuh__wmifoZv19gLUdhcrtrJ9wkU_aqCtgfODCuFqXQFty44-o3-rgGp3ig8fjvY-4NVsSOXw0N-4kc1u/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.7);
  box-shadow:0 0 2px rgba(0,0,0,.7);
}
.spy li img {
  border:none !important;
  float:none;
  margin:0;
  padding:0;
  display:none;
}
.spy-outer .loading {
  display:block;
  padding:10px;
  background-color:#fafafa;
}
</style>
<div id="spy-outer" class="spy-outer"><span class="loading">Memuat...</span></div>
<script>
var spy_config = {
    widgetTitle: '<h2>Recent Post</h2>',
    url:'http://'+window.location.hostname,
    containerId: 'spy-outer',
    numPost: 10,
    numChars: 100,
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmbxDI94vS_FR4wJ6I3dfGTLpo_vQadhKB119REKIuEXP5dY-ngeo7SN1BcW9KKZfqkmUswmxMjCbpVUy7cXNaNAYIcEer_sok3n2BfScbIBNcMx7rdvj-kew6JDs95fMmbm4_bf0ExSW/s1600/noimage.png',
    showSummaries: true,
    showThumbnails: true,
    showPostDate: true,
    showComments: true,
    newTabLink: false,
    animatedRecentPost: true,
    jsonCallback: 'recentpost_spy',
    newsTicker: {
        visible: 4,
        interval: 3000,
        speed: 600
    }
};
</script>
<script src="https://googledrive.com/host/0Bz_65BAr9KCZbUpFSU12WGR5RGM"></script>

• Tiện ích trên lấy màu xanh lá cây làm chủ đạo, nếu bạn nào thấy không phù hợp thì tự thay đổi ở đoạn CSS nhé
• Xóa đoạn code màu đỏ đi nếu template bạn đã có jQuery

Tùy Chọn

Tùy chọn	Thông tin
widgetTitle	Title của widget, bạn có thể đổi thành Bài viết mới nếu muốn
url	Để mặc định.
containerId	Để mặc định.
numPost	Số bài viết hiển thị (phải lớn hơn newsTicker => visible).
numChars	Số ký tự tóm tắt hiển thị nếu bạn để showSummaries là true.
monthNames	Tên các tháng trong năm.
noImage	URL hình ảnh cho bài viết không có hình ảnh.
showSummaries	Thay đổi thành false nếu bạn không muốn hiển thị nội dung tóm tắt.
showThumbnails	Thay đổi thành false nếu bạn không muốn hiển thị hình ảnh thu nhỏ.
showPostDate	Thay đổi thành false nếu bạn không muốn hiển thị ngày tháng đăng bài.
showComments	Thay đổi thành false nếu bạn không muốn hiển thị số lượng comment.
newTabLink	Thay đổi thành true nếu bạn muốn mở cửa sổ mới mỗi khi click vào link trong tiện ích.
animatedRecentPost	Thay đổi thành false nếu bạn muốn tắt hiệu ứng trượt.
newsTicker => visible	Số lượng bài viết bạn muốn hiển thị trên widget. Phải chắc chắn nhỏ hơn numPost.
newsTicker => interval	Khoảng thời gian để di chuyển bài viết, 3000=3s.
newsTicker => speed	Tốc độ chuyển bài viết, giá trị càng cao thì tốc độ di chuyển càng chậm.

Xem Tiếng Việt

Widgets that look green above is the widget recent post / recent posts with so many choices. You can hide pictures, comments, moon rising and summary or otherwise, display it. Determines whether this widget will be animated or not can also be done. Just follow the steps below and learn table configuration:

How to add Recent Posts widget?

Add a page element HTML / JavaScript , and then copy all of this code and place it in the form:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style scoped="scoped">
.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  margin:0 auto;
}
.spy-outer h2 {
  margin:0;
  padding:5px 10px;
  background-color:#008800;
  background-image:-webkit-linear-gradient(#008800,#037103);
  background-image:-moz-linear-gradient(#008800,#037103);
  background-image:-ms-linear-gradient(#008800,#037103);
  background-image:-o-linear-gradient(#008800,#037103);
  background-image:linear-gradient(#008800,#037103);
  color:white;
  font:normal bold 12px/normal Helmet,Freesans,Sans-Serif;
  text-transform:none;
  text-shadow:0 1px 2px black;
}
.spy {
  margin:0;
  padding:0;
  font:normal normal 10px/12px Helmet,Freesans,Sans-Serif;
  color:#333;
  overflow:hidden;
}
.spy li {
  list-style:none;
  text-align:left;
  margin:0;
  padding:5px 7px;
  background-color:#AABD30;
  background-image:-webkit-linear-gradient(#AABD30,#9BB009);
  background-image:-moz-linear-gradient(#AABD30,#9BB009);
  background-image:-ms-linear-gradient(#AABD30,#9BB009);
  background-image:-o-linear-gradient(#AABD30,#9BB009);
  background-image:linear-gradient(#AABD30,#9BB009);
  border-top:1px solid #A7D101;
  border-bottom:1px solid #899D00;
  word-wrap:break-word;
  overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
  font-weight:bold;
  color:#409540;
}
.spy-header {
  font:normal bold 12px/14px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  display:block;
  color:yellow;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  /*
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  */
}
.spy-header:hover {
  color:white;
  text-decoration:underline;
}
.spy-summary {
  margin-top:5px;
  overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
  float:right;
  margin:0 0 2px 7px;
  padding:0;
  width:72px;
  height:72px;
  border:4px solid #899D00;
  background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1EIwEvc1x6xRxEbvuwxAa3V7SVBTyiB-nSlhtb9-66V7DAqQYuT9C5dgmKhnuh__wmifoZv19gLUdhcrtrJ9wkU_aqCtgfODCuFqXQFty44-o3-rgGp3ig8fjvY-4NVsSOXw0N-4kc1u/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.7);
  box-shadow:0 0 2px rgba(0,0,0,.7);
}
.spy li img {
  border:none !important;
  float:none;
  margin:0;
  padding:0;
  display:none;
}
.spy-outer .loading {
  display:block;
  padding:10px;
  background-color:#fafafa;
}
</style>
<div id="spy-outer" class="spy-outer"><span class="loading">Memuat...</span></div>
<script>
var spy_config = {
    widgetTitle: '<h2>Recent Post</h2>',
    url:'http://'+window.location.hostname,
    containerId: 'spy-outer',
    numPost: 10,
    numChars: 100,
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmbxDI94vS_FR4wJ6I3dfGTLpo_vQadhKB119REKIuEXP5dY-ngeo7SN1BcW9KKZfqkmUswmxMjCbpVUy7cXNaNAYIcEer_sok3n2BfScbIBNcMx7rdvj-kew6JDs95fMmbm4_bf0ExSW/s1600/noimage.png',
    showSummaries: true,
    showThumbnails: true,
    showPostDate: true,
    showComments: true,
    newTabLink: false,
    animatedRecentPost: true,
    jsonCallback: 'recentpost_spy',
    newsTicker: {
        visible: 4,
        interval: 3000,
        speed: 600
    }
};
</script>
<script src="https://googledrive.com/host/0Bz_65BAr9KCZbUpFSU12WGR5RGM"></script>

• If your template is equipped with JQuery, remove the red code!

Configure Widget

Option	Information
widgetTitle	HTML markup for the title of the widget, you can change to New Posts
url	To default.
containerId	To default.
numPost	The number of posts you want to display (must be greater than  Newsticker => visible).
numChars	The number of characters ringkasa post if showSummaries worth true.
monthNames	Nma-name months in a year according to the calendar system in the country.
noImage	Backup image URL for a post that does not have pictures in it.
showSummaries	Change the value to false to hide the summary post.
showThumbnails	Change the value to false to hide showThumbnails .
showPostDate	Change the value to false to hide the moon rising on the item posting.
showComments	Change the value to false to hide the number of comments.
newTabLink	Change the value to true to make the links open in a tab widget / new window when clicked.
animatedRecentPost	Change the value to false  to turn off animation effects newsticker .
newsTicker => visible	The number of posts you want to display in the widget. The rest is hidden and will appear alternately when the animation effects occur. Make sure the value is smaller thannumPost.
newsTicker => interval	Displacement interval in milliseconds items.
newsTicker => speed	Speed ​​emergence item animation effects.

DTE:]