【187】◀▶ 编辑博客的文本格式 & 装饰

参考：博客园页面设置

参考：共享一下我的自定义CSS博客皮肤（2012.3）

一、文字周围带框框

插入一个代码，要折叠式，如下图所示：
```
史蒂夫
```
示例
选中“示例”，将其拷贝，然后黏贴，就有如下的效果：
示例
接下来就可以进行自由编辑了！
直接通过添加代码然后选中“行内代码”即可
示例

二、文字、方框、颜色、阴影

1. 浅绿色背景框

博客园

在“页面定制CSS代码”中加入如下描述代码

/* 黑框绿景→黑框橙景 */
div.fangkuang
{
  background-color: #66ff66;
  border: black solid thin;
  padding:15px 15px 15px 15px;
  box-shadow: 2px 2px 3px #888888;
  border-width:1px;
  height:20px;
  width:100px;
 
  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;
 
  cursor: pointer;
}
 
div.fangkuang:hover
{
  text-decoration: none;
  background-color: #FFA500;
}

博客编写的时候，切换到 HTML 形式，填写如下代码
在当前窗口打开链接：

?
1
<div class="fangkuang" onclick="location.href='http://www.cnblogs.com/alex-bn-lee/'">博客园</div>

在新窗口打开链接：

?
1
<div class="fangkuang" onclick="window.open('http://www.cnblogs.com/alex-bn-lee/')">博客园</div>

注意：为了使上面的代码能够将方块在水平方向显示，将<div>改成了<span>，其他没有变化！
            也可以将 CSS 代码写入到 HTML 中，只需将其加入到 <style></style> 中即可，如下所示：

?
1
2
3
4
5
6
7
8
9
10
<style>
.test{
  border: black solid thin;
  background-color: cyan;
}
</style>

<div class="test">
你好！
</div>

2. 虚线框 & 阴影框

CSS 代码实现：
上面：利用 id="green_channel"

?
1
2
3
4
5
6
#green_channel {
  padding: 15px;
  border: 1px dashed #000;
  width: 350px;
  text-align: center;
}
下面：

?
1
2
3
4
5
6
7
8
.bg_gray {
background-color: #FFF;
border: black solid thin;
padding:15px;
box-shadow: 0px 0px 2px #888888;
border-width:0px;
width: 350px;
}

PART II：复合形式

PowerShell 中文博客 Mater-PowerShell 通过 Win-PS 编写脚本 Win-PS 官网

HTML 代码实现：

<p class="bg_gray" align="center">
    <span class="fangkuang" onclick="window.open('http://www.pstips.net/powershell-online-tutorials/')"> PowerShell 中文博客</span> 
    <span>    </span> 
    <span class="fangkuang" onclick="window.open('http://powershell.com/cs/blogs/ebookv2/default.aspx')"> Mater-PowerShell </span> 
    <span>    </span> 
    <span class="fangkuang" onclick="window.open('https://technet.microsoft.com/zh-cn/scriptcenter/dd742419.aspx')"> 通过 Win-PS 编写脚本</span> 
    <span>    </span> 
    <span class="fangkuang" onclick="window.open('https://msdn.microsoft.com/en-us/library/dd835506%28VS.85%29.aspx')"> Win-PS 官网 </span>
</p>

3. 标题（示例如下所示）

--测试--

CSS 代码：

.title_h1 {
    background-color: #AADDFF;
    color: #0000; 
    font-weight: bold;
    padding: 8px 15px;
    margin: 0px -11px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    position:absolute,zIndex:9999;
}

HTML 代码：

?
1
<div class="title_h1">一、标题栏的设计</div>

4. 标题（示例如下所示）

--测试--

CSS 代码：

/* 钩挂标题栏 */
.title_hh {
    background:-moz-linear-gradient(top,#F2FBFD,#E5EFF0);
    color: #000; 
    font-weight: bold;
    padding: 10px 25px;
/* 向左移动 */
    margin: 0px -20px;
    box-shadow: 2px 2px 4px #888888;
    border: 1px solid #CBD9DB;
/* 最前显示 */
    position:absolute,zIndex:9999;
}
<br>/* 箭头 */
.arrow-left
{
 width:0; 
 height:0;
 margin: 0px -19px;
 border-bottom:9px solid transparent;
 border-right:9px solid #78979C;
 position:absolute,zIndex:9998;
}

HTML 代码：

?
1
2
<div class="title_hh">--测试--</div>
<div class="arrow-left"></div>

5. 标题（示例如下所示）

--测试--

CSS 代码：

/* 二级标题栏 */
.title_hh2 {
    background:-moz-linear-gradient(top,#FEF0CD,#FDD9B7);
    color: #000; 
    padding: 5px 25px;
    margin: 5px -10px 5px -10px;
    box-shadow: 1px 1px 2px #888888;
    border: 1px solid #FDD9B7;
}

HTML 代码：

?
1
<div class="title_hh2">--测试--</div>

6. 四周蓝色荧光

博客园

CSS 代码实现：

/* 蓝色荧光绿景→黑框橙景 */
.fk_blue
{
  background-color: #66ff66;
  border: black solid thin;
  padding:10px 10px 10px 10px;
   
  border-width:1px;
  height:20px;
  width:100px;
  box-shadow: 0px 0px 5px #00F;
  /* Firefox */
  display:-moz-box;
  -moz-box-pack:center;
  -moz-box-align:center;
  
  cursor: pointer;
}
  
.fk_blue:hover
{
  text-decoration: none;
  background-color: #FFA500; 
}

7. 大部分字体变细

CSS 代码实现：

/* 超链接不加粗 */
A:link {
 font-weight: 300;
 TEXT-DECORATION: none
}
A:visited {
 font-weight: 300;
 TEXT-DECORATION: none
}
A:hover {
 font-weight: 300;
 text-decoration: underline;
}
A:active {
 font-weight: 300; 
 text-decoration: underline;
}
 
a,td,span,div,li,input,code {
 font-weight: 300;
}

三、挂件

参考：RevolverMap

1. Pattern-1

2. Pattern-2

3. Pattern-3

4. Pattern-4

5. Pattern-5

6. Pattern-6

7. Pattern-7

<p>Pattern-1</p>
<script type="text/javascript" src="http://ra.revolvermaps.com/0/0/6.js?i=0f5bimnlj8b&m=0&s=300&c=ff8a00&cr1=ff007e&f=georgia&l=1&bv=50"></script>
<p>Pattern-2</p>
<script type="text/javascript" src="http://ra.revolvermaps.com/0/0/6.js?i=0gq9uq7y8d3&m=0&s=300&c=ff8a00&cr1=ff007e&f=georgia&l=0&bv=50"></script>
<p>Pattern-3</p>
<script type="text/javascript" src="http://ra.revolvermaps.com/0/0/8.js?i=0sp9lktaa0o&m=0&s=300&c=ff8a00&cr1=ff007e&f=georgia&l=0&bv=50"></script>
<p>Pattern-4</p>
<script type="text/javascript" src="http://ra.revolvermaps.com/0/0/8.js?i=00zc2cboupi&m=0&s=300&c=ff8a00&cr1=ff007e&f=georgia&l=1&bv=50"></script>
<p>Pattern-5</p>
<script type="text/javascript" src="http://ra.revolvermaps.com/0/0/8.js?i=0qsavi5nb7z&m=0&s=300&c=ff8a00&cr1=ff007e&f=georgia&l=33&bv=50"></script>
<p>Pattern-6</p>
<script type="text/javascript" src="http://ra.revolvermaps.com/0/0/8.js?i=05hwj9yhk43&m=0&s=300&c=ff8a00&cr1=ff007e&f=georgia&l=17&bv=50"></script>
<p>Pattern-7</p>
<script type="text/javascript" src="http://ra.revolvermaps.com/0/0/8.js?i=0p88ic1yybq&m=0&s=300&c=ff8a00&cr1=ff007e&f=georgia&l=49&bv=50"></script>

8. 绿色光晕

9. 放大版绿色光晕

From Jan 28, 2016

代码：

<p>8. 绿色光晕</p>
<div style="border-radius:5px;width:180;height:180;background-color:black;">
<script type="text/javascript" src="//ra.revolvermaps.com/0/0/8.js?i=0xoqkxnu52c&m=0c&s=180&c=ff8a00&cr1=ff007e&f=georgia&l=49&bv=50&v0=100&z=12&hi=100&he=6&hc=baff00&rs=100&as=100&cr0=54ff00&cw=000000&cb=007eff" async="async"></script>
</div>
<p>9. 放大版绿色光晕</p>
<div style="border-radius:10px;width:341;height:341;background-color:black;">
<script type="text/javascript" src="//ra.revolvermaps.com/0/0/8.js?i=0xoqkxnu52c&m=0c&s=341&c=ff8a00&cr1=ff00ff&f=georgia&l=49&bv=50&v0=100&z=12&hi=100&he=6&hc=baff00&rs=100&as=100&cr0=baff00&cw=000000&cb=007eff" async="async"></script>
<div style="width:341;color:grey;text-align:right;font-weight:100;font-size:9px;">From Jan 28, 2016</div>
</div>

参考：aBowman

1. Dog

2. Newton’s Cradle

3. Hamster

4. Spider

5. Ball Clock

6. Pendulum Clock

7. Penguins

代码：

<style>
div.form{
  border: black solid thin; 
  background-color: green
  height:200px;
  width:300px;
}
 
</style>
 
<p>1. Dog</p>
<div class="form">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/dog/dog.swf?3?" width="300" height="200"><param name="movie" value="http://cdn.abowman.com/widgets/dog/dog.swf?3?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object>
</div>
 
<p>2. Newton’s Cradle</p>
 
<div class="form">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/newtonscradle/newtonsCradle.swf?" width="300" height="200"><param name="movie" value="http://cdn.abowman.com/widgets/newtonscradle/newtonsCradle.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>
</div>
 
<p>3. Hamster</p>
 
<div>
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" width="300" height="200"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>
</div>
 
<p>4. Spider</p>
 
 
<div class="form">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/spider/spider.swf?" width="300" height="200"><param name="movie" value="http://cdn.abowman.com/widgets/spider/spider.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/><param name="bgcolor" value=""/></object>
</div>
 
<p>5. Ball Clock</p>
 
 
<div class="form">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/ballclock/ballclock.swf?" width="300" height="225"><param name="movie" value="http://cdn.abowman.com/widgets/ballclock/ballclock.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>
</div>
 
<p>6. Pendulum Clock</p>
<div>
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/pendulumclock/pendulumClockV2.swf?" width="300" height="200"><param name="movie" value="http://cdn.abowman.com/widgets/pendulumclock/pendulumClockV2.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value=""/></object>
</div>
 
<p>7. Penguins</p>
 
<div class="form">
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/penguins/penguins.swf?" width="100" height="200"><param name="movie" value="http://cdn.abowman.com/widgets/penguins/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>
</div>

页面定制CSS代码（早期）

<div id="clustrmaps-widget"></div>
<script type="text/javascript">var _clustrmaps = {'url' : 'http://www.cnblogs.com/alex-bn-lee/', 'user' : 966294, 'server' : '3', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2011-12-22', 'lang' : 'zh', 'corners' : 'square' };(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www3.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();
</script>
<noscript>
<a href="http://www3.clustrmaps.com/user/947ebe96">
<img src="http://www3.clustrmaps.com/stats/maps-no_clusters/www.cnblogs.com-alex-bn-lee--thumb.jpg" alt="Locations of visitors to this page" />
</a>
</noscript>
 
div.outset {
  border: red solid thin;
  padding:10px 10px 10px 10px;
  border-radius:10px;
  -moz-border-radius:10px; /* Old Firefox */
}

博客侧边栏公告（支持HTML代码）

使用编辑器（早期）

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!-- 钟 BEGIN 
      <embed width="120" height="120" align="middle" src="http://images.cnblogs.com/cnblogs_com/csharp/clock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
 钟 END -->
 
<!-- 以下隐掉
    <a href="http://weibo.com/alexbnlee" target="_blank" style="font-size:15px; text-shadow: #ff0000 2px 2px 2px !important; text-align: center;">>>加我微博<<</a>
 
<p></p>
 
     <a href="https://twitter.com/McDelfino_Lee" target="_blank" style="font-size:15px; text-shadow: #ff0000 2px 2px 2px !important; text-align: center;">>>Twitter<<</a>
 
<p></p>
 
   <a href="https://www.facebook.com/alexbnlee" target="_blank" style="font-size:15px; text-shadow: #ff0000 2px 2px 2px !important; text-align: center;">>>Facebook<<</a>
到此为止 -->
 
<p></p>
 
<!--小老鼠-->
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="180" height="144"> 
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"> 
<param name="AllowScriptAccess" value="always"> 
<param name="wmode" value="opaque"></object> 
 
<span style="color: #000000;font-size: 9pt;">这是我的小宠物 Saki~，点击上面的图片就能给它喂食儿了~</span>
 
 
<p style="color:red; text-align:center; font-weight:bold">我的淘宝小店</p>
<p style="color:quester; text-align:center; font-size:10pt">（销售锁屏壁纸）</p>
 
<a href="http://item.taobao.com/item.htm?spm=a1z10.1-c.w137644-11262777945.38.Hw5NVC&id=45817182467"><img src="http://img.alicdn.com/imgextra/imgextra/i1/115981143/TB2DuBwdXXXXXcLXXXXXXXXXXXX-115981143.jpg?time=1433922224000"; width=180>
 
<p style="font-size:10pt">    Hello, welcome to my online store.</p>
 
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>
 
<p style="color:red; text-align:center; font-weight:bold">You Can Follow Me !!!</p>
 
<!--微博图标
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_sinaweibo_follow" addthis:userid="alexbnlee"></a>
 
<p style="font-size:10pt; font-weight:bold">Weibo  →  <a href="http://weibo.com/210104947" target="_blank" title="点击关注我的新浪微博">Lee Ping-Nam</a></p>
 
<p style="font-size:10pt; font-weight:bold">Renren  →  <a href="http://www.renren.com/232329061" target="_blank" title="点击关注我的人人网">李炳南</a></p>
-->
 
<p align="center"><<新浪微博>></p>
 
<html xmlns:wb=“http://open.weibo.com/wb”>
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
<wb:follow-button uid="1760547134" type="red_3" width="100%" height="24" ></wb:follow-button>
 
<p align="center"><<人人网>></p>
 
<a href="http://www.renren.com/232329061?ss=17095&origin=920001" target="_blank"><img src="http://signature.xnimg.cn/badge/signature/sig/232329061/6248d12d0da1fff457924615a8c88789/0/8.png"  width=180></a>  
 
</div>
<p style="font-size:10pt; text-align:center"><<墙外联络方式>></a></p>
 
<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
 
<a class="addthis_button_facebook_follow" addthis:userid="alexbnlee"></a>
 
<a class="addthis_button_twitter_follow" addthis:userid="McDelfino_Lee"></a> 
 
<a class="addthis_button_youtube_follow" addthis:userid="MrMcDelfino"></a> 
 
<a class="addthis_button_google_follow" addthis:userid="112757353152562277976"></a>
 
<a class="addthis_button_tumblr_follow" addthis:userid="alexbnlee"></a>
 
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fd7519410428e1e"></script>
<!-- AddThis Follow END -->
 
<p></p>
<p></p>
<p></p>
 
   <a href="http://s09.flagcounter.com/more/nafU"><img src="http://s09.flagcounter.com/count/nafU/bg_000000/txt_05FFBC/border_000000/columns_2/maxflags_12/viewers_0/labels_0/pageviews_1/flags_1/" alt="free counters" border="0"></a>
 
<!-- 以下隐掉
<script type="text/javascript" id="bdshare_js" data="type=slide&mini=1&img=5&uid=99281" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();
</script>
 
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px; background:url('http://hiphotos.baidu.com/peterliu214/pic/item/c0a4afcdc4887b73b600c89c.jpg'); border:3px solid black;" >
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fd7519410428e1e"></script>
-->
 
<br/>
 
 
<!--回到顶部悬浮-->
<!--
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="right:5px;bottom:125px;" >
<a href="javascript:scroll(0,0)"><img src="http://i15.photobucket.com/albums/a390/Go-Wire/Renders/untitled.png" height=45px width=45px></a>
</div>
 
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="right:0px;bottom:25px;" >
<a href="http://www.cnblogs.com/alex-bn-lee/admin/EditPosts.aspx"><img src="https://wiki.mozilla.org/images/6/6b/Home-icon.png" height=35px width=35px></a>
</div>
 
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fd7519410428e1e">
</script>
-->
 
 
<!-- 加这个 Button BEGIN -->
<script type="text/javascript" >
var jiathis_config={
    showClose:true,
    hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=1" charset="utf-8"></script>
<!-- 加这个 Button END -->
 
 
<!-- 回到顶部 BEGIN -->
<div style="right: 10px; left: auto; position: fixed; top: auto; bottom: 10px; z-index: 99999999; overflow: hidden;">
 
<a href="javascript:scroll(0,0)"><img src="http://tupian.enterdesk.com/2014/lxy/2014/12/03/4/2.gif"; width=100>
 
</div>
<!-- 回到顶部 END -->

分项代码

超萌小老鼠

<!-- *********** 超萌小老鼠 *********** -->
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="180" height="144"> 
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"> 
<param name="AllowScriptAccess" value="always"> 
<param name="wmode" value="opaque"></object> 
<span style="color: #000000;font-size: 9pt;">这是我的小宠物 Saki~，点击上面的图片就能给它喂食儿了~</span>
<hr />

人体时钟

<!-- *********** 人体时钟 *********** -->
 
<div class="lefttimer">
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>
</div>
<hr />

访问统计

<!-- *********** 访问统计 *********** -->
 
<div align="center">
<a href="http://s09.flagcounter.com/more/nafU"><img src="http://s09.flagcounter.com/count/nafU/bg_000000/txt_05FFBC/border_000000/columns_2/maxflags_12/viewers_0/labels_0/pageviews_1/flags_1/" alt="free counters" border="0"></a>
</div>

微博 & 人人网

<!-- *********** 国内社交媒体 *********** -->
<br/>
<p style="color:red; text-align:center; font-weight:bold">You Can Follow Me !!!</p>
<p align="center"><<新浪微博>></p>
<html xmlns:wb=“http://open.weibo.com/wb”>
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
<wb:follow-button uid="1760547134" type="red_3" width="100%" height="24" ></wb:follow-button>
<p align="center"><<人人网>></p>
<a href="http://www.renren.com/232329061?ss=17095&origin=920001" target="_blank"><img src="http://signature.xnimg.cn/badge/signature/sig/232329061/6248d12d0da1fff457924615a8c88789/0/8.png"  width=180></a>  

国外社交媒体

<br><br><p style="font-size:10pt; text-align:center"><<其他联络方式>></a></p><br><br><div class="addthis_toolbox addthis_32x32_style addthis_default_style"><br><a class="addthis_button_facebook_follow" addthis:userid="alexbnlee"></a><br><a class="addthis_button_twitter_follow" addthis:userid="McDelfino_Lee"></a> <br><a class="addthis_button_youtube_follow" addthis:userid="MrMcDelfino"></a> <br><a class="addthis_button_google_follow" addthis:userid="112757353152562277976"></a><br><a class="addthis_button_tumblr_follow" addthis:userid="alexbnlee"></a><br><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fd7519410428e1e"></script><br>

侧边分享按钮

<!-- *********** 侧边分享按钮 *********** -->
 
<script type="text/javascript" >
var jiathis_config={
    showClose:true,
    hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=1" charset="utf-8"></script>

回到顶部悬浮

<!-- *********** 回到顶部 *********** -->
 
<div style="right: 10px; left: auto; position: fixed; top: auto; bottom: 10px; z-index: 99999999; overflow: hidden;">
<a href="javascript:scroll(0,0)"><img src="http://tupian.enterdesk.com/2014/lxy/2014/12/03/4/2.gif"; width=100>
</div>

全部

<!-- *********** 横线 *********** -->
<hr />
 
 
<!-- *********** 超萌小老鼠 *********** -->
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="180" height="144"> 
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"> 
<param name="AllowScriptAccess" value="always"> 
<param name="wmode" value="opaque"></object> 
<span style="color: #000000;font-size: 9pt;">这是我的小宠物 Saki~，点击上面的图片就能给它喂食儿了~</span>
<hr />
 
 
<!-- *********** 人体时钟 *********** -->
<div class="lefttimer">
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>
</div>
<hr />
 
 
<!-- *********** 访问统计 *********** -->
<div align="center">
<a href="http://s09.flagcounter.com/more/nafU"><img src="http://s09.flagcounter.com/count/nafU/bg_000000/txt_05FFBC/border_000000/columns_2/maxflags_12/viewers_0/labels_0/pageviews_1/flags_1/" alt="free counters" border="0"></a>
</div>
<br/>
 
 
<!-- *********** 国内社交媒体 *********** -->
<br/>
<p style="color:red; text-align:center; font-weight:bold">You Can Follow Me !!!</p>
<p align="center"><<新浪微博>></p>
<html xmlns:wb=“http://open.weibo.com/wb”>
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
<wb:follow-button uid="1760547134" type="red_3" width="100%" height="24" ></wb:follow-button>
<p align="center"><<人人网>></p>
<a href="http://www.renren.com/232329061?ss=17095&origin=920001" target="_blank"><img src="http://signature.xnimg.cn/badge/signature/sig/232329061/6248d12d0da1fff457924615a8c88789/0/8.png"  width=180></a>  
 
 
<!-- *********** 国外社交媒体 *********** -->
<p style="font-size:10pt; text-align:center"><<其他联络方式>></a></p>
<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="alexbnlee"></a>
<a class="addthis_button_twitter_follow" addthis:userid="McDelfino_Lee"></a> 
<a class="addthis_button_youtube_follow" addthis:userid="MrMcDelfino"></a> 
<a class="addthis_button_google_follow" addthis:userid="112757353152562277976"></a>
<a class="addthis_button_tumblr_follow" addthis:userid="alexbnlee"></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fd7519410428e1e"></script>
<!-- AddThis Follow END -->
 
 
 
<!-- *********** 侧边分享按钮 *********** -->
<script type="text/javascript" >
var jiathis_config={
    showClose:true,
    hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=1" charset="utf-8"></script>
 
 
<!-- *********** 回到顶部 *********** -->
<div style="right: 10px; left: auto; position: fixed; top: auto; bottom: 10px; z-index: 99999999; overflow: hidden;">
<a href="javascript:scroll(0,0)"><img src="http://tupian.enterdesk.com/2014/lxy/2014/12/03/4/2.gif"; width=100>
</div>

四、签名档

参考：博客园使用攻略

1. 普通版

作者：McDelfino
出处：http://www.cnblogs.com/alex-bn-lee/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

代码：

<p style="background: rgb(230, 250, 230); padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑; font-size: 12px; text-indent: 0em;">
作者：<a href="http://www.cnblogs.com/alex-bn-lee/" target="_blank">McDelfino</a>
<br>
出处：<a href="http://www.cnblogs.com/alex-bn-lee/" target="_blank">http://www.cnblogs.com/alex-bn-lee/</a>
<br>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
</p>

2. 头像版

代码：

<div style="height: 55px; background: #e6fae6; padding: 10px 10px 10px 10px; border: 1px dashed #e0e0e0; font-family: 微软雅黑; font-size: 12px; text-indent: 0em;">
<div style="float: left; width: 55px; height: 55px;"><a href="http://www.cnblogs.com/alex-bn-lee/"><img src="http://images2015.cnblogs.com/blog/323776/201601/323776-20160129105545677-940179626.jpg" alt width="55" height="55"></a></div>
<div style="margin-left: 67px; margin-top: 2px;"> 作者：<a href="http://www.cnblogs.com/alex-bn-lee/" target="_blank">McDelfino</a> <br>
出处：<a href="http://www.cnblogs.com/alex-bn-lee/" target="_blank">http://www.cnblogs.com/alex-bn-lee/</a>
<br>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
</div></div>

3. 添加其他内容版

作者：McDelfino
出处：http://www.cnblogs.com/alex-bn-lee/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，谢谢！

小广告^_^喜欢博主的内容可以扫红包哦，也可以直接支付哦（不会扣您的钱），谢谢支持！

代码：

<div style="height: 352px; background: #e6fae6; padding: 10px 10px 10px 10px; border: 1px dashed #e0e0e0; font-family: 微软雅黑; font-size: 12px; text-indent: 0em">
<div style="float: left; width: 55px; height: 55px"><a href="http://www.cnblogs.com/alex-bn-lee/"><img src="http://images2015.cnblogs.com/blog/323776/201601/323776-20160129105545677-940179626.jpg" alt="" width="55" height="55"></a></div>
<div style="margin-left: 67px; margin-top: 2px"> 作者：<a href="http://www.cnblogs.com/alex-bn-lee/" target="_blank">McDelfino</a> <br>
出处：<a href="http://www.cnblogs.com/alex-bn-lee/" target="_blank">http://www.cnblogs.com/alex-bn-lee/</a>
<br>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，谢谢！
 
<hr>
<div>
小广告^_^喜欢博主的内容可以扫红包哦，也可以直接支付哦（不会扣您的钱），谢谢支持！
</div>
<div style="padding: 5px 0 5px 0">
<img src="http://images.cnblogs.com/cnblogs_com/alex-bn-lee/861481/o_hongbao.gif" alt="" width="406" height="255">
</div>
</div>
</div>