Home » Blogger gadget » Image Gallery for blogger

This post will explains how to create a image gallery for blogger.Using this Gallery you can show your events,skills or your personal images which will helps you to build strong relation with your visitors,if you are using blogger blog for severing your services or product so this image gallery is good for you.I hop every blogger like this image gallery.Blogspot gallery is a very simple, fast and efficient way to achieve this goal.

Step 1: take a backup

Step 2 :  Find this cade ]]></b:skin>

the paste this code above it

* { margin: 0; padding: 0; } html { background-color: #eefbf8; background-image: radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)), linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%); background-position: 50% 75%, 50% 50%; background-repeat: no-repeat, repeat; background-size: 150% 150%, 3em 3em; font-size: 100%; min-height: 100%; } /**********/ /* Slider */ /**********/ .slider { background-color: #fff; box-shadow: inset 0 0 2px hsla(0,0%,0%,.2), 0 3px 1px hsla(0,0%,100%,.75), 0 -1px 1px 2px hsla(0,0%,0%,.1); height: 15em; left: 70%; margin: -8em -25em; padding: .5em; position: absolute; top: 50%; width: 25em; } /* Frame */ .slider:before { background-color: #22130c; bottom: -2.5em; box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2), inset 0 -2px 1px hsla(0,0%,0%,.4), 0 5px 50px hsla(0,0%,0%,.25), 0 20px 20px -15px hsla(0,0%,0%,.2), 0 30px 20px -15px hsla(0,0%,0%,.15), 0 40px 20px -15px hsla(0,0%,0%,.1); content: ''; left: -2.5em; position: absolute; right: -2.5em; top: -2.5em; z-index: -1; } /* Mat */ .slider:after { background-color: #fff5e5; bottom: -1.5em; box-shadow: 0 2px 1px hsla(0,0%,100%,.2), 0 -1px 1px 1px hsla(0,0%,0%,.4), inset 0 2px 3px 1px hsla(0,0%,0%,.2), inset 0 4px 3px 1px hsla(0,0%,0%,.2), inset 0 6px 3px 1px hsla(0,0%,0%,.1); content: ''; left: -1.5em; position: absolute; right: -1.5em; top: -1.5em; z-index: -1; } /* Slides */ .slider li { box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03); list-style:none; position: absolute; } .slider input { display: none; } /* Navigation */ .slider label { background-color: #111; background-image: linear-gradient(transparent, hsla(0,0%,0%,.25)); border: .2em solid transparent; bottom: .5em; border-radius: 100%; cursor: pointer; display: block; height: .5em; left: 24em; opacity: 0; position: absolute; transition: .25s; width: .5em; visibility: hidden; z-index: 10; } .slider label:after { border-radius: 100%; bottom: -.2em; box-shadow: inset 0 0 0 .2em #111, inset 0 2px 2px #000, 0 1px 1px hsla(0,0%,100%,.25); content: ''; left: -.2em; position: absolute; right: -.2em; top: -.2em; } .slider:hover label { opacity: 1; visibility: visible; } .slider input:checked + label { background-color: #fff; } .slider:hover li:nth-child(1) label { left: .5em; } .slider:hover li:nth-child(2) label { left: 2em; } .slider:hover li:nth-child(3) label { left: 3.5em; } .slider:hover li:nth-child(4) label { left: 5em; } /* Images */ .slider img { height: 15em; opacity: 0; transition: .25s; width: 25em; vertical-align: top; visibility: hidden; } .slider li input:checked ~ img { opacity: 1; visibility: visible; z-index: 10; }

step 3 : find <body>

above <body> paste below code or where you want this gallery

</code>

<center><ul class='slider'><a href=”http://gigabyteservice.com/web-designin” rel="dofollow"target=”_blank” title=”Make free website in india”> </a>

<li>

<input checked='' id='slide1' name='slide' type='radio'/>
 <label for='slide1'/>
 <img alt='Panel 1' src='http://2.bp.blogspot.com/-SuFotuq6DiE/Ul0auNOOxBI/AAAAAAAAAWE/WXSGkBix94Q/s1600/new1.jpg'/>
 </li>
 <li>
 <input id='slide2' name='slide' type='radio'/>
 <label for='slide2'/>
 <img alt='Panel 2' src='http://1.bp.blogspot.com/-Uzclxgkf_Mc/Ul0asMaa8II/AAAAAAAAAV8/1KveuUKsivA/s1600/new2.jpg'/>
 </li>
 <li>
 <input id='slide3' name='slide' type='radio'/>
 <label for='slide3'/>
 <img alt='Panel 3' src='http://4.bp.blogspot.com/-PpbGwwlnRNg/Ul0azPbUdMI/AAAAAAAAAWM/w6zonGDbJ08/s1600/new3.jpg'/>
 </li>
 <li>
 <input id='slide4' name='slide' type='radio'/>
 <label for='slide4'/>
 <img alt='Panel 4' src='http://3.bp.blogspot.com/-cM2NyhlldDQ/Ul0a2x0MnNI/AAAAAAAAAWU/p9SeD93_6NM/s1600/new4.jpg'/>
 </li>
 </ul>

</center>

<code>

Leave a Reply