Emlog热门随机文章Tab选项卡切换

摘要

X-PcMobi主题的热门文章/

X-PcMobi主题的热门文章/随机文章Tab选项卡切换基本完成,热门文章是现在emlog常用的来自蓝叶博客的30天按点击率排行文章,随机文章是emlog自带的,两者分别起着推荐热门吸引读者的文章,增加旧文章的曝光率的作用。利用选项卡的方式,可以把两者结合起来。

实现代码主要参考自tab选项卡新闻列表切换效果代码,有兴趣可以进去下载测试。这里博主笑忘书写下如何用在emlog文章各种榜单的切换。

1.首先打开模板的module.php文件,在后面加入整合后的热门文章和随机文章代码:

<?php//30天按点击率排行文章function hotlog(){$db = MySql::getInstance();$time = time();$sql = "SELECT gid,title FROM ".DB_PREFIX."blog WHERE type='blog' AND date > $time - 30*24*60*60 ORDER BY `views` DESC LIMIT 0,8";$list = $db->query($sql);$i = 0;?><div id="sidelog"><h3 class="up" id="lognav1" onclick="tab('log',1,2);">热门文章</h3><div id="log1" class="block"><ul><?php while($row = $db->fetch_array($list)){ $i++;?><li><a href="<?php echo BLOG_URL; ?>?post=<?php echo $row['gid']; ?>" title="<?php echo $row['title']; ?>"><?php if($i==1){?><em class="one"><?php echo $i;?></em><?php }else if($i==2){ ?><em class="two"><?php echo $i;?></em><?php }else if($i==3){ ?><em class="three"><?php echo $i;?></em><?php }else{ ?><em class="SoSo"><?php echo $i;?></em><?php }?><?php echo $row['title']; ?></a></li><?php } ?></ul></div><?php } ?><?php//widget:随机文章function random_log(){ $Log_Model = new Log_Model(); $randLogs = $Log_Model->getRandLog(8);$i=1;?><h3 id="lognav2" onclick="tab('log',2,2);">随机文章</h3><div class="clear"></div><div id="log2"><ul><?php foreach($randLogs as $value): ?><li><a href="<?php echo Url::log($value['gid']); ?>"><?php if($i==1){?><em class="one"><?php echo $i;?></em><?php }else if($i==2){ ?><em class="two"><?php echo $i;?></em><?php }else if($i==3){ ?><em class="three"><?php echo $i;?></em><?php }else{ ?><em class="SoSo"><?php echo $i;?></em><?php }?><?php echo $value['title']; ?></a></li><?php $i++; endforeach; ?></ul></div></div><?php }?>

修改显示文章数(代码中的8),$sql = "SELECT gid,title FROM ".DB_PREFIX."blog WHERE type='blog' AND date > $time - 30*24*60*60 ORDER BY `views` DESC LIMIT 0,8"和$randLogs = $Log_Model->getRandLog(8);。

2.接着在side.php里加入调用代码:
<?php hotlog();?><!--热门文章--><?php random_log();?><!--随机文章-->

3.在footer.php接入相应的JS:
<script>function tab(name,num,n){for(i = 1;i <= n;i++){var menu = document.getElementById(name+"nav"+i);var cont = document.getElementById(name+i);menu.className = i == num ? "up" : "";if(i == num){cont.style.display = "block";} else{cont.style.display = "none";}}}</script>

原理是给每个选项卡设定一个含1到n的数字的ID,逐一检索,将选择的列表打开,将未选择的关闭。

Emlog热门随机文章Tab选项卡切换

4.本站使用的CSS,还不够完善,请自行修改:
#sidelog{width:100%;height:23.0em; position:relative;margin:0.5em 0;padding:0;}#sidelog ul{list-style:none;margin:0;padding:0;}#sidelog li{margin:0;}#sidelog div {position:absolute;top:2.8em; left:0; width:100%;height:20em;}#sidelog div {display:none;}#sidelog h3{float:left;width:50%;cursor:pointer; text-align:center;font-family:Microsoft YaHei;margin:0;display:inline-block}#sidelog .up {background:#f5f5f5;color:#000;box-shadow:1px 0 5px #bbb }#sidelog .block{display:block;}#sidelog li a{display:block;padding:;border-bottom:1px solid #ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}#sidelog li em{padding:0.3em 0.5em;border-radius:5px;color:#fff;margin-right:0.5em;border-radius:2px;box-shadow:1px 1px 5px #ccc;}#sidelog .one{background-color:#e04620}#sidelog .two{background-color:#00ccff}#sidelog .three{background-color:#03bf03}#sidelog .SoSo{background-color:#aaaaaa}

放在main.css文件里即可


感谢作者:笑忘书的投稿,欢迎大家投稿: http://likinming.com/post-87.html

发表评论

注意:本博客开启缓存,你的评论一般2小时后才能看到,如是广告,评论将无法显示!

目前评论:10 条

  1. avatar 太原SEO
    回复 2016-01-28 15:59  沙发

    没事转转

  2. avatar 北京seo
    回复 2015-07-15 20:45  板凳

    前来拜读,有些日子没来了。

  3. avatar 淘米纪
    回复 2015-07-15 18:19  地板

    技术性很强,值得学习

  4. avatar IT疯狂女
    回复 2015-07-15 10:08  #4 楼

    从来都没有整过这东东

  5. avatar 笑忘书
    回复 2015-07-15 08:48  #5 楼

    终于上头条了(诶,这话不应该是汪峰说的吗)
    不过李明兄很少写了

  6. avatar 姜辰
    回复 2015-07-15 07:37  #6 楼

    emlog这就一个海洋,笑忘书就是海洋的挖掘者···李明就是海洋的搬运工,我们就是海岸的菜鸟····

    • avatar 李明

      @姜辰:李明是个苦迫的搬运工。

      • avatar 姜辰

        @李明:这样说真的合适吗?

        • avatar 笑忘书

          @姜辰:开挖掘机的小菜鸟

  7. avatar wys
    回复 2015-07-15 06:32  #7 楼

    EMLOG就是一个海洋,值得折腾的东西蛮多的。