Ở bài này mình sẽ hướng dẫn tạo PopularPosts dạng chuyển động của bác Duy Phạm và chỉnh sửa style sao cho gần giống với tiện ích bạn yêu cầu thôi chứ không giống 100% vì mình không đủ kiến thức để viết một tiện ích mới nên bạn thông cảm
Demo
Bước 1: Vào
blogger >
Mẫu >
Chỉnh sửa HTMLBước 2: Mở rộng mẫu tiện íchBước 3: Chèn code sau trước thẻ
]]></b:skin>
#gallery{border:1px solid #A5A6B3;position:relative;width:600px;height:146px;background:#F4F4F4}
#gallery .belt{position:absolute;top:10px;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:94px;height:94px;border:1px solid #666;box-shadow:1px 1px 3px 2px #666;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:85px;height:85px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
- Chỉnh sửa chiều rộng cho phù hợp với blog của bạn
Bước 4: Dán đoạn code bên dưới trước thẻ đóng
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://trollvlhcv.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWmV1teMy7HxRCzSeMtA8R2Weo-b9Du3eJGcC5h0303p7HnleIcLWYuArrAMQL6B13QxQPDhBKzcKsOR5SBj6Dmv049BtUAgL_358KZcac1a83JpQgubMV1kofXmzcR8VMwDNgG6WmRJf/s1600/back.png", 0, 46], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj19BUDwofEMoqNjzn_63e6Jc_y1l8PFiHXCv12T5ajjLb038xppnzYwQcYAXjC9yWSnNlZSWOoYsVc37uPopkp_kcB0b4E66-2PNy_5AZYee5_9lodl9qMLoqr696vNmJi4q87Zvuj-A0x/s1600/next.png", -32, 46]},
contenttype: ["external"]
})
//]]>
</script>
- Nếu trong template của bạn có jQuery rồi thì xóa dòng được bôi màu đen đi tránh xung đột code
Bước 5: Tìm thẻ
<b:section class='main' id='main' showaddelement='yes'/> hoặc
<b:section class='main' id='main' showaddelement='no'/> và thêm vào sau nó đoạn mã dưới đây:
<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<div id='gallery'>
<ul><li><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ZEN8DP8VXRQSPt9hRigHzQoB0k19hw_-wFfCnuwSaWMB-Tuw2kIVgDCLclMbXy-At-mceIxGsPzoHt1EYCbKro2uA7mCWatWwPaSMqK8KIg0Q2PnGLQSKVmgT96t-wuUOaxqXWIhtPSY/s1600/cogihot.png" width="65" height="15"></li></ul>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZS0_ZPePmt7RSSNDN5YQoNZrkzT8W6XaLcumNXIpXt_c6kruwn8FlUqMb-ntEmCIXjK7eW00vZ38m0TpVTOvxgyvhvHW5L5XM7tJFp9EL2Afw7rtTS98bkO9ooDi19G1PqcCHlMD1hqD/s1600/no-image.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Bước 6: Lưu lại template và xem kết quả
- Lưu lại template trước khi thực hiện thủ thuật này tránh trường hợp thất bại
