Cara Mengubah Huruf Kapital (Case) menggunakan CSS

alphabet-upper-and-lower-b&w-mdMas Pram – Kali ini saya akan membahas mengenai bagaimana caranya merubah huruf kapital (Case) menggunakan CSS. Namun dalam pembahasan lebih detailnya kita akan merubah teks kapital menjadi huruf kecil semua, dan sebaliknya. Bagaimana caranya? Berikut ini penjelasannya:

 

Contoh penggunaan di HTML


Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Script/Kode CSS untuk merubah huruf kapital


p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Demo

Advertisements

Membuat Breadcrumb Menggunakan Bootstrap

MasPram – Assalamualaikum, semoga pembaca dalam keadaan sehat selalu. Kali ini saya akan membahas mengenai Bootstrap, namun lebih spesifiknya kali ini saya akan membahas bagaimana membuat breadcrumb navigator menggunakan bootstrap. Berikut ini cara membuatnya :

Breadcrumb-bootstrap

  • Tambahkan seperti dibawah ini untuk memanggil file javascript dan css bootstrap
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  • Tambahkan Script dibawah ini dalam tag <body> </body>
<div class="bs-example">
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a></li>
	<li class="active">Accessories</li>
</ul>
</div>
  • Tambahkan css dibawah ini di datam tag <head></head>
.bs-example{
margin: 20px;
}
  • Simpan dan jalankan File

 

Download | Demo

Semoga bermanfaat 🙂

Mengenal Ionic Framework

ionic-guide

MasPram – Semoga pembaca dalam keadaan sehat selalu, amin. Kali ini saya akan membahas mengenai Ionic Framework. Apa sih Ionic Framework? mungkin dari namanya kelihatannya merupakan nama minuman. Bukan, ionic bukan nama sebuah minuman melainkan sebuah framewok yang dikhususkan untuk membangun aplikasi mobile hybrid dengan HTML5, CSS dan AngularJS. Ionic menggunakan Node.js SASS, AngularJS sebagai engine-nya. Ionic dilengkapi dengan komponen-komponen CSS seperti button, list, card, form, grids, tabs, icon dan masih banyak lagi. Selain itu memungkinkan aplikasi dapat berjalan dibeberapa platform smartphone. Jadi Ionic itu merupakan teknologi web yang bisa digunakan untuk membuat suatu aplikasi mobile. Karena hybrid maka aplikasi hanya dibuat 1 kali tetapi sudah bisa dirilis di lebih dari 1 platform alias cross-platform.

Kelebihan

  • Mempersingkat waktu pembuatan dan pengambangan.
  • Gratis dan bebas digunakan untuk kepentingan pribadi maupun komersil.

Kekurangan

  • Masih sebatas framework, jika untuk membungkusnya menjadi aplikasi Android, iOS atau windows phone tetap menggunakan Phonegap

Cara menggunakan Ionic Framework

  • Untuk mempelajari lebih lanjut ionic framework dapat mengunjungi situs resminya di Ionic Framewok
  • Install terlebih dahulu Git For Windows dan opisional console [Disini]
  • Install terlebih dahulu Node.js  [Disini]
  • Buka CMD atau Command Prompt. Cek apakah sudah terinstall node.js atau belum. Ketikkan node -v

nodecek

  • Cek NPM (Node Package Manager). Ini sudah terinstall bersamaan dengan install nodejs. Tools ini akan sangat membantu saat menambahkan module nodejs akan terinstall secara default di C:\Program Files\nodejs\node_modules\npm\bin.
    Ketikkan npm -v di CMD

npmcek

  • Ketikan npm install –g cordova kemudian enter, Tunggu sampai proses install cordova selesai dan ini membutuhkan koneksi internet. Jika seudah selesai buka cmd dan cek cordova
  • Ketikan npm install –g ionic kemudian enter, Tunggu sampai proses install cordova selesai dan ini membutuhkan koneksi internet. Jika seudah selesai buka cmd dan cek ionic
  • Selanjutnya jalankan ionic menggunakan CMD, ketikkan seperti dibawah ini

ionicstart

  • Akan otomatis membuat folder myapp di desktop anda

des

  • Selanjutnya jalankan file project yang sudah terbuat tadi seperti dibawah ini, secara otomatis akan muncul di webbrowser anda.

ionicmyapp

myfirstapp

 

Sekian dan terimakasih, semoga bermanfaat 🙂

Membuat Checkbox Dapat Dipilih semua Menggunakan Javascript

csAssalmualaikum, semoga pembaca dalam keadaan sehat selalu. Kali ini saya akan membahas bagaimana cara membuat checkbox dapat dipilih semua. Terkadang kita melihat di beberapa halaman online ataupun menginstall aplikasi terdapat pilihan pilih semua. Bagaimana cara membuatnya? Berikut ini langkah-langkahnya.

  • Buat file HTML di notepad, dreamweaver, sublime ataupun visual studio juga boleh. Copas source code dibawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pilih semua</title>
<script>
 function getcheckboxes() {
            var node_list = document.getElementsByTagName('input');
            var checkboxes = [];
            for (var i = 0; i < node_list.length; i++) {
                var node = node_list[i];
                if (node.getAttribute('type') == 'checkbox') {
                    checkboxes.push(node);
                }
            }
            return checkboxes;
        }
        function pilihsemua(source) {
            checkboxes = getcheckboxes();
            for (var i = 0, n = checkboxes.length; i < n; i++) {
                checkboxes[i].checked = source.checked;
            }
        }
</script>
</head>

<body>
<div class="container">
<input type="checkbox" name="foo1" value="bar1">
Checkbox 1

<input type="checkbox" name="foo2" value="bar2">
Checkbox 2

<input type="checkbox" name="foo3" value="bar3">
Checkbox 3

<input type="checkbox" name="foo4" value="bar4">
Checkbox 4


<input type="checkbox" onclick="pilihsemua(this)" />
Pilih Semua

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

Untuk lebih jelasnya

Demo | Download

Membuat Efek Accordion/Collapse Dengan Bootstrap

Assalamualaikum, semoga dalam keadaan sehat selalu pembaca. Kali ini saya akan membahas  bagaimana caranya membuat efek atau konten collapse menggunakan bootstrap.

Tampilan standar jika di klik tombol View Details maka akan muncul konten yang akan dimunculkan.

collapse1collapse2

Bagaimana membuatnya? Anda dapat copy paste source code dibawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu Collapse</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class=container>
<div class="row">
<div class="collapse-group">
<h2>Heading</h2>
<h2 class="collapse" id="viewdetails">Duniagama.wordpress.com</h2>
<a class="btn btn-info" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a></div>
</div>
</div>
</body>
</html>

Download : [Mediafire] [Dropbox]

Demo

Semoga bermanfaat

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

Cara menampilkan dan mengatur datepicker bootstrap hanya Bulan dan Tahun saja

Assalamualaikum, Pada postingan sebelumnya telah dibahas tentang menampilkan hanya tahun saja [disini], kali ini saya akan membahas bagaimana cara menampilkan datepicker bootstrap hanya yang ditampilkan tahun dan bulan saja. Yang semulanya datepicker menampilkan tampilan kalender pada umumnya, kali ini hanya tahun dan bulan saja.Monggo diperhatikan, kemudian dipraktekkan.

Tambahkan script dibawah ini pada script code javascript untuk memanggil datepicker bootstrap:

$("#datepicker").datepicker( {
   format: 'MM yyyy',
                viewMode: "months",
                minViewMode: "months",
                autoClose: true
});

month year bootstrap

Untuk lihat hasilnya : Demo

Semoga bermanfaat 🙂

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

 

HTML, Membuat Progress Loading Bar Seperti Youtube atau Bukalapak.

Assalamualaikum, semoga dalam keadaan sehat selalu. Kali ini saya akan membahas bagaimana cara membuat progress loading bar seperti di youtube ataupun bukalapak. Apa itu progress loading bar? Saya jelaskan dengan penampakan dibawah ini saja ya. Itu loh yang garis berwarna merah berjalan saat membuka video ataupun konten.

youtube loading

Bagaimana cara membuatnya? Perhatikan langkah berikut ini.

  • Buka file html anda, copy dan paste script dibawah ini didalam <Head> disini </head> atau diatas tag <body>
 //<![CDATA[
var Nanobar = function () {
var c, d, e, f, g, h, k = { width: "100%", height: "3.5px", zIndex: 9999, top: "0" }, l = { width: 0, height: "100%", clear: "both", transition: "height .3s" }; c = function (a, b) { for (var c in b) a.style[c] = b[c]; a.style["float"] = "left" }; f = function () { var a = this, b = this.width - this.here; 0.1 > b && -0.1 < b ? (g.call(this, this.here), this.moving = !1, 100 == this.width && (this.el.style.height = 0, setTimeout(function () { a.cont.el.removeChild(a.el) }, 100))) : (g.call(this, this.width - b / 4), setTimeout(function () { a.go() }, 16)) }; g = function (a) {
this.width =
a; this.el.style.width = this.width + "%"
}; h = function () { var a = new d(this); this.bars.unshift(a) }; d = function (a) { this.el = document.createElement("div"); this.el.style.backgroundColor = a.opts.bg; this.here = this.width = 0; this.moving = !1; this.cont = a; c(this.el, l); a.el.appendChild(this.el) }; d.prototype.go = function (a) { a ? (this.here = a, this.moving || (this.moving = !0, f.call(this))) : this.moving && f.call(this) }; e = function (a) {
a = this.opts = a || {}; var b; a.bg = a.bg || "#db3131"; this.bars = []; b = this.el = document.createElement("div"); c(this.el,
k); a.id && (b.id = a.id); b.style.position = a.target ? "relative" : "fixed"; a.target ? a.target.insertBefore(b, a.target.firstChild) : document.getElementsByTagName("body")[0].appendChild(b); h.call(this)
}; e.prototype.go = function (a) { this.bars[0].go(a); 100 == a && h.call(this) }; return e
}();
var nanobar = new Nanobar(); nanobar.go(30); nanobar.go(60); nanobar.go(100);
//]]>

 

  • Jika ingin merubah ukurannya ubah nilai pada height: “3.5px” dan warna pada “#db3131”

Semoga bermanfaat dan terimakasih atas kunjungannya 🙂

 

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }