Do you want an animated plurk layout? I mean a plurk layout which is full of animations everywhere. You can add the animations onto the 20 different places of your plurk layout :1 - Add an animation on Time Span. (When you use your mouse to point on a plurk, it will shows the time of the plurk and the animation at the bottom there).
2 - Add an animation on Day Span. (The animation will appear 1 time per day. So every 24 hours will have 1 animation).
3 - Add an animated submit button. (After you finish type a message, you will click this submit button to plurk the message).
4 - Add an animation beside the "response count number" on every plurk.
5 - Add an animation beside the "..." on every plurk. (The ... will appear when the plurk message is too long).
6 - Add 1st type of animated loading screen. (This loading screen will appear when you press "f5" to refresh your page, and when you search something with the "search" feature).
7 - Add 2nd type of animated loading screen. (This loading screen will appear when you click on a plurk to load the responds).
8 - Add the animated left and right buttons at the corner there.
9 - Add the animated "Back To Today" button on both left and right corner.
10 - Replace plurk creature with an animation.
11 - Replace mouse cursor with an animation.
12 - Add an animation on the title.
13 - Add an animation at the top left corner.
14 - Spin/rotate the emoticon when the mouse cursor is pointing on it (Working on Safari and Google Chrome only). Watch the video below for demo :
15 - Spin/rotate the pictures of friend lists and fan lists when the mouse cursor is pointing on it.
16 - Spin/rotate the plurk badges when the mouse cursor is pointing on it.
17 - Add an animation to body background.
18 - Add an animation to dashboard background.
19 - Add blue aura to plurk border when mouse cursor pointing on it.
20 - Add animation on top of the timeline.
You can view the demo at : http://plurk.com/Zac1987.
Now I am going to guide you how to add those animations onto your plurk layout. Before we start, you need to know how to go into your plurk layout css editor. Please click "edit" button which is on the right side of "My Profile" at the top left corner. Then click "Customize profile" tab. Then you will see the long long long css codes inside the box, the box is your css editor. We are going to modify or add in new codes inside the css editor box.
Please go to your css editor to copy all the code, then paste all the code onto a notepad file, save the notepad file for backup purpose.
Please prepared the animation that you want to add onto your plurk layout. Here are some of my animation collections : http://ye5.blogspot.com/2010/12/animations-without-background-no.html, you can pick the animation from there to add onto your plurk layout.
Later when you are editing the codes, you need to type in the width and height of your animation. In case you don't know how to check the width and height of your animation, you better learn it now :
1 - You can download and save the animation to your computer, then right click on the animation on your computer, then choose "Properties", then click "Details", then you will see the dimensions : 90px x 60px. The "90px" is width and the "60px" is height.
2 - If you are using Mozilla Firefox, you just need to right click on the animation, then choose "View Image Info", then you will see the dimensions.
3 - If you are using Internet Explorer, you just need to right click on the animation and choose "Properties", then you will see the dimensions.
After you got the link of your animation, you can start edit the code in your css editor :
1 - How to add an animation onto Time Span?
Go to your css editor, press Ctrl + F on keyboard, find the keyword evening . Then scroll up a little bit, and scroll down a little bit, delete all the codes below :
#time_show{
..........
}
#time_show span{
..........
}
.evening,.night,.day,.morning{
..........
}
.evening,.night{
..........
}
After delete all the codes above, please copy and paste the codes below :
#time_show{
color: #BF0D46 !important
position:absolute;
z-index:610;
width:61px; /*increase the value if your animation shows incompletely*/
height:63px; /* increase the value if your animation shows incompletely*/
white-space:nowrap;
font-size:11px;
margin-top:-53px; /*increase the value to move both animation and words to higher place*/
text-align:center;
padding-left:0px;
}
#time_show span{
font-weight:400;
padding-top:-35px;
color: #999 !important; }
.evening,.night,.day,.morning{
background:url(http://2aek.com/animation/2.gif) no-repeat 0 0;
_background:url(http://2aek.com/animation/2.gif) no-repeat 0 0; /*Change the 2 links above to your own animation links*/
border:0px;
background-position:-0px 15px; /*lower the value to move the animation to higher place*/
}
2 - How to add an animation onto Day Span?
Go to your css editor, press Ctrl + F on keyboard, find the keyword day_bg . Then change the background url link to your own animation link just the same as the example below :
.day_bg .div_inner {
background:url(http://2aek.com/animation/152.gif) no-repeat center bottom;
width: 64px; /*increase the value if your animation shows incompletely*/
border:none;
}
3 - How to add an animated submit button?
Go to your css editor, press Ctrl + F on keyboard, find the keyword submit_img . Then change the background url link to your own animation link just the same as the example below :
.submit_img {
background: transparent url(http://2aek.com/animation/174.gif) no-repeat scroll top left;
padding-left: 2px;
height: 70px; /*change it to be the same as the value of your animation height*/
width: 132px; /*change it to be the same as the value of your animation width*/
overflow: hidden;
margin-top: -0px;
}
4 - How to add an animation beside the "response count number" on every plurk?
Go to your css editor, press Ctrl + F on keyboard, find the keyword response_count . Then change the background url link to your own animation link just the same as the example below :
.response_count {
background:url(http://2aek.com/animation/73.gif) no-repeat 0 0;
color: #ffffff !important;
padding-left: 1px;
padding-right: 30px; /*increase the value if the right side of your animation is missing*/
padding-top: 14px; /*increase the value if the top of your animation is missing*/
padding-bottom:30px; /*increase the value if the bottom of your animation is missing*/
background-position: 0px 5px; /*change the value to move your animation to up and down*/
}
5 - How to add an animation beside the "..." on every plurk?
Go to your css editor, press Ctrl + F on keyboard, find the keyword dots . Then change the background url link to your own animation link just the same as the example below :
.dots .inner {
background:url(http://2aek.com/animation/1.gif) no-repeat 0 0;
margin-left: 2px;
padding-left: 1px;
padding-right: 20px; /*increase the value if the right side of your animation is missing*/
padding-top: 14px; /*increase the value if the top of your animation is missing*/
padding-bottom:0px;
background-position: 0px 0px;
color: #F090A5!important;
border-width:0px;
}
6 and 7 - How to add 1st and 2nd types of animated loading screens?
Go to your css editor, press Ctrl + F on keyboard, find the keyword cmp_loading . Then change the background url link to your own animation link just the same as the example below :
.cmp_loading {width:0px;height:0px;}
#div_loading .cnt
{
background:transparent url(http://2aek.com/animation/74.gif) no-repeat scroll center !important;
margin-top:140px; /*increase the value to move your animation to higher place*/
width:120px; /*change it to be the same as the value of your animation width*/
height:120px; /*change it to be the same as the value of your animation height*/
}
.loading img {width:0px;height:0px;}
.loading{
background: url(http://2aek.com/animation/17.gif) no-repeat scroll center top !important;
margin-top:5px; /*increase the value to move your animation to higher place*/
width:108px; /*change it to be the same as the value of your animation width*/
height:140px; /*change it to be the same as the value of your animation width*/
}
8 - How to add the animated left and right buttons at the corner there?
Please choose the animation which has less than 100px width, because the right and left panel of plurk layout doesn't have enough space to keep the picture/animation that has over 100px width. Go to your css editor, press Ctrl + F on keyboard, find the keyword cmp_arrow_right . If you cannot find the word, you can just copy paste to add the codes below onto your css editor. Then change the background url link to your own animation link just the same as the example below :
.cmp_arrow_right {
background: url(http://2aek.com/animation/75.gif);
width:100px; /*change it to be the same as the value of your animation width*/
height:42px; /*change it to be the same as the value of your animation height*/
margin:0px;
background-position:-10px 0px; /*lower this value to move your animation to left*/
filter: alpha(opacity=50); opacity: 0.5; zoom:1;}
div.cmp_arrow_right:hover
{filter: alpha(opacity=100); opacity: 1.0; zoom:1;}
.cmp_arrow_left {
background: url(http://2aek.com/animation/78.gif);
width:96px;height:44px; /*change it to be the same as the value of your animation width*/
margin:0;
filter: alpha(opacity=50); opacity: 0.5; zoom:1;}
div.cmp_arrow_left:hover
{filter: alpha(opacity=100); opacity: 1.0; zoom:1;}
9 - How to add the animated "Back To Today" button on both left and right corner?
Please choose the animation which has less than 100px width, because the right and left panel of plurk layout doesn't have enough space to keep the picture/animation that has over 100px width. Go to your css editor, press Ctrl + F on keyboard, find the keyword cmp_back_to_today . If you cannot find the word, you can just copy paste to add the codes below onto your css editor. Then change the background url link to your own animation link just the same as the example below :
.cmp_back_to_today {
background: url(http://2aek.com/animation/151.gif);
width:54px; /*change it to be the same as the value of your animation width*/
height:36px; /*change it to be the same as the value of your animation height*/
margin-left:10px; /*increase the value to move your animation to left side*/
margin-top:10px; /*increase the value to move your animation to up side*/
filter: alpha(opacity=50); opacity: 0.5; zoom:1;}
div.cmp_back_to_today:hover
{filter: alpha(opacity=100); opacity: 1.0; zoom:1;}
10 - How to replace plurk creature with an animation?
Go to your css editor, press Ctrl + F on keyboard, find the keyword dynamic_logo . If you cannot find the word, you can just copy paste to add the codes below onto your css editor. Then change the background url link to your own animation link just the same as the example below :
#dynamic_logo{
position:absolute;
margin:3px 0 0 5px; /*change the value to move the animation to right/left/higher/lower place*/
width:140px; /*change it to be the same as the value of your animation width*/
height:100px; /*change it to be the same as the value of your animation height*/
background: url(http://2aek.com/animation/169.gif) no-repeat;
}
#dynamic_logo img{
height:0px;
width:0px;
}
11 - How to replace mouse cursor with an animation?
Note that only Internet Explore can display the animated cursor, other browsers can display static image cursor only. Go to your css editor, then copy paste to add the codes below onto your css editor. Then change the url link to your own animation link just the same as the example below :
body {
cursor: url("http://www.2aek.com/images/cursors/cur1.ani"), url("http://www.2aek.com/images/cursors/1.png"), pointer; /*this is mouse cursor when you are not pointing on any link. cur1.ani is an animated cursor which is for Internet Explorer, 1.png is a static image cursor which is for other browsers.*/
}
a:hover{cursor: url(http://www.2aek.com/images/cursors/gam987.ani), url(http://www.2aek.com/images/cursors/2.cur), pointer; /*this is mouse cursor when you are pointing on a link. gam987.ani is an animated cursor which is for Internet Explorer, 2.cur is a static image cursor which is for other browsers.
}
.plurk_cnt {
cursor: url(http://www.2aek.com/images/cursors/gam987.ani), url(http://2aek.com/images/cursors/2fpurple.png), pointer;
}
.block_cnt, .block_bg, .block_fg {
cursor: url("http://www.2aek.com/images/cursors/cur1.ani"), url("http://2aek.com/images/cursors/2.png"), pointer;
}
Note that Mozilla Firefox support .cur and .png both but not support .ani. Internet Explorer supports .ani. Here are some animated cursor for Internet Explorer, use your mouse to point on the links below to see the animated cursor (work on IE only) :
1 - http://2aek.com/images/cursors/cur204.ani
2 - http://2aek.com/images/cursors/spo18.ani
3 - http://2aek.com/images/cursors/strtail.ani
4 - http://2aek.com/images/cursors/spo33.ani
5 - http://2aek.com/images/cursors/spe220.ani
6 - http://2aek.com/images/cursors/orbit03.ani
7 - http://2aek.com/images/cursors/mariocartyoshispin.ani
8 - http://2aek.com/images/cursors/hearttailup.ani
9 - http://2aek.com/images/cursors/heartmultiglitter.ani
10 - http://2aek.com/images/cursors/gold-ani1.ani
11 - http://2aek.com/images/cursors/gam987.ani
12 - http://2aek.com/images/cursors/cur216.ani
13 - http://2aek.com/images/cursors/cur215.ani
14 - http://2aek.com/images/cursors/cur211.ani
15 - http://2aek.com/images/cursors/cur1.ani
16 - http://2aek.com/images/cursors/carebearstarani.ani
17 - http://2aek.com/images/cursors/carebearani.ani
18 - http://2aek.com/images/cursors/carebearani.ani
19 - http://2aek.com/images/cursors/ani195.ani
20 - http://2aek.com/images/cursors/angel5.ani
Below are some of my own designed non-animated cursors :
12 - How to add an animation onto title?
Go to your css editor, press Ctrl + F on keyboard, find the keyword page_title . If you cannot find the word, you can just copy paste to add the codes below onto your css editor. Then change the background url link to your own animation link just the same as the example below :
#page_title {
background-position:0px 0px;
width:93px; /*change it to be the same as the value of your animation width*/
height:108px; /*change it to be the same as the value of your animation height*/
background: url(http://2aek.com/animation/183.gif) no-repeat;
font-size: 0pt;
}
13 - How to add an animation on top left corner?
Go to your css editor, press Ctrl + F on keyboard, find the keyword timeline_cnt . If you cannot find the word, you can just copy paste to add the codes below onto your css editor. Then change the background url link to your own animation link just the same as the example below :
#timeline_cnt {
background: url(http://2aek.com/animation/27.gif) no-repeat;
background-color: transparent;
}
14 - How to spin the emoticon when the mouse cursor is pointing on it? It is working on Safari and Google Chrome only. Other browsers can rotate them only but cannot spin them. Go to your css editor, just copy paste to add the codes below onto your css editor :
.emoticon, .p_img {
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-khtml-transition-duration: 500ms;
}
.emoticon:hover, .p_img:hover {
-webkit-transform: rotate(390deg) scale(1.2);
-moz-transform: rotate(390deg) scale(1.2);
-khtml-transform: rotate(390deg) scale(1.2);
}
15 - How to spin the pictures of friend lists and fan lists when the mouse cursor is pointing on it? It is working on Safari and Google Chrome only. Other browsers can rotate them only but cannot spin them. Go to your css editor, just copy paste to add the codes below onto your css editor :
.user_link img {
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-khtml-transition-duration: 500ms;
}
.user_link img:hover {
-webkit-transform: rotate(390deg) scale(1.2);
-moz-transform: rotate(390deg) scale(1.2);
-khtml-transform: rotate(390deg) scale(1.2);
}
16 - How to spin the plurk badges when the mouse cursor is pointing on it? It is working on Safari and Google Chrome only. Other browsers can rotate them only but cannot spin them. Go to your css editor, just copy paste to add the codes below onto your css editor :
.award_bar img {
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-khtml-transition-duration: 500ms;
}
.award_bar img:hover {
-webkit-transform: rotate(390deg) scale(1);
-moz-transform: rotate(390deg) scale(1);
-khtml-transform: rotate(390deg) scale(1);
}
17 - How to add an animation to body background?
/* Background of Plurk Body */
body, html {
background: url(http://2aek.com/animation/cuteDragon.gif) no-repeat left;
background-position:50px;
background-color: #020b0a;
}
18 - How to add an animation to dashboard background?
/*DASHBOARD*/
#plurk-dashboard {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhv6EajWyRqP6DubPV7ZkHWHEeOkIuh9aPQialNTumc2CrAID39ZLt3ATlmTwFMvpBlKsHziRid1W5h0iDSgXkQoGey1t8NXsJGvzjEUlZun8GEOe_icrSjH60lbVY5GeI9kOQMpaPeEfw/s1600/dashboardbackground.gif) no-repeat;
background-position: center 10px;
border:0 !important;
}
19 - How to add blue aura to plurk border when mouse cursor pointing on it?
.plurk_cnt tr:hover {
-moz-box-shadow: 0px 0px 2em 10px #00fcff;
-box-shadow: 0px 0px 2em 10px #00fcff;
-webkit-box-shadow: 0px 0px 2em 10px #00fcff;
background:url(http://2aek.com/inventory/003.jpg) repeat top center;
}
20 - How to add animation on top the timeline?
.div_one_line {
background: url(http://2aek.com/animation/154.gif) no-repeat;
width:100px;height:400px;
margin:0px;
background-position:0px 310px;
}
That's all. Hopefully you will success add animations on your plurk layout. Please write a comment at below if you have any question, I will try my best to answer you.
This post is created originally by me. So the original author is Zac1987. Please respect me, do not copy my this article/post. If you want to copy, you must put "Reference : http://ye5.blogspot.com/2010/12/add-animation-onto-pluk-layout.html" to credit me. Thank you.
You might also like : A Cool Plurk Layout For Sale | Hack Karma in Plurk | Plurk Hidden Emoticons | Hack Plurk Badges | Hide Plurk Dashboard
Last Updated on 15 February, 2010
No comments:
Post a Comment