Friday, 5 September 2014

How To Create Image Gallery On Blog

Lakhvir Singh   at  17:39  No comments



    Blogger is very popular for free blogging or creating mini website. Blogger allows adding multiple pictures on blog’s post but there is no any advanced option to setup pictures. So here simple way to make simple photo gallery on blog’s post.  Needed basic knowledge about html. With this tut you can easily manage your blog’s picture and also create nice picture gallery.

Step1. Upload your picture on web.
Step2. Copy URL of Pictures.
Step3. Now Add these ‘HTML’ code.
Only Image

<div class="img">                                       

<a href = "replace with image url" target="_self"><img   alt="picture" src="replace with image or icon url"       height="90" width="110" /></a><br /> </div>             

Image With description

<div class="img">                                       

<a href = "replace with image url" target="_self"><img   alt="Picture" src="replace with image or icon url"       height="90" width="110" /></a><br />                    

<div class="des">Description</div>                      

</div>                                                  

Step4. Save Post.
Step5. Now go to Layout ->customize -> Advanced -> Add CSS.
Step6. Add These CSS code.

div.img                                                 
{                                                       

    margin: 5px;                                        

    padding: 5px;                                       

    border: 1px solid #0000ff;                          

    height: auto;                                       

    width: auto;                                        

    float: left;                                        

    text-align: center;                                 

}                                                                                          

div.img img                                             
{                                                       

    display: inline;                                    

    margin: 5px;                                        

    border: 1px solid #ffffff;                          

}                                                       

div.img a:hover img                                     

{                                                       

    border: 1px solid #0000ff;                          

}                                                       

 If  you add description add these code.

div.des                                                 
{                                                       

    text-align: center;                                 

    font-weight: normal;                                

    width: 120px;                                       

    margin: 5px;                                        

}                                                       

Step7. Click on Apply to Blog button.

Note: - You can change picture size and color according your blog’s post.
Reference: - www.w3schools.com

Tags:
About the Author

Write admin description here..

0 comments:

Viewer

info-point © 2014-17. Powered by Blogger.