the Best guide to make 4 columns images with titles

in #steemit • 7 years ago

Boost Your views and upvotes by adding "you may also like" section in your steemit or busy.org posts.

just copy full code and replace links, titles.

We can make it by 2 ways:

  1. with <table> tag
  2. with <div class="pull-left"> or <div class="pull-right">

My choice is the second way for making it. because this is more flexible and controllable . but you can't make 3 columns by this method, if you want 3 column grid posts then use table tag instead of div tag.

How to Make 4 columns section.

1.

Firstly, download your images and crop them by same aspect ratio, 300x200 or 200x200 Whatever you want. but all of them must be in same size for good design. for easiness go to https://v1.birme.net.

BIRME is a flexible and easy to use batch image resizer. It can resize your images in bulk to any specific dimensions and crop your images proportionately if necessary.

2.

let us make "You may also like";
# <sup><sub>https://i.imgur.com/ycaQVGV.png</sub></sup> You may also like

You may also like

3.

adding 4 columns.

<div class="pull-left">
  <div class="pull-left">
     <img src="https://i.imgur.com/wECzTh1.jpg">
  </div>
  <div class="pull-right">
    <img src="https://i.imgur.com/wECzTh1.jpg">
  </div>
</div>

<div class="pull-right">
  <div class="pull-left">
     <img src="https://i.imgur.com/wECzTh1.jpg">
  </div>
  <div class="pull-right">
    <img src="https://i.imgur.com/wECzTh1.jpg">
  </div>
</div>



4.

Add titles with help of <h4> or <h5> or <h6> tags not use # hashtag for this purpose, it doesn't work

  <div class="pull-left"> 
      <img src="https://i.imgur.com/wECzTh1.jpg">
      <h4>My Natural Beauty Cabinet</h4>
    </a>
  </div>
  <div class="pull-right">
       <img src="https://i.imgur.com/wECzTh1.jpg">
      <h4>My Natural Beauty Cabinet</h4>
  </div>
</div>

<div class="pull-right">
  <div class="pull-left">
       <img src="https://i.imgur.com/wECzTh1.jpg">
      <h4>My Natural Beauty Cabinet </h4>
  </div>
  <div class="pull-right">
       <img src="https://i.imgur.com/wECzTh1.jpg">
      <h4>My Natural Beauty Cabinet </h4>
  </div>
</div>


My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet


or add titles over the images

<div class="pull-left">
  <div class="pull-left"> 
       <h4>My Natural Beauty Cabinet </h4>
       <img src="https://i.imgur.com/wECzTh1.jpg">
    </a>
  </div>
  <div class="pull-right">
        <h4>My Natural Beauty Cabinet </h4>
       <img src="https://i.imgur.com/wECzTh1.jpg">
  </div>
</div>

<div class="pull-right">
  <div class="pull-left">
      <h4>My Natural Beauty Cabinet </h4>
       <img src="https://i.imgur.com/wECzTh1.jpg">
  </div>
  <div class="pull-right">
       <h4>My Natural Beauty Cabinet </h4>
       <img src="https://i.imgur.com/wECzTh1.jpg">
  </div>
</div>


My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

5.

Add links to the post items.

 <div class="pull-left">
  <div class="pull-left"> 
     <a href="steemit.com">
       <img src="https://i.imgur.com/wECzTh1.jpg">
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
       <img src="https://i.imgur.com/wECzTh1.jpg">
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div>

<div class="pull-right">
  <div class="pull-left">
     <a href="steemit.com">
       <img src="https://i.imgur.com/wECzTh1.jpg">
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
       <img src="https://i.imgur.com/wECzTh1.jpg">
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div>


My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

6 .

there is more space between images and titles, Align images vertically by adding <sub> tags for fix it

<div class="pull-left">
  <div class="pull-left"> 
     <a href="steemit.com">
       <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
        <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div>

<div class="pull-right">
  <div class="pull-left">
     <a href="steemit.com">
        <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
         <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
        </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div>


My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

7 .

the last step is copy code and paste it again for making the second row columns.Also add ---- this between rows for fixing some bugs.it is up to you to make 3rd or 4th rows. just copy full code and replace links, titles.

<div class="pull-left">
  <div class="pull-left"> 
     <a href="steemit.com">
       <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
        <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div>

<div class="pull-right">
  <div class="pull-left">
     <a href="steemit.com">
        <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
         <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
        </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div> 

------------

<div class="pull-left">
  <div class="pull-left"> 
     <a href="steemit.com">
       <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
        <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div>

<div class="pull-right">
  <div class="pull-left">
     <a href="steemit.com">
        <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
       </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
  <div class="pull-right">
     <a href="steemit.com">
         <sub><sub><sub><sub><sub><sub><sub>
            <img src="https://i.imgur.com/wECzTh1.jpg">
        </sub></sub></sub></sub></sub></sub></sub>
       <h4>My Natural Beauty Cabinet </h4>     
    </a>
  </div>
</div>


My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

That is it

my next post will be about how to hide texts.

🎇keep tuned🎇




#steemit #busy #tutorial #styling #markdown #tricks #secret #education

Check out my other posts

My Natural Beauty Cabinet

Knowing your Personal Style in designing your home

Women on Dating: The Art of being 5 minutes before time

Women’s Body Standards changing through the years

5 Benefits of being a morning person

Why Traveling in your 20’s is a must?

5 Eating Habits you MUST stop doing

what my daily morning routine looks like

22 best ways to raise your spirits effectively

The Sexiest celebrities in the world

Depression is The Silent Killer

13 Ways to Change your Sedentary lifestyle

Numerology. Your number – your destiny

6 Safe Places for Women to travel alone

Water - The Elixir of Life 🌊💧🌊🌍

Top 10 Russian Beautiful Women 💃💃💃

Top 10 Most Beautiful Women in Sports

Top 10 Most Beautiful Women In The World

Top 10 Most🔥 Beautiful Women💃 in USA

Women hold up half the sky 👩‍🔧👩‍🚒👩‍

I love !!! (chkchkchk). According to !!!

Protecting Your Eyes with the Right Habits

Ladies Who make blogging on Steemit

The Sexiest celebrities in the world

How to Align and float images on Steemit

Make Your Steemit Posts look like Book Pages

Size Your Text and Photos How many you want - micro sizing

How resize images on steemit - tricks

👍💥Best Styling guides for your steemit💌 posts (multi columns)

How get more readers for Your old steemit posts? Boost 🚀🚀your views

Add Your Popular Posts to sidebar of each blog post - Markdown Trick

Add go to Top button to steemit posts

How to Hide Thumbnail image or any image in post

Do you want to see how many unfollowers you have?

Make Image Slider on Steemit



Upvote this post and follow me if you like it and want to see more.
If you think others will enjoy this Please ReSteem it!

💃@ℒadyluck
  


#busy #tutorial #education #markdown
7 years ago in #steemit by
$0.31
  • Past Payouts $0.31
  • - Author $0.25
  • - Curators $0.06
4 votes
Reply 8
Sort:  
  • Trending
    • [-]
     7 years ago 

    Excellent guide! You really are an expert doing this.

    Cheers!

    [-]
     7 years ago 

    Helping people learn something makes me happy

    $0.00
      Reply
      [-]
       7 years ago 

      Wow this is amazing

      [-]
       7 years ago 

      I plan to make a website that you can get easily markdown codes from your blog to add on your posts.

      $0.00
        Reply
        [-]
         7 years ago (edited)

        If you want we can work together. I need a partner to help me design too. Will pay you according to work of course.

        [-]
         7 years ago 

        hmmm,, 😅 but I am not a developer. I know just about html/css/js/ . I learn.

        $0.10
        • Past Payouts $0.10
        • - Author $0.07
        • - Curators $0.03
        1 vote
        Reply
        [-]
         7 years ago 

        yeah. testing comment

        $0.00
          Reply
          [-]
           7 years ago 

          𝓡𝓮𝓪𝓭 𝓶𝔂 𝓹𝓻𝓸𝓯𝓲𝓵𝓮 𝓸𝓴? 💗 @a-0-0