Kamis, 23 Maret 2017

Bootstrap: Jumbotron


                                      Assalamualaikum wr.wb

1.pendahuluan
      pada kesempatan hari ini saya akan mempost tentang Jumbotron. Jumbotron digunakan untuk menunjukan sebuah kotak besar untuk memangil perhatian ekstra untuk beberapa content khusus atau informasi
2.penjelasan
      sebuah jumbtorn ditampilkan dalam sebuah kotak abu-abu. dengan sudut membulat.hal ini juga membesarkan text didalamnya

contoh:




 nah itulah contohnya

3.kesimpulan
bisa langsung kalian langsung kalian coba agar bisa lihat sendiri hasilnya
ya mungkin itu saja yang bisa saya bagikan kurang lebihnya saya mohon maaf

4.referensi:www.w3schools.com

                                          Wassalamualaikum wr.wb

Rabu, 22 Maret 2017

Bootstrap: Penempatan Javascript Booststrap dan jquery

 
Assalamualaikum wr.wb

1.pendahuluan sekaligus penjelasan       
       kali ini saya akan membagikan penampatan js Bootstrap
hal ini kadang diangap tidak penting tapi hal ini mempunyai efect yang penting karena jika salah penempatan efek dalam content pun akan gagal
contoh yang menggunakan Bootsrap js ,dan satu hal selain Bootstrap.js kita jika perlu menambahkan jquery
contoh penggunaan Bootstrap.js dan jquery

  • Affix
  • Allert
  • Button
  • Carousell
  • Collapse
  • Dropdown
  • Modal
  • Popover
  • Scrollspy
  • Tab
  • Tolltip
2. Penulisanya
   di dalam pembuatan jquery di bootstrap kta cukup tuliskan perintah untuk memanggil jquery tersebut sehingga akan di eksekusi oleh bootsrap.

nah di atas ini adalah penulisan sintak yang benar dalam pemanggilan jquery adalah penulisanya

3.keterangan:

  • jquery.min.js ditulis dahulu sebelum Bootstrap.js
  • pemanggillan melalu <script>
  • pemanggilan di dalam tag head
4.kesimpulan
    Dari contoh dan kegiatan di atas kita dapat menyimpulkan bahwa mempercantik wesite dan untuk menjadikan website itu hidup ialah dengan cara memanggil jquery nah di jquery ini sangatlah banyak manfaatnya selain bisa memperindah juga dapat membentuk website menjadi dinamin tanpa perlu ada sentuhan dari php.


mungkin itu saja yang bisa saya bagikan semoga bermanfaat

Wassalamualikum wr.wb

Selasa, 21 Maret 2017

Bootstrap Scrollspy

Assalamualaikum Wr.Wb


1.pendahuluan sekaligus penjelasan
        Lagi - lagi bootstrap dan kali ini saya akan membahas Scrollspy,yaitu misalkan kita mempunyai navbar dan bila kita klik salah satu menu dari navbar tersebut kita bisa langsung menuju isi menu tanpa berpindah halaman,ini prinsipnya hampir sama dengan Name Anchor.Baiklah dari pada pusing - pusing karna saya juga bingung mau menjelaskan yang bagaimana lagi mari kita mulai hehe.
2.Alat dan Bahan
  • Pc atau Laptop
  • file bootsrap
  • sublime text
  • browser
3.langkah pembuatan
  • masukkan scrip untuk memanggil bootstrap
tuliskan scrip di antara  <head> dan </head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  • Buat stylenya agar lebih menarik
tuliskan scrip style di antara <head> dan </head>

<style>
      body{
          position: relative;

      }

      #menu1{padding-top: 55px;height: 500px;color: #fff;background-color: #1e88e5;}
      #menu2{padding-top: 55px;height: 500px;color: #fff;background-color: #ff00ff;}
      #menu3{padding-top: 55px;height: 500px;color: #fff;background-color: #00cc66;}
      #menu41{padding-top: 55px;height: 500px;color: #fff;background-color: #0099ff;}
      #menu42{padding-top: 55px;height: 500px;color: #fff;background-color: #009999}
  </style>

  • Lalu kita buat scrollspy ini saya terapkan pada navbar

 <body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                      
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#menu1">Menu1</a></li>
          <li><a href="#menu2">Menu2</a></li>
          <li><a href="#menu3">Menu3</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu4 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#menu41">Menu4-1</a></li>
              <li><a href="#menu42">Menu4-2</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="menu1" class="container-fluid">
    <h1>Menu 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu1-->
<div id="menu2" class="container-fluid">
    <h1>Menu 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
</div><!--menu2-->
<div id="menu3" class="container-fluid">
<h1>Menu 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--menu3-->
<div id="menu41" class="container-fluid">
    <h1>Submenu 4.1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--submenu 4.1-->
<div id="menu42" class="container-fluid">
    <h1>Submenu 4.2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>

Dan hasilnya seperti berikut



Setelah menu lain di klik maka akan berpindah konten tanpa berpinda halaman



Menu Dropdown


  
Setelah Dropdown di klik



Jika di lihat dari dari mode responsive


4.penjelasan
          Itu tadi sedikit mengenai bootstrap scrollspy semoga bermanfaat walaupun mungkin penjelasan saya masih belum mudah untuk di pahami untuk itu mohon maaf atas kekurangannya,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

5.Referensi:

Wassalamualaikum Wr.Wb

Senin, 20 Maret 2017

Bootstrap Affix



Assalamualaikum Wr.Wb

1.pengertian
    Pada postingan kali ini saya akan menjelaskan tentang bootstrap Affix,apa itu bootstrap affix yaitu misalnya ada sebuah navbar yang letaknya tidak persis di atas agak di bawah konten header misalnya,lalu jika di scroll ke atas sampai navbar tersebut sudah sampai di ujung atas maka navbar itu akan fixed.Baiklah mari kita mulai saja.
2.Alat dan bahan
  • Pc atau Laptop
  • format file bootstrap
  • sublime text
  • Browser
3.langkah pembuatan
  • Tuliskan script di bawah,script ini sudah saya ubah sedikit stylenya dengan css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
      .affix{
          top: 0;
          width: 100%;
      }
      .affix + .container-fluid{
          padding-top: 70px;
      }
  </style>
</head>
<body>
<div class="container-fluid" style="background-color: #009900; color: #fff; height:200px;">
<h1>Contoh Bootstrap Affix</h1>
<h3>Scroll untuk melihat contoh affix</h3>   
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
    <li class="active"><a href="#">Blog Amatir</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
</ul>   
</nav>
<div class="container-fluid" style="height: 1000px">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>

2.Berikut hasilnya sebelum di scroll ke bawah

 
3.bila di scrool ke bawah hasilnya kan seperti ini.
 

      Ya itu tadi sedikit mengenai Affix semoga bermanfaat, walaupun masih banyak kekurangan  sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.

4.Referensi:

Wassalamualaikum Wr.Wb 

Sabtu, 18 Maret 2017

mengatasi "Could not refresh the list of update" pada linux mint

Assalamualaikum Wr.Wb.

hay kawan kali ini saya akan bercerita tentang bagaimana mengatasi update manager yang error.


1.Pengertian
  Update manager adalah sebuah aplikasi yang berfungsi untuk men-update aplikasi,paket paket data dan sistem sistem.update manager memberikan kemudahan bagi pengguna untuk mengupdate atau mengupgrade data.

2.maksud dan tujuan
    karena update manager saya error dan itu menyebabkan linux mint saya tidak bisa di update.

3.alat dan bahan
  • laptop
  • koneksi internet
4.jangka waktu
 kurang lebih 10 menit tergantung kecepatan koneksi internet
5.langkah kerja
  •  pertama kita buka terminal dan masuk ke super user
  •  lalu kita hapus file updatenya dengan memasukan perintah
 rm /var/lib/apt/lists/* -vf

  • lalu coba kita update

  • kemudian kita buka update managernya dan coba kita refresh,jika muncul seperti dibawah ini berarti sudah selesai.


nah sampai disini dulu cerita saya tentang mengatasi update manager error

Wassalamualaikum Wr.Wb.
sumber refrensi
dari hasil otak atik sendiri

Jumat, 17 Maret 2017

Mengenal Website Sekolah Dengan Menggunakan mysch.id






 asalamualaikum wr.wb
kali ini saya ingin memberikan sedikit ilmu tentang pembuatan website secara onlinemungkin website ini sangatlah mudah di dengar tapi sulit untuk menjalankan alangkah baiknya kita lebih mengenal lebih rinci akan program web sekolah yang berintegrasi mysch.id.
1.pengertian
mysch adalah sebuah program open sorce yang di peruntutkan untuk sekolah sekolah yang ada di indonesia,pada dasarnya wesite ini sudah banyak di  buat oleh sekolah sekolah yang maju.
2.latar belakang
mungkin untuk program mysch ini,ita dapat mempermudah dalam pemuatan website sekolah dengan praktis,tapi alangkah praktisnya jika disign webnya di buat sendiri.
3.alat dan bahan

  • koneksi internet
  • pc atau laptop
  • browser
4.cara membuat mysch
untuk membuat program my sch ada beberapa ketentuan jika kita ingin mengapgrade program mysch ini kita di kenai sebuah tarif pertahunnya.
  1. Buka browser dengan mengetik "mysch.id"

   2.kita masuk ke website resminya mysch terlebih dahulu.


   3.jika sudah masuk kita langsung saja buat sekarang.

        pada gambar di atas ada banyak pilihan yang mungkin agak terkejut dengan pilihannya tetapi kalok kita masih mencoba coba saya sarankan untuk memakai yang gratis saja tetapi kalok sudah untuk sekolah resmi saya sarankan jangan pakek yang grtais tapi sudah menggunakan yang prabayar, agar lebih banyak mengakses program di dalmnya,
   
    4.kita pilih yang gratis terlebih dahulu dengan memberikan nama domain sebuah sekolah.

   
   5.jika di cek nama domain berhasil kita lanjut untuk mengisi formulirnya.

    
    6.setelah kita isi akan muncul pilihan tema nah disini bebas mau pilih tema yang mana saja sesuai selera anda.


      7.jika sudah memilih dan klik thema yang sesuai kalian akan di hadapkan perinatah seperti ini dikala sudah sukses dalam pembuatan website mysch.

     8.jika sudah berhasil tinggal kita masuk ke adminnya caranya ialah kita lihat di email kita karna alamat admin dan username tarcantum disana.

     9.setelah kita mengetahui alamat admin serta username and passwordnya kita langsung masuk ke halaman admin.

     10.jika kita sudah masukkan username dan password yang benar tampilannya akan seperti ini di dashbord.


     11. untuk melihat website yang sudah kita buat kita bisa lihat langsung dengan megetikkan url yang sudah kita buat tadi.


5.kesimpulan
 ternyata untuk membuat website itu tidak perlu menetik coding dari awal memberikan akses admin terus kita membeli sebuar domai,itu mungkin di gunakan dulu tetapi di saat sekarang di modern it ternyata banyak program web yang sudah open sorce jadi kita tidak perlu membuat website dari nol atau dengan mengoding dari awal dari mulai tampilan syestemnya dan sebagainya.
6.refrensi
  • http://mysch.id/
mungkin hanya ini dulu ya kawan kawan semoga bermanfaat untuk ilmu pembuatan website sekolah kalian tetap optimis agar bisa meraih cita cita kalian smk bisa......

Kamis, 16 Maret 2017

Membuat Slideshow / Carousel gambar dengan Boottsrap



Assallamuallaikum Wr Wb ,.
       Halo kawan kawan di kesempatam kali ini saya akan sedikit berbagi tutorial tentang Membuat Carousel / Slideshow gambar dengan bootstrap. Pembuatan slide show ini sangatlah mudah apabila kita megerti parameter apa yang harus kita panggil dari bootstrap.

      Di bawah ini adalah nama class dan fungsinya yang digunakan untuk membuat Slideshow atau Carousel :
  • <div id="myCarousel" class="carousel slide" data-ride="carousel"> pemanggilan carousel slide dari file bootstrap
  • class="carousel-indicators" mengindikasi carousel 
  • data-target="#myCarousel" memanggil myCarousel  
  • data-slide-to="1" melakukan slide urut dari gambar 1
  • class="left carousel-control" sebagai control dari slideshow carousel
      Sebeleum memulai membuat slideshow / carousel letakkan gambar yang akan di jadikan bahan slideshow dalam satu directory.


Di bawah ini adalah contoh script caraousel / slideshow yang saya buat :

<!DOCTYPE html>
<html>
<head>
    <title>Carousel Bootstrap  </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>    
    <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
             width: 100%;
             margin: auto;
        }
        h1 {
            font-family: raleway;
            color: #20B2AA;
        }
    </style>
</head>

<body>
<div class="container">
  <center>
  <h1>SlideShow Gambar / Caraousel Bootstrap </h1>
  </center>
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>


    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="gambar/1.jpg" alt="Gambar1" width="1000" height="400">
      </div>

      <div class="item">
        <img src="gambar/2.jpg" alt="Gambar2" width="1000" height="400">
      </div>
    
      <div class="item">
        <img src="gambar/3.jpg" alt="Gambar3" width="1000" height=400>
      </div>

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
  </div>
</div>
</body>
</html>  


       Dalam penggunaan carousel / slide show bootstrap akan menjadi otomatis responsive pada saat di buka di perangkat/media lain yang ukuranya lebih kecil maka akan otomatis menyesuaikan .

  • KESIMPULAN
       Dengan adanya class carousel pada Bootstrap ini kita dimudahkan untuk membuat carousel / slideshow karena kita tinggal memanggil class Bootstrap dan memahami arti dari setiap class tersebut. hmm tetapi menurut saya dibandingkan dengan class Bootstrap yang lain carousel ini yang paling susah dari pada membuat class Bootstrap yang lain.
wassalamualaikum.wr.wb

Rabu, 15 Maret 2017

Membuat Form dengan Bootstrap


Assallamuallaikum Wr Wb .

       Halo kawan kawan , pada kesempatan kali ini saya akan melanjutkan pembahasan / tutorial penggunan Bootstrap. Pada kali ini kita akan membuat form / formulir menggunakan Bootstrap. Dalam membuat form dengan bootstrap maka tampilan dari form aka menjadi lebih menarik dan responsive.

      Dalam membuat form dengan bootstrap kita tinggal memanggil parameter parameter yang sudah di sediakan oleh bootstrap. Di ba wah ini adalah contoh dari parameter parameter yang saya gunakan dalam membuat form dengan bootstrap kali ini:
  • class="form-group" digunakan untuk membuat group dari form
  • input type diguanakan untuk memilih dari tipe inputan
  • class="checkbox" diguanakan untuk inputan tipe checkbox
  • class="radio-inline" Digunakan untuk membuat input type radio dalam satu baris.
  • class="btn btn-success" untuk membuat button.
Di bawah ini adalah script dari contoh form yang saya buat menggunakan bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Formulir Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css " href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style type="text/css">
      blockquote {
        font-size: 15px;
      }
      .container {
        font-family: raleway;
      }
  </style>
</head>
<body>
<div class="container">
  <h1><center>Formulir dengan Bootstrap</center></h1>
  <br>
  <div class="form-group">
    Nama : <input type="text" name="nama" class="form-control" placeholder="Nama Lengkap"> 
  </div>
  <div class="form-group">
    Tgl Lahir : <input type="text" name="nama" class="form-control" > 
  </div>
  <div class="form-group">
    Alamat : <textarea class="form-control" rows="5" id="alamat" placeholder="Alamat"> </textarea>
  </div>
  Pilih Jurusan :
  <blockquote>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Rekayasa Perangkat Lunak 
  </div>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Teknik Pemesinan
  </div>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Teknik Ototronik
  </div>
  <div class="checkbox">
     <input type="checkbox" name="jurusan"> Teknik Pembuatan Kain
  </div>
  </blockquote>
  Jenis Kelamin :
  <br>
  <div class="radio-inline">
    <input type="radio" name="kelamin"> Laki-Laki
  </div> 
  <div class="radio-inline">
    <input type="radio" name="kelamin"> Perempuan
  </div>
  <br>
  <br>
  <div class="form-group">
  Tahun Lulus : 
      <select class="form-control" > 
        <option>2011/2012</option> 
        <option>2012/2013</option> 
        <option>2013/2014</option> 
        <option>2014/2015</option> 
        <option>2015/2016</option> 
      </select>
  </div>
  <center>
  <button type="button" class="btn btn-success">Kirim</button>
  <button type="button" class="btn btn-danger">Batal</button>
  </center>
</body>
</html>


Hasil run di browser
      Karna form ini menggunakan bootstrap maka form akan bersifat responsive. Ketika di bukak di perangkat yang tampilanya lebih kecil maka otomatis menyesuaikan. seperti gambar di bawah ini.


  • KESIMPULAN 
      Bootstrap telah menyediakan class form yang responsive dan terlihat modern dan kita tinggal mengkreasikanya sesuai kita. Dan kita tidak memerlukan class yang begitu rumit dan sudah saya paparkan diatas.
wassalamualaikum.wr.wb

Selasa, 14 Maret 2017

HTML : Mengenal Class & Id pada HTML



                                                  asalamualaikum .

          Class dan ID, sesuai dengan yang dijelaskan pada tutorial seebelumnya di belajar HTML : Menghubungkan HTML Dengan CSS dijelaskan bahwa class dan id sangat penting. leh sebab itu pada tutorial kali ini akan dijelaskan apa itu Class dan ID pada HTML, dan apa perbedaan antara class dan id pada HTML.

          Class dan ID bisa dibilang sebagai penanda pada HTML, maksud penanda disini adalah element - element HTML dapat diberi tanda dengan class dan id . Untuk apa diberi tanda? agar dapat di manipulasi menggunakan css dan javascript. Bayangan sederhananya jika sobat memiliki 5 buah kotak, semua kotak yang sobat miliki warna biru,  kemudian sobat ingin merubah kotak ke 3 saja tanpa mengganti yang lain. Disinilah kita menggunakan Class dan ID, untuk memberikan tanda atau nama pada kotak sobat agar bisa diubah dan kotak yang lain tidak akan berubah.

1.MENGENAL CLASS DAN ID PADA HTML
          Perbedaan dari class dan id adalah class dipanggil pada CSS atau Javascript dengan menggunakan tanda titik ".", dan id dipanggil pada CSS atau Javascript dengan tanda pagar "#", ada kelebihan disini untuk class, yaitu class dapat diberikan pada banyak element HTML dan dapat dipanggil sekaligus, sedangkan ID hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa diberikan pada satu element saja, perhatikan contoh berikut untuk memberikan pemahaman kepada sobat.

Berikan nama index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML : Mengenal Class & Id pada HTML</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Mengenal Class dan Id pada HTML<br/></h1>
    <!-- contoh penggunaan class -->
    <div class="kotak">kotak 1</div>
    <div class="kotak">kotak 2</div>
    <div class="kotak">kotak 3</div>
    <!-- contoh penggunaan id -->
    <div id="kotak">Kotak 4</div>
</body>
</html>
Buat file dengan nama style.css

h1{
    color: red;
    font-family: sans-serif;
    text-align: center;
}

.kotak{
    padding: 50px;
    width: 100px;
    color: #fff;
    margin: 10px;
    background: pink;   
}

#kotak{
    width: 400px;
    color: #fff;
    background: green;
    padding: 50px;
}


          Perhatikan contoh diatas, kotak 1, kotak 2 kita beri tanda dengan class yang kita beri nama "kotak", dan kotak 4 kita beri tanda id yang beri nama kotak juga. maka perbedaanya disini akan tampak, bahwa class bisa dipanggil banyak sekaligus, ini dibuktikan kotak 1 dan dua 2 diberi tanda class yang sama yaitu kotak, dan kotak 3 kita ber tanda dengan id kotak. Perlu diingat class dipanggil dengan tanda titik "." dan id dipanggil dengan tanda pagar "#" . Sekian penjelasan terakhir Belajar HTML semoga bermanfaat sebagai bahan belajar kawan semua. Sekian dan Terima Kasih

REFERENSI : www.malasngoding.com

wasalamualikum

Senin, 13 Maret 2017

CSS : Pseudo Class

Assallamualikum
         kawan , disini saya akan sedikit berbagi post tentang pembuatan pseudo class dengan css.

1.PENGERTIAN 
        Pseudo Class dalam CSS digunakan untuk  menentukan keadaan khusus dari suatu unsur.

2.ALAT & BAHAN

  1. Pc /Laptop
  2. Sublime Text
  3. Browser
         Kali ini saya akan membuat file html yang akan membuat button hover dan tulisan yang apabila kursor di tempatkan pada tulisan itu maka akan muncul notifikasi di bawahnya.

buat file html , dan masukan css di dalam tabel
!DOCTYPE html>
<html>
<head>
    <title>CSS Pseudo Kelas</title>
    <style type="text/css">
    h1 {
        font-family: raleway;
        color: red;
        text-align: center;
    }
    button {
        background-color: blue;
        text-align: center;
        font-family: raleway;
        font-size: 15px;
        padding: 20px 50px;
    }
    button:hover{
        background-color: green;
    }
    p {
        font-family: raleway;
        display: none;
        background-color: yellow;
        padding: 20px;
    }

    div:hover p {
        display: block;
    }
    </style>
</head>
<body>
<center>
<h1> Belajar CSS Pseudo </h1>
<br>
<br> <button class="button"> Arahkan Kursor ke sini </button>
<br>
<br>
<br>
<div> Arahkan kursor anda pada tulisan ini !
    <p> Jeng Jeng , Saya akan muncul ! </p>
</div>
</center>
</body>
</html>

Maka saat kita run di browser dan kursor kita arahkan pada button dan tulisan yang terjadi adalah akan seperti gambar di bawah ini :



3.KESIMPULAN :
        Pada penggunaan Pseudo Class biasanya digunakan unuk memberi notifikasi / keterangan  tentang tulisan yang yang kurang jelas. Dengan cara mengarahkan kursor ke tulisan tersebut.

wasalamualaikum

Sabtu, 11 Maret 2017

CSS : Membuat Animasi Loading dengan CSS3



Assallamuallaikum Wr Wb
          Pada kesempatan kali ini saya akan sedikit berbagi tentang materi yang telah saya pelajari yaitu Membuat Animasi Loading dengan CSS3. Dalam pembuatan animasi loading kali ini saya membuat dengan CSS External yitu CSS yang berada di luar file HTML.

1.PENGERTIAN
         Animasi loading adalah suatu animasi untuk menunggu proses untuk masuk ke url atau web lain agar terlihat tidak membosankan.

2.ALAT & BAHAN :
  • PC / Laptop
  • Text Editor
  • Browser
3.LANGKAH PEMBUATAN :
        Dalam pembuatan animasi loading kali ini kita buat dua file yang pertama yaitu CSS nya dan yang ke dua yaitu HTML nya:

Membuat CSS untuk animasi loading :
body{
  background: #28324E;
  font-family: raleway;
}

h1{
  color: #fff;
  width: 600px; 
}
/*loading pertama*/
.loading,
.loading:before,
.loading:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loading:before,
.loading:after {
  position: absolute;
  top: 0;
  content: '';
}
.loading:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loading {
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loading:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #ffffff;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em #ffffff;
    height: 5em;
  }
}
/*akhir loading pertama/

/*loader 2*/
.loading2 {
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;
  }
  12.5% {
    box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 0 #ffffff, 2em 2em 0 0.2em #ffffff, 0 3em 0 0em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  50% {
    box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 0em #ffffff, 0 3em 0 0.2em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0 #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 0 #ffffff;
  }
  12.5% {
    box-shadow: 0 -3em 0 0 #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0 0 0 #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em #ffffff, 2em -2em 0 0 #ffffff, 3em 0 0 0.2em #ffffff, 2em 2em 0 0 #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 0 #ffffff, 2em 2em 0 0.2em #ffffff, 0 3em 0 0em #ffffff, -2em 2em 0 -1em #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  50% {
    box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 0em #ffffff, 0 3em 0 0.2em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 -1em #ffffff, -2em -2em 0 -1em #ffffff;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 0 #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0 0 0 #ffffff, -2em -2em 0 -1em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0 -1em #ffffff, 2em -2em 0 -1em #ffffff, 3em 0em 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0 #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0 0 #ffffff, 2em -2em 0 -1em #ffffff, 3em 0 0 -1em #ffffff, 2em 2em 0 -1em #ffffff, 0 3em 0 -1em #ffffff, -2em 2em 0 0 #ffffff, -3em 0em 0 0 #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}
/*akhir loading ke2*/

/*loading 3*/
.loading3:before,
.loading3:after,
.loading3 {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loading3 {
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loading3:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loading3:after {
  left: 3.5em;
}
.loading3:before,
.loading3:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #ffffff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #ffffff;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #ffffff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #ffffff;
  }
}
/*akhir loading3*/
       Lalu simpan sintag di atas dengan nama file style.css, lalu buata file baru dengan format HTML.
<!DOCTYPE html>
<html>
<head>
    <title>Membuat Animasi Loading Dengan CSS3 </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <center>      
        <h1>Membuat Animasi Loading Dengan CSS3</h1>  
    </center>

    <div class="loading">Loading..</div>      

    <div class="loading2">Loading..</div>

    <div class="loading3">Loading..</div>

</body>
</html>
        Setelah selsai simpan dengan format html. dan letakkan dua file tadi yaitu css dan html dalam satu folder.


         Kalo sudah selesai run file html di browser kawan kawan jika tidak terjadi eror maka akan tampil seperti gambar screenshot di bawah ini, jika di run di browser maka akan bergerak karna merupakan animasi.

         Ok sekian dulu post kali ini dari saya , apabila ada kesalahan saya mohon maaf. Sekian dan Terima Kasih.
wasalamualaikum