关于the-daily-girl.blogspot.com的模板，如何让blogspot变成一个简单的浏览相册

其实根本没改动模板，随便找了个官方的黑色主题，把所有默认的小工具基本都去掉，

关键是新建的那个“Intro”小工具，为了实现类似相册功能的代码都在这里面，所以只要新建一个html小工具再把下面代码填入保存，就可以得到类似 the-daily-girl.blogspot.com 的效果了，接着调整下布局就可以做出相册的效果。

----------------------------------分割线分割线---------------------------------

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js' type='text/javascript'> </script>

<script src='http://kitchen.net-perspective.com/sf-example/jquery.scroll-follow.js' type='text/javascript'> </script>

<script type='text/javascript'>

$( document ).ready( function () {

$('.column-center-outer').css("max-width","580px")

$('.columns-inner').css("float","left");

$('.blog-posts img').css("max-width","500px");

$('#HTML3 .widget-content').css("font-size","12px");

$( '.column-right-outer' ).scrollFollow({offset: 20});

$('.entry-content blockquote').contents().clone().appendTo($("#HTML3 > .widget-content"));

$("#HTML3 .widget-content img").hide();

$('.entry-content blockquote').hide();

if ($('#Blog1_blog-pager-newer-link').length > 0) {

$('<a title="Next Girl" style="position:relative;z-index:99;"></a>').append($('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjyyl348GvOCxmv2240O0IaWTwbgM_ENXD2J-t5lhKDZjlvDeUhq4dPAYUYTMF_xhOoHpEI35dK3JueqVblfvGSt-19G33CNgz91YQUHDdGp-8ELKhBMXaOsgYQDw7g6K1c3RZ3yY_qO8/s1600/next.gif" width="30px" />')).attr("href",$('#Blog1_blog-pager-newer-link').attr('href')).appendTo($('.fauxcolumn-right-outer .fauxcolumn-inner')).scrollFollow({offset: 480});

}

if ($('#Blog1_blog-pager-older-link').length > 0) {

$('<a title="Prev Girl" style="position:relative;z-index:99;float:right;"></a>').append($('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCiM6FQDi78lOvgATQfNTzXlyWWwwoT38wPH8f9PWeDTlBPRrPYLPZaIjZ7569rnb_BBMcVokEuDVlzkz6MCUMcXwkjJmyLXOIyOm7H-0eBckNriJdZykgCGHq9mGwouVnuptW7zeqOM/s1600/prev.gif" width="30px" />')).attr("href",$('#Blog1_blog-pager-older-link').attr('href')).appendTo($('.fauxcolumn-left-outer .fauxcolumn-inner')).scrollFollow({offset: 480});

}

});

</script>

----------------------------------分割线分割线---------------------------------

代码详解：

首先引用了三个库，前面两个不说了，最后一个是用来实现跟随滚动滑动的库，也是基于jquery.


文章正文只显示图片和右侧显示简介：

首先要说的是日志都是通过live writer写的(Web发布的也一样)，基本上格式就是

<blockquote> 

<p><img /></p>

<p><img /></p>

<p><img /></p>

<blockquote>

<p>name: Emma</p>

<p>age: 19</p>

</blockquote>

上面暗红色的代码就是把<blockquote>中间的内容隐藏了。
接着深绿色的部分是将这段内容克隆到intro小工具里面，当然里面的#HTML3要换成你的小工具ID。


导航按钮部分（最后的两个if）：


意思就是先判断是否存在下一页按钮，如果存在就新建一个对应的滑动导航按钮。



滑动部分：蓝色代码，没什么好说的，绑定就是了。不过这样表面上很简单，但是其实是debug了两天的结果...源自万恶的IE，什么鸟兼容性！