Creating Shadows Photo Draw Effects On Blog

Creating Shadows Photo Draw On Blog

Gadgets For Blogger - Many websites or blogs that we have encountered with displaying images is enlarged when the mouse approached and said the stranger called Images and Drop Shadows to Expand Them on Mouse Hover, he said hell ...!!!!


If interested please follow the steps below.
Log into your Blogger account;
Click the Design button and select Edit HTML;
Find this code ]]></ b: skin>
If you see copy and paste the following code before ]]></ b: skin>


/ * Image Gallery * /
# hoverbox-wrapper {padding-left: 30px; padding-top: 10px; border-bottom: 1px solid # eeeeee; height: 300px;} # hoverbox-wrapper-b {margin-left: 30px; margin-top: 10px; margin-bottom: 30px;} ul.hoverbox {cursor: default; list-style: none;}. hoverbox a {cursor: default;}. hoverbox a. preview {display: none;}. hoverbox a: hover. preview {display: block; position: absolute; top:-33px; left:-45px; z-index: 1;}. hoverbox img {background: # fff; border-color: # aaa # ccc # ddd # bbb; border-style : solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 100px; height: 75px;}. hoverbox li {background: # eee; border-color: # ddd # bbb # aaa # ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative;}. hoverbox. preview {border-color: # 000; width: 180px; height: 150px;}


Then Save Template.
The next step
Choose a design;
Click the Add tab Element (Gadget);
Choose HTML / JavaScript;
Copy and paste the HTML code below into it;

<li><a href="#"><img src="Your URL Image" alt="" /><img src="Your URL Image" alt="description" class="preview" /></a></li>


Then Save, and complete.
Note: Change the bold hruf with the URL of your photo.
Good luck .....
Kang Onk - Gadgets For Blogger