All Styles Typography and Writing Formats

Image with Grid Layout

Writing Format:

<div>
  <header class="rounded-xl">
    <div class="relative grid grid-cols-3 sm:grid-cols-4 gap-2 my-10">
      <div class="col-span-2 row-span-2 relative rounded-xl overflow-hidden z-0 cursor-pointer">
        <div class="ux-UxImage absolute inset-0" data-ux-id="UxImage">
          <img src="image-src.com" class="object-cover w-full h-full rounded-xl" alt="ux-imgs" />
        </div>
        <div class="absolute inset-0 bg-neutral-900 bg-opacity-20 opacity-0 hover:opacity-100 transition-opacity"></div>
      </div>
      <div class="relative rounded-xl overflow-hidden z-0">
        <div class="ux-UxImage aspect-w-6 aspect-h-5" data-ux-id="UxImage"><img src="image-src.com" class="object-cover w-full h-full rounded-xl" alt="ux-imgs" /></div>
        <div class="relative h-2 bg-neutral-900 bg-opacity-20 opacity-0 hover:opacity-100 transition-opacity cursor-pointer"></div>
        <div class="ux-UxImage aspect-w-6 aspect-h-6" data-ux-id="UxImage">
          <img src="image-src.com" class="object-cover w-full h-full rounded-xl" alt="ux-imgs" />
        </div>
      </div>
    </div>
  </header>
</div>

Replace “image-src.com” with your image link.
Replace “Image Title” with your image title.

Blockquote

Blockquotes are making text to look nice specially if you want the reader to focus on the text inside the quote.

Typography is pretty important if you don’t want your stuff to look like trash. Make it good then it won’t be bad.

Writing Format:

<blockquote class="uxB-block-quote">
	<p>Typography is pretty important if you don’t want your stuff to look like trash. Make it good then it won’t be bad.</p>
</blockquote>

Tables

Tables are made in simple design to look nice you can use them to sort things or arrangement

Wrestler	Origin	Finisher
Bret “The Hitman” Hart	Calgary, AB	Sharpshooter
Stone Cold Steve Austin	Austin, TX	Stone Cold Stunner
Randy Savage	Sarasota, FL	Elbow Drop
Vader	Boulder, CO	Vader Bomb
Razor Ramon	Chuluota, FL	Razor’s Edge

Writing Format:

	<figure class="uxB-block-table">
  <table>
    <thead>
      <tr>
        <th>Wrestler</th>
        <th>Origin</th>
        <th>Finisher</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Bret “The Hitman” Hart</td>
        <td>Calgary, AB</td>
        <td>Sharpshooter</td>
      </tr>
      <tr>
        <td>Stone Cold Steve Austin</td>
        <td>Austin, TX</td>
        <td>Stone Cold Stunner</td>
      </tr>
      <tr>
        <td>Randy Savage</td>
        <td>Sarasota, FL</td>
        <td>Elbow Drop</td>
      </tr>
      <tr>
        <td>Vader</td>
        <td>Boulder, CO</td>
        <td>Vader Bomb</td>
      </tr>
      <tr>
        <td>Razor Ramon</td>
        <td>Chuluota, FL</td>
        <td>Razor’s Edge</td>
      </tr>
    </tbody>
  </table>
</figure>

Image With Caption

Image Title — Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure vel officiis ipsum placeat itaque neque dolorem modi perspiciatis dolor distinctio veritatis sapiente

Lazyload Image

Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. All images in this article use Lazyload.

Writing Format:

<div>
  <img class='lazy' alt='image_title_here' data-src='https://1.bp.blogspot.com/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title_here' src='https://1.bp.blogspot.com/.../image.png'/></noscript>
</div>

Captions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

Writing Format:

<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
</figcaption>

Syntax Code Block

function console(){
	if (window.location.hostname == "flexifyx.blogspot.com") {
		console.log("Verified Site!");
	}
}
window.addEventListener("load", console);

Writing Format:

<pre class="uxB-block-code">
	<code>function console(){
	if (window.location.hostname == "flexifyx.blogspot.com") {
		console.log("Verified Site!");
	}
}
window.addEventListener("load", console);
	</code>
</pre>

How to Make a Video Post

Step 1. Go To blogger Layout

Step 2. Create/Edit a Post

Step 3. Add the Label Video

Step 4. Switch to “HTML view”

Writing Format:


// To embed the video in the top of page For Video Posts

// Add This inside the Post
<script>
var videoConfig = {
    title: "Video Title",
    imageSrc: "https://img-src.com",
    embedCode: "xxxxxxxxxxx"
}
</script>

// Replace Video Title With Your Video Title
// Replace https://img-src.com Title With Your Video Title
// Replace xxxxxxxxxxx Title With Your Video Title

Code generator Tool will be made soon

Replace https://img-src.img with your video thumbnail image

How to Make an Audio Post

Step 1. Go To blogger Layout

Step 2. Create/Edit a Post

Step 3. Add the Label Audio

* To Enable The music in the Audio Post
* Add Label Audio to The Post
* Copy Paste the code below and edit it
*Note* Make sure that every variable below contains the music name, album name , music url, music image, Music Number (you can increase and decrease them they can be one music or 300 music

** For adding another one just add
if album >> "Album Name Here",
if music number >> "_Music Number Here",
if music name >> "Music Name Here",
if music image >> "Music Image Name Here",
if music url >> "Music Url Here",

and make sure that all arrays have >> “ , ” in the last of them except the last one.

Writing Format:

<script>
    var albums = [
      "Music One",
      "Music Two",
      "Music Three",
      "Music Four",
      "Music Five"
    ],
    albumsImages = [
      "https://Music-One-Link.com",
      "https://Music-Two-Link.com",
      "https://Music-Three-Link.com",
      "https://Music-Four-Link.com",
      "https://Music-Five-Link.com"
    ],
    trackNames = [
      "Music Name - Album Name 1",
      "Music Name 2 - Album Name 2",
      "Music Name 3 - Album Name 3",
      "Music Name 4 - Album Name 4",
      "Music Name 5 - Album Name 5"
    ],
    albumArtworks = ["_1", "_2", "_3", "_4", "_5"],
    trackUrl = [
      "https://Music-One-Img-Link.com",
      "https://Music-Two-Img-Link.com",
      "https://Music-Three-Img-Link.com",
      "https://Music-Four-Img-Link.com",
      "https://Music-Five-Img-Link.com"
    ];
</script>

How to add New menu to the Navigation Menu

Step 1. Go To blogger Layout.

Step 2. Find Navigation Menu Title.

Step 3. Add Page.

Step 4. Add Url and Title.

Click “Save”.

How to add/Change Video in “The Latest Videos Widget”

Step 1. Go To blogger Layout.

Step 2. Find Widget Named “Latest Videos”.

Step 3. Add/Edit any of the Links.

Step 4. Add/Change the URL to your video id.

You will find that id after the video link like the bold text “https://youtu.be/wOXGEtVQT5s”.

Click “Save”.

How to Create a Post with both videk and audio features

Step 1. Go To Blogger Posts.

Step 2. Create/Edit a Post.

Step 3. Add The Labels Video and Audio.

Step 4. Add The follwing script inside The Post.

Configure The Audio

Writing Format:

<script>
    var albums = [
      "Music One",
      "Music Two",
      "Music Three",
      "Music Four",
      "Music Five"
    ],
    albumsImages = [
      "https://Music-One-Link.com",
      "https://Music-Two-Link.com",
      "https://Music-Three-Link.com",
      "https://Music-Four-Link.com",
      "https://Music-Five-Link.com"
    ],
    trackNames = [
      "Music Name - Album Name 1",
      "Music Name 2 - Album Name 2",
      "Music Name 3 - Album Name 3",
      "Music Name 4 - Album Name 4",
      "Music Name 5 - Album Name 5"
    ],
    albumArtworks = ["_1", "_2", "_3", "_4", "_5"],
    trackUrl = [
      "https://Music-One-Img-Link.com",
      "https://Music-Two-Img-Link.com",
      "https://Music-Three-Img-Link.com",
      "https://Music-Four-Img-Link.com",
      "https://Music-Five-Img-Link.com"
    ];
</script>

* To Enable The music in the Audio Post
* Add Label Audio to The Post
* Copy Paste the code below and edit it
*Note* Make sure that every variable below contains the music name, album name , music url, music image, Music Number (you can increase and decrease them they can be one music or 300 music

** For adding another one just add
if album >> "Album Name Here",
if music number >> "_Music Number Here",
if music name >> "Music Name Here",
if music image >> "Music Image Name Here",
if music url >> "Music Url Here",

and make sure that all arrays have >> “ , ” in the last of them except the last one.

Configure The Video

* Replace Video Title With Your Video Title
* Replace https://img-src.com Title With Your Video Title
* Replace xxxxxxxxxxx Title With Your Video Title

Writing Format:

// Add This inside the Post
<script>
var videoConfig = {
    title: "Video Title",
    imageSrc: "https://img-src.com",
    embedCode: "xxxxxxxxxxx"
}
</script>

Click “Save”.

ORTech

Table of Content