Home Tutos Resources Themes Main Follow
a warm welcome:

Hi everyone, welcome to the side blog of Miki, this is where she will dump all the HTML tutorials that are belonging to her, unless stated otherwise. Please do read and follow the rules of this tutorial blog, if you don't, I can't guarantee your life.


status:

Owner: Miki the Highness.
Opened on: 2014.
Name: Sugar, Spice and Tutorials!.
Genre: Tutorial, and free blog's layouts.
Hits:
Tumblr theme blog: themesbymiki.


Rules to know:

What you can do:
You do not need to credit me, but I appreciate it if you do, though. This only applies for personal use.
You are allowed to be inspired by my tutorial but I want a credit for that. No exception.
You are allowed to put my tutorials on your blog to share with everyone, but I want a credit.

What you cannot do:
You are not allowed to copycat my tutorials 100% the same, be fucking original, I see these shits already too much.
You are not allowed to steal my works, and photos of my tutorials then claim as yours. It is a fucking crime of originality.



got question?



I do not do request.
I won't do convert things for you, these messages will be ignored.



the credits are:

Base code: bloodkitty
Inspiration: Sun.
Editor: Miki.
Tutorial: Evan
Credit: scintillantstar.
Resources: 1 2
カーソル・スイッチ

Scroll-to-top, and moving/scrolling title.

Date: Friday, October 17, 2014
Time: 8:46 PM
Comment(s): 0 comment(s)


Hey everyone, I am back with a new tutorial today as I promised to you on the previous post, which is Scroll-top-top button, and moving/scrolling title.

Okay, this tutorial is just really easy, and you don't need to sweat out about how difficult it could take, or it would take a test on your knowledge on HTML and CSS. No, all you need to do is following these steps below, alright?

Scroll-to-top button:

If you are wondering what scroll-to-top button is, then lemme show you this, whenever you scroll down to see the other posts, you will see a candy cane showing up on the right side and you click on it then it will scroll to the top of the blog for you. That is a scroll-to-top button. All you need to do is clicking here, then copy the code the paste it below <head> and save it! Now you are done. However I am gonna give you more tricks to do with this scroll-to-top button:

Firstly, you wanna change the picture of the scroll-to-top button, then I show you this:

<img onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false" src="http://i.imgur.com/21g3o.gif"/>

All you need to do is finding the codes above that I have shown you, then you may see the codes that I have highlighted for you in yellow color. That is where you are gonna put the code of the image you wanna put it in, but I suggest you to use the direct URL of the image. If you do not know how to find the direct URL of an image, please look below:


Choose any picture you like, then right clicking it and it will show these options like above, then choosing the "copy image URL" to copy the direct URL of the picture you choose. However I suggest you to choose the pixels because it looks cuter or not look too big on your theme/blog's layout.


This is another trick I am showing you now. Going to find the part "css" of the scroll-to-top button's codes that I have circled in the photo, then looking for "bottom" and "right" that I have underlined in red color. These are the positions of the scroll-to-top button, you could change it however you want. It could be bottom -> top, right -> left. Easy much?

Now you can see the title:"top?" code, that is where you are going to change the title of the scroll-to-top button, and this is how it works:

Change it however you want it to be.


Moving/scrolling title:

Moving/scrolling title is what the title will be moving in the tab. This is just another easy tutorial, and all you need to do is clicking here to choose any type of scrolling/moving title you want, then paste it after the <head> and save it, now you are done. So easy ^^!

image



Now I am done updating this tutorial blog, so I hope you enjoy it and on the next time, the next tutorial would be How to make and find Twitter widget. See you 'till then ~ image

Labels: