Belajar Menggunakan Card Part 6 Bootstrap 4 - Tutorial Programming & Digital Marketing

Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Friday, March 8, 2019

Home bootstrap 4 Belajar Menggunakan Card Part 6 Bootstrap 4

Belajar Menggunakan Card Part 6 Bootstrap 4


bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan menjelaskan mengenai Card Pada Bootstrap 4. 

Jadi Fitur Card ini kamu bisa membuat seperti kartu (oh gitu om, makasih loh infonya sangat informatif lol).

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Nah itu penjelasan-Nya om bewok ngerti tapi bingung kalau di translate-in ke bhs indonya. ya intinya bisa buat hmmmmm (UDAH OM LANGSUNG KASIH CONTOHNYA AJA, EMOSI GUE LAMA - LAMA ). 

Lah kok ngegas ? Oke lah om bewok beri contoh aja, tolong masyarakat jangan emosi dulu. 😁😁

Sebelumnya tahap coding kita akan membuat folder terlebih dahulu dengan nama Part 6 Card Bootstrap 4 
 
Gambar 1. Buat Folder Part 6 Card Bootstrap 4

Selanjutnya kita buat file bernama latihan1.html kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Popup Boostrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      .row {
        background: #2980b9;
        color: #fff;
      }

      h2  {
        font-family: 'Times New Roman', Times, serif;
      }
      .btn {
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/codeigniter.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title Codeigniter</h5>
        <p class="card-text">Ini adalah sebuah isi content :)</p>
        <a href="#" class="btn btn-primary">Baca Selanjutnya</a>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>
Maka hasilnya seperti dibawah ini ya
Gambar 2. Hasil latihan1.html
Terlihat di situ ada gambar codeigniter, kamu bisa download gambarnya di github om bewok.

Selanjutnya kita akan membuat card ini menjadi 3 column. ada 2 cara untuk membuatnya yang pertama Card Group Dan Yang kedua Card Deck. Perbedaanya apa om kalau boleh tau ? (SABAR, INI OM KASIH TAU DULU PENJELASANYA)

Lah kok ngegas si om ?? 

(Huft malah dibalikin lagi kata - kata om bewok 😥😥).

Oke Langsung saja kita buat file terlebih dahulu latihan2.html lalu kita buat yang pertama yaitu card-group

Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Popup Boostrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  </head>
  <body>
  <div class="container-fluid">
    <div class="card-group">
      <div class="card">
        <img class="card-img-top" src="img/codeigniter.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="img/express.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="img/newLaravel.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
  </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Hasilnya seperti gambar dibawah ini ya
 
Gambar 3. Hasil dari class card-group latihan2.html

Terlihat di situ ada gambar codeigniter, laravel dll kamu bisa download gambarnya di github om bewok.

Selanjutnya kita buat card-deck, kita buat file terlebih dahulu latihan3.html, 
Kodingan-Nya seperti dibawah ini ya
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Popup Boostrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      .row {
        background: #2980b9;
        color: #fff;
      }

      h2  {
        font-family: 'Times New Roman', Times, serif;
      }
      .btn {
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
      <div class="container-fluid">
          <h1 class="display-5 text-center mb-5">Categories</h1>
          <div class="card-deck mb-5">
            <div class="card">
              <img class="card-img-top img-thumbnail" src="img/codeigniter.png" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Codeigniter</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-secondary">Readmore</a>
              </div>
            </div>
            <div class="card">
                <img class="card-img-top img-thumbnail" src="img/images.png" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Laravel</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-secondary">Readmore</a>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top img-thumbnail" src="img/express.png" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Express js</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-secondary">Readmore</a>
                </div>
            </div> 
          </div>
        </div>  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>
Hasilnya seperti gambar dibawah ini ya
 
Gambar 4. Hasil menggunakan class group-desk latihan3.html

Terlihat di situ ada gambar codeigniter, laravel dll kamu bisa download gambarnya di github om bewok. 
Oke selanjutnya kita akan melanjutkan template yang sudah kita buat di tutorial sebelumnya, jadi yang belum tau, kamu bisa ikutin tutorial ini di bawah ini ya, om kasih daftar tutorialnya 


Oke mari kita tambahkan kodingan-Nya ya. oh iya kita menggunakan card-deck ya, kenapa ? ya gapapa om bewok lebih suka aja, tapi kalau kamu mau nyoba pake card-group seperti latihan2.html dipersilahkan jugal loh.
Kodingan-Nya seperti dibawah ini ya

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Card Bootstrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <style>
      h2  {
        font-family: 'Times New Roman', Times, serif;
      }
      .btn {
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
      <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="#">bewoksatukosong</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto my-2 my-lg-0">
              <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">About us</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Blog</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Contact us</a>
              </li>
              <li class="nav-item mr-2">
                  <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#kampret">Signup</a>
              </li>
              <li class="nav-item mr-2">
                  <a class="nav-link btn btn-dark" href="#" tabindex="-1" data-toggle="modal" data-target="#free">Login</a>
              </li>
          </ul>
        </div>
      </nav>
    <div class="jumbotron jumbotron-fluid bg-dark">
      <div class="container">
        <h1 class="display-4 text-center text-light">Pencarian Artikel</h1>
        <p class="lead text-center text-light">Kamu bisa mencari artikel apapun yang kamu mau.</p>
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Cari Artikel" aria-label="Recipient's username" aria-describedby="basic-addon2">
            <div class="input-group-append">
              <button class="btn btn-dark" id="search">Search</button>
            </div>
          </div>
      </div>
    </div>
    <div class="container-fluid">
      <h1 class="display-5 text-center mb-5">Categories</h1>
      <div class="card-deck mb-5">
        <div class="card">
          <img class="card-img-top img-thumbnail" src="img/codeigniter.png" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Codeigniter</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-secondary">Readmore</a>
          </div>
        </div>
        <div class="card">
            <img class="card-img-top img-thumbnail" src="img/images.png" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Laravel</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-secondary">Readmore</a>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top img-thumbnail" src="img/express.png" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">Express js</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-secondary">Readmore</a>
            </div>
        </div> 
      </div>
    </div>     
     <div class="container-fluid">
      <!-- Example row of columns -->
      <div class="row p-5 bg-dark text-light">
        <div class="col-md-12">
            <h1 class="display-5 text-center mb-5">Article</h1>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Express js</h2>
          <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4. 
              Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p> 
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Laravel</h2>
          <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan       emoji. om bewok tidak tau apakah ini resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
              tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
               </p>
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Cara Install Codeigniter 2018</h2>
          <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
          Kamu kunjugi website https://www.codeigniter.com/download.</p>
          <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Crud Menggunakan Codeigniter</h2>
            <p>bewoksatukosong.com | Untuk pelajaran pertama yang perlu dilakukan adalah Install Boostrap 4. Ada beberapa cara untuk menginstall boostrap 4. Tapi kali ini om bewok akan memberikan cara install-Nya yang sudah sering digunakan oleh para developer. Ada 2 cara untuk install boostrap 4. 
                Offline : kamu tidak membutuhkan internet untuk meload website tersebut.</p> 
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <h2>Crud Menggunakan Laravel</h2>
            <p>bewoksatukosong.com | Emoji sudah menjadi hal yang umum bagi pengguna handphone android iphone, dan laptop apple. Tapi ternyata windows juga tidak mau kalah untuk mengeluarkan       emoji. om bewok tidak tau apakah ini resmi atau tidak dalam windows, karena dalam pengunaan ini bener-bener
                tricky. kita ga perlu berlama - lama lagi mari kita langsung saja coba
                 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <h2>Crud Menggunakan Express js</h2>
            <p>bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan share ke kamu "Cara Install Codeigniter 2018", gampang banget untuk install codeigniter. oke mari kita mulai cara install nya
            Kamu kunjugi website https://www.codeigniter.com/download.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
      </div>
      <hr>
    </div> <!-- /container -->

    <!-- Modal -->
    <div class="modal fade" id="kampret" tabindex="-1" role="dialog" aria-labelledby="kampret123" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="kampret123">Daftar</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Username</label>
                        <input type="text" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter username">
                      </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Daftar</button>
            </div>
          </div>
        </div>
      </div>

     <!-- Modal -->
     <div class="modal fade" id="free" tabindex="-1" role="dialog" aria-labelledby="free123" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="free123">Login</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Login</button>
            </div>
          </div>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>
Hasilnya seperti dibawah ini ya, jangan lupa kamu perkecil layar-Nya ketika menjalankan-Nya apakah website nya responsive disemua device seperti gambar ini ya.
Gambar 5. Hasil dari lanjutan tutorial sebelumnya

Gambar 6. Responsive Ketika Layar di perkecil
Terlihat di situ ada gambar codeigniter, laravel dll kamu bisa download gambarnya di github om bewok.
 
Selanjutnya kita akan belajar mengenai Form Pada Bootstrap 4. 

Kalau kamu ingin melihat daftar tutorial bootstrap 4 dan source kode-Nya bisa lihat dibawah ini ya.

Tags
Share This
By di
Label:

5 comments:

  1. Dilan DeswaraMay 8, 2019 at 10:20 AM

    nyambungin kedatabase nya gmna gan ?

    ReplyDelete
  2. HarryftrhMay 28, 2019 at 4:11 AM

    Om punyaku gak berurutan ke kanan knp ya

    ReplyDelete
    Replies
    1. bewoksatukosongMay 28, 2019 at 8:40 PM

      coba di copy kodinganya punya om bewok terus paste ke teks editor kamu ya, kabarin kalau masih belum bisa ya

      Delete
  3. HarryftrhMay 28, 2019 at 4:12 AM

    Om punyaku tdk berurut ke kanan kno ya tapai malah kebawah

    ReplyDelete

Subscribe to: Post Comments (Atom)