Hy Sobat, Apa Kabar? Pasti baik baik saja kan, kalo yang lagi sakit ku doakan semoga cepet sembuh deh :*
Sekarang kita akan membahas "Cara Membuat Kotak My Banner Diatas Footer Blog"
Kotak My Banner Tuh Seperti Apa? Footer Tuh Dimana?
Nih tak jelasin Kotak "My Banner" itu bisa digunakan untuk meletakkan banner kalian disitu agar pengunjung cepat mengetahui banner kalian dan langsung mengletakkannya diblognya untuk lebih lengkapnya silahkan cek gambar dibawah.
Sedangkan "Footer" ini adalah bagian paling bawah diblog yang didalamnya ada sebuah widget tempat kalian menambahkan gadget-gadget yang kalian inginkan "Footer" tidak semua template memiliki "Footer" mimin juga gak tau kenapa gak ada "Footer" kalo penasaran tanyain aja sana ma bloggernya :v
Sekarang mimin dah mulai ngepost nih gara-gara dirumah gak ada kerja'an yawdah mending ngepost aja kok jadi curhat ya O.o
Yawdah deh tanpa banyak cin cong langsung aja nih tutorialnya dari pada nulis mulu palingan gak dibaca
Nah Itu Gambarnya
Langkah-langkah
1. Buka blogger sobat
2. Pilih Template > Edit template
3. Lalu cari kode ]]></b:skin>,Untuk mempercepat / mempermudah mencari kode tersebut gunakan CTRL+F12
4. Lalu measukan kode dibawah ini tepat diatas kode ]]></b:skin>
#MIMend{margin:10px 0px 0px; padding:15px 0px 0px; display:block; clear:both}
#MIMend .MIMl{
width: 500px;
border: 4px solid #181818;
background: #121111;
padding: 10px;
border-radius: 20px 0 0 0;
height: 310px;
margin: 0px 20px 0px;
margin-left: -101px;
box-shadow: 0 0px 10px rgba(0, 0, 0, 1);
margin-bottom: -295px;
margin-top: -12px;
-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: #121111;
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}
5. Lalu cari kode <div id='footer-wrapper'>
6. Kalo sudah ketemu silahkan sobat masukkan kode dibawah ini diatas 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='Sushiyuro Technology' src='http://i.imgur.com/HAbRGlJ.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://sushiyuro-technology.blogspot.com/' target='_blank'><img alt='Susihyuro Technology' src='http://i.imgur.com/HAbRGlJ.png' title='Sushiyuro Technology'/></a>
</textarea>
</td></tr><tr style='vertical-align:middle;'><td>
</td><td>
<img alt='Sushiyuro Technology' src='http://i.imgur.com/gI3m6hl.png' style='width:88px;height:31px;'/><br/><textarea onclick='this.focus();this.select();' onmouseover='this.focus();this.select();' readonly='readonly'>
<a href='http://sushiyuro-techonology.blogspot.com/' target='_blank'><img alt='Coming Soon' src='http://i.imgur.com/gI3m6hl.png' title='Coming Soon'/></a></textarea>
</td></tr></tbody></table></div>
</div></div>
6. Yang terakhir petinjau templatenya dulu kalo sudah berhasil silahkan sobat simpan templatenya
Bagaimana keren bukan? kalo keren allhamdullillah, sekian tutorial "Cara Membuat Kotak My Banner Diatas Footer Blog"
Semoga Bermanfaat.
Sumber : Jujur saja tutorial ini dapet dari blog sebelah tapi mimin bener bener lupa linknya dan script diatas sedikit mimin ubah, terima kasih
Backlinks
URL Code |
Forum Code |
HTML Code |
Related Posts :
- Back to Home »
- Blogger »
- Cara Membuat Kotak My Banner Diatas Footer Blog
