Friday, August 4, 2017


By this useful Article I guide you that how to add Side by Side pictures to blogger Blog. This is very different three ways I describe you by this tutorial, this tutorial is very useful like other tutorials. When you have numerous Pictures that you need to incorporate into a blog entry, it is essential to fluctuate the lay out now and again. Along these lines, you won't need to look down for all eternity to see your Pictures and Images side by side. 


You additionally ought to change the pictures sizes in a stylish way as indicated by their significance. Notwithstanding, would you say you are tired of putting up a pictures each time you need to put two pictures one next to the other in your new blog entry. Here is I teach about three important ways and the question of your answer will be solved, and read the following three procedures, how to add side by side pictures to Blogger post.


  1. How Add Side By Side Pictures use Simple Method
  2. How Add Side By Side Clickable Pictures
  3. How Add Caption to Side By Side Pictures

Add Side By Side Pictures to Blogger

1.   How Add Side By Side Pictures use Simple Method

1.  Login your blogger blog with your gmail account and open your blogger and click on new post and than insert two pictures in your blogger posts. Click on "insert image". Note that two pictures will be appeared when you click on compose. For more guidance see the pictures has given below: 



2.  You have add two pictures in your blogger post as per above procedure now you want to add above pictures side by side. Click on HTML area of blogger post and look following HTML Code in your blogger post and cut the area which is marked with "red borders".


3.  Now you have omitted some parts of above HTML code and than set the width, height and margin of side by side pictures, change width and height as per your blogger post width. You should be try to keep width and height same and change left and right margin with "0em". For more information see the picture has given below:



4.  When you have  completed above procedure as per instructions, and you will see side by side pictures in your post area when you click on compose. One thing note that you can add more pictures as per size and "width" of your blogger post  main-wrapper. The demo has given below: 


2.   How Add Side By Side Clickable Pictures

1.  Now add Clickable pictures side by side to blogger post. In this regard first add following code to blogger post HTML area and than if you want to add more and more side by side pictures in one row repeat the code. 

<a href="URL"><img src="imageLocation" style="float: left; width: 30%; margin-right: 1.5%; margin-bottom: 0.5em;" ></a>

2. If you have any confusion about this see the picture has given below:


3.  After that add "Image location" and "Image URL" in above code and two pictures side by side will be appeared. You can add more and more pictures it is very simple, add images in blogger post area and get "Image Location", how to get image location click on "insert image" and upload pictures and get "Image Location" see the picture has given below and  the link of "Image location" shown with "red mark" in following picture. 


4.  After that two clickable images will be appeared and click on it see the following demo and  the Images will be shown on their proper location.







3.   How Add Caption to Side By Side Pictures

To see the above procedure and how to add "Caption" in side by side pictures to use the following HTML code in HTML area of Blogger Post.

<p style="float: left; font-size: 10pt; text-align: center; width: 30%; margin-right: 1.5%; margin-bottom: 0.5em;"><a href="URL"><img src="imageLocation" style="width: 100%">Caption</p>

After that add  "Image Location" and "Image URL"  as per above procedure and give the "Caption" of the pictures as per your choice for more guidance see the following demo with caption pictures.













Now see the above, I have added "Caption" to side by side pictures and you can add more and more pictures with Caption side by side when you finished images at the end of the code. You can close the code to use the following code.

<p style="clear: both;">

If you like this useful article such as other tutorial please leave your comments. 


Contact Form

Name

Email *

Message *

Home     About Us     Contact Us     Privacy Policy     Disclaimer     Sitemap    

                                  Copyright ©2014-2017. Media Music Mania - All Rights Reserved.