♡ tutorials by Miki ♡

Hello everyone, I am back today with a new tutorial which is called Header Tutorial (without photoshop) .

I know there are a lot of people who are doing really well on photoshop, I really admire those kind of people because I myself can't do the photoshop thingy . Please don't get me wrong, okay? Besides, please don't say I don't try, okay? I did try to make a header with photoshop, but it was so hard and complicated to do so . I went through many different tutorials teaching on making a header for the blog, but they all taught to do it with photoshop. However, I finally found two tutorials (that aren't mine, but I would gladly share you all here) teaching on how to make header without photoshop.

The first way of making a header without using photoshop is using Picmonkey instead. The tutorial actually is easy, and all you need to do is clicking this page, then follow all the steps carefully and now you have your very own header without using photoshop at all. Below is my own example to see.



The second way of making header without using photoshop is using Photoscape. Before heading to the tutorial, please go and download the Photoscape first, then save it somewhere else on your desktop. Now you can go the tutorial, and follow all the steps carefully. However, remember this tutorial is not supporting a transparent header, you can see my example below, though:




These tutorials are really easy to follow, so please, do not sweat out about how hard it could take . I hope you enjoy this tutorial, and I will see you soon on the upcoming tutorial which is called Domain, or .co.vu tutorial. See ya, everyone ~ 

Resources + credits: here and here.

Labels: html tutorial

Hello everyone, I am back with a new tutorial today and well, it is supposed to be Header Tutorial (without photoshop) but I decide to do that tutorial on the next time, because there is something really important to share you all here .

Okay, I know that recently the new version of Google Chrome does not support @font-face and worse, all the fonts you see will become the font that you change on the Settings. Yes I faced this problem before, I went to many different tutorials and followed the steps by steps, but shits didn't work out. That was pretty shitty, I say. It took a few days to find out everything, until I finally this solution:

1) All the webpages I go (especially Tumblr, and Blogger) are in the same font, what to do now?

- This is easier than I thought, all you need to do is typing/copying this chrome://flags/#disable-direct-write then paste it on your address bar. You need to choose "enable" of "disable direct write" then restart the chrome (by closing it, duh!), and now you are done!

2) The @font-face doesn't work at all????

- Okay, on this problem, I prefer you to read the latest post of Sun then follow all the steps, and you will see the miracles later. However, please do give it few minutes to load the font, okay?

3) Why there are some Chinese characters????

- Don't worry, friend, I know how to fix this problem. All you need to do is going back to the Font settings in Google Chrome, then change it into Unicode (UTF - 8) then save it, and now you no longer see the Chinese character anymore ^^~


I am done updating this tutorial blog and will be back soon enough with the Header Tutorial (without photoshop), okay? See you soon ~ 

Resources + credit: here

Labels: html tutorial

Hello everyone, I am back with two combining tutorials today, and they are Cbox/tagboard and moving box tutorials.

Before I start the tutorial, lemme apologize for the absence on my main blog because of my laptop and my personal life. Nothing is good and that makes me really fed up, but do not worry at all, I am not the type of people who keep drowning in those dull days. That is not how I live. I will be back soon enough but it is just not now. I hope that the inconvenience in my main blog wouldn't make people stop following me . That would make me really sad if you do so, then please do not break my heart, okay?

Alright now is the time for the tutorials!

1) Cbox/tagboard tutorial:

What is a cbox? Cbox is the place for you to send small messages to the owner. If you want to get the cbox then all you need to do is clicking here.


You will see the home page of the website, then look up for the "Look & Feel" to click for it, and slowly scroll down to see the "Colours & fonts" then click it as well.



That will show up a page like above, then edit however you want.



If you don't want people spamming in your cbox/tagboard, then please look up to the navigation bar and click on the "Options" and "Posting options". That show you a page like above, then choose the "Require CAPTCHA" in the Abuse mitigation. Now you can prohibit the spams in your cbox C:



Now choose the "Publish!" in the navigation bar, then copy the whole code below that I have pointed for you, and paste wherever it to be. Now you are done ~ ^___^

2) Moving box tutorial:

What is a moving box? Please look below for the example.


All you need to do is copying the code below then paste it wherever you want it to be.

<div style="background-image: url(GET A BACKGROUND URL); border-radius: change the number, eg. 5 or 10px;

border: (number)px (solid, dashed, dotted, double) #(color code); padding: (number)px;"><center>

<marquee>WRITE WHATEVER SHIT YOU WANT HERE!!!</marquee></center>

</div>

There have two things you need to know:

• The font of the moving box is depending on the font where you paste it to be, eg. the font of the sidebar is arial, then the font of the box is arial as well. 
• The width of the box is depending on where you paste it.

Now you are done .

I am done updating this tutorial blog, so now I take my leave and will be back with a new tutorial which is Header Tutorial (without photoshop). See you 'till then ~ 

Labels: html tutorial

Hi everyone, I am back with another new tutorial today and this time would be How to make and find Twitter widget, and trust me, this is just another easy tutorial to do so you do not need to worry how hard it would turn out, okay? All you need to do is following these steps below.

WAIT! Before I will head to the main point of this post, lemme say few words first. I have changed this blog's url again from lilcutiebaby to tutosbymiki, which represents more about this blog than the old name. I will be posting this blog's url again on the main blog soon enough, okay? Besides I have some ideas to blog on the main blog of mine so please wait for it, okay? I will be back soonest on that blog!

Okay, now it is time to be back to the main point.

All you need to is logging into Twitter, then looking on the right side of your hand to see the small icon of your Twitter's profile icon.


You click on the icon then it show a tab of the options, then you need to choose the "Settings" and it show you page then look for the options on the left, then slowly scroll down to see the options until you see "Widgets" and you click on it like I show you below:

Labels: html tutorial

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:

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:


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 ~ 

Labels: html tutorial

Hello everyone, I am back with a new and short tutorial today, this time would be Bubbly Talk. This tutorial is really easy and cute too!!

It is really easy to use, you just need to type whatever you want in the white box which is where it will show up in the speech bubble, or it could be called as bubbly talk like on the right picture, please do not forget to "Submit" if not it won't show up like how it would be on the right picture. When you are done typing, then now it is the time for you to save it. The page usually save your speech talk in the "Downloads" file of your computer, so you need to go there for it. Now you are finally having your own speech talk! So easy, isn't it ?

I hope this tutorial will be useful, now I take my leave and will see you again soon with the other new tutorial which is calling Scroll-to-top, and moving/scrolling titles. See you 'till then ~ bye bye ~ 

Labels: html tutorial

Hello everybody, I am back today with a new tutorial which is Font Tutorial and this is really easy to do so, all you need to do is following all these steps below .

A long time ago, I searched everywhere on Google to know how to use the free fonts but the explanations were not clear at all, that upset me because some people could be really neglected, they just threw out a tutorial and expected people to understand the tutorial by some few lines that explained poorly, then I decided to make my very own tutorial on font which is much easier to understand and follow the steps.

What you need to do is going to dafont.com, or any site that supporting free fonts, then finding and choosing nay font you like:




Every sites that are supporting free font will be having the "download" button, so you do not need to worry at all, clicking the "download" button to download the font you like then saving it somewhere on the desktop that is easier to find.


The file does not contain any virus so that you also don't need to worry about. Finding the file of the font you have chose before, then click on it. The file somehow would look like on the photo above.


You already open the file, and it will show you something like above. You just need to click on the file that has the A letter then drag it out of the file, and paste it on the desktop which is easy to find it.

 Now you need to go to this link, http://www.tumblr.com/themes/upload_static_file, then it will show you like a page below:



Choose the font that you have dragged it on the desktop and click "Upload File", then it will give out the direct link and paste it onto the codes below:

@font-face { font-family: "THE FONT NAME"; src: url('THE DIRECT LINK YOU JUST GET'); }

This is an example for the codes above, in case, you do not know how to do it:

@font-face { font-family: "blush bear"; src: url('AND THE DIRECT LINK HERE'); } 

After that, you just need to copy the code below then paste it on wherever you want it to be, it could be on the title, date, link, etc. Anything you want.

font-family: "THE FONT NAME";

And now you are done, isn't that so easy to do? However I also show you two pages that converting fonts:

http://lipcious.tumblr.com/fonts/
http://codehelp.tumblr.com/fonts

Now I am done updating this blog, I take my leave and see you around soon. Next time would be Bubbly Talk. Bye bye ~ 

Labels: html tutorial