WordPress Blog Setting Skills: Three Tips to Beautify WordPress Blog Page
Though there are thousands of beautiful and powerful WordPress themes for users to pick, every theme has its own features which may not meet the needs from all its users. Usually, free WordPress themes put more emphasis on the Home page than Blog page. But for those who have the habit to update blog posts frequently, a personalized and functional Blog page should be customized with special consideration.
Today, I’m going to share with you three tips of beautifying your WordPress Blog page, including how to create a personalized admin avatar, how to customize a back-to-top widget, and how to add an amusing flash clock.
1. Create Personalized Profile Avatar
The profile avatar is as important as a logo, which may leave a strong impression to the visitors. However, the default profile avatars of WordPress are not that beautiful, and the choices are little. Nobody wants his/her profile avatar looks exactly the same as others. As a result, DIY your own personalized profile avatar is a must-do.
WordPress provides lots of plugins for creating personalized profile avatars; among them, we recommend Simple Local Avatars, which is really use-friendly.
1.1. Install Simple Local Avatars Plugin
Go to Dashboard -> Plugins -> Add New, search for Simple Local Avatars, install and activate it.
1.2. Add a New Profile Avatar
Go to Dashboard -> Users -> Your Profile, navigate to Avatar area at the bottom. You can upload a file from your computer by clicking on the “Choose File” button, or you can select an image for the WordPress Media Library by clicking on the “Choose from Media Library” button. After this, a preview image will appear on the left. Then choose Rating according to the explanation and finally click on the “Update Profile” button. Back to your homepage, you can see the new avatar now.
1.3. Dynamic Displaying Effect
If you have already tired of the default square profile avatar, how about change it to a round one with autorotation effect? When the mouse focuses on the round profile avatar, it will rotate automatically. This interesting effect can be acquired through several simple steps:
Go to Dashboard -> Appearance -> Editor, find “Stylesheet (style.css)” from the right-side Templates list and open the file, copy the following codes and paste them at the bottom of the style.css editor in the left-side area. Finally click on the “Update File” button.
.avatar { float:left; margin-right:8px; padding:1px; border:1px solid #cfd9e1; width:40px; height:40px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius:20px; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } .avatar:hover { box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); }
Come to your Blog page and you will see your avatar turning into round with autorotation effect.
2. Customize Back-to-top Widget
As time goes by, the Blog page accumulates more and more posts, either long or short articles. While visitors are viewing your posts list or reading a very long article, they may need an icon to help them turn back to the page top. Therefore, adding a back-to-top widget offers your visitors more convenience, which is good for customer experience. Here is a tip for you to customize a back-to-top widget in your Blog page.
2.1. Prepare an Icon/Image
The first step is to prepare a directional icon, such as arrow and hand; or a suitable image. I suggest you edit the icon/image with image processing software before uploading it. You’d better make the image background transparent, and save the file format as png. or gif.
2.2. Upload Image
Go to Dashboard -> Media -> Add New, click on the “Select File” button to upload the image file from your computer. Then you will see the image appears below the box, and click on the “Edit” button.
Navigate to the right-side “Save” area, and copy the File URL for later use.
2.3. Add Php. Codes
Go to Dashboard -> Appearance -> Editor, find “Footer (footer.php)” from the right-side Templates list and open the file. Search for the </body> tag in the left-side footer.php editor. Copy the following codes and paste them before the </body> tag.
Don’t forget to change the “img src=” with the image file URL you have copied just now.
Finally click on the “Update File” button.
3. Add an Amusing Flash Clock
Lastly, I want to share with you an interesting and original widget used in the sidebar – Gymnastics Clock. This amusing flash clock widget is designed by a Japanese designer. The flash effect consists of six little guys with different poses when time changes. Here is an effect picture:
Very funny, right? The setting method is also very easy.
Go to Dashboard -> Appearance -> Widgets. Find the “Text” widget in the left Available Widgets area, and drag it to the place you like to display (e.g. Sidebar) in the right area.
Type in a title (e.g. Clock), copy one of the following codes and paste the in the text editor. Finally click on the Save button.
How do you like the above mentioned three tips? Personally, I suppose they are very interesting and easy to use. While individualism becomes the trend, nobody wants to be the same as others. These tips of beautifying your WordPress Blog page can help you to customize your own personalized homepage. More WordPress setting skills will meet you in the future. Please follow our WordPress tutorials.
