参考:博客园页面设置

参考:共享一下我的自定义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-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 形式,填写如下代码
    在当前窗口打开链接:
    <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;
    width: 350px;
    text-align: center;
    }
  • 下面:
    .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 代码:
    <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
    {
    width: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-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代码)

使用编辑器(早期)

<!-- 钟 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; 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>

【187】◀▶ 编辑博客的文本格式 & 装饰的更多相关文章

  1. 让Emeditor支持markdown编辑博客

    让Emeditor支持markdown编辑博客 1. 关于高亮显示 2.生成HTML文件并预览 用惯了Emeditor,最近又开始学习用markdown写博客,怎么让Emeditor支持markdow ...

  2. WordPress 博客文章时间格式the_time()设置

    国外设计的WordPress 主题里的文章的时间格式是类似“十一月 21, 2010”这种格式的,而中国人习惯的是年在前,月紧跟其后,日在末尾,所以看国外的就显得很别扭,但是我们可以通过修改WP时间代 ...

  3. 使用windows live writer 编辑博客日志

    使用Windows Live Writer 编辑日志 一 意义 写博客日志是个需要坚持的好习惯.使用Windows Live Writer,能不受网页自带编辑器限制. Markdown支持.安装mar ...

  4. 使用小书匠及markdown here编辑博客和微信公众号

    1. 使用小书匠连接Evernote并发布笔记到博客园 1.1 小书匠初探 我平时的信息收集的主要方法是采用Pocket+Evernote. 简单来说: 如果访问到非常有用,而且是必须要立刻记录的内容 ...

  5. CSDN博客转MD格式

    基于大神作品修改原文,使用了一下发现有一些小问题,爬取的博客标题如果含有字符是Windows不支持的命名格式,会卡在界面,进行了一下优化,加了一些字符过滤处理,但是tomd模块对html的处理还是不是 ...

  6. 好的 vim编辑博客

    http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 如果你不满足于使用现成的颜色主题的话,那我们来看一下如何修改环境配色.首先要 ...

  7. 使用Jekyll搭建免费的Github Pages个人博客

    一.Git 1.Git概述 Git is a free and open source distributed version control system designed to handle ev ...

  8. Flask 学习 十 博客文章

    提交和显示博客文章 app/models.py 文章模型 class Post(db.Model): __tablename__ = 'posts' id = db.Column(db.Integer ...

  9. BlogPublishTool - 博客发布工具

    BlogPublishTool - 博客发布工具 这是一个发布博客的工具.本博客使用本工具发布. 本工具源码已上传至github:https://github.com/ChildishChange/B ...

随机推荐

  1. bzoj3572[Hnoi2014] 世界树 虚树+dp+倍增

    [Hnoi2014]世界树 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1921  Solved: 1019[Submit][Status][Dis ...

  2. JPA框架下使用纯粹的原生SQL

    最近遇到一个需求,查询数据库中对应表的字段是动态的,项目使用的框架使用JPA+Spring Boot,JPA自带原生SQL支持的传入参数是强类型的,无法用于查询语句的字段更改,因为插入字符串的话带有单 ...

  3. 外星联络(bzoj 2251)

    Description 小 P 在看过电影<超时空接触>(Contact)之后被深深的打动,决心致力于寻找外星人的事业.于是,他每天晚上都爬在屋顶上试图用自己的收音机收听外星人发来的信息. ...

  4. BMP格式,转载

    BMP文件格式,又称为Bitmap(位图)或是DIB(Device-Independent Device,设备无关位图),是Windows系统中广泛使用的图像文件格式.由于它可以不作任何变换地保存图像 ...

  5. 【转】php 之 array_filter、array_walk、array_map的区别

    [转]php 之 array_filter.array_walk.array_map的区别 原文:https://blog.csdn.net/csdnzhangyiwei/article/detail ...

  6. hdu6196 happpy happy happy (meet in middle + 剪枝)

    题意 从1到n共计n(<=90)个物品,每个物品有一个价值a[i],儿子和爸爸轮流做游戏,儿子先手.儿子每次选价值最大的{最左边,最右边}的物品,如果价值一样大, 则选取最左边的物品. 爸爸每次 ...

  7. java基础语法——方法,static关键字

    一:方法: 1.什么是方法: 通俗地讲,方法就是行为.它是完成特定功能的代码块能执行一个功能.它包含于类和对象中. 2.为什么要有方法: *提高代码的复用性. *提高效率 *利于程序维护 3.命名规则 ...

  8. [Angular] Modify User Provided UI with Angular Content Directives

    If we’re going to make our toggle accessible, we’ll need to apply certain aria attributes to the con ...

  9. win8系统 重装系统如何删除EFI分区

    在PE下(一般重装系统就是在PE下),依次输入如下命令(注意虽然显示的是中文名"磁盘0",但是还是用英文disk 0) list disk select disk 0 clean

  10. 无限级分类Asp.net Mvc实现

    无限级分类Asp.net Mvc实现   无限级分类涉及到异步加载子类.加载当前类和匹配问题,现在做一个通用的实现.   (一) 效果如下:   (二)设计.实现及使用 (1)数据库 (a)表设计db ...