Menambahkan Kotak Admin Dibawah Postingan Dengan Animasi Baru

Pada Postingan Ini saya akan membagikan sebuah tips menarik yaitu membuat kotak admin dibawah postingan dengan animasi terbaru caranya gampang sekali jika saudara ingin mencobanya silahkan ikuti langkah dibawah ini.....
                                   

Masuk blog saudara
pilih template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl + f untuk mempermudah anda
jika sudah ketemu copas kode dibawah ini tepat diatas tag ]]></b:skin>

#sigilabox { margin: 10px auto; background: #aaa; padding: 5px; float: left; border: 1px solid #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; text-shadow: 1px 1px 1px #000; -o-transition: all 2s ease-in; -moz-transition: all 2s ease-in; -webkit-transition: all 2s ease-in; } #sigilabox:hover { box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000; -moz-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000; -webkit-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000; } #sigilabox h3 { font-size: 18px; font-weight: bold; color: #FF0000; margin: 0; } .sigila { height: 100px; overflow: auto; margin : 10px 0 10px 0; padding :10px; box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000; -moz-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000; -webkit-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000; border-radius: 10px; -moz-border-radius:10px; -webkit-border-radius:10px; background : #eee; background: -moz-linear-gradient(top, #aaa, #eee); background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)); font-size: 14px; font-family: Arial; font-weight: normal; color: #000000; text-shadow: 1px 1px 1px #eee; } .sigila a { font-weight: bold; font-family: Times; color: #8B0000; text-shadow: 1px 1px 1px #000; text-decoration: none; } .sigila a:hover { color: #8B0000; } .sigila img { float: left; width: 90px; border: 3px solid #fff; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 2px; background: #ddd; opacity: 0.5; margin: 0 10px 2px 0; -o-transition: all 2s ease-in; -moz-transition: all 2s ease-in; -webkit-transition: all 2s ease-in; } .sigila img:hover { opacity: 1.0; -o-transform: scale(1.2) rotate(-30deg); -moz-transform: scale(1.2) rotate(-30deg); -webkit-transform: scale(1.2) rotate(-30deg); }

Cari Lagi kode <data:post.body/> gunakan ctrl + f  tentunya
jika sudah ketemu copas kode dibawah ini tepat dibawah tag  <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="sigilabox">
<h3>Happy Blogging...</h3>
<div class='sigila'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGIjTo4ZSPXx25ea-r1gDsvJevjGdyRvbjNPTxPpGKZN6TNPa73E5iJ7LsBVPIbbwkKIjBxHwvQCrQYUH9aZhXjW7oTYnJb6psX1whuHJ9doWs25y5ItJ_IUo9IxMiXWtPfmJvQEvcXKB/s320/jokowi.jpg
" title="Imron fhatoni"/>Ini Hanyalah Blog Sederhana yang membagi Informasi Seputar Dunia Blogging,Sebelumnya terima kasih atas kunjungan baik anda di blog ini dan Saya Berharap Saudara tidak keberatan untuk menyalurkan kritik dan saran saudara pada kotak komentar mengenai blog ini<br /><a href="http://informasibloger.blogspot.com/" target="_blank" title="Informasi Seputar Dunia Blogger">http://informasibloger.blogspot.com</a></div></div>
</b:if>  

 Catatan : Silahkan ganti kode berwarna merah dengan URL gambar sobat sendiri
               kode  <data:post.body/>  biasanya lebih dari satu nah untuk mempermudah anda silahkan dicoba       satu persatu tetapi biasanya penempatan yang tepat adalah dibawah kode  <data:post.body/> yang nomor 2
 atau juga yang nomor 3 silahkan disesuaikan saja gan dengan template yang saudara pakai....

Langkah terakhir simpan template anda kemudian lihat hasilnya.....
selamat mencoba semoga bermanfaat......