Hôm nay Terocket sẽ hướng dẫn cả nhà một thủ thuật mới, thực sự không biết phải đặt tên nó là gì và đặt như thế nào, nên đặt tạm tên nó là Bộ sưu tập ảnh & quà tặng hiệu ứng đẹp mới nhất cho Blogger V1. 

Đây là tiện ích rất phù hợp cho các bạn là bộ sưu tập hình ảnh trong website của mình, hoặc làm một mục quà tặng, thú nhồi bông cho blogspot. Rất đẹp mắt với các tiện ích cực kỳ đẹp và ấn tượng. Tiện ích Bộ sưu tập ảnh & quà tặng hiệu ứng đẹp cho Blogger V1 này có thể chuyển động, xoay một góc 90 độ và hiển thị chữ lên rất ok.

Bộ sưu tập ảnh & quà tặng hiệu ứng đẹp cho Blogger V1 rất phù hợp và cần thiết cho nhiều bạn làm blog đó nhé!
Giờ thì cả nhà cùng Terocket tìm hiểu và thực hiện thủ thuật blog Bộ sưu tập ảnh & quà tặng hiệu ứng đẹp cho Blogger V1 này nhé.

Live Demo

Để làm thủ thuật Bộ sưu tập ảnh & quà tặng hiệu ứng đẹp cho Blogger V1 này cho blogger blogspot. Chỉ cần vào Blogger -> Bố cục -> Thêm tiện ích -> HTML/JavaScript và copy đoạn mã code sau vào và Lưu lại thôi.

<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Yhk76TCecjLhTRp3iGDadpnRlWSGic5fHmRMD7qaMAnyInb8PWyJZJOmUOabUJovBlvxR_gWlJmQY5efZQI_z9nVpz5PM85CiZ2Iyuo22tmsBksP45JMX3C3o2K5FgCPhTMBkUPpkQsv/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:73px;  height:76px;}
#post-gallery .rp-item img {  width:65px;  height:65px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item 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);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "",       // Widget Title
    numposts    = 12,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://www.terocket.com/";
</script>
<script type="text/javascript">
$(function() {
$('div.rp-item img').hide();
$('div.rp-child').removeClass('hidden');
var winWidth = $(window).width(),
winHeight = $(window).height(),
ttWidth     = $('div.rp-child').outerWidth(),
ttHeight = $('div.rp-child').outerHeight(),
thumbWidth   = $('div.rp-item').outerWidth(),
thumbHeight  = $('div.rp-item').outerHeight();

$('div.rp-item').css('position', 'static').mouseenter(function() {
$('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
}).mousemove(function(e) { var top  = e.pageY+20,
left = e.pageX+20;
if (top + ttHeight > winHeight) {
top = winHeight - ttHeight - 40;
} if (left + ttWidth > winWidth) {
left = winWidth - ttWidth - 40;
}
$('div.rp-child', this).css({top:top, left:left});
}).mouseleave(function() {
$('div.rp-child', this).hide();
});
});
function showrecentposts(json) {
var entry = json.feed.entry;
for (var i = 0; i < numposts; i++) {
var posturl;
for (var j=0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == 'alternate') {
posturl = entry[i].link[j].href;
break;
}
}
if ("content" in entry[i]) {
var postcontent = entry[i].content.$t;
} else if ("summary" in entry[i]) {
var postcontent = entry[i].summary.$t;
} else {
var postcontent = "";
}
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length > numchar) {
postcontent = postcontent.substring(0,numchar) + '...';
}
var poststitle = entry[i].title.$t;
if ("media$thumbnail" in entry[i]) {
postimg = entry[i].media$thumbnail.url
} else {
postimg = pBlank
}
document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');
document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
document.write(postcontent + '</div>');
document.write('</div>');
}
}
document.write('<div id="post-gallery"><sc' + 'ript src="' + blogURL + '/feeds/posts/default/-/Gift?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');
var i = 0, int=0;
$(window).bind("load", function() {
var int = setInterval("doThis(i)",400);
});

function doThis() {
var imgs = $('div.rp-item img').length;
if (i >= imgs) {clearInterval(int);}
$('div.rp-item img:hidden').eq(0).fadeIn(400);
i++;
}
</script>

Bạn nhớ một vài chi tiết nhé cần thay đổi cho phù hợp nhé. Ở phần Màu Xanh bạn thay thành Url website hay blog của mình và ở phần Màu Đỏ bạn đánh Tag mà bạn muốn xuất hiện các bài đăng nha. 

Chúc các bạn thành công với thủ thuật Bộ sưu tập ảnh & quà tặng hiệu ứng đẹp cho Blogger V1 này nhé. Nếu thấy hay hãy share đến bạn bè, còn nếu không hiểu chổ nào, hãy gửi một bình luận nha, Terocket sẽ giải đáp tất cả cho bạn.

Tìm hiểu thêm một số thủ thuật liên quan đến Recent Post và bài viết mới nhất cả nhà nhé!

An Thành - Terocket