Weibo show template is the first choice for personal theme website building, imitating Sina Weibo official website

I wanted to make this template of imitating microblog for a long time, but time has not allowed, so I can't find time to make it out. The theme is simple and clear, the background setting is simple, and no complicated operation is required. Compared with the previous CMS theme, it is much simpler, and it is too suitable for personal blog websites. However, it is not suitable for technology and technology broadcasters. After all, this entertainment element is mostly, You can set independent background images, list cards (you should know that these functions can only be set by microblog members), pick out your favorite cards and backgrounds on your microblog, and copy the address to the relevant interface. Let's have a look!

be careful: Solution for opening the theme or plug-in to display "illegal authorization file": https://www.daolt.com/post/8051.html

Sell this Template Authors authorized! Purchase on this site is more favorable than the official!

Demo address Click the purchase address above to enter!!!

Topic update log: 2020/06/08

V、 Optimize the sidebar call cache scheme and update PHP code.

After the update, it is better to delete the module with the theme, module management - module created by the plug-in, delete, and then re enable the theme template, clear the cache and recompile the template, the foreground, and force a refresh. If you enable CDN, you have to refresh the CDN cache.

Topic update log: (2020/05/29)

V、 Fixed an issue where searching for special characters caused search template errors.

Topic update log: (2020/05/22)

Optimize thumbnail php code.
Optimize video adaptive display effect.

Topic update log: (2020/05/19)

Friendly prompt when the optimization search page has no results.
Add the function of friendly prompt when the article publishing time exceeds 365, theme setting function, and enable the prompt of article timeout.
The mobile end or PC segment is stretched due to the format of the optimized article image.
Optimize the video code, and the mobile terminal can adapt the display effect.

Topic update log: (2020/05/13)

The IE10 browser was optimized, and the top navigation had a misplaced bug.
New widescreen display effect is added. The screen is larger than 1366px and 1440px.
The independent page increases the advertising space at the bottom of article recommendation, which is separated from the advertising at the bottom of article recommendation.

Topic update log: (2020/05/10)

Fix the bug that is not displayed in the comment page turning, and update the js code.

Topic update log: (2020/05/09)

Optimize comment php and js code.
New independent article page advertising interface, thanks for your feedback.
Fix the bug of interface call error in two parts of the template.

Topic update log: (2020/05/06)

Optimization Appreciates the mobile terminal adaptive display effect.

Topic update log: (2020/05/04)

Optimize the style of sidebar friend chain and website collection, and increase paragraph spacing.
Fixed an invalid color for text bold settings.

Topic update log: (2020/04/22)

Fixed bug in category list article NEW label masking drop-down menu.

Topic update log: (2020/04/20)

Fixed a bug where article reviews did not have page flipping functionality.

Topic update log: (2020/04/19)

Optimize the display scheme of thumbnail of classified list articles.
Optimize the space on the left when mobile terminals stack comments.
The article on the optimization search page describes the calling method.

Topic update log: (2020/03/17)

Repair article page WeChat share Unable to generate a bug for the picture.

Topic update log: (2020/03/14)

Fix the bug that the tag a of the article list is not closed.
The function switch of new carousel window is added to the homepage carousel slide.

Topic update log: (2020/02/26)

Fixed bug where background image is not tiled.
Integrated article sharing code, theme setting - open on demand.

Topic update log: (2020/02/18)

Add mobile terminal top distance interface.
Add a new image link to the list of classified articles.
The article page has the function of upper and lower articles on both sides.
Optimize the suspension effect of picture light box.
The top login function switch synchronizes PC and mobile terminal.
Other optimization contents fed back by netizens.

Topic update log: (2020/01/23)

Fixed a problem where the font color was unclear due to the Spring Festival skin.

Topic update log: (2020/01/22)

Optimize the navigation adaptive display effect.
New spring skin and full screen snow effect. Opening steps: log in to the background, set the theme, set the basic settings, and open the web background and Spring Festival special effects, as shown in the figure:
Fill in as shown in the figure:

Background color: #d61e12
Distance: one hundred and thirty
Picture address: https://s2.ax1x.com/2020/01/22/1kxL4O.jpg

Last save submit (picture Don't want to use the outer chain To save local, click Upload pictures OK), open the foreground to force refresh. If you use CDN, please clear the theme cache file.

Topic update log: (11/22)

Optimize the adaptive display effect of navigation, from the original left finger icon display to the top status bar display.
Fix the bug that links to articles when editing independent article pages.
The spacing between modules of adaptive navigation is optimized.
This update contains a lot of content. The css style has been modified. After the update, please clear the theme cache compilation and force the foreground to refresh. If you enable CDN, you need to clear the theme file cache.

Topic update log: (11/21)

Optimize the comment information module, and list the nickname, email and website separately.

Topic update log: (11/14)

Optimize thumbnail size 4:3, fix article summary spacing.

Topic update log: (10/25)

Repair Bu with overlapping and other misplaced verification codes on the mobile end g。

Topic update log: (10/18)

Fix the bug that the speed of opening the Ajax announcement is too fast to load.
Fix the bug that was not overloaded under pjax when you started the search article in pjax.
Fix the bug that was repeatedly submitted by using keyboard shortcut to respond to the enabled Ajax.
In addition, if you find that pjax is invalid, first check whether the tag a contains the tag "target=" _blank ". In some cases, pjax is invalid.
The reference for setting the music plug-in of Mingyue Haokong music player is as follows: (Remember not to open jquery, ZBP has its own JQ library)

Topic update log: (10/17)

The new station wide Ajax function enables the page to be opened without refreshing and loading, and supports the uninterrupted music playing function (Mingyue Haokong music plug-in, other plug-ins have not been tested).
Add a new Pjax switch. You can turn it on if you need it, and turn it off if you don't need it.
When you enable Pjax, the comment "bold, oblique, underline" function fails. If you have more plug-ins, it is not recommended to enable them.

PS: Pjax is not very friendly for inclusion, and large websites should use it carefully.

Topic update log: (10/15)

Optimization turns off the problem that the top navigation search is too short.
Fix the bug that the article reprint URL is invalid.
Optimize css stylesheets.

Topic update log: (10/14)

Fix the bug that the top login switch is invalid.

Topic update log: (10/08)

Delete Weibo National Day skin.

Topic update log: (09/30)

Add microblog National Day skin (National Day skin is preferred).
Fix some CSS code.

Topic update log: (09/23)

Repair the invalid BUG in the navigation part on the top of the mobile terminal.

In this context, the occasional click on the top login is invalid because it is adaptive, so the link a is directly blocked without a drop-down menu. In other words, the QQ login must be enabled, and then the drop-down menu will be available. At this time, the mobile terminal can only display normally by clicking on login. The user experience is not very good, and there is time to modify it later.

Topic update log: (09/18)

Optimize the SEO title, and repair the duplicate BUGs displayed in the classification list.

Introduction to theme setting:

Follow my usual setting steps. I may set the side bar information on the home page first. The module of navigation call on the left is the navigation bar (module management, navigation bar). After setting the side bar information on the right side of navigation, mark the side bar module corresponding to each template:

Homepage template (corresponding) module management - right, default sidebar;
Category list page (corresponding) module management - right, sidebar 2;
Article page template (corresponding) module management - right, sidebar 3;

Specifically show which modules are included in the system module and the theme, and drag them to the corresponding sidebar. This topic comes with two modules, which are classified as "hot review articles" and "tab combinations (custom recommendations and popular articles)", as shown in the figure:

Front effect:

Sidebar setup is complete.

Set website image:

Website logo, Back Information such as scene map and card map, as shown in the figure:

Logo and ico images can be uploaded directly or filled in the image address, and saved without any difficulty.

Card background picture (corresponding) Picture on the right side of the classification list, see the picture:

You can directly copy the address of Sina Weibo, paste it in the background image interface, and save it.

Setting method of background image:

Find your favorite background image (you can directly pick up the Sina suit background and copy the image address), upload or paste the image into the image address interface, but sometimes the color of the background is different, some are black and some are blue, so the background color can be set by yourself. In short, open the background image (the image address just filled in) You will find that there is a color at the bottom of the picture. See the picture:

The red area in the figure is the background color we want. After the setting is completed, the overall color system of the website will be consistent. How to get the color code? Open the picture, press F12,

In the figure“ #000000 ”It is the code with black background. We click the "black square" in front of the code (not the black area of the screen) to display a color palette. Move the mouse to the light blue area, and click to get the color code, as shown in the figure:

The black area of the picture has become light blue, which makes it more comfortable“ #a5cee2 ”It is the background color code we need. Copy it and paste it into the background color interface.

Finally, I want to talk about the "distance from the top". Some background pictures may have some patterns, such as the National Day, the Spring Festival, etc. If we set the background directly, it may cover the above pictures. At this time, we need to set the distance from the top (the distance unit is pixels, that is, px) so that the patterns can be displayed, for example, the landscape painting just set, There is a mountain and a villa in the picture. We need to display this pattern to look good. The specific pixels need to be tried by ourselves. The simplest way is to set it to "200" first, then open the website front desk to see the effect. If the pattern is not completely displayed, then write larger, such as "300", and vice versa. Next, go to your own trouble, good luck!

Next, let's see how to set the top navigation tab: Theme Settings - Home Page Settings - Customize Top Navigation

Foreground display effect:

The codes are as follows:

Markup

 <li><a href="/"><i class="fa fa home"></i>Home</a></li><li><a href="/"><i class="fa fa envira"></i>Message Book</a></li>

According to this form, multiple navigation links can be set. It is recommended not to exceed three, or there may be dislocation.

Announcement setting method:

Setting method of rolling announcement: theme setting - homepage setting - homepage rolling announcement. The code format is as follows:

Markup

 <li><a href=" http://zx.001666.cn/post/208.html "><i class=" fa fa bullhorn "></i>Customized announcements on the home page, go to the background to set customized announcements on the home page</a></li>

The format is fixed, just modify the text and links.

Set article data call:

Relevant article call settings, as shown in the figure, the number of popular tags in the sidebar will be displayed at the front desk. The number of days of popular articles in the sidebar is 30 days a month, which is self set. The sidebar article recommendation is filled in the article ID (file management - view article ID),

Oh, yes, here we say that some data in the sidebar uses the static cache mechanism. For example, you set the sidebar article recommendation, but the articles recommended in the foreground sidebar may still be the previous data. This is because the static cache file is used. If you want to update data, you need to edit an article at will and submit it directly to the right, This is used to generate new cache data.

Set the background of blogger card:

Background --- Theme Settings --- Sidebar Author ID: Fill in the user ID, and the background image still uses the image of Sina blog.

Foreground display:

The blue sky and white clouds are very beautiful. It's better to use Sina Weibo's package pictures. Copy and paste them directly. Other settings are basic, so there is no difficulty. In addition, the category list has a like function that adapts to the application center "New article like development version" Plug in, search for keywords, click Plug in, get the plug-in, and then enable the plug-in without additional settings, as shown in the figure:

Other settings:

For the slide show carousel function, click the "carousel picture" to set the title, upload the picture, set the target link, and save it. Remember that the height and width of each picture should be the same.
Advertising settings. If necessary, open the corresponding advertising space and add advertising space. In addition, the top two interfaces, one for head placement Baidu The public JS interface and script code interface of advertisements such as the Alliance can put some own js code, such as music player.
The function setting is simpler. It is clearly written. It can be turned on when needed and turned off when not needed.

The overall setting is basically completed, and several demonstration pictures are displayed (you can directly click the demonstration station to view the overall effect)

Front page renderings (default background):

Homepage renderings (open custom background):

course It's almost over. If I have time, I will make you a background picture of Sina Weibo and a video to get the background. It should not be too long in the near future!

Paid resources

price eighty element Buy Now