部落格 | 教程 · 文章缩略图 Thumbnails

看上图的红色框框，就是我今天要写的教程：如何添加文章的缩略图 Thumbnails 在部落格？这个功能真的很好用！能让网友很快速的游览你的文章...  

1：登入你的 Blogger ID
2：按 Layout
3：按 Add a Gadget

4：然后，找 HTML/JavaScript

5：然后，把 Paste  下面的代码在 Content 格里，Save...（请按Ctrl+C复制下面代码）

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##9900ff;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('http://www.robojob.eu/util/lightbox/images/loading.gif') no-repeat 50% 50%;  width:96px;  height:96px;}
#post-gallery .rp-item img {  width:100px;  height:100px;  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 0px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px 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:0px solid #9900ff;  -webkit-box-shadow:0px 0px 0px rgba(0, 0, 0, 0.7);  -moz-box-shadow:0px 0px 0px rgba(0, 0, 0, 0.7);  box-shadow:0px 0px 0px 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:#9900ff;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "",       // Widget Title
    numposts    = 24,      // 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.kschay.blogspot.com/";       // Your Blog URL
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>

P/s：红色字体的部份，你必须根据你的所需，更改属于你的设定

6：最后，在右上角，按 Save Arrangement