Tutorial: Header like me (With Navigation and Description on it)
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.
ATTENTION:
I FORBID YOU TO RE-TUTO THIS TUTORIAL, SO DO NOT RE-TUTO THIS TUTORIAL. HOW DIFFICULT FOR ME TO FIND THE SHIT CODES. I APPRECIATE YOU IF YOU FOLLOW THIS TUTORIAL. IF SOMEONE ASKED YOU ABOUT THIS TUTO, JUST GIVE THIS LINK TO THEM. NOT MY INTENTION TO NOT ALLOW YOU TO RE-TUTO THIS TUTORIAL BUT I'VE WASTED MY TIME TO SEARCH AND FIND THIS CODE AND CHANGE ALL OF THIS CODE SO I BEG YOU, PLEASE RESPECT MY REQUEST. OR ELSE I'M GOING TO FEEL SICK OF YOU.
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
Post a Comment