Make Image Slider ❮📸📸📸❯ on Steemit 🅱eginer's guide to 🅰dvanced
I wrote the article about how to make photo slider on steemit three days ago. But I did not tell how I did it. Now it's time. First I decide to write HTML markups that steemit editor support partially. Formatting elements with help of html markups is easier than styling by markdown. HTML Elements usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
input | output | ||||||
|
This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6This is a paragraph. This is a division.
This is a link < br > element (which indicates a line break)
defines preformatted text code italic bold textsubscripted text superscripted blockquote
|
Today We make slider with help of <pre>
See below what <pre>
exactly is?
<pre>
veeeeeeeeeeeeeeery veeeeeeeeeeeeeeeeery loooooooooooong sentence
</pre>
veeeeeeeeeeeeeeeeeeeeeeeeery veeeeeeeeeeeeeeeeeeeeeeeeery looooooooooooooooooooooong sentence
It Does not let the browser break the words.
veeeeeeeeeeeeeeeeeeeeeeeeery veeeeeeeeeeeeeeeeeeeeeeeeery looooooooooooooooooooooong sentence
See another example. We dont need any Linebreak element < br >.
<pre>
veeeeeeeeeeeeeeery veeeeeeeeeeeeeeeeery
loooooooooooong
sentence
</pre>
veeeeeeeeeeeeeeery veeeeeeeeeeeeeeeeeryloooooooooooong
sentence
So, I hope you learn some basic knowledge about it.Let us make our slider
<pre>
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
</pre>
Use
to Add some spaces between images.DON'T press ENTER button between img tags
A common character entity used in HTML is the non-breaking space
<pre>
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
<img src="http://www.jewornotjew.com/img/people/b/betty_boop.jpg">
</pre>
Add links to the images .
<pre>
<a href="url"><img src="https://i.imgur.com/QEH5CZw.jpg"> </a>
<a href="https://i.imgur.com/QEH5CZw.jpg">
<img src="https://i.imgur.com/QEH5CZw.jpg"></a><a href="url">
<img src="https://i.imgur.com/QEH5CZw.jpg"> </a>
</pre>
Add left - right arrows .
<pre>
<table>
<td>https://i.imgur.com/KLvyi2B.png </td>
<td> <pre><img src="https://i.imgur.com/xi939SR.jpg">
<img src="https://i.imgur.com/T7guuzZ.jpg"><img src="https://i.imgur.com/QEH5CZw.jpg">
<img src="https://i.imgur.com/NvBM4tj.jpg"><img src="https://i.imgur.com/6bjx9o2.png">
<img src="https://i.imgur.com/bpn8JfO.jpg"><img src="https://i.imgur.com/jTQohcQ.jpg">
<img src="https://i.imgur.com/pmze5ho.jpg"> </pre> </td>
<td>https://i.imgur.com/I4WIsAc.png </td>
</table>
</pre>
|
<pre>
<table>
<td>https://i.imgur.com/KLvyi2B.png </td>
<td> <pre><img src="https://i.imgur.com/xi939SR.jpg"><img src="https://i.imgur.com/T7guuzZ.jpg"><img src="https://i.imgur.com/QEH5CZw.jpg"><img src="https://i.imgur.com/NvBM4tj.jpg"><img src="https://i.imgur.com/6bjx9o2.png"><img src="https://i.imgur.com/bpn8JfO.jpg"><img src="https://i.imgur.com/jTQohcQ.jpg"><img src="https://i.imgur.com/pmze5ho.jpg"> </pre> </td>
<td>https://i.imgur.com/I4WIsAc.png </td>
</table>
</pre>
|
I want to get your feedbacks, and I am happy if I can help you. Comment If you try to make your slider on steemit post which you write and have any issues. I can help you.
Don't forget to check out my most recent steemit posts
Anyuta Rai - beautiful Russian Model - Photos | Beautiful Girl 💃of the Day #1 | How to Align and float images on Steemit |
---|
Make Your Steemit Posts look like Book Pages | Top 10 Most Beautiful Women - Japan | Top 10 Most Beautiful Women - Zimbabwe |
---|
Size Your Text 📑and Photos 📸 How many you want - micro sizing | How resize images on steemit - tricks | How to Make Mobile friendly Photo slider◀📸📸📸▶ on Steemit |
---|
How get more readers for Your old steemit posts? Boost 🚀🚀your views | Add Your Popular Posts to sidebar of each blog post - Markdown Trick | I try to make my post like my profile |
---|
Top 10 Russian Beautiful | Top 10 Most Beautiful Women in Sports | Top 10 Most Beautiful Women In The World |
---|
10 🔥Beautiful Girls 👯💃of the Day #1 | Top 10 Most🔥 Beautiful Women💃 in USA | Top 30 Most Beautiful Indian Girls 💃💃 in one Picture #1 |
---|
10 🔥Sexy Girls 💃of | 10 Most Beautiful Woman Golf player in one Picture #2 | 50 Shades of 1 beautiful Girl - Photo🤳 |
---|
👍💥Best Styling guides for your steemit💌 posts (multi columns) | 🔥Sexy Girl 💃of instagram | Check out my steemit posts - All in One - Week #1 |
---|
If you think How to donate to this ℒady Just 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!
You can also make slider on comments
You have received a random upvote of $0.07 from @trlotto.
To stop receiving these comment reply "stop"
Very useful. Upvoted, followed, resteemed. Thank you.
👏👏👏👌👌👍👍💚💜💙💛💗
You're welcome. Would you be interested in reading a light erotic story I wrote and tell me if it's any good
https://steemit.com/writing/@direwolf/john-s-summer-adventures-at-mrs-jones-s-house-short-erotic-story-part-1-my-first-original-story-exclusive-for-steemit-new-genre
I checked it, I would say , You can make good design style for your blog, like this one
https://steemit.com/steemiteducation/@ladyluck/make-your-steemit-posts-look-like-book-pages
Thanks for such amazing guide.
Thank you @fr3eze 👍😁
@ladyluck are you interested in Collaboration on Steemit? please contact [email protected]
@steemitguide thanks for your suggestion, you can ask any question from comments i try to help you .
dont forget to upvote @fr3eze