POSTED BY : Ibnu khulduin
Sorry Sobat baru bisa posting
nih.., soalnya gopal/ane ke rumah kakeknya dan gk bawa laptop. oke kali
ini Deol-Cyber4rt mau bagi2 ilmu tentang Cara Membuat Box di Bawah Header
Nih SreenShotnya :
Langsung aja ke tutornya
1
. Log In Blogger
2 . Pilih Blog Kamu
3 . Pergi Ke Template
4 .
Klik Edit HTML
5 . Cari Kode ]]></b:skin>
6 . Masukan
Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>
#kxkotakbanner125{
margin-top:20;margin-left: 0px ;margin-bottom:50px ;border:5px solid
#000;width:260px;height:250px; background: #2a2523;
position:relative;padding:10px;padding-right:5px;font-size: 0px;
box-shadow:
7px 7px 0px 0px rgba(0, 0, 0, 0.24);border-radius:20px;}
#kxbr125{background:#2a2523;border-bottom:4px
solid #000;border-top:4px solid #000;opacity: 1;margin-left:
280px;z-index:999;margin-top:-270px;background-size:100px;position:
absolute;width: 60px;-moz-transition: all 0.2s
ease-in-out;-webkit-transition: all 0.2s ease-in-out;height:
40px;text-align: center;font-size: 20px;
}
#kxbr12{background:#2a2523;border-bottom:4px
solid #000;border-top:4px solid #000;opacity: 1;margin-left:
280px;z-index:999;margin-top:-150px;background-size:100px;position:
absolute;width: 60px;-moz-transition: all 0.2s
ease-in-out;-webkit-transition: all 0.2s ease-in-out;height:
40px;text-align: center;font-size: 20px;
}
#kxkotakbesar{
margin-top:-330px;margin-left: 335px ;margin-bottom:50px ;border:5px
solid #000;width:580px;height:250px; background: #2a2523;
position:relative;padding:10px;padding-right:5px;
box-shadow: 7px 7px
0px 0px rgba(0, 0, 0, 0.24);border-radius:20px;}
#Headline{background:#2a2523;border-left:5px
solid #000;border-right:5px solid #000;border-top:5px solid
#000;border-radius:11px 11px 0
0;float:right;position:relative;text-align:center;font-size:15px;margin-top:121px;margin-bottom:50px;margin-right:70px;width:430px;height:130px;display:inline;padding:2px;-webkit-transition:All
.9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s
ease}
#kxalexa{-moz-transition: all 0.7s
ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid
#000;float:left;background:#fff;width:120px;height:95px;margin-left:
30px;margin-top:0px;border-top:5px solid #000; position: absolute;}
#kxchat{-moz-transition:
all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out
;border:5px solid
#000;float:left;background:#2a2523;width:140px;height:60px;margin-left:
200px;margin-top:40px;border-top:5px solid #000; position:
absolute;-webkit-transition:All .9128s ease;-moz-transition:All .9128s
ease;-o-transition:All .9128s ease}
#kxjoin{-moz-transition: all 0.7s
ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid
#000;float:left;background:#2a2523;width:140px;height:60px;margin-left:
390px;margin-top:40px;border-top:5px solid #000; position:
absolute;-webkit-transition:All .9128s ease;-moz-transition:All .9128s
ease;-o-transition:All .9128s ease}
#kxchat:hover{margin-top:15px;-webkit-transition:All
.9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s
ease}
#kxjoin:hover{margin-top:15px;-webkit-transition:All .9128s
ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease}
#kxvalid{-moz-transition:
all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out
;border:5px solid #000;float:left;background:#2a2523;border-right:none;
position: absolute;-webkit-transition:All .9128s
ease;-moz-transition:All .9128s ease;-o-transition:All .9128s
ease;margin-top:140px;margin-left:2px;border-radius:10px 0px 0px 10px}
.kxvalid
img{padding:0px;margin-left:0px;margin-top:15px;-webkit-transition:All
.9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s
ease -o-transform: scale(1.0) rotate(-1440deg); -moz-transform:
scale(1.0) rotate(-1440deg); -webkit-transform: scale(1.0)
rotate(-1440deg);}
.kxvalid img:hover {-webkit-transition:All .9128s
ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease
-o-transform: scale(1.0) rotate(1440deg); -moz-transform: scale(1.0)
rotate(1440deg); -webkit-transform: scale(1.0) rotate(1440deg);}
7 . Oke Lanjutkan Dengan HTML
nya
8 . Sekarang Cari Kode <div
id='content-wrapper'> Atau <div id='content'> Pokoknya yang
berhubungan Dengan Content
9 . Pasang Kode Di Bawah Ini Tepat Di Atas
( <div id='content-wrapper'> , <div id='content'> ,
Sejenisnya )
<div
id='kxkotakbanner125'>
<a
href='http://kxmadagascar.blogspot.com/2013/05/link-exchange-v2.html'
target='_blank' title=' KxMadagascar | More Than Creative And Sharing
Everywhare'><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_62gMQfdWs0WS5J2_msQsnxb_lrsA__bpmHQCFbja1zj9sLsbSwP9XXGOubZoGtCnndYdhdP57qj7VxgP0qV6wUC4SNmfofKKYjDLaV0fXdkSeg4ViNjtduC2IRK3tLWUe0Ss30dn5vA/s1600/ads125.png'/></a><a
href='http://kxmadagascar.blogspot.com/2013/05/link-exchange-v2.html'
target='_blank' title=' KxMadagascar | More Than Creative And Sharing
Everywhare'><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_62gMQfdWs0WS5J2_msQsnxb_lrsA__bpmHQCFbja1zj9sLsbSwP9XXGOubZoGtCnndYdhdP57qj7VxgP0qV6wUC4SNmfofKKYjDLaV0fXdkSeg4ViNjtduC2IRK3tLWUe0Ss30dn5vA/s1600/ads125.png'/></a><a
href='http://kxmadagascar.blogspot.com/2013/05/link-exchange-v2.html'
target='_blank' title=' KxMadagascar | More Than Creative And Sharing
Everywhare'><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_62gMQfdWs0WS5J2_msQsnxb_lrsA__bpmHQCFbja1zj9sLsbSwP9XXGOubZoGtCnndYdhdP57qj7VxgP0qV6wUC4SNmfofKKYjDLaV0fXdkSeg4ViNjtduC2IRK3tLWUe0Ss30dn5vA/s1600/ads125.png'/></a>
<a
href='http://kxmadagascar.blogspot.com/2013/05/link-exchange-v2.html'
target='_blank' title=' KxMadagascar | More Than Creative And Sharing
Everywhare'><img border='0'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_62gMQfdWs0WS5J2_msQsnxb_lrsA__bpmHQCFbja1zj9sLsbSwP9XXGOubZoGtCnndYdhdP57qj7VxgP0qV6wUC4SNmfofKKYjDLaV0fXdkSeg4ViNjtduC2IRK3tLWUe0Ss30dn5vA/s1600/ads125.png'/></a>
</div>
<div
id='kxbr125'/>
<div id='kxbr12'/>
<div
id='kxkotakbesar'>
<div id='Headline'>
<div
style='overflow: auto; width: 100%; height: 120px;'><script
src='http://dickeymaru.googlecode.com/files/dmrposts.js'
type='text/javascript'> </script><script
type='text/javascript'>var numposts = 7;var showpostdate = false;var
showpostsummary = false;var numchars = 100;var standardstyling =
true;</script><script
src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'
type='text/javascript'/></div>
</div>
<div
id='kxalexa'>
<a
href='http://www.alexa.com/siteinfo/kxmadagascar.blogspot.com'><script
src='http://xslt.alexa.com/site_stats/js/s/a?url=kxmadagascar.blogspot.com'
type='text/javascript'/></a>
</div>
<div
id='kxchat'>
<a href='http://kxmadagascar-chat.blogspot.com/'
target='_blank' title='KxMadagascar Chat Box'><img
alt='KxMadagascar Chat Box '
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPW4OahAK0srkvWU9z6pP2fv308uFMruaQqi4yQ1I4z4Rz6n8w1DTmoK6OthGaCKEGolBepdQNg3x_0r8StaGKhHwcXm3zkRnuiVOtodCf4oR1_TjZg4W0mSwRDSr3blBqoC4jgVfeo0/s1600/ZChat.png'/></a>
</div>
<div
id='kxjoin'>
<a
href='http://www.Blogger.com/follow-blog.g?blogID=136471497912360586'
onclick='window.open(this.href, 'dmfollow',
'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return
false;'
style='text-align:center;font-weight:bold;text-decoration:none;'
title='Join This Site'><img alt='Join this site'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlQiebT7WFGT4zGzteuIkGgUmawWV6BJEaaLSfHEuoCm95rosiTZM0WMvZ7E2UE5ZLih34Y2MoL73gdIfsRrjBsq3Qnj0G9K9G2XdEchmJyja0E2m9MZKYtrpk7RHd-1yOAmJc5Z5anA/s1600/ZJoin.png'
style='vertical-align:center;border:0px;cursor:pointer;'/></a>
</div>
<div
id='kxvalid'>
<a class='kxvalid'
href='http://validator.w3.org/check?uri=http://kxmadagascar.blogspot.com/'
target='_blank' title='KxMadagascar Is Valid HTML5'><img
alt='KxMadagascar Is Valid HTML5 '
src='http://cdn1.iconfinder.com/data/icons/HTML5/64/HTML_Badge.png'/></a>
</div>
</div>
10 . Simpan
Pertinjau
lebih dulu
