Adding Box Below Admin Posts With New Animation

On this day I will present an article on Adding Box Below Admin Posts With New Animation. Hopefully by posting Adding Admin Box Below Posts With New Animation will add to your knowledge

In this post I will share an interesting tips that make the admin box below the post with the latest animation how easy once if you want to try it, please follow the steps below .....
                                   

Sign your blog

select the template / edit html

then look for the code]]> </ b: skin> use ctrl + f to facilitate your

if you have found copy and paste the code below just above 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); }

Search Again <data: post.body /> use ctrl + f course

If you have found the right copy and paste the following code below the <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/AVvXsEiBcNDzg9E3zwlu3TJwEJxDCzxFb_TsMUIAiYz7NPJdtpgzTJs6EAV3Y_thrThhOOzD9fnUqTqnaSDSFW7e9DOMw22gBn6D0H1jelDEVBiDpNsPa2LTljH5_xy51bJGYhz9M4wUHQ4K5jTZ/s320/ghghgh.jpg
" title="Ypur Name"/>It is only the simple blog that gives information Around the World Blogging, Previous thank you for your kind visit at this blog and I Hope you do not mind to channel criticism and advice you on the comments of this blog<br /><a href="http://your blog/" target="_blank" title="Information About The World Blogger">http://your blog site</a></div></div>
</b:if>  

Note: Please replace the red code with pal own image URL

                <data: post.body /> usually more than one well to facilitate you please try one by one but usually the exact placement is under the code <data: post.body /> the number 2

  or also the number 3 please tailored just gan with a template that you use ....


The last step save your template and then see the results .....

good luck hopefully useful ......