tRikSonic

Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.40

Tutorial Bootstrap 3 Button Group

Button group pada Bootstrap digunakan untuk megelompokkan beberapa tombol atau button kesatu wadah container/pembungkus.

Cara Penggunaan Button Group

Untuk menerapkan button group gunakan element HTML <div> dengan nama class .btn-group : <div class="btn-group">...</div>.

Contoh :

<div class="btn-group">
  <button class="btn btn-success">Button 1</button>
  <button class="btn btn-success">Button 2</button>
  <button class="btn btn-success">Button 3</button>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 <code>Button Group</code></h2>

<div class="btn-group">
  <button class="btn btn-success">Button 1</button>
  <button class="btn btn-success">Button 2</button>
  <button class="btn btn-success">Button 3</button>
</div>

</div>
</body>
</html>

Ukuran Button Group

Untuk menentukan ukuran button pada button group, tambahkan class .btn-group-xs, .btn-group-sm atau .btn-group-lg pada container.
  • .btn-group-xs : paling kecil
  • .btn-group-sm : kecil
  • .btn-group-lg : besar

Contoh :

<h3>Normal</h3>
<div class="btn-group">
  <button class="btn btn-default">Button</button>
  <button class="btn btn-default">Button</button>
  <button class="btn btn-default">Button</button>
</div>

<h3>.btn-group-xs</h3>
<div class="btn-group btn-group-xs">
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
</div>

<h3>.btn-group-sm</h3>
<div class="btn-group btn-group-sm">
  <button class="btn btn-info">Button</button>
  <button class="btn btn-info">Button</button>
  <button class="btn btn-info">Button</button>
</div>

<h3>.btn-group-lg</h3>
<div class="btn-group btn-group-lg">
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - Ukuran <code>Button Group</code></h2>

<h3>Normal</h3>
<div class="btn-group">
  <button class="btn btn-default">Button</button>
  <button class="btn btn-default">Button</button>
  <button class="btn btn-default">Button</button>
</div>

<h3>.btn-group-xs</h3>
<div class="btn-group btn-group-xs">
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
  <button class="btn btn-success">Button</button>
</div>

<h3>.btn-group-sm</h3>
<div class="btn-group btn-group-sm">
  <button class="btn btn-info">Button</button>
  <button class="btn btn-info">Button</button>
  <button class="btn btn-info">Button</button>
</div>

<h3>.btn-group-lg</h3>
<div class="btn-group btn-group-lg">
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
  <button class="btn btn-danger">Button</button>
</div>

</div>
</body>
</html>

Vertical Button Group

Untuk membuat button secara vertical gunakan class .btn-group-vertical pada container

Contoh :

<div class="btn-group-vertical">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
  <button class="btn btn-primary">Button 4</button>
  <button class="btn btn-primary">Button 5</button>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - <code>Vertical Button Group</code></h2>


<div class="btn-group-vertical">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
  <button class="btn btn-primary">Button 4</button>
  <button class="btn btn-primary">Button 5</button>
</div>


</div>
</body>
</html>

Justified Button Group

Digunakan untuk membuat lebar pada button otomatis menyesuaikan dengan lebar kiri dan kanan container. Perhitungannya ; (Lebar container dibagi jumlah button = lebar button per 1 button)
Untuk menerapkannya tambahkan class .btn-group-justified pada container

Contoh :

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Button 1</a>
  <a href="#" class="btn btn-primary">Button 2</a>
  <a href="#" class="btn btn-primary">Button 3</a>
</div>

<br/>

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-danger">Button 1</a>
  <a href="#" class="btn btn-danger">Button 2</a>
  <a href="#" class="btn btn-danger">Button 3</a>
  <a href="#" class="btn btn-danger">Button 4</a>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - <code>Justified Button Group</code></h2>


<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Button 1</a>
  <a href="#" class="btn btn-primary">Button 2</a>
  <a href="#" class="btn btn-primary">Button 3</a>
</div>

<br/>

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-danger">Button 1</a>
  <a href="#" class="btn btn-danger">Button 2</a>
  <a href="#" class="btn btn-danger">Button 3</a>
  <a href="#" class="btn btn-danger">Button 4</a>
</div>

</div>
</body>
</html>
Tips : untuk penerapan mennggunkan element <button> caranya sebagai berikut :
<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button class="btn btn-info">Button 1</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-info">Button 2</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-info">Button 3</button>
  </div>
</div>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - <code>Justified Button Group</code></h2>


<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button class="btn btn-info">Button 1</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-info">Button 2</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-info">Button 3</button>
  </div>
</div>

</div>
</body>
</html>

Button Group Dropdown Menu

Untuk membuat dropdown menu pada button, gunakan contoh berikut :

Contoh 1 Button Group Dropdown Menu:

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle active" data-toggle="dropdown">
    Menu <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
  <button class="btn btn-primary">Button 4</button>
</div>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2>


<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle active" data-toggle="dropdown">
    Menu <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
  <button class="btn btn-primary">Button 4</button>
</div>


<hr>
<div class="alert alert-info">
  <strong>Catatan :</strong> 
  Untuk Dropdown Menu diperlukan jQuery dan JavaScript Bootstrap3
</div>

</div>

<!-- jquery dan Bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Contoh 2 Button Group Dropdown Menu:

<div class="btn-group">
  <button class="btn btn-danger">Menu</button>
  <button class="btn btn-danger dropdown-toggle active" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 1</a></li>
  </ul>
</div>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2>

<div class="btn-group">
  <button class="btn btn-danger">Menu</button>
  <button class="btn btn-danger dropdown-toggle active" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 1</a></li>
  </ul>
</div>


<hr>
<div class="alert alert-info">
  <strong>Catatan :</strong> 
  Untuk Dropdown Menu diperlukan jQuery dan JavaScript Bootstrap3
</div>

</div>

<!-- jquery dan Bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Contoh 3 Button Group Dropdown Menu:

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
  <div class="btn-group">
  <button class="btn btn-primary">Button 4</button>
  <button class="btn btn-primary active dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </div>
</div>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2>

<div class="btn-group">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-primary">Button 2</button>
  <button class="btn btn-primary">Button 3</button>
  <div class="btn-group">
  <button class="btn btn-primary">Button 4</button>
  <button class="btn btn-primary active dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </div>
</div>


<hr>
<div class="alert alert-info">
  <strong>Catatan :</strong> 
  jQuery dan JavaScript Bootstrap3 diperlukan
</div>

</div><!-- close container -->

<!-- jquery dan Bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Contoh 4 Button Group Dropdown Menu:

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default">Menu 1</button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-primary">Menu 2</button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-info">Menu 3</button>
    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<style>
/*untuk demo*/
.triksonic-body .btn-toolbar {
    margin: 15px 0px;
}
</style>
</head>
<body class="triksonic-body">
<div class="container">
<h2>Bootstrap 3 - <code>Button Group Dropdown Menu</code></h2>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-default">Menu 1</button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-primary">Menu 2</button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button class="btn btn-info">Menu 3</button>
    <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
    </ul>
  </div>
</div>


<hr>
<div class="alert alert-info">
  <strong>Catatan :</strong> 
  jQuery dan JavaScript Bootstrap3 diperlukan
</div>

</div><!-- close container -->

<!-- jquery dan Bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Button Group DropUp Menu

Untuk membuat dropup menu pada button, gunakan contoh berikut :

Contoh 1 Button Group DropUp Menu:

<div class="btn-group dropup">
  <button class="btn btn-default">DropUp Menu</button> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  </button> 
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="triksonic-body">
<div class="container">
<h2>Bootstrap 3 - <code>Button Group DropUp Menu</code></h2>
<hr/>
<hr/>

<div class="btn-group dropup">
  <button class="btn btn-default">DropUp Menu</button> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  </button> 
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

<hr>
<div class="alert alert-info">
  <strong>Catatan :</strong> 
  jQuery dan JavaScript Bootstrap3 diperlukan
</div>

</div><!-- close container -->

<!-- jquery dan Bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Contoh 2 Button Group DropUp Menu:

<div class="btn-group dropup">
  <button class="btn btn-default">DropUp Menu</button> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  </button> 
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="triksonic-body">
<div class="container">
<h2>Bootstrap 3 - <code>Button Group DropUp Menu</code></h2>
<hr/>
<hr/>

<div class="btn-group dropup">
  <button class="btn btn-default">DropUp Menu</button> 
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  </button> 
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

<hr>
<div class="alert alert-info">
  <strong>Catatan :</strong> 
  jQuery dan JavaScript Bootstrap3 diperlukan
</div>

</div><!-- close container -->

<!-- jquery dan Bootstrap3 js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.