Tutorial Header 'Like Me'


Assalammualaikum.
Aku share pasal ni sebab ada orang tanya tapi aku lupa siapa haha sorry. Lagipun aku nak save code ni, entah-entah nak guna balik kan. Code ni asalnya dari tutorial Apis dengan Wana. Aku cuma aplikasikan code yang sedia ada.


Code untuk header aku tu akan jadi macam ni ;

<style>
@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.gambar {
width:800px
border:1px solid none;
}
.kedudukan {
width:800px;
margin-left:-30px;
margin-bottom:-25px;
}
#tulisan{
margin-top:-215px;
padding:6px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
background:none;
opacity:0.79;
text-align:center;
color:#000;
padding-bottom:4px;
letter-spacing:1px;
-webkit-transition:1200ms;
}
.intro {
text-align:justify;
letter-spacing:1px;
font-size:8px;
font-family:tt;
text-transform:none;
padding-bottom:10px;
}
</style>
<center><div class="kedudukan">
<img class="gambar" src="URL HEADER WIDTH 800PX HEIGHT 500PX" /><div id="tulisan">
<div class="intro"><div style="background-attachment: scroll; background: none;-moz-column-count: 3; -moz-column-gap: 25px; -webkit-column-count: 3;-webkit-column-gap: 25px; -o-column-count: 3; -o-column-gap: 25px;column-count: 3; column-gap: 25px; height: 160px;width: auto; padding: 10px">
<div style="border:3px solid transparent; background:none; width:245px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:140px; ">
<style>
#sidebarnav a {
    padding: 3px;
    margin-top: 4px;
    margin-left: 6px;
    width: 40px;
    font-family: oxygen;
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    color: #bbac98;
    background-color: #f3dbd3;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
#sidebarnav a:hover {
    color: #eb9e9e;
    background-color: #f0eabd;
}
</style>
<center>
<div id="sidebarnav">
<br />
<br />
<br />
<a href="URL LINK">TITLE</a>
<a href="URL LINK">TITLE</a>
<a href="URL LINK">TITLE</a>
<a href="URL LINK">TITLE</a></div></center>
<style>
.profile{
font:10px tt;
Text-decoration:none;
color:#585858;
letter-spacing:2px;
text-transform:uppercase;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<br />
<br /><center><a class="profile">DESCRIPTION FOR PROFILE</a></center></div><div style="border:3px solid #eee;background:#E5DDDA; width:220px; padding:5px; border-bottom:none;-webkit-border-top-left-radius: 30px;-webkit-border-top-right-radius: 30px;-moz-border-radius-topleft: 30px;-moz-border-radius-topright: 30px;border-top-left-radius: 30px;border-top-right-radius: 30px;color:white;text-align:center;">
Title Scrollbox</div>
<div style="border:3px solid #eee;background:none; width:210px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:102.95px; ">
<br /><center>
CONTENT FOR FIRST SCROLLBOX
</center>
</div><div style="border:3px solid #eee;background:#E5DDDA; width:220px; padding:5px; border-bottom:none;-webkit-border-top-left-radius: 30px;-webkit-border-top-right-radius: 30px;-moz-border-radius-topleft: 30px;-moz-border-radius-topright: 30px;border-top-left-radius: 30px;border-top-right-radius: 30px;color:white;text-align:center;">
Title Scrollbox</div>
<div style="border:3px solid #eee;background:#none; width:210px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:110px; ">
CONTENT FOR SECOND SCROLLBOX</div></div></div></div></div></center>


  •  Dashboard > Layout > Add a Gadget (atas content blog) > paste dalam HTML / Javascript
  •  Header tu agak-agak macam ni : FONSO
  •  Biasanya aku coding dulu kat Real-time HTML Editor
  •  Kalau rasa code yang aku share tu memeningkan, pergi tengok balik code asal.
  •  Tak semestinya code yang aku re-code atas tu accurate dengan saiz yang dibayangkan. Perlu rajin try and error. Coding itu indah dan misteri hahaha dusta.

Btw, kepada sesiapa yang tanya. Aku guna Simple Template fosho dan selama-lamanya. Lagu blog ini ialah Eric Nam - Heaven's Door. 

No comments:

Post a Comment

I don't approve harsh comments (: