Menerapkan Bootstrap

di Halaman Website
dengan Cara Coding

Untuk penggunaan bootstrap ini, saya membahas untuk kebutuhan

Joomla2.5.Sayatidakakanmembahasbanyakextensionpadabukuini.
Dalam buku ini hanya akan dibahas 1 extension saja. Silakan Anda
mencari melalui website Joomla extension lainnya yang berkaitan
denganbootstrapuntukJoomla.

Joomla Extension Directory - http://extensions.joomla.org

A. Menginstal Bootstrap Extension

Jika theme yang Anda gunakan sudah memiliki bootstrap maka tidak
perlu lagi menginstal bootstrap. Namun, jika belum maka Anda harus
7

menginstal bootstrap. Untuk Joomla 3.0 sudah tersedia bootstrap di

dalamsistemnya,sehinggabisalangsungdigunakan.
Berikut ini cara menginstal extension. Gunakan cara yang sama setiap
kaliAndainginmenginstalsebuahextensionkedalamJoomla.

Masukkemenu

Mulai Menginstal Extension

Klikmenu

Andaakanmelihatmenuupload.Silakanpilihfilebootstrap1.0.2.zip

yang ada dalam Bonus CD. (Sebaiknya semua file yang ada dalam
BonusCDdipindahkandulukedalamharddiskkomputerAnda.)

Menginstal Extension bootstrap1.0.2.zip

Selanjutnyakliktombol

Tunggusampaiprosesuploaddaninstalselesai.

Berhasil Menginstal Extension

Selanjutnyamasukkedalammenu

Masuk ke Menu Plug-in Manager

Kemudianklik

Ubah

.
.

Penyetingan Detail

Jikasudah,klik

DanAndasudahberhasilmemasangbootstrappadaJoomla2.5.

B. Cara Mengaktifkan Semua Fitur TinyMCE Joomla

Visual Editor
Secara default Joomla menggunakan TinyMCE Visual Editor. Namun
tidaksemuafituryangterkandungdidalamTinyMCEtersebutdiaktifkan.
BerikutinicaramengaktifkansemuafiturvisualeditorJoomla.

Masukkedalam

Klik

UbahFunctionalitymenjadi

AndabisamengubahSkinsesuaidenganseleraAnda.

.
.
.

Penyetingan Basic Options

Pada kolom Prohibited Elements, hapus text yang ada dan ganti
dengankataCMS.

10

Jikasudah,tekantombol

Mengubah Prohibited Elements

C. Cara Menerapkan Bootstrap ke dalam TinyMCE

Visual Editor
Selanjutnyamenerapkanbootstrapyangsudahterinstalkedalamsistem
Joomla2.5.Silakanterlebihdahulubuatartikelbaru.
PertamatamayangAndalihatadalahterjadiperubahanpadatampilan
visualeditor,dimanaadapenambahanfiturfiturpadaTinyMCE.

Penambahan Fitur-Fitur TinyMCE

Selanjutnyamulaimenerapkanbootstrap.Berikutinicaranya:
11

Klikikon

Akankeluarjendelapopupbaru.

Isidengankodedibawahini.

<div class="alert alert-block">

<button type="button" class="close" datadismiss="alert">&times;</button>
<h4>Warning!</h4>
Best check yo self, you're not...
</div>

Memasang Kode Bootstrap

Jikasudah,tekan

Hasil Pemasangan Kode Bootstrap

12

Selanjutnyasimpandanlihathasilnyapadahalamanwebsite.


Terjadi Penambahan Fitur Alert

Anda dapat melihat terjadi penambahan fitur alert. Untuk uji coba
lainnya,Andabisamenggunakankodedibawahinidengancaraseperti
diatas.
<p>
<button class="btn btn-large btn-primary" type="button">Large
button</button>
<button class="btn btn-large" type="button">Large
button</button>
</p>
<p>
<button class="btn btn-primary" type="button">Default
button</button>
<button class="btn" type="button">Default button</button>
</p>
<p>
<button class="btn btn-small btn-primary" type="button">Small
button</button>
<button class="btn btn-small" type="button">Small
button</button>
</p>
<p>
<button class="btn btn-mini btn-primary" type="button">Mini
button</button>
<button class="btn btn-mini" type="button">Mini
button</button>
</p>

Simpanperubahandanlihathasilnyapadahalamanwebsite.

13


Hasil Pemasangan Bootstrap Tombol

Anda dapat melihat terjadi penambahan tomboltombol. Dengan cara

mudah seperti ini, Anda bisa menambahkan fiturfitur tertentu. Anda
bisa mendapatkan kodekode pada website http://getbootstrap.com/
2.3.2/index.html atau melalui http://getbootstrap.com dan kemudian
memodifikasinyauntukkebutuhanAnda.

Selanjutnya masih dalam uji coba, Anda bisa masukkan kode di

bawahini.

Kemudiansimpandanlihathasilnyadalamhalamanwebsite.

<span
<span
<span
<span
<span
<span

class="label
class="label
class="label
class="label
class="label
class="label

label-default">Default</span>
label-primary">Primary</span>
label-success">Success</span>
label-info">Info</span>
label-warning">Warning</span>
label-danger">Danger</span>

Penambahan Kode Label pada Halaman Website

14

D. Membuat Modul Baru untuk Bootstrap

Setelah Anda mengetahui cara memasang bootstrap pada halaman
website, selanjutnya memasang bootstrap pada modul. Namun sebe
lumnya,Andaharusmembuatmodulbaruterlebihdahalu,yaitumodul
kostumHTML.

Masukkemenu

Kemudianklik

Selanjutnyaklik

Akankeluarjendelapopup,selanjutnyaklik

Selanjutnya ada form modul, isi kolom Title dengan nama modul.

.
.

.
.

Misal:TestingBootstrap.

Pada kolom Position, pilih posisi modul sesuai dengan theme yang
digunakan.

Menyeting Modul

MasukkedalamkolomCustomoutput.

Klikikon

.
15

Kemudianisikodedibawahini.

<div class="alert alert-warning alert-dismissable">

<button type="button" class="close" data-dismiss="alert" ariahidden="true">&times;</button>
<strong>Warning!</strong> Better check yourself, you're not
looking too good.
</div>

Jikasudah,kliktombol

Danlihathasilnyapadahalamanwebsite.

Hasil Pemasangan Bootstrap Alert Code

Dengan menggunakan bootstrap seperti ini, Anda bisa bermainmain

dengan pemrograman Javascript namun tanpa harus terlibat dalam
pengkodinganJavascriptyangkompleks.YangperluAndalakukanhanya
memanggilkodetersebut.
Contohnya efek modal, silakan coba dengan kode di bawah ini. Jika
sudah,kemudiansimpandanlihathasilnyapadamodulwebsite.
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" datatarget="#myModal">
Launch demo modal
</button>

16

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal
title</h4>
</div>
<div class="modal-body">
Vivamus id mollis quam. Morbi ac commodo nulla. In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci
bibendum elit.
Vivamus id mollis quam. Morbi ac commodo nulla. <BR></BR>In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci
bibendum elit, eu euismod magna sapien ut nibh. Donec semper
quam scelerisque tortor dictum gravida
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" datadismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>

Hasil Pemasangan Bootstrap Modal

17

SelanjutnyasilakankliktombolLaunchdemomodal.

Akankeluarjendelapopup.

Jendela Pop Up Modal

Bagaimana, mudah bukan? Cara seperti di atas itu sangat cocok buat
merekayangsukangoprekpemrograman,jadibisautakatikkodekode
bootstrap sehingga bisa pas dengan tampilan website. Tentunya Anda
harus mengerti HTM dan CSS agar dapat menggunakan cara ini, yang
perluAndapelajarihanyalahcaramemanggilkodebootstrap.
Namun bagi yang tidak suka ngoprek atau memang tidak mengerti
bahasa pemrograman CSS atau lainnya, dapat menggunakan bantuan
shortcode. Pembahasan selanjutnya akan menggunakan shortcode,
karena memang buku ini dimaksudkan agar tidak melakukan peng
kodingansehinggabisadigunakanolehsiapasaja.

E. Apa Itu Shortcode?

Adalah sebuah aplikasi pemrograman yang menggunakan bootstrap,
hanya saja penggunanya tidak perlu mengetikkan kodekode bootstrap
samasekali.PadaJoomla,aplikasiinidikemasmenjadiextensionuntuk
18

kebutuhan tertentu sehingga penggunanya cukup melakukan instalasi.

Adapun untuk menampikan suatu fitur, cukup menyisipkan kode yang
adadidalamshortcode,danfiturtersebutakanmuncul.
Seperti yang sudah dijelaskan pada awal pembahasan bahwa keun
tungan menggunakan shortcode adalah tidak perlu melakukan peng
kodingan. Namun tetap diperlukan tata cara penggunaan yang benar
agarshortcodedapatberjalansebagaimanafungsinya.
Pada lembaran selanjutnya, Anda akan mempelajari cara penggunaan
shortcode untuk aneka kebutuhan. Tentu saja yang dibahas di dalam
bukuinihanyalahdasardasarnyasaja.SelanjutnyaAndaharusmengem
bangkan dan melakukan eksplorasi agar mendapatkan hasil yang mak
simaldaripenggunaanshortcodeini.

Shortcode Bootstrap Alert

Sebelumnya Anda sudah mencoba membuat Alert bootstrap dengan
pengkodean.SekaranginiAndaakanmenggunakanshortcode.Sebelum
dapat

menggunakannya,

silakan

instal

extension

plg_iceshortcodes_v3.0.1.zip.

Jikasudah,masukkedalammenu

Kemudianklik

Selanjutnyaklik

Ubahstatusmenjadi

Jikasudah,klik

.
.
.

.
19

Dan Anda sudah berhasil menginstal extension shortcode. Selan

jutnyamenampilkannyadidalamhalamanwebsite.

Fungsi Alert
Fitur Alert berfungsi untuk mencuri perhatian pengunjung karena fitur
ini dilengkapi dengan warna yang mencolok. Biasanya digunakan untuk
menampilkanpesanpenting,misalyangberkaitandenganpromosiatau
halhallainyangperludiketahuiolehpengunjung.
Agar Alert mendapatkan hasil yang maksimal, perlu disusun katakata
yangmenarikdantidakberteletele.Singkat,padat,namunberisi.Kira
kira itu yang perlu Anda perhatikan dalam penyusunan kalimat untuk
fiturAlertini.

Menerapkan ke dalam Halaman Website

Langsung saja masuk ke dalam cara penerapannya ke halaman

website.Buatsebuahhalamanbaru.

Seperti biasa, isi judul dan kategori. Pastikan akses internet Anda
sedang bagus agar tidak terjadi kegagalan dan Anda tidak bisa
membuat text detail. Jika itu Anda alami, maka lakukan refresh.
Namun jika masih berlanjut, silakan ganti akses internet dengan
yanglebihbaik.

Selanjutnyaisidetaildengantextsepertibiasa.Untukmenampilkan
Alert,silakangunakankodedibawahini:

[icebox type="alert" icon="yes" title="Info"]Sample Box[/icebox]

20


Menyisipkan Kode Alert

Jikasudah,simpandanlihathasilnyapadahalamanwebsite

Hasil Pemasangan Alert

Selanjutnyamengisitextsesuaikebutuhan.

Pada line title="Info"], ganti katakata Info dengan judul yang ingin
dipakai,misalPengumuman.

Pada line Sample Box[/icebox], ubah Sample Box dengan kalimat

yanginginAndamunculkanpadahalamanwebsite.Lihatcontohdi
bawahini.
21

[icebox type="alert" icon="yes" title="Pengumuman"]Vivamus id

mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl
volutpat bibendum. Quisque commodo hendrerit lorem quis egestas.
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque
consectetur quis placerat neque lobortis[/icebox]

Catatan: Tidak boleh ada paragraf (Enter) di dalam shortcode pada

kalimatyangdipasang.

Pemasangan Kode Alert dengan Pesan

Simpandanlihathasilnyapadahalamanwebsite.

Hasil Pemasangan Shortcode Alert

22

Selanjutnya silakan isi dengan text lainnya. Perhatikan kode dan

gambardibawahini:

[icebox type="alert" icon="no" title="Pengumuman"]Vivamus id

mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl
volutpat bibendum. Quisque commodo hendrerit lorem quis
egestas.Maecenas quis tortor arcu. Vivamus rutrum nunc non neque
consectetur quis placerat neque lobortis[/icebox] Vivamus id
mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl
volutpat bibendum. Quisque commodo hendrerit lorem quis egestas.
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque
consectetur quis placerat neque lobortis. Nam vestibulum, arcu
sodales feugiat consectetur, nisl orci bibendum elit.
Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum
orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem
quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non
neque consectetur quis placerat neque lobortis. Nam vestibulum,
arcu sodales feugiat consectetur, nisl orci bibendum elit, eu
euismod magna sapien ut nibh. Donec semper quam scelerisque
tortor dictum gravida.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus
suscipit, sem diam ultrices mauris, eu consequat purus metus eu
velit. Proin metus odio, aliquam eget molestie nec, gravida ut
sapien. Phasellus quis est sed turpis sollicitudin venenatis sed
eu odio.

Mengisi Informasi Text Lainnya

Simpandanlihathasilnya.

23


Hasil Pemasangan Shortcode Alert Lengkap

Membuat Variasi
Silakan gunakan shortcode ini untuk menarik perhatian pengunjung.
Selanjutnya Anda bisa membuat variasi tampilan dengan mengubah isi
typedengan:info,alert,download,note.
Contohuntuktypenote:
[icebox type="note" icon="yes" title="Catatan"]In hac habitasse
platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem
diam ultrices mauris, eu consequat purus metus eu velit. Proin
metus odio, aliquam eget molestie nec, gravida ut sapien.
Phasellus quis est sed turpis sollicitudin venenatis sed eu
odio[/icebox]

24

Simpandanlihathasilnya.


Hasil Penggunaan Shortcode Alert dengan Type Note

Bagaimana, cukup mudah bukan? Silakan Anda mencobanya dengan

anekaformatagarAndamendapatkantataletakyangmenarikdanpas.
DemoWebsiteLatihanterlampirdidalamBonusCD.Silakanmigrasikan
ke dalam localhost atau cPanel. Caranya bisa Anda lihat pada buku
BengkelWebDesign&SEOJoomla.

Infoadministratorwebsitelatihan:
User:admin
Password:admin

Shortcode Bootstrap Button

Button atau tombol adalah sebuah fitur yang tidak mungkin bisa
dipisahkan dari website. Banyak cara untuk membuat tombol yang
menarik. Mulai dari mendesainnya menggunakan Photoshop hingga
memanfaatkanpemrogramanCSS.
Sekarang ini Anda akan memanfaatkan bootstrap untuk membuat
tombol yang nantinya bisa membuat website menjadi lebih cantik.
25

Tombol tersebut juga dapat menarik hati para pengunjung untuk

mengklik, dan masuk ke dalam halaman berisi informasi yang ingin
disampaikankepadapengunjung.

Fungsi dan Kegunaan

Sepertiyangsudahdijelaskandiatas,selainsebagaipenghubungantar
halaman atau antarsitus, tombol juga bisa digunakan untuk aksesoris
yang dapat mempercantik halaman website. Dengan menggunakan
bootstrap, tugas Anda menjadi lebih mudah. Langsung saja kita masuk
kedalampembahasannya.

Menerapkan ke dalam Halaman Website

Buatsebuahhalamanbaru.

Kemudian letakkan kursor pada posisi di mana Anda akan menam

pilkantombol.

Gunakan kode di bawah ini untuk menampilkan tombol pada

halamanwebsite.

Menyisipkan Kode Button Bootstrap

26

Simpandanlihathasilnyapadahalamanwebsite.


Hasil Pemasangan Button

JikaAndaklikpadatombolyangsudahAndabuattersebut,makatidak
menujukemanamana,haltersebutkarenaAndabelummenempatkan
linktujuandaritombol.

Untukmembuatlinktujuandaritombol,silakanAndaubahtanda#
padalink="#".

Lihatcontohkodedibawahini:

[icebutton link="http://www.surahman.net" type="btn"]Sample

Button[/icebutton]

Silakanmasukkankodetersebutkehalamanwebsite.

Simpandanlihathasilnya.SilakankliktombolyangAndabuat,maka
Andaakandibawamenujukehalamanwebsiteyangdiinput.

Membuat Variasi
Bagaimana, cukup mudah bukan? Dengan cara tersebut, Anda sudah
bisa membuat tombol dengan mudah dan cepat. Selanjutnya adalah
membuatvariasi,kitaakanmemulainyadarivariasiwarna.
WarnaButton
Selanjutnyauntukmembuatvariasiwarnatomboladalahsangatmudah,
Anda cukup menambahkan kode Color: (btnprimary, btninfo, btn
27

success, btnwarning, btndanger, btninverse). Lihat contoh pada kode

dibawahini:
[icebutton link="http://www.surahman.net" type="btn" color="btninfo"]Sample Button[/icebutton]

Silakanmasukkankodediataskemudiansimpan.

Lalulihathasilnyapadahalamanwebsite.

Hasil Pemasangan Tombol Info

Silakan dicoba menggunakan jenis yang lain, sehingga Anda bisa me

nentukanwarnayangtepatuntuksebuahwebsite.

Hasil Pemasangan Button Bootstrap

28

Size Button
Selanjutnyaadalahukurantombol,AndadapatmenggunakankodeSize:
(btnmini, btnsmall, btnlarge) untuk mengubah ukuran tombol.
Sebagaicontoh,silakanlihatkodedibawahini:
[icebutton link="http://www.surahman.net" type="btn" color="btnwarning" size="btn-mini"]Sample Button[/icebutton]

Silakangunakankodetersebut,kemudiansimpan.

Danlihathasilnyapadahalamanwebsite.

Hasil Penggunaan Button Berukuran Mini

Selanjutnya silakan Anda mencoba dengan ukuran lain. Gunakan kode

yangsudahdiberikandiatasuntukmemaksimalkantampilantomboldi
halamanwebsite.

Hasil Pemasangan Bootstrap Size Button

29

Bagaimana, cukup mudah bukan? Silahkan Anda mencobanya dengan

anekaformatagarAndadapatmempercantikhalamanwebsitedengan
anekatombolyangmenarik.
DemoWebsiteLatihanterlampirdidalamBonusCD,silakanmigrasikan
ke dalam localhost atau cPanel. Caranya bisa Anda lihat pada buku
BengkelWebDesign&SEOJoomla.

Infoadministratorwebsitelatihan:
User:admin
Password:admin

Shortcode Bootstrap Facebook

Fanpage
Facebook fanpage adalah suatu kewajiban bagi pelaku bisnis online.
Silakan Anda membuat facebook fanpage terlebih dahulu jika Anda
belumpunya.

Contoh Facebook Fanpage - https://www.facebook.com/su.rahman.page

Ada banyak cara menampilkan Facebook Fanpage di halaman website,

mulaidariinstalasimodulhinggamenggunakanpluginlainnya.Sekarang
30

ini Anda mendapatkan satu cara lagi untuk menampilkan Facebook

Fanpagedihalamanwebsite,yaitudenganshortcodebootstrap.

Fungsi dan Kegunaan

KegunaanFacebookFanpageuntukmemudahkanpengunjungberkomu
nikasi dengan pemilik website, dan juga sebagai media komunikasi
antarapemilikwebsite,perusahaan,atautokoonlinedenganpelanggan
ataucalonpelanggannya.
Selain itu, Facebook Fanpage ini bisa dimanfaatkan untuk kebutuhan
mempromosikan produk baru atau informasi terbaru. Anda juga dapat
memanfaatkannya untuk mendatangkan pengunjung ke halaman
website.
BanyakkeuntunganyangbisaAndadapat,jadibagiyangbelumpunya,
silakanbuatterlebihdahulu.Andadapatmembuatnyadengangratis.

Menerapkan ke dalam Halaman Website

SetelahmembuatFacebookFanpage,selanjutnyadibahascaramenam
pilkannyadenganshortcodebootstrappadahalamanwebsite.

Buatsebuahhalamanbaru.

Kemudiansisipkankodedibawahini:

[icesocial mode="facebook_fanpage" width="320" height="260"

name="su.rahman.page"]

31


Memasang Kode FB Fanpage dengan Shortcode Bootstrap

Jikasudah,simpan.

Danlihathasilnyapadahalamanwebsite.

Hasil Pemasangan FB Fanpage dengan Bootstrap

Membuat Variasi
Anda bisa membuat variasi dengan menambahkan kode Mode: Mode:
(facebook_fanpage,facebook_like).Sebagaicontoh,lihatkodedibawah
ini:
32

[icesocial mode="facebook_like" name="su.rahman.full"]

Gunakan kode tersebut pada halaman website, simpan dan lihat

hasilnya.

Hasil Pemasangan FB Like

Selainitu,AndajugabisamengubahukuranboxFBFanpagedengan
menggantiparameterpadawidth="320"height="260".

Lihatkodedibawahini:

[icesocial mode="facebook_fanpage" width="600" height="460"

name="su.rahman.page"]

Pasang kode tersebut pada halaman website, simpan dan lihat

hasilnya.

Hasil Pemasangan Kode dengan Ukuran width="600" height="460"

33

Bagaimana, seru bukan? Dengan cara mudah seperti ini, Anda bisa
menambah fitur halaman website. Yang perlu Anda lakukan adalah
dalam hal penataan agar fiturfitur bootstrap yang ada dapat memper
cantikhalamanwebsite,bukansebaliknyajustrumembebaninya.
Infoadministratorwebsitelatihan:
User:admin
Password:admin

Shortcode Bootstrap Columns

Mungkin Anda bosan dengan tampilan isi website yang standar dan
menginginkan membuat kolom yang memisahkan antartext, seperti
yang ada pada halaman surat kabar. Dengan menggunakan bantuan
bootstrapini,Andabisamembuatkolomtextdenganmudahdancepat.

Fungsi dan Kegunaan

Fungsi dan kegunaan utamanya untuk memberikan nuansa beda dari
website yang lainnya. Yang Anda perlu lakukan adalah pada penataan
sehinggatampilankolominidapatmempercantik,danbukansebaliknya
membingungkanpengunjung.
Gunakanselaluparameteryangmemudahkanpengunjungdalampena
taanlayoutatauketikainginmenambahkansebuahfitur.

Menerapkan ke dalam Halaman Website

Buatsebuahhalamanbaru.

Kemudiangunakankodedibawahini:

[icecolumns number="2"][icecol title="2 Columns"]Sample Columns

[/icecol][icecol title="2 Columns"]Sample
Columns[/icecol][/icecolumns]

34


Memyisipkan Kode Bootstrap untuk Membuat 2 Kolom

Simpandanlihathasilnyapadahalamanwebsite.

Hasil Pembuatan 2 Kolom

Yang perlu Anda lakukan adalah mengubah title="2 Columns"

denganjudulsesuaidengankebutuhanAnda.

DanjugaubahSampleColumns[/icecol]untukisidarikolom.

Perhatikankodedibawahini:

[icecolumns number="2"][icecol title="Judul Kolom

Pertama"]Vivamus id mollis quam. Morbi ac commodo nulla. In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci

35

bibendum elit[/icecol][icecol title="Judul Kolom Ke Dua"]In hac

habitasse platea dictumst. Nam pulvinar, odio sed rhoncus
suscipit, sem diam ultrices mauris, eu consequat purus metus eu
velit. Proin metus odio, aliquam eget molestie nec, gravida ut
sapien. Phasellus quis est sed turpis sollicitudin venenatis sed
eu odio[/icecol][/icecolumns]

Memasukkan Kode Bootstrap

Gunakan kode tersebut di atas, simpan dan lihat hasilnya pada

halamanwebsite.

Hasil Pembuatan 2 Kolom pada Halaman Website

Catatan:Andatidakbisamenggunakanparagraph,jadipastikanisidari
kolomtidakadaparagraphnya.Karenaparagraphdapatmembuatkode
rusak.

36

Membuat Variasi
Selanjutnya membuat variasi tampilan kolom. Anda cukup menam
bahkankodeNumber:(2,3,5).Namunperludiperhatikan,ketikaAnda
menambah jumlah kolom maka Anda juga harus menambahkan kode
untukkolomtersebut.Yaitu:
[icecol title="Columns 1"]Sample Columns 1[/icecol], sebagai
contoh lihat kode 3 kolom di bawah ini .
[icecolumns number="3"][icecol title="Columns 1"]Sample Columns
1[/icecol][icecol title="Columns 2"]Sample Columns 2[/icecol]
[icecol title="Columns 3"]Sample Columns 3[/icecol]
[/icecolumns]

Silakan coba kode di atas, simpan dan lihat hasilnya pada halaman
website.

Hasil pada Halaman Website

Selanjutnya silakan sesuaikan dengan isi text yang ingin Anda

tampilkanpadahalamanwebsite.

Contohkodenyasepertidibawahini:

[icecolumns number="3"][icecol title="Judul Pertama"]Nam

vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum
elit, eu euismod magna sapien ut nibh. Donec semper quam
scelerisque tortor dictum gravida. In hac habitasse platea
dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam
ultrices mauris, eu consequat purus metus eu velit. Proin metus
odio, aliquam eget molestie nec, gravida ut sapien. Phasellus
quis est sed turpis sollicitudin venenatis sed eu odio
[/icecol][icecol title="Kolom Ke Dua"]Vivamus id mollis quam.
Morbi ac commodo nulla. In condimentum orci id nisl volutpat

37

bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas

quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis
placerat neque lobortis [/icecol] [icecol title="Kolom Ke
Tiga"]Vivamus id mollis quam. Morbi ac commodo nulla. In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci
bibendum elit, eu euismod magna sapien ut nibh. Donec semper
quam scelerisque tortor dictum gravida [/icecol] [/icecolumns]

Hasil Pemasangan Kode Bootstrap 3 Kolom

Bagaimana,asyikbukan!
Silakan gunakan teknik yang sederhana ini untuk memberikan kesan
yang berbeda. Namun sekali lagi, ingat, gunakan secara wajar dan
seperlunya. Agar tidak memberikan kesan berlebih yang berdampak
padamalasnyapengunjungdalammenelusurihalamanwebsiteAnda.
Infoadministratorwebsitelatihan:
User:admin
Password:admin

38

Shortcode Bootstrap Tooltips

Tooltips adalah efek tambahan yang bisa memberikan kesan wah pada
sebuah website. Selain itu, tooltips juga dapat digunakan untuk mem
bantupengunjungmengertitentangfungsisuatufitur.
MasihbelumbanyakWebMasteryangmemanfaatkantoolyangsatuini.
Jika Anda merasakan tool ini dapat membantu, silakan gunakan pada
halamanwebsite.

Fungsi dan Kegunaan

Padaprinsipnyatooltipsadalahsebuahpenjelasansingkatyangmuncul
ketika sebuah mouse didekatkan pada sebuah text yang berisi kalimat
atau kata dengan istilah tertentu. Kemudian tooltips memberikan pen
jelasan singkat yang dapat membuat pengunjung lebih mengerti apa
kegunaanataumaksuddariistilahtersebut.

Menerapkan ke dalam Halaman Website

Sepertibiasalangsungsajabuatsebuahhalamanbaru.

Selanjutnyagunakankodedibawahini:

[icetooltip placement="top" title="Ini adalah penjelasan dari

text istilah, semoga pengunjung bisa mengerti"]Text
Istilah[/icetooltip]

Menggunakan Kode Tooltips

39

Jikasudah,simpandanlihathasilnyapadahalamanwebsite.

Hasil Penggunaan Tooltips pada Halaman Website

Anda juga bisa membuat text menjadi cetak tebal dengan cara
memboldnya.

Mem-bold Kalimat/Text Tooltips

40

Simpandanlihathasilnyapadahalamanwebsite.


Text Istilah Tampil Menjadi Cetak Tebal

Membuat Variasi
Selain itu, Anda juga bisa membuat variasi text dengan memberikan
warna. Hal ini agar dapat menjadikan pembeda antara text yang
memilikitooltipsdanyangtidak.

Membuat Text Berwarna Merah dan Cetak Tebal

Simpandanlihathasilnyapadahalamanwebsite.

Text Istilah Berwarna Merah dan Cetak Tebal

41

Dengan cara ini, Anda bisa memberikan kesan beda dan juga bisa
memberikan penjelasan lebih terhadap konten website jika mengan
dung istilahistilah tertentu. Yang perlu Anda lakukan adalah membuat
formatyangberbedasebagaipembedaantaratextyangtidakmengan
dungtooltipsdengantextyangmengandungtooltips.
Infoadministratorwebsitelatihan:
User:admin
Password:admin

Shortcode Bootstrap Accordion

AccordionbanyakdigunakanolehparaWebMasteruntukmenampilkan
konten yang masih dalam satukesatuan. Pada prinsipnya penggunaan
accordion adalah untuk menghemat ruang penyajian pada halaman
website.

Fungsi dan Kegunaan

Penambahan accordion ke dalam halaman website juga dapat mem
berikankesanlebihterlihatprofesional.Namunterlepasdarisemuaitu,
fitur accordion adalah untuk memudahkan pengunjung dalam mema
hami isi informasi yang sedang coba kita tawarkan pada halaman
website.

Menerapkan ke dalam Halaman Website

Langsungsajabuathalamanbaru.

Kemudiangunakankodedibawahini:

[iceaccordion theme="simple"] [accordionslide title="Accordion

Title 1 "] Accordion Title 1 Text
[/accordionslide][accordionslide title="Accordion Title 2
"]Accordion Title 2 Text[/accordionslide] [accordionslide
title="Accordion Title 3"]Accordion Title 3 Text

42

[/accordionslide] [accordionslide title="Accordion Title 4"]

Accordion Title 4 Text [/accordionslide] [/iceaccordion]

Penggunaan Kode Accordion

Jikasudah,simpan.Danlihathasilnyapadahalamanwebsite.

Hasil Pemasangan Accordion ke dalam Halaman Website

Silakan ubah kode title="Accordion Title 1 ", dengan judul tab

accordionsesuaidengankebutuhan.

JugaubahkodeAccordionTitle1Text[/accordionslide]denganisi
textinformasi.
43

Lihatkodedibawahini:

[iceaccordion theme="simple"] [accordionslide title="Judul

Pertama "] Vivamus id mollis quam. Morbi ac commodo nulla. In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci
bibendum elit.[/accordionslide][accordionslide title="Judul
Kedua "] Vivamus id mollis quam. Morbi ac commodo nulla. In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci
bibendum elit.[/accordionslide] [accordionslide title="Judul
Tiga"] Vivamus id mollis quam. Morbi ac commodo nulla. In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci
bibendum elit. [/accordionslide] [accordionslide title="Judul
Empat"] Vivamus id mollis quam. Morbi ac commodo nulla. In
condimentum orci id nisl volutpat bibendum. Quisque commodo
hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus
rutrum nunc non neque consectetur quis placerat neque lobortis.
Nam vestibulum, arcu sodales feugiat consectetur, nisl orci
bibendum elit.[/accordionslide] [/iceaccordion]

Jikasudah,simpandanlihathasilnya.

Hasil Pemasangan Kode Accordion pada Halaman Website

Infoadministratorwebsitelatihan:
User:admin
Password:admin
44

Bagaimana, cukup mudah bukan? Selanjutnya Anda akan mempelajari

tentang penggunaan minisite dan Anda bisa juga mempraktikkan
penggunaan bootstrap yang sudah Anda pelajari ini ke dalam minisite
yangakankitabahaspadababbabselanjutnya.
Ingat selalu, Practice makes perfect. Makin sering praktik, maka Anda
akanmenjadimahir.
Begitupulasentuhandariseorangwebdesigner,akansangatditentukan
olehjamterbangnya.Olehkarenaitu,janganpernahraguapalagitakut
untuk melakukan eksperimen. Anda akan mendapatkan sebuah ilmu
barudarisetiapkesalahandalameksperimenitu.
Takterasa25anbukusudahsayahasilkandalamkurunwaktu2tahun
ini, dan semua materi yang saya tuliskan awal muasalnya adalah dari
kesalahan.
Dari satu kesalahan dan kesalahan berikutnya, saya makin memahami,
dan kemudian dari pemahaman tersebut saya praktikkan di dalam
pekerjaanseharihari.
Lalusebagaiwujudsharing(berbagi),sayamenuliskannyadidalambuku,
dansampailahbukubukutersebutditanganAndasemua.

***
45