Sandy-Cyber

Hay sob, kali ini saya akan share Cara Membuat Box Di Blog. oke Langsung Aja Ke TKP:

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 #084B8A;width:260px;height:250px; background: #000000; 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:#000000;border-bottom:4px solid #084B8A;border-top:4px solid #084B8A;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:#000000;border-bottom:4px solid #000;border-top:4px solid #084B8A;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 #084B8A;width:580px;height:250px; background: #000000; position:relative;padding:10px;padding-right:5px;
box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.24);border-radius:20px;}
#Headline{background:#000000;border-left:5px solid #084B8A;border-right:5px solid #084B8A;border-top:5px solid #084B8A;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 #084B8A;float:left;background:#fff;width:120px;height:95px;margin-left: 30px;margin-top:0px;border-top:5px solid #084B8A; position: absolute;}
#kxchat{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #084B8A;float:left;background:#2a2523;width:140px;height:60px;margin-left: 200px;margin-top:40px;border-top:5px solid #084B8A; 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 #084B8A;float:left;background:#2a2523;width:140px;height:60px;margin-left: 390px;margin-top:40px;border-top:5px solid #084B8A; 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 #084B8A;float:left;background:#000000;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://sandymufc09.blogspot.com/2013/05/pemasangan-iklan.html' target='_blank' title='Pasang Iklan'><img border='0' src='http://sadpanda.us/images/1688749-148E4IO.png'/></a><a href='http://sandymufc09.blogspot.com/2013/05/pemasangan-iklan.html' target='_blank' title='Pasang Iklan'><img border='0' src='http://sadpanda.us/images/1688749-148E4IO.png'/></a><a href='http://sandymufc09.blogspot.com/2013/05/pemasangan-iklan.html' target='_blank' title='Pasang Iklan'><img border='0' src='http://sadpanda.us/images/1688749-148E4IO.png'/></a>
<a href='http://sandymufc09.blogspot.com/2013/05/pemasangan-iklan.html' target='_blank' title='Pasang Iklan'><img border='0' src='http://sadpanda.us/images/1688749-148E4IO.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&amp;alt=json-in-script&amp;callback=showrecentposts' type='text/javascript'/></div>
</div>
     <div id='kxalexa'>
       <a href='http://www.alexa.com/siteinfo/sandymufc09.blogspot.com'><script src='http://xslt.alexa.com/site_stats/js/s/a?url=sandymufc09.blogspot.com' type='text/javascript'/></a>
     </div>
     <div id='kxchat'>
       <a href='http://sandymufc09.blogspot.com/2013/07/chatbox-sandy-cyber.html' target='_blank' title='Chat Box Sandy-Cyber'><img alt='Chat Box Sandy-Cyber ' src='http://sadpanda.us/images/1701597-3DU5NNC.png'/></a>
     </div>
     <div id='kxjoin'>
       <a href='http://www.Blogger.com/follow-blog.g?blogID=2838179636085299530' onclick='window.open(this.href, &apos;dmfollow&apos;, &apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);return false;' style='text-align:center;font-weight:bold;text-decoration:none;' title='Join This Site'><img alt='Join this site' src='http://sadpanda.us/images/1701595-D084HMJ.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://sandycyber09.blogspot.com/' target='_blank' title='Sandy-Cyber 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

Oke sekian postingan hari ini. semoga bermanfaat.

Sumber : Kxmadagascar