Forum Home Enhancements - [CM] Flying Twitter Bird (On Forum Home)

This was brought to you by ChiNa-Man


First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!


:::::::::::::::::::::::::::::::::::::::::::::

Hello everyone, I finally modified this mod to work on vBulletin. For now I only give Credits to SujitKumar (Wordpress.org) that I know made this for Wordpress long ago, and later on made for many other websites, blog and forums with different authors.

It was very hard to configure the codes and to make use of it in vBulletin!

About modification:
Ok this mod is actually showing 2 Birds! One of the birds are flying arround, while the other bird is sitting on the left side of your screen! And where ever you scroll with your mouse the flying bird will follow you and the screen! It will always find a good spot to SIT, not just anywhere! I noticed that it will sit on Forms, Lines or Edges!!

Difference between the 2 Birds:
1: Clicking on the Flying Bird, it will take you to your Twitter Account!
2: Clicking on the Sitting Bird on the left side of your screen, will let you TWIT news directly to your profile!

Lets Get Started:

Step 1: Go to your AdminCP, Click on Styles and Templates, then Style Manager, and on your right side in the dropdown sidebar, you choose Edit Templates!

Now you are in the Templates area! You can either add the following code in your "footer" or your "header" template! But always start with the header. Click and open your header template, and add the following code below everything else.

Code to add in Header:

  <script type="text/javascript" src="js/tripleflap.js"></script>
    <script type="text/javascript">
    var birdSprite="images/birdsprite.png";
    var targetElems=new   Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
    var twitterAccount = "YOUR TWITTER ACCOUNT"; tripleflapInit();
    </script>
    <a id="theBird" href="http://twitter.com/?status=+@New updates:"   target="_blank" style="display: block; position: absolute; width: 64px;   height: 64px; background-image: url(images/birdsprite.png);   background-attachment: initial; background-origin: initial;   background-clip: initial; background-color: transparent; z-index: 947;  left: 0px; top: 550px; background-position: 0px 0px; background-repeat:  no-repeat no-repeat; "></a>

Step 2: Replace the line which is COLORED in RED with your twitter account name! And no URL. So go a head and change the text "TWITTER ACCOUNT NAME" with your account name! And again... do not TYPE any URL!

Step 3: Is to Donwload the ZIP files from the attachments below, and upload the 2 folders to your forum root! One of folder is called "js" and the other is called "images"! Upload them both in your main forum folder!

About the Code Marked With Different Colors:

BLUE is the path to your Flying Bird, and the bird to the left side of the screen, leave it as it is. Do not remove the image because the flying bird is also using the same image!

Purple is the size for the bird on the LEFT! You decide where you want it to sit! So only change the text wich says TOP and LEFT in purple color!

Thats it, I really hope you guys like this, and Please click on INSTALLED!

Notice:
If you dont want the left BIRD to be showen, just change the BLUE line which is the path to the image, simply change it to something else! THATS IT! But do not remove the image from the folder!

Example Image: