cara Membuat Kotak Banner 88x31 (Sidebar)

Langsung Aja Kita Menuju Ke TKP . . ! ! !

1. Login ke blogger 

2. Masuk ke template

3. Edit HTML

4. Cari kode ]]></b:skin>

5. Letakan kode dibawah ini diatas kode ]]></b:skin>

#sidebarMC{

box-shadow: 0 0 15px red;
background: #0E090D;
border: 4px solid #0000FF;
border-left: 4px solid #0000FF;
float: left;
margin-top: 120px;
margin-left: -100px;
width: 88px;
height: auto;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
z-index: 10px;
line-height: 10px;
box-shadow: 0 0 15px blackred;
background: #222;
background-image: -webkit-linear-gradient(top, #393939, #222);
background-image: -moz-linear-gradient(top, #393939, #222);
background-image: -o-linear-gradient(top, #393939, #222);
background-image: -ms-linear-gradient(top, #393939, #222);
background-image: linear-gradient(to bottom, #393939, #222);
positon:absolute; }
#sidebarMC img{opacity:0.5;-webkit-filter:saturate(0.0);-moz-filter:saturate(0.0);-ms-filter:saturate(0.0);-o-filter:saturate(0.0);filter:saturate(0.0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;padding:0}
#sidebarMC img:hover{opacity:1;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);-ms-filter:saturate(1.1);-o-filter:saturate(1.1);filter:saturate(1.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out
}

6. Cari <div id='sidebar-wrapper'>
Jika kode tersebut tidak ditemukan, berarti kodenya beda. Intinya cari kode Header
Lalu kalian Letakan Kode dibawah ini tepat di bawah <div id='sidebar-wrapper'>

<b:section id='sidebarMC' maxwidgets='5' showaddelement='yes'>
</b:section>

7. SELESAI - SIMPAN TEMPLATE

NB : TEXT KUNING ANDA GANTI DENGAN BERAPA ARAH KE ATAS DAN TEXT HIJAU ANDA GANTI BERAPA ARAH KE KIRI (HARUS DENGAN ANGKA) INTINYA ITU METER ATAU APALAHSumber: .http://maen-cit.blogspot.com/ 

Read →

Cara Membuat Komentar Jadi Admin

HELLO SOBAT BLOGGER, BAGAIMANA KABAR KALIAN, SEMOGA BAIK2 SAJA. KALI INI SAYA AKAN POSTING TIPS BLOGGER YAITU "CARA MEMBUAT KOMENTAR ADMIN BERBEDA DENGAN KOMENTAR PENGUNJUNG". OK, LANJUT KITA KE LANGKAH-LANGKAHNYA.

[1]. PERTAMA, SEPERTI BIASA, LOGIN DULU KE BLOG KALIAN MASING2.

[2]. Kemudian dari Dasbor, cari Template --> Edit HTML.

[3]. Kalau sudah, sekarang cari Code </body>. (Gunakan CTRL + F atau F3 untuk mempermudah pencarian).

[4]. Kalau sudah ketemu, sekarang CoPas Code di bawah ini tepat di ATAS Code </body>

[5]. Dan terakhir, tinggal di SIMPAN dan lihat hasilnya.

OK, sekian Tips Blogger kali ini, jika ada pertanyaan tentang Tips ini, silahkan Kalian tuliskan pertanyaan Kalian di Kotak Komentar di bawah, dan semoga Tips kali ini bermanfaat buat Kalian semua.
Sumber:http://maen-cit.blogspot.com/

Read →

Cara Membuat Kotak My Banner Di atas Footer Blog

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:80px; 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'>

7. Masukkan kode di bawah ini tepat di atas kode <div id='footer'>

<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='MaenCit 468x60' src='http://i1357.photobucket.com/albums/q754/Oriezt/468-gif_zps2e54c7d5.gif' 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://goo.gl/irbZr' onmouseover='window.location=this.href'><img height='60' src='http://goo.gl/gdITx' title='MaenCit | By Way Of Life' width='468'/></a></textarea>

</td></tr><tr style='vertical-align:middle;'><td>

</td><td>

<img alt='MaenCit 88x31' src='http://i1357.photobucket.com/albums/q754/Oriezt/88-gif_zpsf01d82d0.gif' style='width:88px;height:31px;'/><br/><textarea onclick='this.focus();this.select();' onmouseover='this.focus();this.select();' readonly='readonly'> <a href='http://goo.gl/irbZ' onmouseover='window.location=this.href'><img height='31' src='http://goo.gl/xzEYl' title='MaenCit | By Way Of Life' width='88'/></a></textarea>

</td></tr></tbody></table></div>

</div>

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

Sekian Tutorial Ini , , Semoga Bermanfaat!!!
Sumber:http://maen-cit.blogspot.com/

Read →

Cara Buat Box Di Bawah Header V.2

Assalamualaikuam Wr Wb

Oke.. All . Oke Kali Ini Post Lagi 

Oke Lah Udah Taukan Judulnya 

Judulnya Yaitu Cara Buat Box Di Bawah Header V.2

Nihh SSnya

Keren kan?? Langsung aja kita menuju 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>

/* Box Dibawah Header*/
#MODrangka1{ margin-top:20;margin-left: 0px ;margin-bottom:20px ;border:5px solid #0000FF;border-radius:10px 10px 10px 10px ;width:1090px;height:300px; background: #000; position:relative;}
#MODrangka1 img{opacity:0.5; -webkit-filter:saturate(0.0); -moz-filter:saturate(0.0); -ms-filter:saturate(0.0); -o-filter:saturate(0.0); filter:saturate(0.0); -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out}
#MODrangka1 img:hover{opacity:1; -webkit-filter:saturate(1.1); -moz-filter:saturate(1.1); -ms-filter:saturate(1.1); -o-filter:saturate(1.1); filter:saturate(1.1)}
#MIMAdz{background:#000; width:290px; height:270px; border:5px solid #0000FF;border-left:none;border-radius: 0px 30px 30px 0px;float:left; margin-left:-5px; margin-top:9px;}
#MAdz{margin-top:0px; padding:0px; text-align:center}
#MAdz img{-webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); border:1px solid #0000FF; border-radius:70px; margin:1px 1px; text-align:center; padding:0px; margin-left:0px; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out}
#MAdz img:hover{border-radius:10px; border:1px solid #0000FF; -webkit-filter:grayscale(0%); -moz-filter:grayscale(0%); -ms-filter:grayscale(0%); -o-filter:grayscale(0%); filter:grayscale(0%); -moz-transform:rotate(715deg); -webkit-transform:rotate(715deg); -o-transform:rotate(715deg)}
#footerx5{float: left;margin-top: -5px;margin-left: 20px;width: 40px;height:40px;display: inline;border-left:5px solid #0000FF;border-right:5px solid #0000FF;border-bottom:5px solid #0000FF;background:#000;position:relative;border-radius:0px 0px 10px 10px;}
#footerx6{float: left;margin-top: 260px;margin-left: -50px;width: 40px;height:40px;display: inline;width: 40px;height:40px;display: inline;border-left:5px solid #0000FF;border-right:5px solid #0000FF;border-top:5px solid #0000FF;background:#000;position:relative;border-radius:10px 10px 0px 0px;}
#footerx7{float: left;margin-top: 75px;margin-left: -50px;width: 40px;height:140px;display: inline;border:5px solid #0000FF;background:#000;position:relative;border-radius:10px;}
#SSH{background:#000; width:480px; height:290px; float:left; margin-left:22px; margin-top:-5px; border:5px solid #0000FF;border-radius: 0px 0px 15px 15px; border-top:none}
#SSH li{display:block; position:relative; background:url('http://i1239.photobucket.com/albums/ff513/Ramapoetra24/log.png') no-repeat 15px .5em; margin-left:-20px; padding:2px 10px 2px 29px; font-size:12px; font-family:'Century Gothic'}
#SSH li:hover{display:block; position:relative; background:url('http://i1239.photobucket.com/albums/ff513/Ramapoetra24/lag.png')no-repeat 15px .5em; margin-left:-20px; padding:2px 10px 2px 29px; color:#0000FF; font-family:'Century Gothic'}
#SSH .widget-content{overflow:auto; height:265px; padding-left:10px}
#search input{margin-top:-5px; margin-right:-160px; position:relative}
#search input[type=text]{background:#000 url()no-repeat center left; font-size:15px; color:#fff; font-family:'Century Gothic'; width:145px; padding-left:10px; float:right; border:5px solid#0000FF; border-top:none; height:20px; -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}
#search input[type=text]:focus{box-shadow:inset 0 0 10px rgba(0,0,0,0.5); border:5px solid #fff; border-top:none; width:183px}
#JTS{background:#000; margin-top:268px; margin-right:35px; padding:3px; border:5px solid #0000FF; border-bottom:none; border-radius:5px; width:117px; height:26px; float:right}
#JTS .widget-content{padding:0px; margin:0px}
#MAHJ125 img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
border: none;
margin: 0px 0px;
text-align: center;
padding: 0px;
margin-left: 0px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
#MAHJ125 img:hover {
border-radius:1px;
border:none;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
-moz-transform:rotate(715deg);
-webkit-transform:rotate(715deg);
-o-transform:rotate(715deg);
}
#JTS:hover{border:5px solid #ff0000;border-bottom:none;border-radius:5px;
background:#000;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
box-shadow: 0 0 15px 0 #fff;
-moz-box-shadow: 0 0 15px 0 #fff;
-webkit-box-shadow: 0 0 15px 0#fff;
}
#MODalexa{-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
border: 5px solid #0000FF;
float: left;
background: Transparent;
padding-left: 0px;
width: 120px;
height: 95px;
margin-left: 920px;
margin-top: 100px;
border-radius: 0px 0px 0px 0px;
position: absolute;}
#MODalexa:hover{-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
border: 5px solid #0000FF;border-radius: 10px 10px 10px 10px;box-shadow:0 0 30px #006acc;}

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='MODrangka1'>
<div id='MIMAdz'>
<div class='widget-content'>
<div id='MAdz'>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
<a href='http://goo.gl/mxGyCL' target='_blank' title='MaenCit | By Way Of Life'><img alt='MaenCit | By Way Of Life' src='http://goo.gl/yd6ogi'/></a>
  </div></div></div>
  <div id='footerx5'/>
  <div id='footerx6'/>
  <div id='footerx7'/>
<div id='MODalexa'>
<a href='http://www.alexa.com/siteinfo/http://maen-cit.blogspot.com/'><script src='http://xslt.alexa.com/site_stats/js/s/a?url=http://maen-cit.blogspot.com/' type='text/javascript'/></a>
</div>
<div id='JTS'>
<div class='widget-content'>
<div id='MAHJ125'>
<a href='http://www.blogger.com/follow-blog.g?blogID=8479613044615183675' target='_blank'><img alt='Join This Site' src='http://goo.gl/7aybbA' title='Join This Site'/></a>
  </div></div></div>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search and Enter...' size='40' type='text'/>
</form>

10 . Simpan

Oke Lah Segitu Aja
NB Dari Gue : Usahakan Pratinjau dahulu kalau mau langsung Simpan Usahakan Download Dulu Template Ente Sebelum Di Edit
Sekian Dari Mimin Thank's For You Visiting
Sumber:http://maen-cit.blogspot.com/

Read →

Cara Membuat Foto Bergerak Sendiri Ketika Kita Sorot Akan Berhenti

Setelah membuat blog portal arsyie portal puasa,kali ini arsyie akan memposting sebuah tutor blog
yaitu Cara Membuat Foto Bergerak Sendiri Ketika Kita Sorot Akan Berhenti Mari
 Kita Lihat Tutornya

Sebagai Contoh lihat
Demo 

Script
 

<center>
<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVh6FWWNnJRklB9QxU6ZD9jylp4MZz_R1cktD1hcswTBCG4v3bp4RX5Kyfq1tenvxzvFlN-kS26HMWJ66j6mWkI7NZMb_joo9wp-vEL4gAj3AdAABc2xdfOIrAxBf92o849ac3ePEOLChn/s1600/Naruto+Puasa.png" width="200"height="200"class="shakeimage"  onMouseout="init(this);rattleimage()" onMouseover="stoprattle(this);top.focus()" onClick="top.focus()"></b>

Read →

Cara Membuat Box Di bawah Header

Hallo Minna-san :3 , Kali ini saya akan mengshare " Cara membuat box dibawah header " , Saya share karena ada yang minta

Ini SS yang minta :3 :

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>

.dasar{
width:930px;
height:299px;
float: left;
border-radius: 5px 5px 5px 5px;
background: none repeat scroll 0% 0% rgb(128, 0, 0);
color: rgb(255, 255, 255);
border: 3px solid rgb(0, 0, 0);
padding: 5px;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
box-shadow: 0px 0px 10px rgb(0, 0, 0) inset;
}
#dasar2{width: 265px;
height: 258px;
float: left;
border: 3px solid black;
position: absolute;
margin-top: 37px;
margin-left: 29px;
padding:10px;padding-right:5px;
border-radius: 5px 5px 5px 5px;
background: #222;
}
#dasar2 img{transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;border:2px solid #000;opacity:.5;
}
#dasar2 img:hover {transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;border:2px solid #800; opacity:1.0}
#dasar3{width:550px; height:262px; background:#222; float:right;border:3px solid #000; position:absolute; margin-top:40px; margin-left: 372px;padding:5px;border-radius:5px;-moz-box-shadow:    inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow:         inset 0 0 10px #000000;}


#widgetbanneralexa{
float: left;
margin-left: 378px;
width: 120px;
height: 95px;
border: 3px solid #000000;
margin-top: -270px;
padding: 3px;}

#widgetbanneralexa img{opacity:0.5;-webkit-filter:saturate(0.0);-moz-filter:saturate(0.0);-ms-filter:saturate(0.0);-o-filter:saturate(0.0);filter:saturate(0.0);-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;padding:0}

#widgetbanneralexa img:hover{opacity:1;-webkit-filter:saturate(1.1);-moz-filter:saturate(1.1);-ms-filter:saturate(1.1);-o-filter:saturate(1.1);filter:saturate(1.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}

.Kotak2 {
background: #222;
border:4px solid #000000;
border-top:4px solid #212121;
height:100px;
width:25px;
float:left;
margin-top: -315px;
margin-left: 330px;
}

.Kotak3 {
background: #222;
border:4px solid #000000;
border-bottom:4px solid #212121;
height:100px;
width:25px;
float:left;
margin-top: -106px;
margin-left: 330px;
}

#headlines{
float: left;
margin-left: 642px;
width: 285px;
height: 180px;
border: 3px solid black;
background: #222;
margin-top: -294px;
padding: 1px;}

#LankChat   {
background: #800;
border: 4px solid #000;
border-bottom: 4px solid #212121;
width: 140px;
height: 70px;
-webkit-transition:All .9128s ease;-moz-transition:All .9128s ease;-o-transition:All .9128s ease
float: left;
margin-top: 257px;
position: absolute;
margin-left: 770px;
color:#c2c2c2;line-height:1.5em;text-align:center;
position: absolute;
}

#LankChat:hover {
margin-left: 680px;border-radius: 13px 13px 0 0;border-left:4px solid #000;border-right:4px solid #000;border-top:4px solid #000
-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 class='dasar'/>
<b:section id='dasar2' maxwidgets='5' showaddelement='yes'>
</b:section>
<b:section id='widgetbanneralexa' maxwidgets='5' showaddelement='yes'>
</b:section>
<div class='Kotak2'>
</div>
<div class='Kotak3'>
</div>
<b:section id='headlines' maxwidgets='5' showaddelement='yes'>
</b:section>
     <div id='LankChat'>
       <a href='http://lankchat.blogspot.com/' target='_blank' title='LankChat Box'><img alt='LankChat Box ' src='http://i1061.photobucket.com/albums/t479/Gilang28k/sayonara2_zpsc0422daa.png'/></a>
     </div>

10 . Simpan

Selesai dehh :v , tinggal edit2 sendiri Read →

Cara Membuat Kotak Banner 88x31 dan 468x60 Di Header

Hello Sob...

Aku Mau posting nih...
Yg berlabelkan "Trick Blogger"
Untuk Postingan kali ini, Saya beri Judul "Cara Membuat Kotak Banner di Header"
Disini Saya Akan Menunjukan kalian membuat kotak banner 468x60 (2 Slot) dan Kotak banner 88x31 (12)
Bisa Lihat Screenshotnya Berikut..



dan Simak Tips Berikut...

A. Kotak Banner 468x60 di Header
1, Masuk Ke Blogger

2. Pilih Menu Template

3. Pilih Edit HTML

4. Tekan f3, Lalu Cari Kode ]]></b:skin>

5. Letakan Kode dibawah ini tepat diatas kode ]]></b:skin>

.WAKimage {float:left;margin-left:61px;margin-top:31px;height:60px;border:2px solid #fff;position:relative}
.banner-title {padding:2px;margin-left:0px;width:465px;height:56px;position:absolute;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAD0lEQVQImWNgwA6MB1QQAFhxATM9UlO6AAAAAElFTkSuQmCC) #111;color:white;line-height:46px;text-align:center;font-size:20px;opacity:0.9;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;-moz-transition:all 0.2s linear;width:465px;}
.WAKimageD {width:468px;height:60px;-webkit-transition:all 1s linear;}
.WAKimage:hover .banner-title  {opacity:0;display:block;font-size:0px;height:0px}

6. dan Cari Lagi kode yg  Bersangkutan dengan Header-wrapper

5. Letakan Kode dibawah ini tepat dibawah kode Header-wrapper kamu... :D

      <div class='WAKimage'>
    <span class='banner-title'>Vhee-Zone</span>
    <a alt='alt' class='WAKimageD' href='http://vhee-zone.blogspot.com/' title='Banner'>
      <img alt='img' class='WAKimageD' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguE0vPFgiLSr9uRKBfRsEqPKVdm22tlSvh9tLmgxSR602tt8RMlJrupgoxOEey1BNuS8SxZdSs8yX_HyO3uRxvFOqRfFrDFVJ8v_mdg2Y8FD6T6JdY3uY2I_uqVdILg21OrFlBztj7S_Q/s1600/New+exc468.png' title='Banner'/>
    </a>
  </div>
     <div class='WAKimage'>
       <span class='banner-title'>Kxmadagascar</span>
       <a href='http://kxmadagascar.blogspot.com' target='_blank'>
<img alt='Banner' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-s1GBu2WLctBsO5vjSeAR6VdrQ0uYxtdN2zpq4gbdPB2U59Moa5WTs5DXCSAL4X56PCMmsMVhPXJy7TUk2O3Fv4U8CDt0HluW8Jlvj2WYepp-L3INFkvOyi5ZNndZM76uosO-Gddju6c/s1600/bannernew468.png' title='Banner'/></a>
  </div>

6. Simpan Template

B. Kotak Banner 88x31 di header

1. Langsung Masuk ke Menu template (kan Udah login)

2. Klik Edit HTML

3. tekan f3 lalu cari kode ]]></b:skin>

4. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>

#MZT-banner2{border: 5px solid #0C0C0C;
width: 175px;
height: 92px;
position: absolute;
margin-left: 895px;
margin-top: 10px;
background: #232222;
padding: 1px;
overflow: hidden;
border-radius: 5px;
line-height: 1px;
transform: skewX(-15deg);
-webkit-transform: skewX(15deg);
-ms-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;}
#MZT-banner2:hover{box-shadow:0 0 25px blue}
#MZT-banner2 img{width:88px;height:31px;line-height:1px;margin-left:-2px}
#MZT-banner3{border: 5px solid #0C0C0C;
width: 175px;
height: 92px;
position: absolute;
margin-left: 30px;
margin-top: 10px;
background: #232222;
padding: 1px;
overflow: hidden;
border-radius: 5px;
line-height: 1px;
transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;}
#MZT-banner3:hover{box-shadow:0 0 25px blue}
#MZT-banner3 img{width:88px;height:31px;line-height:1px;margin-left:-2px}

5. Lalu cari kode yg Bersangkutan Dengan Header-Wrapper

6. Dan Letakan Script dibawah tepat di bawah kode header-wrapper kamu... :D

<div id='MZT-banner2'>
Isi Dengan code banner
</div>

<div id='MZT-banner3'>
Isi Dengan code banner

</div>

7. Tinggal Save Deh...

Sekian Tentang Tips "Cara membuat Kotak Banner di Header" Semoga bermanfaat...
Salam Comment..!!!

Read →

Recent Comment Dengan Animasi

Hay para bozzer admin mau minta maaf ni kalo selama ini ada salah dan admin sekalian mau ngepost sesuatu kan udah lama admin gk ngepost,oke tanpa panjang lebar lagi langsung aja,jadi kali ini admin akan share trick blog baru ajaa dehh,ok masih berhubungan dengan widget recent comment,kali inii dengan effeck animasi,yang pasti nya berbeda dari sebelum nya,inii dia demo nya 

DEMO

gimana keren banget kann?? ok dehh langsung ajaa

1.login ke blog kamu
2.lalu pilih edit html
3.cari kode ]]><b:skin
4.letakkan kode di bawah ini di atas kode tadi,tinggal pilih yang dark atau yang white

CSS WHITE:

.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwCvmUGS_dMnUPBnDAdp1O_VCMyuswe2P2eYtS-n2lNNXs0k5blnIA4zYRirStUQyhIuj-fTssFbNjcwXkn65pRpg5mzDw6SgyM-qiZONTvaySbfRGkrQMizyOc9FYpn9N5uai-4sntMA/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white} ul#kmtranimasi p{margin:15px 0 0}

CSS DARK:

 .loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwCvmUGS_dMnUPBnDAdp1O_VCMyuswe2P2eYtS-n2lNNXs0k5blnIA4zYRirStUQyhIuj-fTssFbNjcwXkn65pRpg5mzDw6SgyM-qiZONTvaySbfRGkrQMizyOc9FYpn9N5uai-4sntMA/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black} ul#kmtranimasi p{margin:15px 0 0}

5.setelah kamu pilih salah satu,save template kamu
6.masuk ke tata letak
7.lalu pilih widget html/javascrip
8.masukkan kode di bawah inii di dalam widget tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script> <div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { rccommnetsx({ id_containrc:"#rcentcomnets", animatedRecentcomments:true, numComments:10, url_blog:"URL_blogmu", adminBlog:"nama_akun blogger/google+" }); }); //]]> </script>

BACA!!
jika di dalam template kamu udah ada jquery,maka kode ini
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
tidak  usah di copy

yang kode warna  merah,silahkan di edit sendiri,url blog kamu,jumblah komentar yang di tampilkan,url google+ kamu

9.save template kamu

gimana?? simple banget kann??
ok dehh segini dulu

see you Read →