the Best guide to make 4 columns images with titles

in #steemit7 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";

You may also like


3.

adding 4 columns.




4.

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


My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet



or add titles over the images



My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet

My Natural Beauty Cabinet


5.

Add links to the post items.




6 .

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


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.


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
  


Sort:  

Excellent guide! You really are an expert doing this.

Cheers!

Helping people learn something makes me happy

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

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

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

yeah. testing comment

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