Shortcodes dan Page Markups

Drop Caps

Akses Posting blog Anda> klik Edit pada salah satu posting Anda atau tambahkan posting baru. kemudian beralih ke area HTML editor posting dan tambahkan kode di bawah ini pada huruf pertama.

<span class="firstcharacter">L</span>

Ubah "L" dengan teks Anda sendiri.

Typography

Akses Posting blog Anda> klik Edit pada salah satu posting Anda atau tambahkan posting baru. kemudian pilih teks yang ingin Anda sesuaikan dan klik opsi yang tersedia di atas editor posting Anda. periksa gambar di bawah untuk preferensi.

Ada terutama 9 opsi yang dapat Anda gunakan untuk membuat tipografi yang tampak keren.

Text Size
Text Heading Style
Bold
Italic
Underline
Strikethrough
Text color
Text Highlighter
Link

Tables

Akses Posting blog Anda> klik Edit pada salah satu posting Anda atau tambahkan posting baru. kemudian beralih ke area HTML editor posting dan tambahkan kode di bawah ini di mana saja Anda ingin membuat tabel muncul.

<div class="post-table">

<table>

    <thead>

<tr>

        <th>First Name</th>

        <th>Last Name</th>

        <th>Hero Title</th>

      </tr>

</thead>

    <tbody>

<tr>

        <td data-label="First Name">Bruce</td>

        <td data-label="Last Name">Wayne</td>

        <td data-label="Hero Title">Batman</td>

      </tr>

<tr>

        <td data-label="First Name">Peter</td>

        <td data-label="Last Name">Parker</td>

        <td data-label="Hero Title">Spiderman</td>

      </tr>

<tr>

        <td data-label="First Name">Bruce</td>

        <td data-label="Last Name">Banner</td>

        <td data-label="Hero Title">The Hulk</td>

      </tr>

<tr>

        <td data-label="First Name">Clark</td>

        <td data-label="Last Name">Kent</td>

        <td data-label="Hero Title">Superman</td>

      </tr>

</tbody>

</table>

</div>
Ubah detail dengan teks Anda sendiri.

Blockquote

Akses Posting blog Anda> klik Edit pada salah satu posting Anda atau tambahkan posting baru. kemudian pilih teks apa pun yang ingin Anda sesuaikan dan klik pada opsi blockquote yang tersedia di atas editor posting Anda. periksa gambar di bawah untuk preferensi.

Bullet dan Lists

Akses Posting blog Anda> klik Edit pada salah satu posting Anda atau tambahkan posting baru. kemudian pilih teks apa pun yang ingin Anda sesuaikan dan klik opsi peluru dan daftar yang tersedia di atas editor posting Anda. periksa gambar di bawah untuk preferensi.

Buttons

Simple Buttons

<div class="small-button">

<a class="button small" href="https://www.blogger.com">Button Small</a>

<a class="button medium" href="https://www.blogger.com">Button Medium</a>

<a class="button large" href="https://www.blogger.com">Button Large</a>

</div>

Buttons dengan Icons

<div class="small-button">

<a class="button small demo" href="https://www.blogger.com">Demo Button</a>

<a class="button medium demo" href="https://www.blogger.com">Demo Button</a>

<a class="button large demo" href="https://www.blogger.com">Demo Button</a>

                <br>

<div class="clear">

</div>

<a class="button small download" href="https://www.blogger.com">Download Button</a>

<a class="button medium download" href="https://www.blogger.com">Download Button</a>

<a class="button large download" href="https://www.blogger.com">Download Button</a>

                <br>

<div class="clear">

</div>

<a class="button small buy" href="https://www.blogger.com">Buy Now Button</a>

<a class="button medium buy" href="https://www.blogger.com">Buy Now Button</a>

<a class="button large buy" href="https://www.blogger.com">Buy Now Button</a>

                <br>

<div class="clear">

</div>

<a class="button small visit" href="https://www.blogger.com">Visit a Link Button</a>

<a class="button medium visit" href="https://www.blogger.com">Visit a Link Button</a>

<a class="button large visit" href="https://www.blogger.com">Visit a Link Button</a>

</div>

Ubah detail dengan teks Anda sendiri.

Alert Boxes

Akses Posting blog Anda> klik Edit pada salah satu posting Anda atau tambahkan posting baru. kemudian beralih ke area HTML editor pos dan tambahkan kode di bawah ini di mana saja Anda ingin membuat kotak muncul.

<div class="alert-message success">

<i class="fa fa-check-circle"></i> success message You successfully read this important message.</div>

<div class="alert-message alert">

<i class="fa fa-info-circle"></i> Alert message This alert needs your attention.</div>

<div class="alert-message warning">

<i class="fa fa-exclamation-triangle"></i> Warning message Warning! Best check yo self.</div>

<div class="alert-message error">

<i class="fa fa-exclamation-circle"></i> Error message Oh snap! Change a few things up</div>

</div>

Ubah detail dengan teks Anda sendiri.

Code Box

<pre>function generate() {

    var a = $('#container').html();

    var b = window.open('', '', 'width=600,height=400');

    b.document.write('<textarea>' + a + '</textarea>');

}</pre>

Ubah detail dengan teks Anda sendiri.

Comment Form

Access your blog Posts or static page > click Edit on any of your posts/ page or add a new post/page. then switch to HTML area of the post editor and add the below coding anywhere you want to make the contact form appear.

Ubah detail dengan teks Anda sendiri.

Shortcodes dan Page Markups

Buttons

No comments:

Recents

Popular

Comments

Popular Posts

Random Posts