WordPress Add Personalized Blog Pet method

I have seen this effect on many websites, so I want to try it myself. See the little pet on my website, that's the effect.
Not much to say, the method is as follows:
Tools:
: Http://yunpan.cn/cFUmZB8WWthty access Password 8C20
It contains the Jqury library, a JS file and two pictures, pictures you can choose one, but note the code in the image extension to modify
steps:
First, HTML:
Add the following code under the subject's footer.php file (usually before):

1234	<div id= "Spig" class = "Spig" > &NBSP;&NBSP;&NBSP;&NBSP; <div id= "message" > load ... </div> &NBSP;&NBSP;&NBSP;&NBSP; <div id= "Mumu" class = "Mumu" ></DIV> </DIV>

Second, CSS:
Put the downloaded spig.png or spig.gif (optional) in the theme's Images folder (should you?). ), and of course all code can customize the path, which is no longer cumbersome. Then add the following code to the subject's Style.css file: (Of course you can modify it yourself, the following code is my own modified)

1234567891011121314151617181920212223242526272829303132333435363738394041

/* pets shenjieblog.com*/.spig {    display: block;    width: 150px;    height: 190px;    position: absolute;    top: -200px;    left: 160px;    z-index: 9999;}#message {    color: #191919;    border: 1px solid #c4c4c4;    background: #ddd;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    min-height: 1em;    padding: 5px;    top: -30px;    position: absolute;    text-align: center;    width: auto !important;    z-index: 10000;    -moz-box-shadow: 0 0 15px #eeeeee;    -webkit-box-shadow: 0 0 15px #eeeeee;    border-color: #eeeeee;    box-shadow: 0 0 15px #eeeeee;    outline: none;    font-size:15px;    font-weight:bold;    font-family:"Galdeano","Hiragino Sans GB","Microsoft YaHei",Trebuchet,"Trebuchet MS",Tahoma,"Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;}.mumu {    width: 150px;    height: 190px;    cursor: move;    background: url(images/spig.gif) no-repeat;/*如果用的图片扩展名是png，那么你要修改一下这里*/}

If you know the CSS code, you can modify the message ID to make it more suitable for your theme and avoid the possibility of ID collisions.
Third, load the jquery library:
can go to the official website to download, you can also use my compressed package inside. The jquery library can then be introduced in header.php or footer.php.

1	<script type="text/javascript"src="（这里引号里面填写你jQuery库的绝对路径，自己修改）js/jquery-2.1.4.min.js"></script>

Four, JS:
Before adding the JS file, you need to modify the Spig.js file, open the file, use the editor's "Replace" tool to replace the www.shenjieblog.com with your URL, but it is best to manually replace it, then it is better to change some words, such as my name.
Next, also under the subject's footer.php file (usually before), add the following code:

12345

<script type="text/javascript" src="<?php bloginfo(‘template_directory‘); ?>/js/spig.js"></script><script type="text/javascript"><?php if(is_home()) echo ‘var isindex=true;var title="";‘;else echo ‘var isindex=false;var title="‘,  get_the_title(),‘";‘; ?><?php if((($display_name = wp_get_current_user()->display_name) != null)) echo ‘var visitor="‘,$display_name,‘";‘; else if(isset($_COOKIE[‘comment_author_‘.COOKIEHASH])) echo ‘var visitor="‘,$_COOKIE[‘comment_author_‘.COOKIEHASH],‘";‘;else echo ‘var visitor="游客";‘;echo "\n"; ?></script>

The spig.js path to the above code is in the JS directory of the theme directory, you can customize the path.
PS: In fact, the original JS code also provides the ability to broadcast the weather, but because the weather that the site is now inaccessible to the relationship, so I have the function of the code commented out. But I in Zheng son handsome blog above see still have broadcast weather function, but for me may not need this, so also no toss! There are some features in the JS file is sometimes not effective, because the name of the ID in the JS file may not be the same as the ID of your theme, if the function is not effective, you need to manually modify the corresponding ID of your theme.

Get!

WordPress Add Personalized Blog Pet method