WordPress Make a Circle Avatar Link page method

See many kinds of links on the Web page, I prefer the round head of this, first look at the effect bar: Portal

It is this is the circle of the friend chain user picture, the following is the friend chain user site name, and then the mouse to move up the avatar will rotate, how to achieve this effect? I find a lot of online is not very detailed, so I intend to write an article for you to facilitate:
Before you take a look at my two other articles: "These two articles are very important, many of the methods on the Web are not detailed, but a lot less steps."
1.WordPress how to set a circular rotate avatar
There are a lot of functions in this, but here I ask you to view this article is mainly to use the inside set the friend chain user picture size, do not operate this step, set out the avatar will be very big
2.WordPress background Add link management function
This step is mainly for the management of links, very important OH
Well, if it's all implemented, take a look at the following steps:
1. Copy the page.php to the Cpanel panel and rename it to links.php, then upload and page.php a path.
2. Open links.php Edit in the cpanel panel and add the following code at the top of the page:

12345

<?php/*Template Name: Links*/?>

3, find the article content output function in links.php, insert the following code at the back:

123456789

<?php $bookmarks=get_bookmarks();  if ( !empty($bookmarks) ){    echo ‘<ul class="link-content clearfix">‘;    foreach ($bookmarks as $bookmark) {      echo ‘<li><a href="‘ . $bookmark->link_url . ‘" title="‘ . $bookmark->link_description . ‘" target="_blank" >‘. get_avatar($bookmark->link_notes,64) . ‘<span class="sitename">‘. $bookmark->link_name .‘</span></a></li>‘;    }    echo ‘</ul>‘;  }?>

4. Add the following code to the STYLE.CSS: (unlike online, I have censored some of the code)

12345

/*圆形友链头像*/.link-content li{float:left;text-align: center;width: 100px;font-size:12px;margin-bottom:10px;list-style-type:none !important;}.link-content li img{border-radius:100%;transition:0.5s;-webkit-transtion:0.5s}.link-content li span{display:block}.link-content li:hover img{transform:rotate(360deg);-webkit-transform:rotate(360deg);}

5. Open the link button on the left to add a link, the link is added here will automatically appear at the bottom of the friend chain page (see the top picture)

When adding links to note the most of the place to fill in the Friends of the user's email address (), if not filled, or friend chain users have not registered Gravatar, then here will show the default Gravatar avatar, For example, two of my friends in the picture above are the default Gravatar avatars,

6. Create a new page name to write a friend chain (name according to your own), and then the body content can be like me to add some text description, the added text will be displayed above, and the previous step to add all the links will automatically appear at the bottom, Then in the page to the right of the template to select links.php, then save it, and then give your menu to add a link to the Friend link page.

WordPress Make a Circle Avatar Link page method