Microblog show

Please log in

Demonstration station     More works     Topic update log (22 / 09 / 21)

Responsive Unlimited domain name Permanent use Free upgrade Free experience After sale guarantee Original works Value for money SEO title, keywords and description

I wanted to make this template of imitation microblog for a long time, but time has not allowed. I don't take the time to get it out. The theme is simple and clear, the background setting is simple, and there is no need for complicated operation. Compared with the previous CMS theme, it is much simpler and more suitable for personal blog website. However, this is not suitable for technology and technology broadcasters. After all, this entertainment element is in the majority, You can set up a separate background map, list cards (you know, these functions can only be set by microblog members) pick out the card and background you like on your microblog, and copy the address to the relevant interface. Let's have a look!



Introduction to theme setting:

According to my custom setting steps, I may set the sidebar information first on the home page. The navigation module on the left is called the navigation bar (module management, navigation bar). After setting the navigation, set the information of the right sidebar, and mark the corresponding sidebar module of each template:

Homepage template (corresponding) module management - right side, 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 in the system module and the theme module, and drag them to the corresponding sidebar.

This topic comes with two modules, which are "hot articles" and "tab combination (user-defined recommendation and popular articles)", as shown in the figure:

 image.png

Front desk effect:

 image.png

The sidebar is set.

Website settings:

Website logo, Back Information, etc

 image.png

Logo and ICO images, directly upload or fill in the image address, save, no difficulty.

Card background picture (corresponding) the picture on the right side of the classification list

 image.png

This picture, you can directly copy the address of sina Weibo, then paste it into the background image interface, and save it.

Background image setting method:

Find your favorite background image (you can directly pick up the Sina suit background, copy the image address) and upload or paste the picture in the image address interface. However, sometimes the background color is different, some black and some are blue, so you can set the background color by yourself, Open the background map (just fill in the picture address) and you will find that the bottom of the picture is usually a color. Look at the picture:

 image.png

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

 image.png

In the picture“ #000000 ”It is the code with a black background. If we click the "black box" (not the black area of the screen) in front of the code, a color palette will appear. Move the mouse to the light blue area and click to get the color code, as shown in the figure below:

 image.png

The black area of the picture has turned to light blue, which makes it much more comfortable to look at“ #a5cee2 ”We need the background color code, copy it, and then paste it in the background color interface.

Finally, let's talk about "distance from the top". Some background images may have some patterns, such as national day and Spring Festival. If we set the background directly, we may cover the above pictures. At this time, we need to set the distance from the top (the distance unit is pixel, i.e. PX) to display the patterns. For example, the landscape painting just set up, There is a mountain and a villa in the picture. We need to show the design to look good. The specific pixels need to be tried by ourselves. The simplest way is to set it to "200", and then open the front desk of the website to see the effect. If the pattern is not completely displayed, write it larger, such as "300", and vice versa. Next, I'll go to my own good!

Next, let's see how to set the top navigation tab: Theme settings - home page settings - Custom top navigation

 image.png

Foreground display effect:

 image.png

The code is as follows:

 <li>The home page of the < a < a < a < a < a > / "target =" U blank "> < I class =" Fa FA home "> < / I > Home Page</a></li>

If you fill in this form, you can set multiple navigation links. It is recommended that you do not have more than three navigation links, otherwise, there may be dislocation.

Announcement setting method:

The setting method of rolling announcement includes subject setting homepage setting homepage rolling announcement. The code format is as follows:

 <li>The user-defined announcement on the home page can be set in the background</a></li>

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

Set article data call:

The related article call settings, as shown in the figure, the number of popular tags in the sidebar, the number of hot articles displayed in the foreground, the number of days of popular articles in the sidebar, 30 days as a month, self-set, recommended articles in the sidebar, and fill in the ID of the article (file management - View Article ID),

 image.png

Oh, by the way, some data in the sidebar adopt the static cache mechanism. For example, if you set up the sidebar article recommendation, but the recommended articles in the foreground side bar may still be the previous data. This is because the static cache file is used. If you want to update the data, you need to edit an article at will and submit it directly on the right side, To generate new cache data.

Set blogger card background:

Background - theme settings - sidebar author ID: fill in the user ID, and the background image still uses the image of Sina blog.

 image.png

Front desk display:

 image.png

Blue sky and white clouds are very beautiful. It's best to use Sina Weibo's set of pictures. Just copy and paste them directly. Other settings are basic, so there is no difficulty. In addition, the category list has a like function, which adapts to the application center New development Edition 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 following figure:

 image.png

Other settings:

  1. Remember to set the width and height of each picture, and click on the "rotation" function.

  2. Advertising settings, if necessary, open in the corresponding advertising space, add advertising space on the line. In addition, the top two interfaces, one is the head to place Baidu alliance and other advertising public JS interface, script code interface, you can put some of your own JS code, such as music player.

  3. The function setting is simpler. It's very clear. You can turn it on when you need it, and turn it off when you don't need it.

The overall setting is basically completed, put a few demo pictures (you can click the demo station directly to view the overall effect)

Front page rendering (default background)

 Micro blog show picture demo.jpg

Homepage rendering (open custom background)

 Micro blog show picture demo background.jpg

The tutorial is basically finished. If I have time, I will make you a video of picking up the background pictures of sina Weibo and getting the background. It should be in the near future, mm-hmm, not too long!

Hello visitor, the real name system has been opened on the relevant website of Z-blog. Please log in after Bind your phone Thank you for your support.

Wechat / QQ: 229693666; QQ group: 55722290 (after sales group)

Several zblog PHP themes on the Application Center

To undertake customization, imitation station business and other services, as well as a variety of existing template code modification services.

----------------------------------------------------------------------------

Microblog: Sina blog certification http://weibo.com/523912300
QQ: Li Yang's personal blog two hundred and twenty-nine million six hundred and ninety-three thousand six hundred and sixty-six
Q group: Z-Blog Talklee.  ↑ 55722290 (after sales group)
Donation: anclub#vip.qq.com anclub#vip.qq.com

Zblog Application Center - application purchase and use agreement


1. Before you purchase an app, you must first confirm whether the app meets your needs. Digital products do not support trial. According to Article 25 of the law on the protection of consumers' rights and interests, the app is a digital product downloaded online. Once it is downloaded and installed after purchase, it cannot be refunded.
2. The application you purchased in the application center, Only the license right of the application, the ownership of the application still belongs to the application provider.
3. An application can only be used for a single account without the consent of the website and the application provider, It is not allowed to sell, sell, sell, sell, sell, sell, sell, etc Otherwise we will Permanently close user account And reserve the right to continue to investigate the relevant responsibilities.
4 The website containing the app has been reselled, given, leased, etc., please use a new account to purchase the app or remove the app Otherwise, it will be regarded as a violation of the agreement.
5. Unless otherwise specified, the purchased applications only include the relevant right to use and free update services, and the application center and application provider will not provide additional after-sales installation services.
6. The user shall bear all risks in using the application, including system damage, data loss and any other risks.
seven Users are not allowed to use the app in any way to engage in acts in violation of laws and regulations and social public order and good customs. Users must be fully responsible for the consequences of their improper use, and neither the website nor the application provider shall bear any responsibility.
8. The website and application provider reserves the right to change, limit, freeze or terminate your use of certain content without informing you and without assuming responsibility for you.


Purchase guide


1. Please go ahead Registered account number , and then Sign in Application Center.
2. Click "buy app" directly and follow the guide.


Download guide


1. The buyer logs in his / her Z-blog website, enters the background, and clicks "Application Center" menu in the left menu bar.
2. On the home page of "Application Center", log in with the registered account of application center.
You can download the "I have purchased" app, and you can see the "I have purchased" app.


Other precautions


1. If you can't access the application center through your own website background, please purchase carefully, because this may lead to the application not being downloaded and installed smoothly.
2. If the paid app cannot be downloaded normally, please check the Z-blog and application update in the background of your website. If you have updated to the latest version and still can't download, please contact us in time.
3. When applying the update, it is possible to override the local settings. Please make a backup before updating.