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.


Để 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 Verdana;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/AVvXsEgnbh2o9foNoJW8SmFrzw6S5UyP0ZeFyVKvDlafevBvZc3oyEQeDIvuBAW1T65ALG6wlhO3F5R7dVHXAjpEK3skL9FjYary-ppzloMaVEUtSa345XS7mpPKC-VdYdEjBtHvgo-nTRqbcnTB/s45/choiblog.tk.jpg') 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.

- Thay đổi địa chỉ blog
- Thay đổi Tag muốn xuất hiện
- Tùy chỉnh khác xem ở phần Style