no more shaking like that

Assalamualaikum and annyeonghaseyo. I'd like to make a tutorial today. Tutorial Header like me. It is original from Heidi (tumblr user). Although it is from Heidi, it is all edited by me. Follow if you want. This tutorial also requested by anonymous.

Attention: Save your previous code in microsoft word before you follow this tuto. just in case if this tuto is not working on your blog. I think better you just save the code directly. I've try this code on my blog in preview. when i save it it a little bit cacat. So i change a little bit then i save directly. Save directly is the best way. Don't trust the preview. save it. Try it first. And, don't forget to delete your header code.




Style 1: 900 x 200 (sort of) / the size actually 900 x 300 /

1. Copy the code below and paste it before </style> code.

/* Center Wrapper*/

#wrapper{
    width:900px;
    height:200;
    margin-left:auto;
    margin-right:auto;
    margin-top:px;
    margin-bottom:140px;
    padding:0;
    border:0;
    }
 
/* Top */

#top {
 
    width:660px;
    height:115px;
    margin-bottom:40px;
    padding-top:100px;
    padding-left:115px;
    padding-bottom:80px;
    padding-right:125px;
    background: url(http://i.imgur.com/bBLxuCc.png);
    }
 

#title {
    padding-bottom:0px;
    text-align:center;
    color:#000;
    font-family:cambria;
    font-size:8px;
    letter-spacing:1px;
    text-transform:uppercase;
    }
 
#desc {
    color:#000;
    font-family:times;
    letter-spacing:2px;
    font-size:9px;
    text-align:justify;
    }

#nav {
    margin-top:10px;
 
 
    text-align:center;
 
    }

#nav a, #visible_drop{
   display:inline-block;
background:#A4A4A4;
border:1px dashed #fff;
padding: 3px;
border-radius:5px;
margin: 2px;text-align:center;
color:#fff;
-webkit-transition: 0.4s;
height:20px;
width:77px;
font-family:  'Cutive Mono', serif;
font-size:13px;
}
#nav a:Hover, #visible_drop:hover{
   display:inline-block;
background:transparent;
border:1px dashed #Fff;
padding: 3px;
border-radius:5px;
margin: 2px;text-align:center;
color:#fff;
-webkit-transition: 0.5s;}

2. then copy the code below and paste it after </style> code.

<div id="wrapper">
<div id="top">
    <div id="title">— title or what ever or free online user —</div><br>
    <div id="desc"><center>your words or description or caption</center></div>
    <div id="nav">
    <br><br>
    <a  href="http://blogger.com">home</a>   <a  href="http://blogger.com">follow</a>

3. done


Style 2: (like me) 420 x 100 (sort of) / i don't know the real size /

1. Copy the code below and paste it before </style> code.

/* Center Wrapper*/
 #wrapper{ 
width:420px; 
 height:auto; 
margin-left:auto;  
margin-right:auto; 
margin-top:50px; 
 margin-bottom:60px; 
 padding:0; 
 border:0; 
}

 /* Top */
 #top {     
max-width:200px; 
height:90px; 
margin-bottom:40px; 
padding-top:10px; 
padding-left:115px; 
padding-bottom:80px; 
padding-right:125px; 
background: url(url img);   
 } 

 #title { 
 padding-bottom:0px; 
text-align:center; 
color:#000; 
 font-family:cambria; 
font-size:8px; 
 letter-spacing:1px; 
 text-transform:uppercase; 
 } 

#desc { 
 color:#000; 
 font-family:times; 
letter-spacing:2px; 
 font-size:9px; 
text-align:justify; 
 }

#nav {    
margin-top:10px;        
text-align:center;      
}


#nav a, 

#visible_drop{
display:inline-block;
background:transparent;
border:1px dashed #fff;
padding: 3px;
border-radius:10px;
margin: 2px;
text-align:center;
color:#fff;
-webkit-transition: 0.4s;
height:15px
;width:15px;
font-family:  'Cutive Mono', serif;
font-size:13px;
}

#nav a:Hover, #visible_drop:hover{
display:inline-block;
background:transparent;
border:1px dashed transparent;
padding: 3px;border-radius:5px
;margin: 2px
;text-align:center;
color:#fff;
-webkit-transition: 0.5s;}

2.  then copy the code below and paste it after </style> code.

<div id="wrapper">
<div id="top">
    <div id="title">— title or what ever or free online user —</div><br>
    <div id="desc"><center>your words or description or caption</center></div>
    <div id="nav">
    <br><br>
    <a  href="http://blogger.com">home</a>   <a  href="http://blogger.com">follow</a>

3. done

pink: your header url. the header credit to atiqah jaidin
aqua: title or you can put FOU (free online user) there like me
red: your description or words. if you want to change the font color, just find it at #des

All color code are guided at the code above.

No preview but save directly. Thank you.

Labels: exo, tutorials

Tutorial: navigation Hover

Tuesday, 19 November 2013 • 18:57 • 0 comments

you are my history

Chanyeol Chanyeol

 Assalamualaikum and annyeonghaseyo. straight to the point.

<style>
a.chanyeol {
display:inline-block;
background:#fff;
border:1px dashed #A4A4A4;
padding: 3px;
border-radius:5px;
margin: 2px;text-align:center;
color:#A4A4A4;
-webkit-transition: 0.4s;
height:20px;
width:77px;
font-family:  'Cutive Mono', serif;
font-size:13px;
}
a.chanyeol:hover {
display:inline-block;
background:#A4A4A4;
border:1px dashed #Fff;
padding: 3px;
border-radius:5px;
margin: 2px;text-align:center;
color:#fff;
-webkit-transition: 0.5s;}
</style>
<center>
<a class="chanyeol" href="http://www.blogger.com/">Chanyeol</a>
<a class="chanyeol" href="http://www.blogger.com/">Chanyeol</a>
</center>

I think you shoul change the height, weidth and font-size because the navigate doesn't look perfect. Change the colour if you want to.

Labels: exo, tutorials

Tutorial: Pop Up Box for Tumblr

Wednesday, 13 November 2013 • 22:37 • 0 comments

 

Blerghh

This tutorial pop up is for tumblr. A little bit difference from blog but i think this is easy enough. Click here for live preview. Okay, actually the link is for my tumblr.

1. Copy the codes below between <head> and</head> tags. It means you can put it after the <head> code or before the </head> code.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://png.findicons.com/files/icons/1714/dropline_neu/24/dialog_close.png" class="btn_close" title="Close" alt="Close" /></a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

Pink: The url of close button. change it if you want to.


2. Copy and paste the code below and put it before the </style> code or after the <style type=”text/css”> code.

 #fade { /*--Transparent background layer--*/
    display: none; /*--hidden by default--*/
    background: #ffffff;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .80;
    z-index: 9999;
}
.popup_block{
    display: none; /*--hidden by default--*/
    background: #fff;
    max-width: 400px;
    padding: 0px;
    border: 20px solid #ffffff;
    float: left;
    font-size: 1.1em;
position: fixed;
top: 47%; left: 51.5%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: px;
-moz-border-radius: px;
border-radius: px;
}
img.btn_close {
float: right;
margin: -20px -50px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

3. Paste this after the </body> code.

<div id="02" class="popup_block"> <Center><font size="5" color="#1C1C1C">Ask Me Anything<p></font><iframe frameborder="0" scrolling="yes" width="100%" height="150" src="http://www.tumblr.com/ask_form/URL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></center></div> </div></div></div></div></div></div></div></div></div></div> 

Attention: This code is for ask section only. if you don't want to put this, skip this step and go to the next step.

blue: Your url tumblr


4. Copy this and put at your navigation.

<a href="#?w=500" rel="02" class="poplight">ask me</a>

5. Copy this for your other pop up.

<div id="03" class="popup_block"> your content here </div>

and copy this link and put at your navigation.

<a href="#?w=500" rel="03" class="poplight"TITLE</a>

6. Done.

Copy the 5th step if you want to add the pop up.

green: your div id code
red: your content there

If you want to add the pop up code, make sure the div id code at the link and the content is the same.
You may ask me if you don't understand.

Labels: exo, tumblr, tutorials

Tutorial: Making Icons

Friday, 1 November 2013 • 19:27 • 0 comments

  

   

oh my daehyun, he looks so cute and perfect!

ATTENTION! : Today I will use English, so sorry if my English is broken.

Assalamualaikum and annyeonghaseyo. TBH, I knew that majority of you now the way to make icons. This simple tutorial is just for who still don’t know to make icons. I make icons using Microsoft PowerPoint (MPP) and Format Factory (FF). I have 2 tutorials about making icons. First tutorial is using MPP and FF. Second tutorial is using MPP only. You can choose either one you like. For those who don’t have FF, you just follow the second tutorial.

{First Tutorial: MPP+FF}

1. First, open your (MPP) and choose any picture that you want. As an example, I choose Kris.

2. After that, make a right click at the picture. Then click at the ‘Size and Position…’.

3. Click ‘crop’ and adjust the size at the crop position at width and height box.

After cropping, it will be like this.

4. To adjust again the crop position, click ‘format’ and then click ‘crop’. Then adjust the size and the position. After cropping, save the picture.

5. Open your Format Factory. Click picture and choose ‘All to ICO’ instead.

6. They are 3 main buttons. Click ‘Output Setting’ first to make an adjustment.

7. Adjust the size with changing the max Width and Height. Then click OK.

8. Picture number 6 will appear again. Click ‘Add File’. After choosing, click OK.

9. Lastly, click Start. Find your Icon at the output folder.

10. Copy your icon from the output folder to your folder.

11. Done.

{Second Tutorial: MPP only}

Copy the 1,2,3 and 4 steps from the first tutorial.

5. Once again, make a right click at your picture and click ‘size and position’ instead. (Please refer to second steps at the first tutorial)

6. Then click ‘size’. Change your size to 0.67” (height and width).

Your picture then will look small. Save it. After that, open your folder and click at the picture. The size will be at least 100 x 100 or 100 x 101.

7. Done.

Hasilnya hahaha. . . .

Labels: bap, exo, tutorials

Tutorial: Moving Status

Saturday, 26 October 2013 • 01:51 • 0 comments

 

Annyeong,i love kris. i really love kris. naaah, ignore my insanity. this is really shrieks omg i dk why. it's ok anyeong.

{life preview}

Assalamulaikum and annyeonghaseyo. Idk what is this title actually. Is the title suitable? "Moving Status" plus, my English really broken right? ottokae. . .

Ok, dashboard > template and then find place that you want to put this.

Copy the codes below and put it at the place that you have chose.

<div style="background-image: url(URL BACKGROUND); border-radius: 0px; border: 2px solid #000000; font: trebuchet ms; padding: 4px; color: black">
<center>
<marquee>Put anything here </marquee></center>
</div>

Red: Url Background
Pink: The radius size of the border. (Melengkung)
Orange: Thickness of the border
Green: The color of the border.
Aqua: Your content there
Purple: Font
Blue: Font color

Preview and save.

Done.

Labels: exo, tutorials

Tutorial: Create a page (Custom layout) [ Tumblr ]

Friday, 25 October 2013 • 06:25 • 0 comments

Assalamualaikum and annyeonghaseyo.

First of all i want to apologize because i put so many kris's gifs. harhar why not? i love him. ok, this tuto is for tumblr. You can make separate page right? i think i had teach you. but his time, seperate page with different theme. You may look my bias page here.

1. ok, scroll your tumblr customize and find this ; + add a page.

{click for enlargement}

2. After that, click standart layout, and choose custom layout instead.

{click for enlargement}

3. then complete your url. example ; http://cappucinobaby.tumblr.com/biases

{click for enlargement}

4. Copy your theme or page theme url and paste it under the url tumblr. like shown.

{click for enlargement}

5. Click update preview.

{click for enlargement}

6. if you feel satisfied, click save then.

7. done.

Easy right? if you don't understand, please ask me here or here :)

Labels: exo, tumblr, tutorials

Tutorial: Image Hover 2

Friday, 11 October 2013 • 00:27 • 1 comments

she's a girl younger 1 year than jeon jungguk,
born on julay,
8 days after yi xing celebrated his birthday of 7 years old
ok, why are sehun pukul kris's ass??
omg how dare you sehun
stop bullying him!!
kris i'll save you!
other members don't even care about then

OMG! HOW DARE SEHUN PUKUL KRIS'S ASS???

Assalamualaikum and annyeonghaseyo. this tuto is requested by anonymous. sakit kepala aku tengok codes dalam tumblr, tapi bukan theme yang aku pakai sekarang ni. Theme orang lain . aku pinjam dari owner. credit to her too.

Cari code </style> and paste codes ni kat ATAS dia.

#unnie{
background:#FFFFFF;
color:#000;
width:150px;
height:300px;
margin-top:-300px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.0;
-webkit-transition:all .5s ease-in-out; }
#unnie:hover{opacity:.8}

Then, copy codes ni and letaklah kat mana-mana korang nak letak.

<center>
<img height="300" src="URL IMG" width="150" /><br />
<div id="unnie">
PUT ANYTHING HERE
</div></center>

Pink: width of Image
Green: Height of image
Blue: Your contents there
Red: URL IMG

Make sure saiz 'margin-top' sama dengan saiz tinggi image tu.

Preview and save.

Labels: exo, tutorials

Tutorial: Tooltips

Sunday, 8 September 2013 • 03:43 • 0 comments

Don't hurt me awww :(

Assalamualaikum and annyeonghaseyo. Ini ialah tuto buat tooltips. Aku jumpa tutorial ni dalam tumblr, lepas tu barulah aku sedar yang skin milik farah yang aku pakai namanya tooltips. Thanks for tumblr and her.

dashboard> template

Copy code kat bawah dan letak kat bawah code </html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

Then, cari code </style>.  Copy the codes below and paste it before the </style> codes.

#s-m-t-tooltip {

max-width:300px;

max-width:300px;
padding:4px 4px 4px 6px;
margin:20px 0px 0px 20px;
background-color:#fff; /* change the background color */
border:1px solid #ddd; /* change the border color */
font-family:calibri; /* change the font */
font-size:9px; /* change the font size */
font-style:italic;
letter-spacing:2px; /* change the letter spacing */
text-transform:lowercase; /* can be uppercase, lowercase, none*/
color:#999; /* change the text color */
z-index:999999999999999999999999999999999999;
}

Yang ni aku payah nak cakap. Em, letak kan "title="name" kat sebelum tajuk. Faham? Contoh:

<a class="wolf"href="http://www.blogger.com"title="kris's beau">✿</a>

✿

 {hover, please}

Ada nampak kris's beau? itulah dia haha what ever. selamat mencuba.

Labels: bap, tutorials

Tutorial: Image Hover 1

• 03:19 • 0 comments

    

Look at me, please

Assalamualikum and annyeonghaseyo. Aku nak share satu tuto Image hover ni. Teruskan okay? aku tak ada benda nak membebel ni.

Dashboard> Template

Find </style> code.

Copy codes below.

/*------ IMAGE ANIMATION------*/img {filter:alpha
(opacity=100);-webkit-transition-duration:.5s;} img:hover
 {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow:
 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px
 #000000; -webkit-border-top-right-radius:30; -webkit
-border-top-left-radius:30; -webkit-border-bottom-right-
radius:30; -webkit-border-bottom-left-radius:30;}img:hover
 {filter: alpha(opacity=60); opacity: .60; border: 1px solid
#000000; border-radius: 50px; -moz-border-radius: 50px;}
-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha
(opacity=80);-moz-opacity:0.80;opacity:.80;}u
{text-decoration:underline;border-bottom:
 2px dotted #ff0080;padding: 0px;}

Then, paste it before the </style> code.

Preview and save.

Labels: exo, tutorials

◀

▶