电子工程世界-论坛中国最火的电子工程师交流社区博闻广记v1.3使用说明和视频教程
【模版介绍】： &
【视频教程】：
【】 & 【】 & 【】 & 【】
& 【】 & 【】
【横幅 图片】： &
【】 & 【】 & 【】 & 【】 & 【】
【插入响应式视频篇】： &
【特效动画篇】： &
【侧边栏 美化篇】： &
【视频教程】
1、使用本模板，具体要设置那些地方？
2、安装博闻广记模板要注意哪些？ &&
3、使用博闻广记EM模板，哪些地方必须修改？
什么博客程序？ &&
1、本模板是基于 EMlog 博客程序开发的，运行在php环境。你必须有一个php空间，再下载一个 EMLOG博客程序，然后才能安装、使用本模板。
2、emlog官网：
& & &emlog 下载地址：
怎么替换模版LOGO？ &&
1、LOGO位置：LOGO宽高：260×63& & 所在目录：bowen/images& & 格式：png & &位数：24位
2、说明：这个LOGO是在浏览器低于800分辨率下才会出现的，高于800分辨率则显示横幅图片，隐藏LOGO。最要是为手机界面而设计的，在电脑上是看不到的。
3、制作：你可以自己制作一个LOGO，宽高没有限制，合适为佳。不要制作的太大了，不然在低分辨率的手机上占用的空间很大。制作好后，用FTP，或者在线上传到images文件夹里替换就OK了。
4、链接：在线制作LOGO 的网站很多。&& &&
一、用什么浏览器浏览博客最舒服？& &
1、尽量使用现代浏览器，比如IE11、Google Chrome、遨游、火狐等浏览器来使用本模板。虽然本模板也支持IE6、7、8、9，但这些老版本的浏览器却不支持CSS3的动画效果。
2、点击進入
二、顶部横幅： & &
1、顶部横幅默认是31张。宽：1920px，高度没有限制。如果你想添加更多的横幅，随机显示，宽度请设计为1920PX以上，名字默认是：“top_banner”，存放目录：模板的：images 。更多横幅请移步模版扩展素材页面。
2、如果你觉得图片太多，或者太少，打开模版文件夹里面的“header.php” ，找到第61行，然后删除，或者增加图片链接。如果要添加随机图片直接在"&?php echo TEMPLATE_URL; ?&images/top_banner31.jpg"加"&?php echo TEMPLATE_URL; ?&images/top_banner32.jpg"即可。
代码演示：
&div id="top_banner"&
var str=new Array("&?php echo TEMPLATE_URL; ?&images/top_banner1.jpg","&?php echo TEMPLATE_URL; ?&images/top_banner2.jpg","&?php echo TEMPLATE_URL; ?&images/top_banner3.jpg","&?php echo TEMPLATE_URL; ?&images/top_banner4.jpg","&?php echo TEMPLATE_URL; ?&images/top_banner5.jpg");
a=str[parseInt(Math.random()*(str.length))];
document.write("&img src="+a+"&");
&/script&&/div&
三、底部横幅： & &
底部横幅默认是5张。代码和顶部横幅一样，在“footer.php”的第46行。修改方法和上面是一样的。
四、鼠标样式： & &
& & 1、鼠标样式的路径必须是绝对路径，如果是相对路径的话，有的浏览器会不显示。
& & 2、打开模板目录里的“main.css”，搜索/content/templates/bowen/images/，全部替换为你的绝对地址。或者在第4、30、407、455、626行找到“/content/templates/bowen/images/zhizhen.”修改为你的绝对地址。
cursor:url(/content/templates/bowen/images/zhizhen.ani),
url(/content/templates/bowen/images/zhizhen4.cur),
五：修改捐赠的链接： & &
& & 1、捐赠链接一共有3个地方。内容页echo_log.php有两处、底部footer.php有一处。
& & 2、&打开模板目录里的“echo_log.php”文件，在第56、57行找到&a href="/19"&修改为你的捐赠地址，仔细看有两处哟，一个是低分辨率下的文字模式，一是高分辨率下的图片模式。
代码演示：
&div class="juanzhu"&&a href="/19" class="hint--top
hint--error" data-hint="捐赠支持作者！点击進入。"&&img src="&?php echo TEMPLATE_URL; ?&images/juanzeng1.gif"&&/a&&/div&
&div class="juanzhu2"&&b&捐赠支持：&/b&如果觉得这篇文章对您有帮助，请&b&&a href="/19" class="shake shake-little" title="去看看有谁捐赠了。"&“扫一扫”&/a&&/b&鼓励作者！&/div&
六、分享链接： & &
& & 1、分享链接可修改可不修改，就看你自己了。默认连接用的是我申请的“JiaThis”，如果你想用自己申请的分享，请到“”去申请，然后替换为自己的代码。
& & 2、记住是替换两处。一是高分辨率下的图标模式，二是低分辨率（手机）下的文字模式。如果你要修改代码都得替换。“echo_log.php”第95、116行。
七、底部信息： & &
& & & 打开模板目录里的“footer.php”，找到第16行，修改“关于我们”、“清歌妙音”、“站长介绍”、“捐赠支持”等等链接为你自己的。
八、友情链接： & &
& & &1、侧边栏的友情链接默认是显示的，底部的友情链接默认是隐藏的，如果想要，随时取消底部相关的注释即可显示友情链接。。
& & &2、如果不想要侧边栏的友情链接，请在后台的“侧边栏”关闭它。
& & 3、然后打开“footer.php”，找到第28行，把“&!-- 友情链接，如何需要这个功能在底部，请去掉后面的注释即可。 --& &!-- &div id="ilink"&&?php index_link();?&&/div& --&”修改为&!-- 友情链接，如何需要这个功能在底部，请去掉后面的注释即可。 --& &&div id="ilink"&&?php index_link();?&&/div&
九、“JS 控制GIF动画播放”的功能，支持IE9.10.11，不支持IE8。 & &
& & & &1、有时候我们在网页中加了许多GIF动画，可是并不想全部都自动播放，有时候只想让某个自动播放，某些不自动播放，那么这个JS插件就起作用了。在不需要自动播放地方，把img里的src=替换为data-gifffer=。
& & & & & &如：&img data-gifffer="image.gif"&
& & & & & &演示地址：
& & & &2、如果要图片居中怎么办？ 请在img里 加 class="juzhong" 即可居中。比如：&img&data-gifffer="image.gif" class="juzhong"&
演示GIF，点击即可播放，再点停止。
十：插入视频的代码： & &
& & &1、因为本模板是响应式设计，所以插入视频时要注意统一格式代码。在手机分辨率下视频是自适应宽高的，如果不统一代码就不起作用。
代码如下：
&div class="embed-container"&
&iframe height="498" width="510" src="/embed/XNzE5ODE5NjA0" frameborder="0" allowfullscreen=""&
2、视频自适应主要是加&div class="embed-container"&&&/div&一句。 其中的视频地址主要是插入视频网站的“通用代码”。
3、插入优酷视频： & &
插入土豆视频： & &
大家注意：复制土豆网视频的地址默认是“&iframe src="/programs/view/html5embed.action?type=2&code=h7dAo5lCuH4&lcode=NBDgX_W2aJk&resourceId=0_06_05_99" allowtransparency="true" scrolling="no" border="0" frameborder="0" style="width:480height:400"&&/iframe&”
其中的默认的“style="width:480height:400”我们要修改为width=480 height=400
如果不修改的话，响应式不起作用，优酷的通用代码不存在这个问题。
插入其他视频： & &
制作中，请期待……
十一：侧边栏 & &
1、侧边栏的黄金包边的标题框一共有10几个。为什么做这么多，多点更丰富，也更好自定义侧边栏。
2、热门、随机、最新文章请全部设置为 9 篇。因为边框是固定高度的，9篇为最佳。位置：登陆后台---侧边栏
3、为了美观起见，我建议把“搜索框的标题文字去掉，留空”。
最终效果：
4、自定义组建的所有标题都留空，也是为了美观起见，这样我们才好选择用什么样的宝石边框来美化侧边栏。
侧边栏 自定义组建 所有代码：
直接复制、粘贴在后台新建组建里即可。
1、QQ、微信、邮件、捐助等图标 代码
1、登陆 -- 后台 -- 侧边栏 -- 自定义一个新组建 -- 复制、粘贴代码進去，名字一定要留空，然后保存。
2、修改其中的qq、邮件、微信、站长介绍、留言、捐赠链接，不要的图标删除即可。rss链接不要改动。
&div id="qq"&
&a href="/msgrd?v=3&uin=&site=qq&menu=yes" target="_blank" class="hint--top
hint--rounded" data-hint="在线联系站长QQ" class="shake shake-little"&
&img src="/content/templates/bowen/images/qq.png" onmouseover="this.src='/content/templates/bowen/images/qq2.png'" onmouseout="this.src='/content/templates/bowen/images/qq.png'"&&/a&
&a href="/cgi-bin/qm_share?t=qm_mailme&email=ESAoIyAjJCYpJiJRYGA-cn58" target="_blank" class="hint--top
hint--rounded" data-hint="在线给站长写信。" class="shake shake-little"&
&img src="/content/templates/bowen/images/mail.png" onmouseover="this.src='/content/templates/bowen/images/mail2.png'" onmouseout="this.src='/content/templates/bowen/images/mail.png'"&&/a&
&a href="/cfc80.jpg" target="_blank" class="hint--top
hint--rounded" data-hint="扫一扫加站长微信。" class="shake shake-little"&
&img src="/content/templates/bowen/images/weixin.png" onmouseover="this.src='/content/templates/bowen/images/weixin2.png'" onmouseout="this.src='/content/templates/bowen/images/weixin.png'"&&/a&
&a href="/rss.php" target="_blank" class="hint--top
hint--rounded" data-hint="RSS订阅本站文章" class="shake shake-little"&&img src="/content/templates/bowen/images/rss.png" onmouseover="this.src='/content/templates/bowen/images/rss2.png'" onmouseout="this.src='/content/templates/bowen/images/rss.png'"&&/a&
&a href="/about/zzjs.html" target="_blank" class="hint--top
hint--rounded" data-hint="站长介绍" class="shake shake-little"&&img src="/content/templates/bowen/images/ren.png" onmouseover="this.src='/content/templates/bowen/images/ren2.png'" onmouseout="this.src='/content/templates/bowen/images/ren.png'"&&/a&
&a href="/6.html" class="hint--left
hint--rounded" data-hint="给本站留言" class="shake shake-little"&&img src="/content/templates/bowen/images/liuyan.png" onmouseover="this.src='/content/templates/bowen/images/liuyan2.png'" onmouseout="this.src='/content/templates/bowen/images/liuyan.png'"&&/a&
&a href="/19.html" class="hint--left
hint--rounded" data-hint="喜欢本站就捐赠支持吧！" class="shake shake-little"&&img src="/content/templates/bowen/images/juan.png" onmouseover="this.src='/content/templates/bowen/images/juan2.png'" onmouseout="this.src='/content/templates/bowen/images/juan.png'"&&/a&&/div&
2、音乐播放器代码 & &
&div id="music"&
&div id="music_biaoti"&&span&清歌妙音&/span&&/div&
&div id="music_bfq"&
&embed src="/widget/804,,870,127,,,807,,,,,,,556,,,_260_350_A9FAD_0/multiPlayer.swf" type="application/x-shockwave-flash" width="260" height="350" wmode="opaque"&&/embed&&/div&&/div&
最终效果：
虾米音乐申请地址：
3、站长精选文章代码
&div id="jingxuanwenzhang"&
&div id="jingxuan_biaoti"&
&span&站长精选文章&/span&&/div&
&div id="jingxuan_biankuang"&&div class="wenzhang"&
&li&&a href="/post-48.html" title="点击进入"&揭秘历史上所有预言的终极使命&/a&&/li&
&li&&a href="/post-38.html" title="点击进入"&天下第一大学问&/a&&/li&
&li&&a href="/post-37.html" title="点击进入"&这个世界有没有“神”？ （一）&/a&&/li&
&li&&a href="/post-88.html" title="点击进入"&进化论的重重危机&/a&&/li&
&li&&a href="/post-84.html" title="点击进入"&小人国之谜&/a&&/li&
&li&&a href="/post-14.html" title="点击进入"&世界十大超级问题&/a&&/li&
&li&&a href="/post-26.html" title="点击进入"&外星人说地球是空心的&/a&&/li&
&li&&a href="/post-42.html" title="点击进入"&网络小说中的骇人狂语&/a&&/li&
&li&&a href="/post-50.html" title="点击进入"&有人闯入了“地心世界”&/a&&/li&&/ul&
&/div&&/div&&/div&
最终效果：
这些都可以自定义，但格式是这样的。
4、实用工具 代码
&div id="biankuang4"&
&span&实用工具&/span&&/div&
&div id="biankuang6"&
&li&&a href="http://zh.wikipedia.org/wiki/Wikipedia:%E9%A6%96%E9%A1%B5" target="_blank" title="全球最大的百科网站"&维基百科&/a&&/li& &li&&a href="http://www.zdic.net/" target="_blank" title="一个不错的汉字网站"&汉典&/a&&/li& &li&&a href="/" target="_blank"&百度云网盘搜索&/a&&/li& &li&&a href="/" target="_blank"&百度站长平台&/a&&/li& &li&&a href="/?char=%E8%B5%9E&font=%E8%A1%8C%E4%B9%A6&fp=0&fs=96&fm=1&ff=e32e26&fb=ffffff" target="_blank"&书法迷&/a&&/li& &li&&a href="http://tool.lu/" target="_blank"&在线常用工具&/a&&/li& &li&&a href="http://tool.oschina.net/" target="_blank"&在线工具大全&/a&&/li& &div id="gaodu2"&&/div&&/div&
最终效果：
5、资源、作品分享代码
&div id="biankuang3"&
&span&资源、作品分享&/span&&/div&
&div id="biankuang7"&
&a href="/home/texiaowang/item" target="_blank"&
本站视觉作品&/a&
&a href="/" target="_blank"&
本站淘宝店铺&/a&
&a href="/share/home?uk=" target="_blank"&
本站网盘资源&/a&
&a href="/" target="_blank"&
免费贴图库&/a&
&a href="/" target="_blank"&
嘀咕网&/a&
&div id="gaodu2"&&/div&&/div&
最终效果：
6、侧边栏flash小宠物 代码 & &
本博客不但图片资源丰富，连侧边栏的小宠物、小动物都十分的丰富，现提供：12 个flash供你选择使用，在侧边栏你可以添加多个。
这12个包括：小仓鼠、乌龟、金鱼、海鱼、时钟、物理现象、狗、企鹅、蜘蛛、青蛙等。
小鱼儿 代码：
&div id="biankuang3"&
&span&我家小鱼儿&/span&&/div&
&object type="application/x-shockwave-flash" data="/content/templates/bowen/flash/yu.swf" width="100%" height="186"&
&param name="movie" value="/content/templates/bowen/flash/yu.swf"&
小仓鼠 代码：
&div id="biankuang3"&
&span class="hint--top
hint--rounded" data-hint="点一下，喂点食物！"&我家小仓鼠&/span&&/div&
&object type="application/x-shockwave-flash" data="/content/templates/bowen/flash/hamster.swf" width="100%" height="200"&
&param name="movie" value="/content/templates/bowen/flash/hamster.swf"&
注意：如果想换别的宠物，直接替换&hamster.swf&就行了，仔细看，有两处哟。
最终效果：
一十二：修改统计日期 & &
1、打开“module.php”，找到第 582&行以下，把&strtotime('')) 和 初出茅庐：日 日期修改为你的。
2、如果你不想显示那么多统计，删除或注释&li&哪句就行了。
一十三：修改侧边栏浮动跟随广告 & &
1、侧边栏浮动跟随广告，其实并不一定非得是广告，你也可以修改成最新文章、随机文章、热门文章等。你如果觉得多余删除即可。
2、找到本模板文件夹的“side.php”的第 78-95 行之间，修改其中的文字链接和图片链接就行了，你可以删除、添加图片文字，或者不要这个广告都可以。图片宽度不要超过：276 px，因为侧边栏最大的宽度就是 276 px。
一十四：CSS3特效文字的使用 & &
1、本模板引用了国外高手制作的CSS Shake文字特效样式，它可以使文字、图片、DIV、按钮和任何网页元素动起来。特别是在正文，让重要、关键的字跳动起来，这样给浏览者很新颖、很有趣的感觉。
2、在编辑文章里切换到“HTML代码”。然后在需要的文字、图片中添加代码。如：&&&div class="shake"&&/div& & &在&div&、&span&、&img&和&p&中加 class="shake"
比如本页所引用的3个特效代码：
CSS3特效文字的使用
代码：&span style="color:#E53333;" class="shake shake-little shake-constant"&CSS3特效文字的使用&/span&
代码：&span style="color:#FB9438;" class="shake shake shake-constant"&CSS Shake&/span&
具体演示参考页面
代码：&span style="color:#006600;" class="shake shake-slow shake-constant"&具体演示参考页面&/span&
3、可以运用在任何标签中，如：&a href="" class="shake"&、&span class="shake"&、&img src="" class="shake"&等等里面。
鼠标移到logo上去！
代码：&img src="/img/logo_150.png" class="shake shake-opacity"&
4、具体演示参考页面： &[]
一十五：框架自适应宽高。 & &
框架自适应很简单，主要是把宽设置为：100% &就行了，高度根据自己的情况设置。代码如下：
&iframe src="/xxx.html" width="100%" height="200px" frameborder="0" scrolling="no"&&/iframe&
一十六：表格自适应宽高。 & &
目前此模板表格还不能自适应。缩小浏览器后，表格只是剪切了。这个问题以后解决。
一十七：气泡信息提示&HINT.css & &
1、本模板引用的气泡提示是国外人制作的HINT.css，不带js。 &
2、如何使用？主要是在你需要的地方加&class="hint--top" data-hint="文字信息。。。"
& & &朝上是：class="hint--top" data-hint="文字信息1。。。"
& & &朝下是：class="hint--bottom" data-hint="文字信息2。。。"
& & &朝右是：class="hint--right" data-hint="文字信息3。。。"
& & &朝左是：class="hint--left" data-hint="文字信息4。。。"
红色气泡样式：
& & 朝上显示：class="hint--top &hint--error" data-hint="这是红色气泡。。。"
& & 朝下、朝左、朝右都同上一样修改。
橙色气泡样式：
& & 朝上显示：class="hint--left &hint--warning" data-hint="这是橙色气泡提示"
还有更多的效果和颜色，
一十八：使用“多说社会化评论系统”。 & &
1、本模板有两个版本，一是em版本，二是多说版本。多说版本就是安装了多说评论系统插件要下载的版本。如果你还没有使用这个系统，请&?&登陆后台&?&应用 ? 插件&? 第7页&? 安装多说评论插件
2、或者直接打开这个地址下载安装：
3、安装多说评论后，在多说后台设置下一些参数。
4、在“暂无评论“哪里打一个空格”，其他如图。
一十九：后台设置文章摘要和头像上传。 & &
1、如果你是第一次安装EMLOG博客，那么就要设置下一些参数。先登录后台，点右上角的“设置”。
2、自动摘要打勾，设置 116个字符，刚好两排。如果你要3排文字，就输入170个字符吧。设置完后，点“保存设置”。
3、再点“个人设置”，这时你就能看到一个黑色的无名头像。赶快找一张漂亮、个性的头像，上传替换吧，宽度默认是80px，高度没有限制。你可以上传正方形、长方形的图片都可以。
上传完后的效果：
记住：一定要加签名哟，不然前台显示不出效果。下面是首页侧边栏的效果。
&您阅读这篇文章共花了：&
捐赠支持：
本文作者： &&&&
文章标题：
本文地址：
版权声明：若无注明，本文皆为“博闻广记”原创，转载请保留文章出处。
扫一扫微信二维码
微信号：mingjian9941
站长精选文章
我家南极鹅查看: 1079|回复: 7
[原创极品]
HTML5教程书籍电子版30本合集
该用户从未签到
众所周知，HTML5将成为新一代的Web技术标准，必定会改变整个Web应用领域的游戏规则。小弟特此收录了一些最经典的HTML5书籍的电子版，总共30本，涵盖中文版、英文原版以及各种实用手册。想要学HTML的各位看客，可千万不能错过这些书！
资源预览如下：
《HTML5高级程序设计》完整版电子书
《HTML5从入门到精通》电子书下载
《HTML5移动Web开发指南》
《HTML5与CSS3权威指南》
《新手学HTML5 移动开发——面向iOS和android 平台》
CSS2.0+CSS3.0+HTML4+HTML5手册
W3C标准HTML5手册[CHM]
HTML5视觉手册 (HTML5 Visual Cheat-Sheet)
HTML5+CSS3 中文参考手册
24小时学会HTML5 Wrox HTML5 24-Hour Trainer
《深入html5设计》(Pro.HTML5.Programming)
The Web Designer’s Guide to iOS Apps With HTML5
《认识CSS3和HTML5 》[WORD版]
HTML5核心技术(Oreilly HTML5 Canvas)
《HTML5与CSS3权威指南》
HTML5 Solutions Essential Techniques
HTML5速查手册
14:15 上传
点击文件名下载附件
125.16 KB, 下载次数: 317
TA的每日心情开心 22:12签到天数: 366 天[LV.9]以坛为家II
这个是要下载豆的，俺没有豆豆怎么办。
TA的每日心情擦汗 15:47签到天数: 262 天[LV.8]以坛为家I
TA的每日心情奋斗 00:02签到天数: 220 天[LV.7]常住居民III
谢谢分享。
TA的每日心情衰 09:01签到天数: 1 天[LV.1]初来乍到
楼主打包一下呗& && &
TA的每日心情擦汗 14:58签到天数: 2 天[LV.1]初来乍到
来学习学习&&谢谢分享啊
TA的每日心情开心 12:01签到天数: 3 天[LV.2]偶尔看看I
学习一下& && && && &&&
TA的每日心情怒 10:37签到天数: 16 天[LV.4]偶尔看看III
应该很不错，以后留着备用吧
这是今天在向军老师qq中截到的聊天截图，这位李同学是今年的大学应届毕业生，大四下学期来参加的培训，今年大学生就业困难是大家众所周知的事实，而李同学在毕业后便找到了试用期薪水7000的工作，完爆各路“学霸”，可喜可贺。
凭借在后盾练就的过硬的技术本领，受到了各招聘企业的疯抢，毕业后第一时间便找到了8000元的高薪工作
学习中老师严禁又不乏幽默的教学方式让他收获很大，现被IBM公司录用，月薪9000元，他感觉还不太满意，看看他怎么说吧！
Powered by