Port the CMS homepage Focus Magic light to the BLOG Layout

 

Some children's shoes often ask how to display the CMS homepage Focus Magic lights in the BLOG layout. The message cannot be described in the white. Now we will teach you to transplant the CMS homepage Focus Magic lights to the BLOG layout, don't feel dizzy when you see the long code. Just follow the steps below.

Effect

Tip: to edit and modify a template file, use notepad ++ or EmEditor text editing software, upload and overwrite the original file through FTP, or modify the template file in the Wordpress background appearance → edit, remember not to use the operating system comes with notepad to modify the Chinese template, otherwise it will change the template encoding, causing the topic dislocation or garbled (Chinese template encoding: UTF-8 without BOM ).

First, open blog. php and call the CMS homepage Focus Magic light code:

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

Add row 12th

1. <! -- End: navigation -->

Below. Then, run the magic lamp JS Code:

1. <Script type = "text/javascript" src = "<? Php bloginfo ('template _ directory');?> /Js/jquery. cycle. all. min. js "> </script>

Add the header. php template:

1. <Script type = "text/javascript" src = "<? Php bloginfo ('template _ directory');?> /Js/muscript. js "> </script>

. Add the magic light style to the css.css in the HotNewspro \ CSS directory. Finally:

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 {
42. Background: url (../images/slider_nav.png );
43. Float: left;
44. Line-height: 24px;
45. Padding: 0 8px 0 8px;
46. Color: # ebeb;
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 {
90. Padding: 0 0 0 10px;
91. Font-weight: bold;
92. Text-shadow: 0px 1px 0px # fff;
93. }

Finally, refresh the page to see if the slides are normally displayed in the BLOG layout.

Similarly, you can add the slides to the blog_page.php independent blog template.

 

Author: zhiyubird