将CMS首页焦点幻灯移植到BLOG布局中



	 

	
		经常有童鞋问如何将CMS首页焦点幻灯也显示在BLOG布局中，留言中无法说明白，现在就教大家将CMS首页焦点幻灯移植到BLOG布局中，不要看见长长的代码就头晕，只要按着下面的步骤操作就可以了。
	
		具体效果如图：
	
		
	
		
			提示：编辑修改模版文件，请使用notepad++或EmEditor文本编辑软件，通过FTP软件上传覆盖原文件，或者在Wordpress后台外观→编辑中修改模版文件，切记不能用操作系统自带的记事本修改中文模板， 否则会改变模版编码，造成主题错位或乱码（中文模版编码为：UTF-8 无BOM）。
	
	
		首先打开blog.php，把CMS首页焦点幻灯调用代码：
	
		
			
				<?php include (TEMPLATEPATH . '/includes/slider.php'); ?>   
			
				<?php wp_reset_query();?>   
			
				<div class="clear12"></div>  
		
	
	
		加第12行
	
		
			
				<!-- end: navigation -->  
		
	
	
		下面。再把幻灯JS代码：
	
		
			
				<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.cycle.all.min.js"></script>  
		
	
	
		加到header.php模版：
	
		
			
				<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/muscript.js"></script>  
		
	
	
		后面。将幻灯样式加到HotNewspro\css目录中的css.css最后：
	
		
			
				/** slideshow **/  
			
				#slideshow {   
			
				    position:relative;   
			
				    background:#fff;   
			
				    width:710px;   
			
				    height:248px;   
			
				    padding:10px;   
			
				    border:1px solid #ccc;   
			
				    }   
			
				.slideshow {   
			
				    width:710px;   
			
				    height:248px;   
			
				    overflow:hidden;   
			
				    }   
			
				.featured_post{   
			
				    width:708px;   
			
				    height:248px;   
			
				    overflow:hidden;   
			
				    }   
			
				.slider_image,.slider_image img {   
			
				    float: left;   
			
				    width:400px;   
			
				    height:248px;   
			
				    }   
			
				.slider_post {   
			
				    float:rightright;   
			
				    width:280px;   
			
				    padding-right:10px;   
			
				    }   
			
				.slider_post p{   
			
				    font-size:13px;   
			
				    text-indent:2em;   
			
				    margin-top:5px;   
			
				    line-height:24px;   
			
				    }   
			
				#slider_nav  {   
			
				    position:absolute;   
			
				    z-index:999;   
			
				    margin:210px 0 0 270px;   
			
				    }   
			
				#slider_nav a {   
			
				    background:url(../images/slider_nav.png);   
			
				    float:left;   
			
				    line-height:24px;   
			
				    padding:0 8px 0 8px;   
			
				    color:#ebebeb;   
			
				    text-shadow: none;   
			
				    }   
			
				#slider_nav a.activeSlide { color:#f99356;}   
			
				#featured_tag {   
			
				    background:url(../images/featured.png);   
			
				    position:absolute;   
			
				    width:21px;   
			
				    height:79px;   
			
				    left:0px;   
			
				    top:20px;   
			
				    z-index:999;   
			
				    }   
			
				.news {   
			
				    position:absolute;   
			
				    width:51px;   
			
				    height:51px;   
			
				    rightright:-3px;   
			
				    top:-3px;   
			
				    z-index:10;   
			
				    }   
			
				.cat_name {   
			
				    position:absolute;   
			
				    line-height:20px;   
			
				    rightright:100px;   
			
				    top:-1px;   
			
				    text-align:center;   
			
				    padding:0 20px 0 20px;   
			
				    border:1px solid #ccc;   
			
				    }   
			
				#map_h {   
			
				    width:980px;   
			
				    }   
			
				.time_h {   
			
				    flo

补充：web前端 , HTML/CSS  ,