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

部落格 | 教程 · 添加时钟

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

部落格 | 教程 · 添加日历

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/S10013106800c78-8.swf" Width="160px" Height="210px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

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

部落格 | 教程 · 把Right Click锁掉

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

4：然后，找 HTML/JavaScript

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

<script language=javascript>
    <!--

    //Disable right click script III- By Renigade (renigade@mediaone.net)
    //For full source code, visit http://www.dynamicdrive.com

    var message="";
    ///////////////////////////////////
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

    document.oncontextmenu=new Function("return false")
    // -->
    </script>

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

部落格 | 教程 · 把Footer改去4格

1：登入你的 Blogger ID
2：按 Template
3：按 Edit HTML

4：按 Expand Template

5：按Ctrl+F，会出现红色框框的Search

6：然后在Search那边，Paste下面代码（请按Ctrl+C复制下面代码）

<footer>

7：把 Value 改去 4

8：过后按 Save Template

部落格 | 教程 · 把linkwithin排列中间

1：登入你的 Blogger ID
2：按 Template
3：按 Customize 

 

4：按 Adcanced - Add CSS

5：然后在右边 Paste 下面的代码（请按Ctrl+C复制下面代码）

.linkwithin_inner {margin:0 auto !important;}
.linkwithin_posts a {border:none !important;}

6：过后按右上角的 Apply to Blog