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

参考:博客园页面设置

参考:共享一下我的自定义CSS博客皮肤(2012.3)


一、文字周围带框框
 
  1. 插入一个代码,要折叠式,如下图所示:
    史蒂夫
    示例
  2. 选中“示例”,将其拷贝,然后黏贴,就有如下的效果:
      示  例  
  3. 接下来就可以进行自由编辑了!
  4. 直接通过添加代码然后选中“行内代码”即可
     示例 
二、文字、方框、颜色、阴影
 
1. 浅绿色背景框
博客园
  • 在“页面定制CSS代码”中加入如下描述代码
    /* 黑框绿景→黑框橙景 */
    div.fangkuang
    {
      background-color: #66ff66;
      border: black solid thin;
      padding:15px 15px 15px 15px;
      box-shadow: 2px 2px 3px #888888;
      border-1px;
      height:20px;
      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 形式,填写如下代码
    在当前窗口打开链接:
    <div class="fangkuang" onclick="location.href='http://www.cnblogs.com/alex-bn-lee/'">博客园</div> 
    
    在新窗口打开链接:
    <div class="fangkuang" onclick="window.open('http://www.cnblogs.com/alex-bn-lee/')">博客园</div> 
    注意:为了使上面的代码能够将方块在水平方向显示,将<div>改成了<span>,其他没有变化!
                也可以将 CSS 代码写入到 HTML 中,只需将其加入到 <style></style> 中即可,如下所示:
    <style>
    .test{
      border: black solid thin;
      background-color: cyan;
    }
    </style>
    
    <div class="test">
    你好!
    </div>
    
2. 虚线框 & 阴影框

 

  • CSS 代码实现:
  • 上面:利用 id="green_channel"
    #green_channel {
      padding: 15px;
      border: 1px dashed #000;
       350px;
      text-align: center;
    }
    
  • 下面:
    .bg_gray {
     background-color: #FFF;
     border: black solid thin;
     padding:15px;
     box-shadow: 0px 0px 2px #888888;
     border-0px; 
      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 代码:
    <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;
    }
    
    /* 箭头 */ .arrow-left { 0; height:0; margin: 0px -19px; border-bottom:9px solid transparent; border-right:9px solid #78979C; position:absolute,zIndex:9998; }
  • HTML 代码:
    <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 代码:
    <div class="title_hh2">--测试--</div>
    
6. 四周蓝色荧光
 
博客园 
  • CSS 代码实现:
    /* 蓝色荧光绿景→黑框橙景 */
    .fk_blue
    {
      background-color: #66ff66;
      border: black solid thin;
      padding:10px 10px 10px 10px;
      
      border-1px;
      height:20px;
      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;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;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="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;
  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 */
}

使用编辑器(早期)

<!-- 钟 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>  
    
  • 国外社交媒体
    <!-- *********** 国外社交媒体 *********** -->

    <p style="font-size:10pt; text-align:center">&lt;&lt;其他联络方式&gt;&gt;</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>
    
  • 全部
    <!-- *********** 横线 *********** -->
    <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. 头像版

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

代码:

<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;  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;  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>
原文地址:https://www.cnblogs.com/alex-bn-lee/p/5039398.html