Sandy Creativity

Hay sob kali ini saya akan share lagi Cara membuat Banner Footer Di blog. nih liat dulu SSnya:


udah taukan? langsung ke tutorialnya ajah sob kalau udah tau:
1. Buka blog sobat
2. Pilih Template > Edit template
3. Lalu tekan Ctrl+f cari kode ]]></b:skin>
4. Lalu masukkan kode dibawah ini tepat diatas kode ]]></b:skin> :

#baba{margin-top:20px;margin-left:0px;width:1120px;height:28px;background:#181818;border:5px solid#3F3F3F;border-radius:15px;
-webkit-transition:all 0.7s ease-in-out;-moz-transition:all 0.7s ease-in-out;overflow:hidden;}
#baba h2{color:#272727;font-family: 'Marmelad', sans-serif;background:#FF9900;font-weight: normal;font-size: 15xt;background:#ffee00;text-align:center;
}
#baba:hover{height:60px;}
#team{position:absolute;margin-left:280px;height:310px;width:210px;overflow:hidden;background:transparent;margin-top:-150px;}
#ngintip{background:#ffee00;
float: left;
margin-left:7px;
width: 55px;
height: 55px;
border-top: 3px solid #ffee00;
border-right: 3px solid #ffee00;
border-bottom: 3px solid #ffee00;
border-left: 3px solid #ffee00;
margin-top:5px;
padding: 3px;
border-radius:60px;
-moz-transition: all 750ms ease-in-out;
-webkit-transition: 750ms 1s ease-in-out;
-o-transition: all 750ms ease-in-out;
-ms-transition: all 750ms ease-in-out;
transition: all 750ms ease-in-out;overflow:hidden;}
#ngintip img{height:60px;width:60px;margin-left:-5px;margin-top:-5px;}
#popc{position:absolute;background:#ffee00;
margin-left:35px;
margin-top:80px;
height:55px;
border-radius:60px;
width:55px;
border-top: 3px solid #ffee00;
border-right: 3px solid #ffee00;
border-bottom: 3px solid #ffee00;
border-left: 3px solid #ffee00;
-moz-transition: all 750ms ease-in-out;
-webkit-transition: 750ms 1s ease-in-out;
-o-transition: all 750ms ease-in-out;
-ms-transition: all 750ms ease-in-out;
transition: all 750ms ease-in-out;overflow:hidden;}
#popc img{height:60px;width:60px;margin-left:-5px;margin-top:-5px;overflow:hidden;}
#menu2{position: relative;
width: 1100px;background:#ffee00;border-top:5px solid#ffee00;border-bottom:5px solid#ffee00;border-left:15px solid#ffee00;border-right:15px solid#ffee00;border-radius:20px 20px 0px 0px;
margin: auto;margin-top:30px;}
.rumah{display:block;background:#ffee00;padding-top:30px;padding-bottom:30px;padding-left:20px;padding-right:20px;margin-top:0px;margin-left:510px;font-color:#ffee00;font-family:'Marmelad', sans-serif;}
.rumah:hover{background:#ffee00;color:#ffee00;font-family:'Marmelad', sans-serif;font-size:15pt;margin-left:500px}
.widgetSystem a{text-decoration:none;border-bottom:1px solid #ffee00;display:block;font-size:13px;font-weight:700;font-family:Marmelad,'Marmelad', sans-serif;-webkit-transition:all .5s ease 0;-moz-transition:all .5s ease 0;-o-transition:all .5s ease 0;transition:all .5s ease 0;margin:5px;padding:5px}.widgetSystem a:hover{background:#ffee00;color:#fff; }.widgetSystem li{list-style:none;margin:5px;}
.systemkrabycyber{background:rgba(0,0,0,0.6);height:140px;overflow:auto;margin-top:10px;border:2px solid #ffee00;border-radius:3px}

5. Lalu cari kode <div id='footer-wrapper'>

7. Masukkan kode dibawah ini tepat diatas kode <div id='footer-wrapper'> :

<div id='baba'><h2>Baner Footer</h2>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='All in One' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
<a href='http://sandycreativity09.blogspot.com/2013/07/banner-v1.html' target='_blank' title='Tukar Banner'><img alt='Visit Now' src='http://www.softlab-portable.com/templates/Redline/images/88x31.png'/></a>
</div> 

 
Sekian Tutorial dari Sandy Creativity. Semoga bermanfaat.

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.