部落格 | 教程 · 文章缩略图 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

部落格 | 教程 · 最新文章幻灯片 Slide Show

看上图右边的红色框框，就是我今天要写的教程：如何添加最新文章的幻灯片 Slide Show？有了这个，不但能帮你的部落格加分，也能让网友很快速的知道与游览你的最新文章...  

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

4：然后，找 HTML/JavaScript

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

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://YOURURL.blogspot.com" // Add your blog URL
});
</script>

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

部落格 | 素材 · 数字时钟ⅴ

Highlight 后，请按Ctrl+C复制下面代码

<embed src="http://www.blogclock.cn/swf/S100013d205eaf9-5.swf" Width="180px" Height="280px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1000218b6a0814-6.swf" Width="180px" Height="240px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S10012110c5906e-5.swf" Width="196px" Height="120px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100191c6306004-a.swf" Width="200px" Height="200px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

 <embed src="http://www.blogclock.cn/swf/S1002002628f3a2-e.swf" Width="190px" Height="230px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

 

<embed src="http://www.blogclock.cn/swf/S100290ac10e4cc-3.swf" Width="200px" Height="245px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S10030279305e26-f.swf" Width="150px" Height="250px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

部落格 | 素材 · 数字时钟ⅳ

Highlight 后，请按Ctrl+C复制下面代码

<embed src="http://www.blogclock.cn/swf/S1000965f11e0a0-7.swf" Width="160px" Height="40px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100116a8dc9138-2.swf" Width="200px" Height="150px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S10021502be4a53-1.swf" Width="250px" Height="300px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002238aee1845-e.swf" Width="169px" Height="212px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S10025162290173-d.swf" Width="170px" Height="220px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100276f6e9e911-9.swf" Width="200px" Height="300px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src='http://www.blogclock.cn/swf/S1003226ef4a609-8.swf' Width='195px' Height='260px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

部落格 | 素材 · 数字时钟ⅲ

Highlight 后，请按Ctrl+C复制下面代码

<embed src='http://www.blogclock.cn/swf/S1003257dab809e-9.swf' Width='186px' Height='230px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S100324d4cd911c-3.swf' Width='200px' Height='200px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S100318e4f61e6c-0.swf' Width='200px' Height='50px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S10030596fa8a67-1.swf' Width='150px' Height='500px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src="http://www.blogclock.cn/swf/S10026029d13136-3.swf" Width="190px" Height="200px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002124b7253fa-0.swf" Width="200px" Height="180px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002124b7253fa-0.swf" Width="200px" Height="180px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed> 

部落格 | 素材 · 数字时钟ⅱ

Highlight 后，请按Ctrl+C复制下面代码

<embed src="http://www.blogclock.cn/swf/S10006992885e85-7.swf" Width="183px" Height="100px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S10010883b06325-b.swf" Width="240px" Height="320px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100114643733a8-e.swf" Width="154px" Height="174px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100117bb0c348b-9.swf" Width="200px" Height="200px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100153c570f2f0-8.swf" Width="170px" Height="240px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1001824b914bfc-3.swf" Width="140px" Height="210px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100195248b9d39-7.swf" Width="210px" Height="250px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

部落格 | 素材 · 数字时钟ⅰ

Highlight 后，请按Ctrl+C复制下面代码

<embed src="http://www.blogclock.cn/swf/S100015a648f15b-6.swf" Width="160px" Height="180px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1000683784ac40-0.swf" Width="175px" Height="219px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1001977f3af1d7-f.swf" Width="193px" Height="234px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100198538bf674-a.swf" Width="160px" Height="120px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002145c8dacf4-4.swf" Width="250px" Height="300px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002185d2a33e6-3.swf" Width="187px" Height="182px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100234458f3377-7.swf" Width="185px" Height="160px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002995bf8c9d8-d.swf" Width="188px" Height="252px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src='http://www.blogclock.cn/swf/S10031403d775ae-6.swf' Width='120px' Height='100px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S1003266d1c29d8-1.swf' Width='199px' Height='100px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

 

部落格 | 教程 · 添加时钟

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

4：然后，找 HTML/JavaScript

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

<embed src="http://www.blogclock.cn/swf/S10006408e6545b-a.swf" Width="173px" Height="273px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

6：最后，整理素材位子，再右上角按 Save Arrangement