Sandy Creativity

Hay sob kali ini saya akan share bagaimana cara buat kotak My Banner diatas footer dengan efek apa ya namanya? langsung ajah liat Scrennshotnya biar nggak bingung..

nah udah paham kan yang saya maksud... klau udah paham let's go to tutorial:

1. Buka blog sobat
2. Pilih Template
3. Pilih Edit template
4. Lalu Ctrl+f cari kode ]]></b:skin>
5. Setelah itu masukkan kode dibawah ini tepat di atas kode ]]></b:skin>

#MIMend{margin:10px 0px 0px; padding:15px 0px 0px; display:block; clear:both}
#MIMend .MIMl{width:500px; border:5px solid #222; background:#222; padding:10px; border-radius:20px 0 0 0; height:310px; margin:0px 20px 0px; margin-left:-30px; margin-bottom:-295px; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; transition:all 1s ease-in-out}
#MIMend .MIMl:hover{margin-bottom:0px}
#MIMend .MIMl div.MIMlc{text-align:center}
#MIMend textarea{width:176px; height:50px; color:#FFF; padding:9px; border:4px dashed #222; background:#161719; overflow:hidden; margin:3px}
#MIMend .MIMr{width:330px; border:5px solid rgb(10,11,13); background:rgb(29,33,36); float:right; padding:10px; text-align:justify; height:310px}
#MIMend .MIMr div.profile-img{background:url(MIMsprite1.png) no-repeat bottom right scroll transparent; width:100px; height:125px; float:left; margin-right:10px}
#MIMend .MIMwt{margin-top:-5px}
.MIMwt{font-family:'Century Gothic'; font-size:12pt; color:#fff; padding:3px 3px 5px 20px; margin:20px -10px 5px -10px; background:-webkit-gradient(linear,left top,left bottom,from(#222),to(#161719)); background:-moz-linear-gradient(-90deg,#222,#161719) repeat scroll 0 0 rgba(0,0,0,0); background:-o-gradient(linear,left top,left bottom,from(#222),to(#161719)); background:gradient(linear,left top,left bottom,from(#222),to(#161719)); text-shadow:1px 1px 1px #000}
.MIMwt:before{content:""; position:absolute; width:0px; height:0px; border-left:16px solid rgb(10,11,13); border-top:16px solid transparent; border-bottom:16px solid transparent; margin:0px 0px 0px -22px}

6. Setelah itu cari kode <div id='footer-wrapper'>
7. Masukkan kode di bawah ini tepat di atas kode <div id='footer-wrapper'>

<div id='MIMend'>
<div class='MIMl'>
<div class='MIMwt'>My Banner</div>
<div class='MIMlc'>
<table style='width:100%;'><tbody>
<tr><td colspan='2'>
<img alt='Sandy Creativity 468x60' src='http://i.imgur.com/ioSimjm.png' style='width:468px;height:60px;'/><br/><textarea onclick='this.focus();this.select();' onmouseover='this.focus();this.select();' readonly='readonly' style='width:468px;'>
<a href='http://sandycreativity09.blogspot.com/' target='_blank'><img alt='Sandy Creativity' src='http://i.imgur.com/ioSimjm.png' title='Sandy Creativity'/></a>
</textarea>
</td></tr><tr style='vertical-align:middle;'><td>
</td><td>
<img alt='Sandy Creativity 88x31' src='http://i.imgur.com/5Hjsrm9.png' style='width:88px;height:31px;'/><br/><textarea onclick='this.focus();this.select();' onmouseover='this.focus();this.select();' readonly='readonly'>
<a href='http://sandycreativity09.blogspot.com/' target='_blank'><img alt='Sandy Creativity' src='http://i.imgur.com/5Hjsrm9.png' title='Sandy Creativity'/></a></textarea>
</td></tr></tbody></table></div>
</div></div>

Nb: Tulisan yang berwarna hijau silahkan sobat ubah sendiri itu url banner sobat dan nama banner sobat.

Sekian Tutorial dari Sandy Creativity. Semoga bermanfaat.