بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
POJOK display depan blog biasanya terisi dengan Back To Top. Untuk sebelah kiri Footer jarang diisi dengan item apapun. Namun sekarang, saya akan memberikan trik pojok yang memadukan animasi gambar menjadi mengecil. Sehingga nanti ketika mouse kita hover pada bidang gambar tersebut, maka gambar itu akan segera mengecil dan menghilang. Dan ketika mouse kita alihkan, maka gambar akan membesar kembali. Sebuah trik CSS3 yang mengagumkan bukan. Penerapannya pada template blog kalian semua ya nanti.
Pada artikel sebelumnya saya juga sudah membahas tentang bagaimana membuat ikon media sosial berada di pojok. Penempatannya sama, bidangnya sama, hanya trik dan caranya yang beda. Sehingga hasilnya juga akan beda. Yang trik ini adalah animasi gambar mengecil, sedangkan untuk ikon medsos hanya bentuk ikon berada di pojok bawah saja. Saya kembangkan sedikit demi sedikit dari trik yang sudah ada. Hingga akhirnya dapat terwujud sebuah trik unik ini. Kalian nanti bisa mempraktekkannya.
Baca Juga :
Okelah kalau begitu. Sekarang kita mulai saja ya tutorialnya. Gampang dan tidak sulit kok. Asal mempraktekkannya pelan-pelan dan dipahami. Maaf bukan saya menggurui kalian. Tapi kita disini share ilmu yang bermanfaat. Supaya nanti blog kalian bisa semakin unik dan enak dipandang mata. Soalnya jarang yang memasang trik ini. Meski mungkin ada sebagian yang menganggap jadul, tidak apalah yang penting masih bermanfaat dan berguna untuk keindahan blog kita. Yuk mulai saja.
Variasi Trik Pojok Footer Blog Obyek Gambar Mengecil
1. Masuk ke Dashboard Blogger
2. Langsung masuk ke template saja. Masuk ke Tema
3. Kemudian klik langsung Sesuaikan : Edit HTML
4. Dan tempelkan kode dibawah ini di atas kode ]]></b:skin> di dalam template
.devilzenlarge{
list-style-type:none;
margin:0;
padding:0;
}
.devilzenlarge li,
.devilzenlarge li.hell1{
display:inline;
width:110px;
}
.devilzenlarge li img,
.devilzenlarge li.hell1 img{
width:160px;
float:left;
border:0px outset #00bfff;
margin: 0px;
opacity: 1.0;
background: transparent;
padding: 0px;
z-index: 100;
cursor: pointer;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
box-shadow: 0px 0px 0px rgba(0,0,0, 1.0);
-moz-box-shadow: 0px 0px 0px rgba(0,0,0, 1.0);
-webkit-box-shadow: 0px 0px 0px rgba(0,0,0, 1.0);
}
.devilzenlarge li img:hover{
-moz-transform:scale(0);
-webkit-transform: scale(0);
opacity: 0;
background: transparent;
border-color: transparent;
}
.devilzenlarge li.hell1 img:hover{
-moz-transform: scale(0) rotate(1080deg);
-webkit-transform: scale(0) rotate(1080deg);
}
#trik_pojok {
position:fixed; _position:absolute; bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth);}5. Temukan masih di template ya, kode </body> dan tempelkan kode dibawah ini persis tepat diatasnya
<div id='trik_pojok'>
<ul class='devilzenlarge'>
<li class='hell1'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFzaDnVUP5x4a1WfxDAuR9DZq3tzVc-FxXX1LtT43ZxhhRUokQTqeYXDmU0ZchgTuBZmKjJD_qhOgrbZdaghprc8YHftvKX-YpzJzm6j3mTG-CoUMfri_smqIcOD9Teu27tlAAbNJI3Qs/s400/FB.png'/></li>
</ul>
</div>Oke sudah sampai di penghujung tutorial. Semoga berhasil ya utak-atik blognya. Sekian tutorial yang dapat saya sampaikan pada malam ini. Semoga berkenan. Salam Blogger.
