网站建设

中国博客联盟第二阶段折腾小记:新增WP插件、随机访问、邮件系统及其他细节改善

自7月11日中国博客联盟第一阶段折腾总结到现在,历时2个多月,第一阶段小结中提到计划都已全部完成!而且还改善了很多方方面面的不足。现在就来总结下,期间到底发生了哪些变化。一、响应式布局计划只是额外制作一个移动版本的,不想修改过程中,不经意就上了响应式这高大上的档次,而且还是三段响应式喔...当然,界面样式细节都做了优化和美化,整体效果比老版本要好很多。详细介绍:中国博客联盟:成员展示导航响应式布局,完善宽度受限的不足(附响应式CSS教程)二、WordPress插件WordPress导航插件的推出,又将博客联盟往高大上继续推进了一步,更简单易用了。详细文章:中国博客联盟成员展示导航WordPress插件版三、分页按钮延时以前的导航分页按钮确实太灵敏了,鼠标经过就点击了,体验很不好,自从加入延时判断机制后,舒服多了。详细文章:JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度四、成员检查机制对于博客联盟这种类型网站,这个机制真的非常有用!不用再苦逼的人工检查成员网站是否不能访问了,脚本并发200线程咻咻的几下就完成了大体的检测,最大程度的确保博客联盟展示的每一个博客都是可以正常访问的。详细文章:中国博客联盟成员站点自动检查机制正式上线五、完善邮件系统这算是第二阶段折腾中,熬夜数天的成果,也是此次改善中最实用的功能!①、新站提交发邮件②、变更信息发邮件③、意见反馈发邮件④、文章投稿发邮件 ⑤、审核通过发邮件,甚至可区分荣誉博客与否,发送不一样的邮件 该功能的完善,不但能及时提醒管理员审核,而且还能够吸收更多的荣誉成员,壮大这个队伍!六、改善网站图标多个成员吐槽页面速度加载太慢,经过反复检查,发现部分成员网站图标居然60多kb,最大的居然达到140kb!这多大图标的加载,页面不慢才怪!于是联系网站图标的API作者SOZ,加了一个网站图标大小限制:荣誉博客最大16kb,其他成员最大为10kb,超过这个限制将显示联盟默认图标。详细文章:关于网站图标favicon.ico那点事儿,你造吗?七、随便逛逛前日,黄启福博友建议新增一个ROLL随机按钮,能够随机访问中国博客联盟成员博客。个人觉得这个功能非常棒,而且也不难实现,所以昨天晚上熬夜到2点,把这个功能加上了,效果还算不错。①、顶部随机按钮想了半天,才决定把这个随便看看的按钮放到联盟搜索按钮旁边,合情合理。功能:点击后随机展示博客联盟成员详情页面预览:http://zgboke.com/roll②、最近来访随机按钮功能:点击后随机访问一个荣誉博客(直链)预览:http://zgboke.com/rollhonor③、联盟导航随机按钮I、荣誉博客页面随机链接功能点击后随机访问一个荣誉博客站点(直链)II、类型分类页面随机链接功能:点击后随机访问一个当前类型的博客站点(直链) 有了这个功能,当你不知道去哪个博客时,就试试吧,也许能发现让你感兴趣的博客!八、细节改善期间改善了很多细节,大部分没做具体记录,都忘得差不多了。就挑几条记录下:①、首页地区分类导航,全部随机排序②、友链交换全部随机排序③、全站边框和圆角优化及其他强迫症优化...④、推出小黑屋机制,暂时屏蔽或删除的博客链接将自动展示小黑屋内容.....至于下一阶段的改善计划,暂时还未想好,我想应该是关于联盟宣传推广方面的改善吧!毕竟现在知名度还是太低了,后续不管是通过做活动,还是通过网盟推广,我想总是会有的,只要这个方向对了,就可以放手一搏!加油吧,骚年!
阅读全文
网站建设

中国博客联盟成员站点自动检查机制正式上线

之前,已经发过相关文章:Shell+Curl网站健康状态检查脚本,抓出失联站点,现在已经把网站正式搬到了vps服务器,我也可以放开手脚折腾各种功能了。 把上次的脚本完善了一下,由于curl存在一定的误杀缺憾,目前还无法采用全自动直接操作数据库屏蔽异常网站的机制。折中考虑了以下,给脚本新增了sendmail发邮件功能,可将异常站点发送到我的邮箱,然后通过我手动点击这些网站去检查对方是否能够正常打开。确实打不开,才在博客联盟后台屏蔽此站点。 目前,系统将在每周五晚上8点定期执行脚本开始检查,超过8s未取得http状态的进入3次重试模式,3次均无法获取结果,将判定为站点错误。若取得了非200的http状态码,也会将其判定为异常,等待人工二次检测。 鉴于大部分对脚本都没有兴趣,就不分享脚本代码了,简单的说一下这一次检查结果好了: ①、收到的邮件内容: ②、手动检查结果: HTTP Status is 000 : 小丑博客 : 000          马涛博客 : 000 历史新知 : 000 惜乐博客 : 000 三秒兔(备案中) : 000 yfeer's : 000 洪言设博客 : 000 HTTP Status is other : 余贤康的博客 : 503           HTTP Status is 404 : 安卓资源网 : 404 超人不会飞 超人不会飞 : 404 超人不会飞 超人不会飞 : 404 HTTP Status is 404 : 大学生创业 : 301 cad教程 : 301 梦想家 : 301 大话王 : 301 听风客栈 : 302            暧芘博客 : 301 缘生小屋 : 301 可穿戴设备 : 301 小宇在线 : 301...
阅读全文
中国博客联盟:成员展示导航响应式布局,完善宽度受限的不足(附响应式CSS教程) 网站建设

中国博客联盟:成员展示导航响应式布局,完善宽度受限的不足(附响应式CSS教程)

前些天在写中国博客联盟第一阶段折腾小记时提到了要做一个公用导航的移动版本,今天中午借着午休的时间就去查了下响应式资料,什么通过JS来判断宽度并切换CSS、通过响应式CSS语法来改变样式等等。 通过结合先用公用导航,仔细分析后,决定采用最容易实现的Media Queries的方法来实现样式的自动切换。以前张戈就制作过互推联盟公用页面的移动CSS样式,所以CSS文件也是现成的,在简单的增加和修改了CSS引入语句后,立竿见影,真的很简单! 至于预览效果,有兴趣的朋友可以点击下面链接,打开页面后拖拽改变浏览器宽度来查看变化: http://m.zhang.ge/alliance#mobile 或者在不同宽度的页面调用联盟公共导航js也可以查看到响应式效果: ①、当页面宽度大于或等于601px时展示PC端样式: ②、当页面宽度大于或等于461px、小于或等于600px时展示移动端样式一:  ②、当页面宽度小于或等于460px时展示移动端样式二: Ps:移动端样式和PC端样式的区别如下: <1>、移动版导航中的网站列表为一行3列,PC则为一行5列; <2>、移动版样式一中取消了申请加入按钮和联盟滚动公告; <3>、移动版样式二中联盟滚动公告,分类强制显示为2个字,而不是之前诡异的3个字,并隐藏网站图标节省空间。 样式则会根据所在页面的宽度自动切换,比额外弄一个移动版页面更省心方便! 最新更新:移动样式一分为二,感谢黄启福博主的建议。 下面附上响应式CSS的相关教程: Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。  首先来看一个简单的实例:  上面的media语句表示的是:当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容: 1、screen:这个不用说大家都知道,指的是一种媒体类型; 2、and:被称为关键词,与其相似的还有not,only,稍后会介绍; 3、(max-width:600px):这个就是媒体特性,说得通俗一点就是媒体条件。 为了更能理解Media Query,我们在次回到前面的实例上:转换成css中的写法为(联盟导航采用的正是这个方法): 其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){…}的大括号之中。在语句上面的语句结构中,可以看出Media query和css的属性集合很相似,主要区别在: 1、Media query只接受单个的逻辑表达式作为其值,或者没有值; 2、css属性用于声明如何表现页页的信息;而Media Query是一个用于判断输出设备是否满足某种条件的表达式; 3、Media Query其中的大部分接受min/max前缀,用来表示其逻辑关系,表示应用于大于等于或者小于等于某个值的情况 4、CSS属性要求必须有属性值,Media Query可以没有值,因为其表达式返回的只有真或假两种 下面我们一起来看看Media Queries的具体使用方式 一、最大宽度Max Width 上面表示的是:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。 二、多个Media Queries使用 Media Query可以结合多个媒体查询,换句话说,一个Media Query可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。 三、设备屏幕的输出宽度Device Width 上面的代码指的是iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率我们可以使用media query为android手机在不同分辨率提供特定样式,这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。 四、not关键字 not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。 五、only关键字 only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。 六、其他 在Media Query中如果没有明确指定Media Type,那么其默认为all,如: 另外还有使用逗号(,)被用来表示并列或者表示或,如下 上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。 关于Media Query的使用这一节就介绍到此,最后总体规纳一下其功能,个人认为就是一句话:Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。
阅读全文
网站建设

博客互推联盟正式启用独立域名:zgboke.com,全新改版!

自从注册并备案了zhang.ge和zgboke.com个域名之后,我一直想把zgboke.com作为中国博客互推联盟的独立域名,让博客互推继续发展壮大,而不再受限于那个小小的互推联盟调用页面。 无奈一直太忙,都没着手去实现我的想法。近段日子,我下决心要把这个介于网站分类目录和网站导航的博客展示站做起来! 以上,就是张戈这些天消失的大概原因了,对于每天来访的朋友,张戈报以歉意,等空下来了,定当把你们撸爽下.... 回顾历程: 下面,先回顾一下张戈博客关于互推联盟的折腾史: 2014年04月16日     互推联盟页面推出荣誉站点机制,提高调用价值; 2014年04月08日     推出SEO更友好的JS调用版本; 2014年04月07日     推出完美自适应互推联盟iframe代码(含移动版),兼容更窄页面; 2014年03月20日     尝试添加公共留言模块,但测试iframe跨域自适应失败; 2014年03月17日     互推联盟iframe代码新增公告模块; 2014年03月15日     推出互推联盟通用iframe代码,实现成员数据统一; 2014年03月12日     推出新版互推联盟页面,显示更清晰,且可以自助申请; 2014年02月21日     响应麻辣博客号召,加入互推联盟页面; 一路走来,认识了不好朋友,也学到了不少知识!在这里感谢所有调用互推页面的博主,感谢经常出谋划策的联盟管理员,海江兄等。 人们常说,我们不能总在回忆历史,那就从现在开始,做好当下,展望未来! 目前,中国博客互推联盟(zgboke.com)已完成了七七八八,剩下的也就是修修补补的干活了。决定先公布出去,希望新老成员速度加入,集思广益把联盟做起来,大家好才是真的好! 联盟首页:http://zgboke.com 首页预览图: 公共调用代码: <script language="javascript" src="http://zgboke.com/hutui.js"></script> Ps:调用方法和旧版保持一致。 调用预览图:   Ps:布局还在持续改善中,具体效果请到http://zgboke.com和https://zhang.ge/alliance实时查看。 关于荣誉博客: 首先,非常感谢60个荣誉博客一直以来对互推联盟的大力支持,调用互推页面,让联盟更好的曝光和推广。 此次,互推联盟独立出来之后,张戈打算淡化荣誉博客这个概念,因为这个概念实际上是给联盟上了一道枷锁,限制了进一步的发展,毕竟数量有限。 但是,也不能让调用互推页面的博主感觉一点好处也没有,所以请往下看。 关于活跃站点: 自此所用建站程序实现了点入活跃度和点出活跃度的排名机制,所以张戈选取了点入活跃度作为调用页面第一个TAB选项内容,名为活跃博客。 有2种情况: ①、当你的博客通过js代码调用了互推联盟页面之后,每一次该页面被访问,你的博客都会在公共页面上的【活跃博客】以及互推联盟首页的活跃博客中排名第一!当其他博客也产生这个动作之后,你的博客也会顺势往后移动一名,从而实现正在活跃的博客排名。 ②、当年的博客给互推联盟加上了友情链接之后,每一次该链接被点击,你的博客也会在公共页面上的【活跃博客】以及互推联盟首页的活跃博客中排名第一!排名机制和以上相同,但是命中率不及①中机制,个人建议双管齐下为最佳,甚至你也可以设置nofollow,互推联盟需要的只是一个曝光率! 额外的奖励: 当你调用了互推联盟页面,或是给互推联盟加上友链时,联盟会给你的博客加上【置顶】、【推荐】标志!有了这个标志,你的博客将有机会出现在互推联盟的所有前端页面! 总之,通过js调用互推联盟页面或者给互推联盟加上友链之后,你的博客就得到了多个个优先展示的机会!相信你会做出明智的选择! 你还等什么? 目前互推联盟正处于改版后的嗷嗷待哺状态,需要各位老朋友的支持,所以现阶段申请加入的博客,将会第一时间得到审核! 待发展稳定之后,为了联盟进一步的发展壮大,新博客的加入,将需要加上友链或者调用互推页面方可审核通过。 若有任何问题请入群交流: 互推联盟QQ群:   272279261 手机端二维码: Ps:入群请注明博客地址,另外牛逼哄哄不交流的博主请勿打扰!
阅读全文