A lot of the furniture sold at big box retailers gets a bad rap from woodworkers. These stores offer an inexpensive way for people to furnish their homes and... | From:Steve Ramsey Views:63239 1634ratings | |
Time:05:41 | More inHowto & Style |
Affichage des articles dont le libellé est Stylish. Afficher tous les articles
Affichage des articles dont le libellé est Stylish. Afficher tous les articles
Contemporary, adjustable stand. Build your own stylish bookcase and save money.
التسميات:
adjustable,
bookcase,
build,
Contemporary,
Money,
stand,
Stylish
Stylish Sliding Up Image Description Widget For Blogger
We Got a new Widget i.e Stylish Sliding Up Image Description Widget For Blogger.Let's Play with this widget,this widget enable us to add description below image but How? Its not a unique to add description Below image ? Of-course but in this widget the description will be shown when One hover the mouse over the image and the description will be clearly seen.Does it make Sense,its looking Sound Good.With the help of CSS and HTML this widget can be added easily to Blog.
How to Add Stylish Sliding Up Image Description Widget To Blogger
- Visit Blogger.com
- Go To Dashboard
- Now Click On Layout
- And Then Click On Add a Gadget
- A Box will Pop-up
- Select HTML/JavaScript
- Now Copy the below Script and made the Necessary changes which is mentioned clearly
- Paste it there and that's it !
.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}Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..
">See More
- Save it and You are Done !
- Stay Blessed Happy BlogginG!