Tiny Skull Crossbones

Behind The Scenes

I'm not sure if this Blog will be like most other sites that I've been a part of but usually once I customize a webpage or two, I get people asking me, "How did you DO that?!"
Welp, this page will explain how my blog looks the way it does:)

Most of you know how to work the widgets on Blogspot, and once I found out that the coding was HTML/CSS well..there was no stopping me hehe.

MUSIC

Q: How did you get music to play with no music widget or youtube video?
A: Well, believe it or not, there IS a youtube video on my page. I just told it to be REALLY small. Basically you use the embed code under your favorite youtube video and paste it into the custom HTML/CSS widget. Then you tweak it a bit;) For example; the embed link to my music is this:
(of course there are no spaces by the '<' and '>'

< iframe width="420" height="315" src="//www.youtube.com/embed/XtFpQfR_O68?rel=0" frameborder="0" allowfullscreen >
< /iframe >

Now, to make it 'hidden' I changed this part: iframe width="420" height="315"
To: iframe width="1" height="1"
So in essence the video is actually there..but REALLY REALLY small hehe.
Next, to make it play when the page first loads up, I added to the original URL with this: ?autoplay=1
So minus the brackets, my code looks like this:
< iframe width="420" height="315" src="//www.youtube.com/embed/XtFpQfR_O68?autoplay=1" frameborder="0" allowfullscreen >
< /iframe >

And that's basically all there is to it!. If you look closely at the bottom of my blog, there is a little  ♥
That is my youtube player. Pretty cool huh?;)

 Q: How did you get pictures above your widgets instead of normal titles?
A: I have to admit that this one stumped me for a bit and I had to dig, but I DID find out how! 

You are basically going to edit one part of your Widget coding in your template HTML area. Fortunately,
Elif Ayiter at http://easypeasydesign.blogspot.com/ 
 Shows you step by step exactly how to get to the part of the code you need and exactly what you need to put where. That page is HERE.

They also have a SLEW of resource links on their blog, so I foresee many days of stalking it..hehe


Q: How do you add the custom cursor?
A:  Go to: http://www.cursors-4u.com/
Find a cursor that you want to use (this part might take a while, they have LOTS!! hehe)
After finding the one that you want, choose the 'Blogger/Blogspot' tab below the cursor itself (as shown in the picture)
Copy the code for the New Blogger/Blogspot Interface.
DO NOT FOLLOW THE REST OF THEIR INSTRUCTIONS OR IT WON'T WORK!!

I REPEAT:
 DO NOT FOLLOW THE REST OF THEIR INSTRUCTIONS OR IT WON'T WORK!!
Instead..Go to your dashboard, click on Template. Click on Edit HTML.
Now you are going to look for </head> 
 Make a spot right before </head> and THAT's where you are going to post your code that you copied from cursors-4u. For some reason, the cursor does NOT show up when you go to preview your changes, so don't freak out if you hit that handy dandy preview button and it's not there. Just save and then view blog, and if you did it right, then viola! A new cursor!

 


No comments:

Post a Comment