前端开发

 首页 > 前端开发 > css教程 > 将CMS首页焦点幻灯移植到BLOG布局中 - html/css语言

将CMS首页焦点幻灯移植到BLOG布局中 - html/css语言

分享到：
【字体：大 中 小】
导读：
          经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中，留言中无法说明白，现在就教大家将CMS首页焦点幻灯移植到BLOG布局中，不要看见长长的代码就头晕，只要按着下面的步骤操作就...

 

经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中，留言中无法说明白，现在就教大家将CMS首页焦点幻灯移植到BLOG布局中，不要看见长长的代码就头晕，只要按着下面的步骤操作就可以了。

具体效果如图：

提示：编辑修改模版文件，请使用notepad++或EmEditor文本编辑软件，通过FTP软件上传覆盖原文件，或者在Wordpress后台外观→编辑中修改模版文件，切记不能用操作系统自带的记事本修改中文模板， 否则会改变模版编码，造成主题错位或乱码（中文模版编码为：UTF-8 无BOM）。

首先打开blog.php，把CMS首页焦点幻灯调用代码：

  1. include (TEMPLATEPATH . '/includes/slider.php'); ?>   
  2.   
  3. class="clear12">
  

加第12行

  1.   

下面。再把幻灯JS代码：

  1. "text/javascript" src="/js/jquery.cycle.all.min.js">  

加到header.php模版：

  1. "text/javascript" src="/js/muscript.js">  

后面。将幻灯样式加到HotNewsprocss目录中的css.css最后：

  1. /** slideshow **/  
  2. #slideshow {   
  3.     position:relative;   
  4.     background:#fff;   
  5.     width:710px;   
  6.     height:248px;   
  7.     padding:10px;   
  8.     border:1px solid #ccc;   
  9.     }   
  10. .slideshow {   
  11.     width:710px;   
  12.     height:248px;   
  13.     overflow:hidden;   
  14.     }   
  15. .featured_post{   
  16.     width:708px;   
  17.     height:248px;   
  18.     overflow:hidden;   
  19.     }   
  20. .slider_image,.slider_image img {   
  21.     float: left;   
  22.     width:400px;   
  23.     height:248px;   
  24.     }   
  25. .slider_post {   
  26.     float:rightright;   
  27.     width:280px;   
  28.     padding-right:10px;   
  29.     }   
  30. .slider_post p{   
  31.     font-size:13px;   
  32.     text-indent:2em;   
  33.     margin-top:5px;   
  34.     line-height:24px;   
  35.     }   
  36. #slider_nav  {   
  37.     position:absolute;   
  38.     z-index:999;   
  39.     margin:210px 0 0 270px;   
  40.     }   
  41. #slider_nav a {   
  42.     background:url(../images/slider_nav.png);   
  43.     float:left;   
  44.     line-height:24px;   
  45.     padding:0 8px 0 8px;   
  46.     color:#ebebeb;   
  47.     text-shadow: none;   
  48.     }   
  49. #slider_nav a.activeSlide { color:#f99356;}   
  50. #featured_tag {   
  51.     background:url(../images/featured.png);   
  52.     position:absolute;   
  53.     width:21px;   
  54.     height:79px;   
  55.     left:0px;   
  56.     top:20px;   
  57.     z-index:999;   
  58.     }   
  59. .news {   
  60.     position:absolute;   
  61.     width:51px;   
  62.     height:51px;   
  63.     rightright:-3px;   
  64.     top:-3px;   
  65.     z-index:10;   
  66.     }   
  67. .cat_name {   
  68.     position:absolute;   
  69.     line-height:20px;   
  70.     rightright:100px;   
  71.     top:-1px;   
  72.     text-align:center;   
  73.     padding:0 20px 0 20px;   
  74.     border:1px solid #ccc;   
  75.     }   
  76. #map_h {   
  77.     width:980px;   
  78.     }   
  79. .time_h {   
  80.     float: left;   
  81.     margin: 0 0 0 10px;   
  82.     }   
  83. .tag_t {   
  84.     float:rightright;   
  85.     width:750px;   
  86.     height:23px;   
  87.     overflow:hidden;   
  88.     }   
  89. .tag_t a {   
  90.     padding:0 0 0 10px;   
  91.     font-weight:bold;   
  92.     text-shadow: 0px 1px 0px #fff;   
  93.     }   

最后刷新页面，看看是不是幻灯也正常显示在BLOG布局中了。

同理，还可将幻灯加到blog_page.php独立博客模版中。

 

作者：知更鸟
分享到：
wordpress中ajax contact 插件的使用 - h...
  在使用wordpress搭建的站点中，时常会有通过表单提交问题或请求的需求。在wordpress有非常丰富的类似的插件，今天我来介绍一个个人比较喜欢的表单插件ajax Contact.从名字上我们就知道该插件的提交是基于ajax方式，用户体验比较好，并且集成了jquery对表单项的验证。总之，功能还是不错的。 配置 可以通过此...
结合百度统计做好wordpress速度优化 - ht...
　　一直在用百度统计作为首选统计工具，相比其他工具而言这个最大的优点就在于IP统计准确，时效性效性高。但之前总是在用其统计功能统计我的 wordpress博客。今天偶然间发现，百度统计有个网站速度诊断功能，于是乎结合百度统计做Wordpress速度优化。进入百度统计，点击速度诊 断，开始诊断。等候一点时间之后，我的Wordpr...
  •         php迷，一个php技术的分享社区，专属您自己的技术摘抄本、收藏夹。
  • 在这里……

Tags

网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱  冀ICP备18013926号-2