Supporting
Tutorial : Billy Sheep Music Player
A lot of people are asking me to teach them on how i get my music player. So, here it is~ Please click like/reblog if you like this tutorial
What you need:
- drop box account
- songs in your computer
Steps:
- Go to this website
- Open your dropbox folder on your computer
- Drag music files into your dropbox
- Wait it dropbox to finish loading your music files
- Right click the song that you want from your dropbox folder
- Then click at the dropbox tab , look for share link.
- Click the share link button and a tab will open on your browser
- Right click the download button
- Click copy link address.
- Then paste the link on the left column of the website at step 1.
- Change the name of the song on the right column
- And you will have the first song for your music player!
- If you dont want auto play, untick the box below all the rows for your songs.
- Click generate code to get the code for the music player :)
CURRENTLY WATCHING BLOG PAGE • PREVIEW: Codes Only • Example • HELP/FAQ • DOWNLOAD: Pastebin / Ge.tt
So here’s that blog page I promised. As I’m sharing the raw version of codes you will have to make/include all of the images yourself. I guess the main feature is the ability to filter when you click on the buttons at the top.
So I asked for opinions about any changes people would have wanted and taking those into consideration I have decided to share the original version of codes. I may make some changes in the future and release an “updated” version. If there are any questions about changing colours/fonts or adding shows/info please have a look here first. Any other problems just message me. Feel free to edit as much as you like.
Tutorial : Chatbox Hover
Step 1 (at the Cbox website):
- If you haven’t got a chatbox yet, make an account here.
- In the Look & Feel tab at the top, go to Layout options. For this tutorial, we’re using this chatbox size: 190px (width) and 300px (height).Save at the bottom.
- You can change the colours in the Colours & fonts if you wish at this point.
- Go to Publish at the top, and keep the cbox website tab open in your browser. We will copy the cbox HTML coding later.
Step 2 (at Tumblr → Customize Theme → Custom CSS page):
- Copy and paste this Google webfont code at the top of the Custom CSS:
<link href='http://fonts.googleapis.com/css?family=Codystar'
rel='stylesheet' type='text/css'>
- Then copy and paste this after <style type=”text/css”>. This places the chatbox in the bottom left corner as you can see in the preview.
#cboxdiv { z-index: 9999; position: fixed; bottom: -300px; left: 20px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #cboxdiv:hover { bottom: 0px; } #cboxtitle { text-align: center; font-size: 20px; font-family: codystar; letter-spacing: 8px; color: #fff; text-shadow: 1px 1px 1px #fff; width: 180px; background-color: #aaa; padding: 3px 5px 5px 5px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
- And then copy and paste this after <body>:
<div id="cboxdiv"> <div id="cboxtitle">CHATBOX</div> YOUR CBOX CODE </div>
- Replace YOUR CBOX CODE with the code you have from the cbox website. Once you have done that, remove the following from the cbox code you’ve just pasted in:
<div id=”cboxdiv” style=”text-align: center; line-height: 0”></div>
CREDITS TO tumblrtutoriial
Tutorial : Floating Sidebar
Paste this code under <style type”text/css”>
And this under <body> tag .
*Change the position of the sidebar by changing the number at this section:
margin-left:0px;The higher the number, the further it is from the left
Tutorial : Disable Right Click
Wanna stop people from copying stuff from your blog? Disable your right click!
Copy and paste this code after <head>
Tutorial : Search bar
Copy and paste the code below to where you want the search box to appear
<form action=”/search” method=”get”>
<input type=”text” name=”q” value=”” style=”width:100px; height:11px; background-color:#ffffff; color: #000000; font-size: 11px; border: 1px solid #696969;”/>
<input type=”button” value=”search” style=”font-size: 9px; background-color:#ffffff; color: #000000; border: 1px dotted #696969;”/></form></span>
retype quotation marks if it does not work
Tutorial : Wishlist
Copy this code and paste it where you want it to appear
Reference to letstravelparis
Tutorial : Heart Menu
1. Copy& paste this code after <style>
2. Paste this code where you want it to appear.
Reference from tumblrtutoriial
