So, the Median UI v1.6 blogger theme has been launched greater than one year in the past, however, the documentation has no longer been updated for v1.6, so I have researched a little bit on it and tried to make documentation on all typography and writing layout of Median UI v1.6
Image with Grid Layout
Writing Code
<div class="psImg grImg"> <div class="zmImg"> <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""> </div> <div class="zmImg"> <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""> </div> <div class="zmImg"> <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""> </div> <div class="zmImg"> <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied=""> </div> </div>
YOUR-IMAGE-LINK-HERE
- change this with your image link.
Image with Show All Function
Used to hide some images and will be shown when the user clicks the 'Show All' button. Show All function can only be activated once, Images cannot be hidden again when you activate it
Writing Code
<input class='inImg hidden' id='for-hideImage' type='checkbox'> <div class="psImg hdImg"> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <div class='btImg'> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE" /> <!--[ Button image to activate ]--> <label for='for-hideImage' aria-label='Show all image'>Show All</label> </div> <!--[ Hide the rest image here ]--> <div class='psImg shImg'> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> </div> </div>
YOUR-IMAGE-LINK-HERE
- change this with your image link.
Image with Scroll Layout
Same as the image layout above, it's just that on the mobile display the images will be arranged in parallel with the additional side scroll function on the mobile display. We also added a smooth scroll effect to this feature. Please try opening this page on your mobile device:
Writing Code
<div class='psImg scImg scrlH'> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> <img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/> </div>
YOUR-IMAGE-LINK-HERE
- change this with your image link.
Manual Related Post
Writing Code
<div class='pRelate notranslate'> <b>Related Post:</b> <ul> <li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li> <li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li> <li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li> </ul> </div>
YOUR-POST-LINK
- change this with your image link.
YOUR-POST-TITLE
- put your post title here.
Paragraph with Drop cap
This is a paragraph with dropcap. Is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.
Writing Code
<p><span class='dropCap'>L</span>orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id faucibus nisl tincidunt eget nullam non. Diam vulputate ut pharetra sit amet aliquam id. Phasellus vestibulum lorem sed risus. </p>
Blockquote
Live as if you were to die tomorrow. Learn as if you were to live forever.
—Mahatma Gandhi
Another Blockquote Style You Can Use:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
- Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
- Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Writing Code
<!-- Style 1 --> <blockquote><i>YOUR-QUOTE<br/><br/> —NAME</i></blockquote> <!-- Style 2 --> <blockquote class='s-1 notranslate'> <div>YOUR-QUOTE <ul> <li>LINE</li> <li>LINE</li> </ul> </div> </blockquote>
Table
No | Column_1 | Column_2 | Column_3 | Column_4 | Column_5 |
---|---|---|---|---|---|
1 | Data_table_1 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
2 | Data_table_2 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
3 | Data_table_3 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
4 | Data_table_4 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
Writing Code
<div class='table'> <table style='white-space: nowrap;'> <thead> <tr> <th>No</th> <th>Column_1</th> <th>Column_2</th> <th>Column_3</th> <th>Column_4</th> <th>Column_5</th> </tr> </thead> <tbody> <tr> <th>No</th> <th>Column_1</th> <th>Column_2</th> <th>Column_3</th> <th>Column_4</th> <th>Column_5</th> </tr> <tr> <th>No</th> <th>Column_1</th> <th>Column_2</th> <th>Column_3</th> <th>Column_4</th> <th>Column_5</th> </tr> </tbody> </table> </div>
Syntax Highlighter
<!DOCTYPE html> <html dir='ltr' lang='en'> <head> <title>Sample Page</title> </head> <!--[ <body> open ]--> <body> <p>Sample content here!</p> </body> <!--[ </body> close ]--> </html>
Writing Code
<div class="pre html"> <pre> Write Code Here [ Wait You Need to Use HTML Encoder ] </pre> </div>
Change highlighted text accroding to your code language.
Encode your HTML code before puting syntaxbox -
HTML Encoder
MultiTab Syntax Highlighter
HTML here
CSS here
JS here
Writing Code
<div class='pre tb'> <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked> <input class='prei hidden' id='preT-2' type='radio' name='preTab'> <input class='prei hidden' id='preT-3' type='radio' name='preTab'> <div class='preH tbHd scrlH'> <label for='preT-1' data-text='HTML'></label> <label for='preT-2' data-text='CSS'></label> <label for='preT-3' data-text='JS'></label> </div> <div class='preC-1'> <pre>html here</pre> </div> <div class='preC-2'> <pre>css here</pre> </div> <div class='preC-3'> <pre>JS here</pre> </div> </div>
Show Hide Button
Answer:
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Writing Code
<details class='sp notranslate'> <summary data-show='Show' data-hide='Hide'>Answer:</summary> <p>This is your answer</p> </details>
Accordion / Toggle Menu
Accordion First Title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion Second Title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion Third Title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion Fourth Title (alt)
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Writing Code
<div class='showH'> <!--[ Accordion line 1 ]--> <details class='ac'> <summary>Accordion First Title</summary> <div class='aC'> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </div> </details> <!--[ Accordion line 2 ]--> <details class='ac'> <summary>Accordion Second Title</summary> <div class='aC'> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </div> </details> <!--[ Accordion line 3 ]--> <details class='ac'> <summary>Accordion Third Title</summary> <div class='aC'> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </div> </details> <!--[ Accordion line 4 ]--> <details class='ac'> <summary>Accordion Fourth Title</summary> <div class='aC'> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </div> </details> </div>
Note Block
This is a note paragraph.
Warning!
This is a note paragraph with warning status!
Writing Code
<p class='note notranslate'>This is a note paragraph.</p> <p class='note wr notranslate'><b>Warning!</b><br> This is a note paragraph with warning status!</p>
All Button Style
Writing Code
<a class='button' href='YOUR-LINK-HERE'>Standard_button</a>
Writing Code
<a class='button ln' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Writing Code
<a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Writing Code
<a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
Writing Code
<div class='btnF'> <a class='button ln' href='YOUR-LINK-HERE'>Demo</a> <a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a> </div>
Writing Code
<div class='btnF'> <a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a> <a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a> </div>
Writing Code
<div class='dlBox'> <!--[ Change data-text='...' atribute to add new file type ]--> <span class='fT' data-text='zip'></span> <div class='fN'> <!--[ File name ]--> <span>file_name.zip</span> <span class='fS'>200kb</span> </div> <!--[ Download link (change href='...' atribute to add link download) ]--> <a class='button' aria-label='Download' href='YOUR-LINK-HERE'><i class='icon dl'></i></a> </div>
Lazy Youtube
Writing Code
<div class='lazyYt' data-embed='YOUR YOUTUBE VIDEO LINK ID'> <div class='play'> <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg> </div> </div>
Bookmark This Blogger: Blog Brackets