SharedTutor | Tutorials For Everyone

Find your interesting tutorials in SharedTutor.com. Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

How to Add Stylish Sliding Up Image Description Widget



This image doesn't have any alt text

Another widget that includes a great check out your Blogger site is the sliding up image description. You can incorporate this stylish widget via this tutorial by the guys at Bloggertrix. You can add it around the sidebar if you have a special post, you'll be able to link it as well. CSS and HTML are simply used so it’s tailor-made if you wish to change the images.


  • Blogger Dashboard > Layout



  • Add Gadget > HTML/Javascript



  • Paste this code


<style>
.image-box
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;

.image-container,
.image-details height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;

.image-container img
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;

.image-details h4,
.image-details p
  margin:0 0 .2em;padding:0 0;height:70px;

.image-details h4
  font-size:120%;height:auto;

.image-details .details
  padding:10px 12px;overflow:hidden;


.image-details .more
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;


.image-box:hover border-color:#bbb; width:280px;
  height:280px;
.image-box:hover .image-container margin-top:-160px
.image-details .more:hover background-color:black
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="http://2.bp.blogspot.com/-XtTVaIhT6dE/UX9-IAg95uI/AAAAAAAAAhg/FQzPqv9htEY/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
    <p><a class="more" href="Post Link ">More</a></p>
   </div>
  </div>
 </div>
 

 <div style="clear:both;"></div>

</div>


  • Save.


Note: Make a backup of your respective template before attempting to edit it.

No comments

Post a Comment