WordPress Blog Setting Skills: Three Tips to Beautify WordPress Blog Page

blog skills

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.

blog skills

  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.

blog skills

  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:

blog skills

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.

blog skills

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.

blog skills

1.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.   1.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.

blog skills

Navigate to the right-side “Save” area, and copy the File URL for later use.

blog skills

1.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.

blog skills


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 (His blog: http://chabudai.org/blog/?p=59). The flash effect consists of six little guys with different poses when time changes. Here is an effect picture:

blog skills

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.

blog skills

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. Effect 1: transparent background

Effect 2: white background

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.

About the author: Magee