All Style, Text and Writing Formats and Other Additional Features

Please note that some styles can be used directly in 'Writing view' mode and some can only be used in 'HTML View' mode but we still try to make their use as easy for you as possible.

Image with Caption

Untuk bagian ini anda bisa langsung menggunakannya dalam mode 'Tampilan menulis', caption di gambar ini tidak akan terbaca pada deskripsi/snippet artikel.

calificar Repository Demo

Semua gambar dalam artikel akan otomatis memiliki fungsi lightbox kecuali gambar dalam tag <figure>, cobalah klik salah satu gambar dalam postingan ini.

https://res.cloudinary.com/inputekno/image/upload/b_rgb:0c0f18/co_rgb:64748B,l_text:arial_36_normal_left:Inputekno,c_fit,w_800,h_450/fl_layer_apply,g_west,x_80,y_-80/co_rgb:FFFF,c_fit,w_800,h_450,l_text:arial_50_bold_normal_left:Membuat Open Graph Image Dinamis di Blogger/fl_layer_apply,g_west,x_80,y_20/og.jpg

https://res.cloudinary.com/inputekno/b_rgb:0c0f18/co_rgb:64748B,l_text:arial_36_normal_left:Inputekno,c_fit,w_800,h_450/fl_layer_apply,g_west,x_80,y_-80/co_rgb:FFFF,c_fit,w_800,h_450,l_text:arial_50_bold_normal_left:Membuat Open Graph Image Dinamis di Blogger/fl_layer_apply,g_west,x_80,y_20/og.jpg

https://res.cloudinary.com/inputekno/image/upload/b_rgb:f8f8f8/l_logo_type/c_fit,h_40,w_40/fl_layer_apply,g_north_west,x_80,y_80/co_rgb:64748B,l_text:arial_36_normal_left:Inputekno/fl_layer_apply,g_south_east,x_80,y_80/l_text:arial_36:Category,co_rgb:64748B,c_fit,w_800,h_450,c_fit,g_north_west,x_160,y_85/w_800,h_450,c_fit,co_rgb:242831,g_west,x_80,y_20,l_text:arial_50_bold:Struggling%20to%20sell%20one%20multi-million%20dollar%20home%20currently%20on%20the%20market/og.jpg

https://res.cloudinary.com/inputekno/image/upload/b_rgb:f8f8f8/l_logo_type/c_fit,h_40,w_40/fl_layer_apply,g_north_west,x_80,y_80/co_rgb:64748B,l_text:arial_36_normal_left:Inputekno/fl_layer_apply,g_south_east,x_80,y_80/l_text:arial_36:Category,co_rgb:64748B,c_fit,w_800,h_450,c_fit,g_north_west,x_160,y_85/w_800,h_450,c_fit,co_rgb:242831,g_center,l_text:arial_50_bold:Struggling%20to%20sell%20one%20multi-million%20dollar%20home%20currently%20on%20the%20market%20Struggling%20to%20sell%20one%20multi-million%20dollar%20home%20currently%20on%20the%20market/og.jpg

https://res.cloudinary.com/inputekno/image/upload/b_rgb:f8f8f8/l_logo_type/c_fit,h_40,w_40/fl_layer_apply,g_north_west,x_80,y_80/l_fetch:aHR0cHM6Ly9lbGhha2lteWFzeWEuZ2l0aHViLmlvL3RodW1icy9zcmMvYXNzZXRzL2ltYWdlcy9wYXR0ZXJucy82LnBuZw==,o_10/fl_layer_apply,fl_no_overflow,fl_tiled/co_rgb:64748B,l_text:arial_36_normal_left:Inputekno/fl_layer_apply,g_south_east,x_80,y_80/l_text:arial_36:Category,co_rgb:64748B,c_fit,w_800,h_450,c_fit,g_north_west,x_160,y_85/w_800,h_450,c_fit,co_rgb:242831,g_center,l_text:arial_50_bold:Struggling%20to%20sell%20one%20multi-million%20dollar%20home%20currently%20on%20the%20market%20Struggling%20to%20sell%20one%20multi-million%20dollar%20home%20currently%20on%20the%20market/og.jpg

https://res.cloudinary.com/inputekno/image/upload/b_rgb:f8f8f8/l_fetch:aHR0cHM6Ly9jZG4uaW5wdXRla25vLmNvbS9kYXRhL3RoZW1lcy9kaXN0L2ltYWdlL3BhdHRlcm5zLzEucG5n,e_colorize:100,o_5/fl_layer_apply,fl_no_overflow,fl_tiled/l_fetch:aHR0cHM6Ly9jZG4uaW5wdXRla25vLmNvbS9kYXRhL3RoZW1lcy9pY29ucy9zdmcvY29kZXBlbi1maWxsLnN2Zw==/c_fit,h_40,w_40/fl_layer_apply,g_north_west,x_80,y_80/b_rgb:E2F25E,co_rgb:242831,l_text:arial_28_normal_left:Inputekno/fl_layer_apply,g_south_east,x_80,y_80/l_text:arial_36:Codepen,co_rgb:242831,c_fit,w_800,h_450,c_fit,g_north_west,x_160,y_85/w_800,h_450,c_fit,co_rgb:242831,g_center,l_text:arial_50_bold:Struggling%20to%20sell%20one%20multi-million%20dollar%20home%20currently%20on%20the%20market/og.jpg

https://res.cloudinary.com/inputekno/image/upload/b_rgb:f8f8f8/l_fetch:aHR0cHM6Ly9jZG4uaW5wdXRla25vLmNvbS9kYXRhL3RoZW1lcy9kaXN0L2ltYWdlL3BhdHRlcm5zLzEucG5n,e_colorize:100,o_5,fl_no_overflow,fl_tiled/c_fit,h_40,w_40,g_north_west,x_80,y_80,l_fetch:aHR0cHM6Ly9jZG4uaW5wdXRla25vLmNvbS9kYXRhL3RoZW1lcy9pY29ucy9zdmcvY29kZXBlbi1maWxsLnN2Zw==/g_south_east,x_80,y_80,b_rgb:E2F25E,co_rgb:242831,l_text:arial_28_normal_left:Inputekno/c_fit,w_800,h_450,g_north_west,x_160,y_85,co_rgb:242831,l_text:arial_36:Codepen/w_800,h_450,c_fit,co_rgb:242831,g_center,l_text:arial_50_bold:Struggling%20to%20sell%20one%20multi-million%20dollar%20home%20currently%20on%20the%20market/og.jpg

https://res.cloudinary.com/inputekno/image/upload/b_rgb:f8f8f8/l_fetch:aHR0cHM6Ly9jZG4uaW5wdXRla25vLmNvbS9kYXRhL3RoZW1lcy9kaXN0L2ltYWdlL3BhdHRlcm5zLzEucG5n,e_colorize:100,o_5,fl_no_overflow,fl_tiled/c_fit,h_40,w_40,g_north_west,x_80,y_80,l_logo_type/c_fit,w_800,h_450,g_north_west,x_160,y_85,co_rgb:242831,l_text:arial_36:Inputekno/g_south_east,x_80,y_80,b_rgb:E2F25E,co_rgb:242831,l_text:arial_28_normal_left:Website/w_800,h_450,c_fit,co_rgb:242831,g_center,l_text:arial_50_bold:Inputekno/og.jpg

Image with Grid Layout

Alternatif menggunaakan figure dan caption

Image with Show All Function

Digunakan untuk menyembunyikan beberapa gambar dan akan ditampilkan ketika user mengklik tombol 'Show All'. Fungsi Show All hanya dapat diaktifkan satu kali, Gambar tidak bisa disembunyikan kembali ketika Anda mengaktifkannya.

Show all

Image with Scroll Layout

Sama seperti layout gambar diatas, hanya saja pada tampilan seluler gambar akan di susun sejajar dengan tambahan fungsi scroll samping pada tampilan mobile.

Kami juga menambahkan efek smooth scroll pada fitur ini, Silahkan coba buka laman ini pada perangkat seluler anda:

Dengan efek lightbox

Table

Tabel pada tema ini sudah diset agar mendukung responsive, sebagai contoh jika jumlah kolom atau lebar tabel melebihi lebar layar maka agar tidak merusak layoutnya secara otomatis table akan memiliki fungsi scroll.

Silahkan buka artikel ini pada perangkat seluler anda dan sorot bagian tabel dibawah:

Clase	Variable CSS	Descripcion
`font-primary`	`--font-primary`	Fuente primaria para textos
`font-secondary`	`--font-secondary`	Fuente secundaria para textos
`color-primary`	`--primary`	Color de acento primario
`color-secondary`	`--secondary`	Color de acento secundario
`bg-template`	`--bg-template`	Color de fondo de template
`bg-default`	`--bg-default`	Color de fondo por defecto
`bg-inset`	`--bg-inset`	Color de fondo superior
`b:skin-g1`	`--space-primary`	Espaciado primario utilizando `gap`
`b:skin-g2`	`--space-secondary`	Espaciado secundario utilizando `gap`
`b:skin-p`	`--space-primary`	Espaciado utilizando `padding`
`b:skin-py`	`--space-primary`	Espaciado utilizando `padding` vertical
`b:skin-px`	`--space-primary`	Espaciado utilizando `padding` horizontal
`b:skin-m`	`--space-primary`	Espaciado utilizando `margin`
`b:skin-my`	`--space-primary`	Espaciado utilizando `margin` vertical
`b:skin-mx`	`--space-primary`	Espaciado utilizando `margin` horizontal
`b:skin-sy`	`--space-primary`	Espaciado vertical para hijos directos
`b:skin-sx`	`--space-primary`	Espaciado horizontal para hijos directos

Format style lainnya yang bisa Anda gunakan yaitu menggunakan plugin datatable:

Key	Descripción	Tipo	Valores
`title`	Título	`string`	Titulo del widget
`icon`	Icono	string	El nombre de un icono de zkreations
`i`	Icono de tercero	string	Etiqueta `<i>` usando el valor como clase
`top`	Destacados	number	`0` `1` `2` `3`
`ratio`	Ratio (Carrusel)	aspect_ratio	Un valor de la variable e.ratio
`topRatio`	Ratio (Destacados)	aspect_ratio	Un valor de la variable e.ratio
`auto`	Autoplay	number	Tiempo en segundos
`free`	Scroll desbloqueado	boolean	`true` `false`

Paragraph with Lead

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

Paragraph with Drop cap

Merupakan huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian. Ukuran batas turun biasanya adalah dua garis atau lebih.

Drop cap akan mengubah ukuran huruf pertama paragraf sehingga huruf tersebut turun satu atau beberapa baris ke bawah. Banyak jenis media cetak yang memanfaatkan drop cap seperti buku, majalah, koran dan sebagainya karena dapat menambah daya tari visual.

Ekternal Link

Jika ada link eksternal yang terdapat dalam postingan, anda bisa memberitahukannya kepada user dengan menggunakan fitur ini:

Sample_internal_link

Sample_external_link

Button Link

Home Repository

Download Link

file_name.zip 200kb

Blockquote

Harga teman adalah harga yang lebih tinggi dari harga normal karena bertujuan untuk membantu teman yang merintis usaha
—Ivan Lanin

Format style lainnya yang bisa Anda gunakan:

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.

Syntax Highlighter

Format ini digunakan untuk menuliskan baris kode HTML dalam postingan, biasa dipakai pada blog dengan tema koding atau tutorial blogging.

Berikut contoh tampilannya:

{ content: "nav" menu: "share, contact" }

Menu share dan Contact akan ditampilkan

<!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>

Anfa juga bisa menuliskan kode <html> dalam paragraf seperti ini: <p>code</p>

MultiTabs 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>

{ content: "nav" menu: "share, contact" }

/* This is a CSS example */
p {
  color: red;
  text-align: center;
}

Lists Style

List_1
List_2
List_2

List_1
List_2
List_2

Unduh file tema yang Anda beli melalui folder Google Drive yang disediakan.
Buka file .xml dengan editor teks notepad, wordpad, notpad++ atau editor teks apa pun. klik kanan › Open with, pilih Notepad
Salin semua kode tema dengan menekan Ctrl+A › Ctrl+C

List_1
List_2
List_3

Eksternal Content

Getting Started

Panduan teknis menginstal tema blogger

blogoblok-theme.blogspot.com

Tabs Post - Split Article with Tab Function

The high point remains the 4-0 defeat of Leicester City on Boxing Day, one of those rare performances where each component part of a sporting machine appears to be operating with some intimate, shared knowledge of the other pieces. Either side of this there has at times been an air of double take about Liverpool’s run, of things happening that stretch credibility, that verge on some kind of sporting magic realism.

His original lawsuit against the Yankees and M. L. B. was dismissed in 2015, and last October, an appellate court rejected his arguments to have that judgment overturned. In fact, the New York State Supreme Court even ordered Zlotnick to pay the league and the Yankees $745 in court costs, which he has refused to pay. Editors’ Picks Yes, Fake News Is a Problem. But There’s a Real News Problem, Too. The next, and possibly final step, is the state Court of Appeals in Albany, which has received arguments from both sides and is expected to rule soon on whether Zlotnick’s appeal can proceed.

No sport is more often used to tell the story of America than baseball. Yet Marcenia Lyle Stone, known as Toni, who became the first woman ever to play big-league professional baseball when she took the field as a second baseman for the Negro Leagues’ Indianapolis Clowns in 1953, has largely been relegated to a footnote in history: one in a long list of African-American women who endured hardships, overcame discrimination and helped shape the nation only to be shoved aside, their contributions minimized.

Accordion / Toggle Menu

Show and hide a content element

That's kind, child. Especially when it's said that yours is the face of true beauty in this kingdom. This all must be difficult for you. I too lost my mother when I was a young girl. I can never take your mother's place, ever. But I feel that you and I are bound. I feel it there, your heart.

Show and hide a content element

Do you hear that? It's the sound of battles fought and lives lost. It once pained me to know that I am the cause of such despair, but now their cries give me strength. Beauty is my power.

Show and hide a content element

There is something about connecting over mutual hatred that is just so much deeper than mutual love.