Hay sob, ketemu lagi nih 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: 90px ;margin-bottom:50px ;border:5px solid #000;width:260px;height:250px; background: transparant; 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:transparant;border-bottom:4px solid #000;border-top:4px solid #000;opacity: 1;margin-left: 373px;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:transparant;border-bottom:4px solid #000;border-top:4px solid #000;opacity: 1;margin-left: 373px;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: 430px ;margin-bottom:50px ;border:5px solid #000;width:580px;height:250px; background: transparant; position:relative;padding:10px;padding-right:5px;
box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.24);border-radius:20px;}
#Headline{background:transparant;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:transparant;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:transparant;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:transparant;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:transparant;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);}#bannerkx{border:5px solid #000;opacity: 1;margin-left: -130px;z-index:999;margin-top:200px;background-size:100px;position: absolute;border-radius:0px 0px 0px 0px;width: 88px;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;text-align: center;font-size: 0px;background:#fff;}#bannerkx img{opacity:.3;width:88px;height:31px;margin-bottom:0px-webkit-transition:All;-moz-transition:All .9128s ease;-o-transition:All .9128s ease;}#bannerkx img:hover{opacity:1.0;-webkit-transition:All .9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease;}
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://muhafnursandy.blogspot.com'><img alt='Muh afnur sandy , http://muhafnursandy.blogspot.com' height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mmnp1rVqSXoPJonkd2KRbiUttz6_9sTLGLJfLO87Gn1lfPihgxNsUeIGWesxm9NJ8f6vxzdfTIcXBHYGGLHav9cHVwpeFiCB2MUHdHxQxXIpyIK2OAxgBg5IE6RGaWdVSsgJk5C02uw/s125-no/banner+125x125.png' title='Muh afnur sandy ' width='125'/></a><a href='http://muhafnursandy.blogspot.com'><img alt='Muh afnur sandy , http://muhafnursandy.blogspot.com' height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mmnp1rVqSXoPJonkd2KRbiUttz6_9sTLGLJfLO87Gn1lfPihgxNsUeIGWesxm9NJ8f6vxzdfTIcXBHYGGLHav9cHVwpeFiCB2MUHdHxQxXIpyIK2OAxgBg5IE6RGaWdVSsgJk5C02uw/s125-no/banner+125x125.png' title='Muh afnur sandy ' width='125'/></a><a href='http://muhafnursandy.blogspot.com'><img alt='Muh afnur sandy , http://muhafnursandy.blogspot.com' height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mmnp1rVqSXoPJonkd2KRbiUttz6_9sTLGLJfLO87Gn1lfPihgxNsUeIGWesxm9NJ8f6vxzdfTIcXBHYGGLHav9cHVwpeFiCB2MUHdHxQxXIpyIK2OAxgBg5IE6RGaWdVSsgJk5C02uw/s125-no/banner+125x125.png' title='Muh afnur sandy ' width='125'/></a><a href='http://muhafnursandy.blogspot.com'><img alt='Muh afnur sandy , http://muhafnursandy.blogspot.com' height='125' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1mmnp1rVqSXoPJonkd2KRbiUttz6_9sTLGLJfLO87Gn1lfPihgxNsUeIGWesxm9NJ8f6vxzdfTIcXBHYGGLHav9cHVwpeFiCB2MUHdHxQxXIpyIK2OAxgBg5IE6RGaWdVSsgJk5C02uw/s125-no/banner+125x125.png' title='Muh afnur sandy ' width='125'/></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/muhafnursandy.blogspot.com'><script src='http://xslt.alexa.com/site_stats/js/s/a?url=muhafnursandy.blogspot.com' type='text/javascript'/></a>
</div>
<div id='kxchat'>
<a href='http://muhafnursandy.blogspot.com/' target='_blank' title='Chat Box Blogger Indonesia'><img alt='Chat Box Blogger Indonesia' src='http://sadpanda.us/images/1710668-SB25300.png'/></a>
</div>
<div id='kxjoin'>
<a href='http://www.Blogger.com/follow-blog.g?blogID=1395418680141516093' 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='http://sadpanda.us/images/1710658-R4CPERE.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://muhafnursandy.blogspot.com/' target='_blank' title='Blogger Indonesia Is Valid HTML5'><img alt='Blogger Indonesia Is Valid HTML5 ' src='http://cdn1.iconfinder.com/data/icons/HTML5/64/HTML_Badge.png'/></a>
</div>
</div>
10 . Simpan
NB :Box ini Tranparant seperti Di Blog saya , silahkan ubah menjadi berwarna sendiri. capek saya ketiknya nih.
Sumber:
Kxmadagascar
Judul : Cara Membuat Box Di Blog
Deskripsi : Hay sob, ketemu lagi nih kali ini saya akan share Cara Membuat Box Di Blog. oke Langsung Aja Ke TKP: 1 . Log In Blogge r 2 . Pilih ...