tRikSonic
Tema
  • Original
  • Translate
/ / Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia

Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 05.40
/ / Bootstrap 3 Button Group - Tutorial Bootstrap Indonesia

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.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.