博客园页面设置
1、编辑器
1.连接
咱们不少时候须要引用别人或者本身之前的代码。这里能够很方便地加上连接。javascript
一个添加连接，一个取消连接php
选中要连接的文字右键就能够选中连接。html
填入URL地址，目标通常选择在新窗口打开。java
2.书签
插入书签git
写入书签名github
这样能够在文章开始写目录 跳到任意的书签。右键插入连接的时候能够绑定到书签。编程
3.html
点击能够看到源码，任意修改。windows
4.插入代码
这里能够选中编程语言。若是代码量比较多能够所有折叠。app
2、后台设置
1.页面定制CSS代码
这里就能够和前面编辑器联合起来。在编辑器里面的文字选中格式时编程语言
若是选择的是标题 那么对应的是<h>标签，这样就能够在用CSS控制其样式。
显示效果，风格统一的小标题。
2.公告栏
公告栏通常你们都是贴上本身的靓照，加上本身的简单介绍。
还有的就是挂个漂亮的flash。
例1：
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
例2：
<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="200" height="160"> <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: #3E8BD6;font-size: 9pt;">求投食~（点图便可）</span>
例3：还能够贴上
<a target="_blank" href="http://shang.qq.com/email/stop/email_stop.html?qq=749294824&sig=a1c657365db7e82805ea4b2351081fc3ebcde159f8ae49b1&tttt=1"><img border="0" src="http://pub.idqqimg.com/qconn/wpa/button/button_old_131.gif" alt="有事您Q我" title="有事您Q我"/></a>
<!--把“XXXXXXXX”替换成你的QQ号--> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=XXXXXXXX&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:XXXXXXXX:13" alt="有事您Q我" title="有事您Q我"></a>
例4：还能够贴上你的主页被访问次数
先注册
<div style="font-size:20px;font-weight:bold;">访次: <a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=XXXXXXXX&c=XXXXXXXX" alt="AmazingCounters.com"></a> 次</div>
例5：园友补充 这个详细记录了ip什么 功能详细 强大 http://www.clicki.cn/
3.页首Html代码
这个我见得比较多的就是你们的GitHub，源码管理。
如：
这里还有不少别的样式图片 （注意，要将上图连接中的you换成本身的在Github上的帐号）
GitHub在windows中的使用
4.开通js权限
博客园默认是没有开通js权限的。能够向管理员申请开通。邮箱：contact@cnblogs.com
开通js权限后能够作不少事。
如：在公告栏中本身写个日历或者时钟表什么的。
下面是16种动态图片时钟代码
-
<IFRAME border=0 frameBorder=0 height=230 scrolling=no
src="http://www.1t2t.com/1t/so2.htm"
width=230></IFRAME> -
<IFRAME border=0 frameBorder=0 height=52 scrolling=no
src="http://www.1t2t.com/1t/so1.htm"
width=172></IFRAME> -
<IFRAME border=0 frameBorder=0 height=217 scrolling=no
src="http://www.1t2t.com/1t/so3.htm"
width=240></IFRAME> -
<IFRAME border=0 frameBorder=0 height=50 scrolling=no
src="http://www.1t2t.com/1t/so4.htm"
width=170></IFRAME> -
<IFRAME border=0 frameBorder=0 height=184 scrolling=no
src="http://www.1t2t.com/1t/so5.htm"
width=199></IFRAME> -
<IFRAME border=0 frameBorder=0 height=189 scrolling=no
src="http://www.1t2t.com/1t/so6.htm"
width=250></IFRAME> -
<IFRAME border=0 frameBorder=0 height=135 scrolling=no
src="http://www.1t2t.com/1t/so7.htm"
width=210></IFRAME> -
<IFRAME border=0 frameBorder=0 height=164 scrolling=no
src="http://www.1t2t.com/1t/so8.htm"
width=159></IFRAME> -
<IFRAME border=0 frameBorder=0 height=155 scrolling=no
src="http://www.1t2t.com/1t/so9.htm"
width=179></IFRAME> -
<IFRAME border=0 frameBorder=0 height=126 scrolling=no
src="http://www.1t2t.com/1t/so10.htm"
width=188></IFRAME> -
<IFRAME border=0 frameBorder=0 height=139 scrolling=no
src="http://www.1t2t.com/1t/so11.htm"
width=193></IFRAME> -
<IFRAME border=0 frameBorder=0 height=184 scrolling=no
src="http://www.1t2t.com/1t/so12.htm"
width=224></IFRAME> -
<IFRAME border=0 frameBorder=0 height=320 scrolling=no
src="http://www.1t2t.com/1t/so13.htm"
width=400></IFRAME> -
<IFRAME border=0 frameBorder=0 height=151 scrolling=no
src="http://www.1t2t.com/1t/so14.htm"
width=197></IFRAME> -
<IFRAME border=0 frameBorder=0 height=208 scrolling=no
src="http://www.1t2t.com/1t/so15.htm"
width=220></IFRAME> -
<IFRAME border=0 frameBorder=0 height=194 scrolling=no
src="http://www.1t2t.com/1t/so16.htm"
width=239></IFRAME>
5.推荐按钮
本来的推荐按钮是在最底下，不熟悉的人有时候可能找都找不到。
/*快速评论*/ #div_digg { position: fixed; bottom: 10px; right: 15px; border: 2px solid #ECD7B1; padding: 10px; width: 140px; background-color: #fff; border-radius: 5px 5px 5px 5px !important; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); }
若是开通了js权限的话，咱们还能够动态添加别的快捷按钮。
如：关注，回到顶部，快速评价。
1 <script type="text/javascript"> 2 /** 3 不知道为何页面加载完成时还读不到div_digg。可能也是动态生成的。 4 因此这里只能用定时器 不断的读取，当读取到了再给它动态添加快捷按钮 5 **/ 6 7 //自定义 定时器[当元素加载完成是执行回调函数] 8 function customTimer(inpId, fn) { 9 if ($(inpId).length) { 10 fn(); 11 } 12 else { 13 var intervalId = setInterval(function () { 14 if ($(inpId).length) { //若是存在了 15 clearInterval(intervalId); // 则关闭定时器 16 customTimer(inpId, fn); //执行自身 17 } 18 }, 100); 19 } 20 } 21 22 //页面加载完成是执行 23 $(function () { 24 customTimer("#div_digg", function () { 25 var div_html = "<div class=''>\ 26 <a href='javascript:void(0);' onclick='c_follow();'>关注</a>\ 27 | \ 28 <a href='#top'>顶部</a>\ 29 | \ 30 <a href='javascript:void(0);' onclick=\" $('#tbCommentBody').focus();\">评论</a>\ 31 </div>"; 32 $("#div_digg").append(div_html); 33 //tbCommentBody 34 }); 35 }); 36 </script>
ps：平时看你们的博客看得特爽。今天才知道原来写博客是件费时又费力的事情。不过写博客的好处也只有谁写谁知道！
你们若是有本身的窍门谢谢分享到评论区。
-----------------------------------------------------分割线---------------------------------------------------------------------------------------
补充：
有朋友问代码具体放哪里，有朋友问放入了代码为何没有效果。那么我在这里详细说说。
1.为何没有效果
注意没有效果颇有多是没有开通js权限。那么怎么测试本身是否有js权限呢？很简单放入一段测试代码就ok了。
<script type="text/javascript">console.log("测试成功~");</script>
把这句代码放入“页脚Html代码”保存便可。而后刷新你的页面。按F12点击Console，是否有打印了“测试成功”。（博客园貌似屏蔽了alert函数，因此不能弹出测试。）
若是没有，那么你能够发邮件到contact@cnblogs.com确认是否开通，没有开通的话能够申请开通。
2.代码具体放哪里
具体步骤图片分解
公告，页首和脚本地方均可以放html和js代码。
这里最后注意了！！以前我没有测试 原来代码直接贴进去是有问题的。不知道博客园有什么限制仍是什么。
像我这样引用js是没有问题的。至于你的js代码放哪里？你能够上传到博客园的文件，也能够用https://git.oschina.net 或 https://github.com
做者：耑新新，发布于 博客园
转载请注明出处，欢迎邮件交流：zhuanxinxin@foxmail.com
- 1. 博客园页面设置 博客园页面设置
- 2. 博客园页面设置
- 3. 博客园的基础设置 博客园页面设置
- 4. 博客园设置我的页面
- 5. 博客园定制页面（一）——博客园设置相关参考
- 6. 博客园页面美化
- 7. 博客园页面定制
- 8. 博客园背景设置
- 9. 博客园页面定制设置背景
- 10. 博客园皮肤-我的博客园皮肤设置教程
- 更多相关文章...
- • XSL-FO 页面 - XSL-FO 教程
- • jQuery Mobile 页面 - jQuery Mobile 教程
- • IntelliJ IDEA代码格式化设置
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 博客园页面设置 博客园页面设置
- 2. 博客园页面设置
- 3. 博客园的基础设置 博客园页面设置
- 4. 博客园设置我的页面
- 5. 博客园定制页面（一）——博客园设置相关参考
- 6. 博客园页面美化
- 7. 博客园页面定制
- 8. 博客园背景设置
- 9. 博客园页面定制设置背景
- 10. 博客园皮肤-我的博客园皮肤设置教程