Peralatan Desain Web Responsif

Sekarang kita sudah memahami tentang Unsur Dasar Desain Web Responsif, dengan harapan memahami konsep dasar yang harus dilakukan ketika akan memulai belajar lebih jauh mengenai desain web yang responsif. Berkembangnya perangkat keras untuk mengakses situs membuat para desainer harus mencari solusi terbaik agar halaman-halaman situs mampu dinikmati oleh para pengunjung tanpa kendala yang berarti. Joshua Johnson mengatakan bahwa "Apple mendorong industri teknologi maju dengan meningkatkan pixel density (kepadatan pixel) pada layar iPhone dan iPad. Hal ini bagus dari sudut pandang pengguna, tetapi sebagai web designer atau web developer secara harfiah hal ini merupakan ancaman dan pemaksaan agar mengubah cara Anda membangun website." Pernyataan Joshua tersebut menggambarkan bahwa para web desainer cukup kerepotan dalam menciptakan website yang mampu beradaptasi dengan perangkat keras yang ada dipasaran. Namun ternyata hal tersebut bukanlah rintangan berarti, ini justru membuat para web desainer menjadi lebih kreatif lagi menciptakan peralatan (tools) untuk membangun desain web yang lebih mudah dan lebih responsif.

Untuk memudahkah pemahaman tentang peralatan yang akan digunakan, maka dibawah ini peralatan desain web akan disederhanakan dengan pengkategorian yang lebih sempit. Selain itu daftar peralatan desain web responsif yang akan dibahas, baru sebatas peralatan yang populer digunakan. Dibawah ini daftar peralatan yang kemudian dikategorikan menjadi:

Responsif Tipografi (Responsive Typography)

Ini merupakan bagian yang harus diperhatikan untuk mendesain web yang responsif. Responsif Tipografi adalah cara untuk mengatur penampilan huruf, dari mulai warna, posisi, ukuran, dan hal-hal lain yang berhubungan dengan huruf agar bisa menyesuaikan dengan lebar layar secara otomatis.

1. Lettering.js

Plugin jQuery ini sangat populer di kalangan web desainer karena kemudahan dalam penggunaan dan fungsi yang beragam. Lettering.js seakan menjadi plugin wajib bagi siapa saja yang berencana membuat desain web responsif karena kemampuannya yang komplek dalam mengatur posisi huruf. Beberapa kemampuan Lettering.js diantaranya; mengatur spasi antar huruf (kerning), mengatur spasi dan ukuran huruf yang komplek, kemudahan pengelolaan kode, dan kompleksitas posisi huruf (down-to-the-letter) sehingga mampu menghasilkan pengalaman membaca yang optimal dalam ruang visual yang beragam. Lettering.js di gunakan karena CSS belum mampu melakukan kompleksitas pengaturan huruf. Seorang Paul Irish saja sampai berkomentar "Hebat. Dunia sangat membutuhkannya - sebuah plugin jQuery yang berbeda dari yang lainnya".

2. FitText.js

Ini Plugin jQuery berikutnya yang juga sangat populer. Jika Lettering.js berhubungan dengan kompleksitas posisi huruf, maka FitText.js berhubungan dengan kemampuan pengaturan ukuran huruf secara otomatis pada berbagai ukuran layar. FitText.js mampu membuat huruf menjadi sangat fleksibel dalam berbagai visualisasi viewport, namun dengan penerapan yang sangat sederhana. FitText.js menciptakan visualisasi huruf yang benar-benar fluid dan responsif. Plugin yang tidak boleh anda lewatkan.

3. Font.js

Plugin jQuery yang satu ini termasuk masih baru sehingga kurang begitu populer. Font.js digunakan untuk memilih bentuk huruf yang akan digunakan pada sebuah situs. Ini salah satu plugin yang mungkin lebih cocok disebut sebagai perpustakaan huruf untuk pemilihan jenis huruf yang dibutuhkan. Font.js dapat digunakan sebagai remote untuk mengambil jenis huruf dari system atau dari URL yang telah ditentukan.

Gambar Fleksibel (Flexible Images)

Christopher Schmitt pada artikelnya "Adaptive Images in Responsive Web Design" menuliskan, gambar yang dikirimkan ke perangkat dan tersajikan pada halaman web harus memperhatikan beberapa faktor berikut:

1. Resolusi Layar
2. Bandwidth
3. Lebar Jendela Browser

Masalahnya adalah cara menentukan gambar yang terbaik untuk dikirimkan ke browser, hal ini membuat faktor menjadi independen satu sama lain. Ketika sebuah halaman situs mengandung elemen gambar maka gambar tersebut harus bisa menyesuaikan dengan lebar browser, jika ukuran file gambar tersebut dipaksakan dengan rasio skala penampilan saja maka ini akan memperlambat pemanggilan halaman. Tentunya juga akan menurunkan kecepatan koneksi internet, sedangkan perangkat jenis mobile phone cenderung memiliki kecepatan koneksi yang lebih lambat dari pada komputer biasa, hal ini menambah beban load halaman yang menjadi semakin lambat. Jika demikian adanya, yang harus kita pikirkan bersama, Apakah anda akan memberikan resolusi rendah demi kemudahan versi mobile? Atau apakah anda membiarkan saja browser memanggilnya dengan versi sebenarnya, tetapi dengan waktu download yang lebih lama? Terlepas dari permasalah diatas, sampai dengan artikel ini dibuat, para web desainer memberikan jalan keluar dengan metode:

1. Memaksakan gambar dalam ukurannya sebenarnya namun dengan penampilan responsive yang mampu menyesuaikan dengan lebar browser. Cara ini berarti bermain pada skala rasio penampilan gambar sesuai ukuran browser.
2. Dengan teknik DOM, yaitu penyediaan gambar dengan berbagai ukuran untuk berbagai perangkat pada server situs yang kemudian gambar akan ditampilkan sesuai dengan viewport (ukuran browser).

1. Adaptive Images

Plugin yang ditulis dengan bahasa PHP ini akan secara otomatis membuat berbagai ukuran gambar dan cache dan kemudian menampilkannya sesuai dengan ukuran browser. Tidak diperlukan perubahan mark-up. Hal ini dimaksudkan untuk kemudahan pada penggunaan situs dengan desain yang responsif dan untuk digabungkan dengan teknik gambar fluid.

2. imgSizer.js

Sebelum menggunakan imgSizer.js lebih baik anda membaca dulu rincian yang di sampaikan pembuatnya, Ethan Marcotte tentang peran script ini dalam penerapannya pada desain web responsif. Pada dasarnya, script ini dirancang untuk memastikan bahwa gambar mampu di render dengan baik pada Microsoft Windows. Langkah Marcotte ini cukup berhasil untuk me-render gambar agar ukurannya turun secara otomatis sesuai dengan browser yang digunakan.

3. Spacer PNG

Ini adalah cara sederhana untuk menampilkan gambar yang responsive. Menggunakan teknik media query dalam mendeteksi ukuran browser dan mengganti ukuran gambar yang sesuai dengan browser. Gambar yang akan ditampilkan justru diganti dengan blank PNG atau blank GIF transparan yang ukurannya sesuai dengan ukuran gambar yang akan ditampilkan. Sedangkan gambar yang ditampilkan justru dijadikan background dengan penyajian background-size: contain.

Responsif Web Layout (Responsive Web Page Layouts)

Inilah bagian inti yang menjadi pembahasan hangat sekarang ini. Inti dari desain web responsif adalah kemampuan tata letak yang fluid dan fleksibel serta mampu menyesuaikan diri dengan ukuran layar dan fitur dari browser pengguna. Dibawah ini adalah beberapa sumber daya yang terkait dengan tata letak dan populer digunakan dalam mendesain web responsif.

1. Fluid 960 Grid System

Fluid 960 Grid System pada dasarnya adalah pengembangan dari 960 Grid System yang dibuat oleh Nathan Smith. Perubahan besar dilakukan pada kemampuan fluid pada berbagai ukuran layar. Berbeda dengan 960 Grid Sytem yang bersifat tetap (fixed), sedangkan Fluid 960 Grid System bersifat fleksibel terhadap ukuran browser. Grid System ini merupakan yang paling banyak digunakan oleh para web desainer saat ini. Jika anda terbiasa dengan 960 Grid System maka begitu pula penggunaannya pada Fluid 960 Grid System. Mengenai bagaimana cara menggunakan Fluid 960 Grid System, Deny E. Wicahyo memaparkan dengan jelas dalam salah satu artikelnya "Responsive Layout dengan Grid System"

2. Gridless

Jika anda menggunakan Fluid 960 Grid System kemudian merasa bahwa tata letak halaman terlalu sempit maka Gridless adalah solusi untuk mengatasi area yang terlalu sempit. Gridless dibuat lebih ramping dibangdingkan dengan sistem grid yang lainnya dan dibangun dengan dasar desain responsife. Kode Gridless didasarkan pada filosofi yang telah banyak dibahas pada diskusi-diskusi "metode mobile utama (mobile first)" untuk pembuatan website yang mampu digunakan pada berbagai perangkat.

3. Skeleton

Sistem Grid yang satu ini juga sedang hangat-hangatnya dibahas. Silahkan anda eksplorasi pada sistem grid yang satu ini dan temukan kehebatannya dibandingkan sistem grid yang lainnya.

4. Semantic Grid System

Sistem Grid yang satu ini menitik beratkan pada semantic dan terintegrasi dengan beberapa bahasa pemrograman CSS seperti LESS, SCSS atau Stylus. Mereka mengklaim dirinya mampu memberiksa cita rasa baru pada saat mendesain web responsif.

Pengujian Web Layout (Testing and Cross-Browser)

Setelah anda memahami dan mampu membuat desain web responsive maka waktunya untuk memeriksa, apakah desain yang sudah anda buat benar-benar dapat bekerja pada berbagai ukuran browser dan perangkat, atau justru gagal. Silahkan gunakan beberapa peralatan tester dan cross-browser dibawah ini untuk meyakinkan diri bahwa kita telah berhasil membuat desain web yang responsif.

1. Matt Kersley Responsive Tester
2. Web Developer
3. iPadPeek
4. iPhone Web Simulator
5. Opera Mini Simulator
6. Adobe Device Central CS5.5

Kesimpulan

Akhirnya, tidak setiap proyek desain web harus melibatkan semua peralatan dan sumber daya yang telah disebutkan diatas. Namun kembali lagi dengan menganalisa proyek desain web yang sedang anda hadapi. Artikel ini disusun hanya untuk memberikan gambaran dan kemudahan dalam mencapai tujuan desain web yang responsif dan sesuai dengan apa yang diinginkan. Dalam prakteknya, kadang kita membutuhkan fitur lain untuk mempercantik dan memperbaiki tampilan akhir dari desain web yang sedang kita buat dan yang sesuai dengan keinginan orang yang membutuhkan desain kita. Semua ini kembali pada kemampuan anda dalam memahami resource yang tersedia, imajinasi dalam membuat desain, dan ide yang merupakan dasar dari rancang bangun desain web yang responsif. Selamat bekerja...

Jika Anda mengetahui perlengkapan atau resource yang dapat membantu dalam membangun desain web responsif, silahkan berbagi dengan kami pada komentar!

Read more

Blogger Tune-Up Refresh

Alhamdulillah. Setelah beberapa hari melakukan pertimbangan yang cukup berat, akhirnya Blogger Tune-Up mengambil keputusan untuk mengganti wajah. Biasanya desain yang saya buat selalu dominan warna gelap, namun kali ini saya ingin sesuatu yang yang berbeda, lebih cerah, redup, rapi namun tetap kalem. Maka seperti inilah tampilan akhir Blogger Tune-Up.

Namun demikian, desain Blogger Tune-Up ini masih jauh dari sempurna. Dan saya mengambil resiko untuk memperbaiki artikel demi artikel yang telah ditulis, hal ini karena desain yang dibuat total merupakan kode baru, tanpa mengikuti kode lama. Walau demikian hal itu tidak bisa ditawar. Maka jika sahabat blogger menemukan artikel yang tampil berantakan, saya mohon ma'af sekali karena keterbatasan koneksi dan waktu, tapi tetap semua itu akan segera diperbaiki. Dan saya mengucapkan "Selamat Datang di Blogger Tune-Up Refresh"

Banjarsari, 04 Februari 2012 [00.32 WIB]

Hendriono

Read more

Percantik Sidebar Komentar (JSON)

Bismillah. Disela-sela tahap penyembuhan dari sakit yang cukup lama dan disela-sela kesibukan dalam proses penyusunan buku, Alhamdulillah satu widget selesai dikembangkan. Widget ini sebenarnya bisa kita peroleh melalui widget bawaan Blogger namun bagi mereka yang suka utak-atik hal ini bisa menjadikan satu nilai plus untuk mempercantik sidebar anda. Sidebar ini digunakan untuk menampilkan komentar dari para pembaca blog kita. Yang menarik dari sidebar komentar ini yaitu bisa menampilkan nama user yang memberi komentar dan juga isi dari komentar tersebut, sehingga kita bisa dengan cepat menyetahui siapa sahabat blogger yang sudah memberi komentar. Widget ini masih melibatkan bahasa pemrograman JSON yang memanfaatkan Feed dari blogger sehingga proses pemanggilan (loading) lebih cepat dan ringan. Mau mencoba? Silahkan lanjutkan membaca jika malas jangan di tutup blog ini cari lagi artikel lain mungkin anda menemukan sesuatu yang menarik... (agak ngelantur)

Integrasi JSON Sidebar Comments Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

/* Sidebar Komentar JSON */
#komentar {
background: #3eb5da; //warna dasar
margin: 0;
padding: 0;
border: 1px solid #0971C8; //garis pinggir kotak gadget komentar
}
#komentar ul {
margin: 0;
padding: 0; //jarak ke pinggir kotak gadget komentar
}
#komentar ul li: first-child {
border-top: 0 none aqua;
}
#komentar ul li {
border-top: 1px solid #CCC; //garis sekat atas
border-bottom: 1px solid #0971C8; //garis sekat bawah
padding: 2px 0;
list-style: none;
}
#komentar ul li: last-child {
border-bottom: 0 none aqua;
}
#komentar ul li span {
background-position: 2px 2px;
float: left;
height: 16px;
margin-right: 5px;
width: 16px;
}
#komentar ul li b {
color: #ffffff; //warna huruf nama komentator
text-shadow: -1px -1px 1px #3196BA;
}
#komentar ul li: hover {
background-color: #CCC; //warna latar ketika mouse diatasnya
}
#komentar a, #komentar a: link, #komentar a: visited {
clear: both;
color: #FFF; //warna huruf isi komentar
display: block;
padding-left: 20px;
text-decoration: none;
}
#komentar a: hover {
color: #333; //warna huruf ketika mouse diatasnya
}
.komen {
background: transparent url(https: //lh5.googleusercontent.com/_xcD4JK_dIjU/TcA0b1eB4sI/AAAAAAAAFGQ/MlIzrpydae0/s800/top_rss.png) no-repeat 0 0; //icon komentar
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode JavaScript dibawah ini diatas kode pada langkah 5:

<script type='text/javascript'>
//<![CDATA[
/*
Beauty JSON Commentator Sidebar 1.0 (May 29, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
var jmlkomentar = 20;
var jmlkarakter = 80;
function tampilkankomentar(json) {
var entry, urlkomentar, isikomentar, lihatkomentar;
for (var i = 0; i < jmlkomentar; i++) {
entry = json.feed.entry[i];
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
urlkomentar = entry.link[k].href;
break
}
}
urlkomentar = urlkomentar.replace("#", "#comment-");
if ("content" in entry) {
isikomentar = entry.content.$t
} else if ("summary" in entry) {
isikomentar = entry.summary.$t
} else {
isikomentar = ""
}
var re = /<\S[^>]*>/g;
isikomentar = isikomentar.replace(re, "");
if (isikomentar.length > jmlkarakter) {
isikomentar = isikomentar.substring(0, jmlkarakter) + "…"
}
lihatkomentar = "<li>";
lihatkomentar += "<span class='komen'></span><b>" + entry.author[0].name.$t + "</b>";
lihatkomentar += "<a rel='nofollow' href='" + urlkomentar + "'>" + isikomentar + "</a>";
lihatkomentar += "</li>";
document.write(lihatkomentar)
}
}
//]]>
</script>

Langkah 7
"SIMPAN TEMPLATE" dan lanjutkan...

Integrasi JSON Sidebar Comments pada Gadget

Langkah 8
"Tambah Gadget" dengan tipe "HTML/JavaScript"
Langkah 9
Masukan (copy paste) kode dibawah ini didalam konten dan jangan lupa beri Judul Gadget:

<div id="komentar">
<ul>
<script src="/feeds/comments/default?alt=json-in-script&callback=tampilkankomentar"></script>
</ul>
</div>

Langkah 10
"SIMPAN" Gadget dan preview blog anda...

Keterangan:

• var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang ingin ditampilkan
• var jmlkarakter = 80; Ubah nilai 80 untuk menentukan jumlah karakter isi komentar yang ingin ditampilkan

Bagaimana menurut anda? Cantik bukan? Selamat mencoba dan semoga berhasil... Happy Blogging :)

Read more

Blogger Tune-Up ganti Template

Setelah bersemedi sekitar 2 minggu lebih lamanya tanpa membuat satu pun artikel, akhirnya Blogger Tune-Up kembali hadir dengan baju baru. Template yang sempat membuat kepala nyut-nyut selama hampir satu minggu ini akhirnya rampung dan launching untuk menggantikan template lama yang sudah semakin berat dengan berbagai plugin yang terpasang didalamnya. Tentunya dengan berbagai resiko yang sudah menghadang yang harus siap atau pun tidak siap akan menyita banyak waktu untuk membenahinya.

Template yang baru ini belum punya nama, tetapi jika melihat warna dasar yang digunakan jadi teringat beberapa saat yang lalu ketika belajar software animasi 3D Studio Max yang dominan dengan warna darkness. Apa ya kira-kira nama template yang pantas atau mencerminkan konsep template yang Blogger Tune-Up gunakan?
Setelah bermain-main dengan beberapa template, Blogger Tune-Up menemukan berbagai hal dan rasa baru, tapi dari sekian hal yang ditemui ada satu hal yang sangat mahal bagi seorang Web Desainer yaitu imajinasi konsep dasar. Hal tersebut akan mampu mencerminkan seorang Web Desainer, walaupun tidak ada tim khusus yang bertugas untuk menilai, tetapi hasil akhir inilah yang akan mampu menunjukan kepada dunia, seberapa hebat seorang web desainer. Bahasan mengenai Web Desainer akan dibahas dalam artikel terpisah.
Jika diperhatikan template baru ini masuk dalam kategori template minima atau template sederhana, tetapi jika sudah ditelusuri akan ditemukan beberapa hal yang sangat berbeda dari template sebelumnya. Apa saja yang digunakan oleh Blogger Tune-Up untuk membangun template sederhana ini?

1. Warna dasar gelap, ini sangat berbeda dengan template sebelumnya yang menggunakan warna dasar putih, hal inilah yang menjadi permasalahan selanjutnya bagi Blogger Tune-Up dalam membenahi artikel-artikel yang pernah dibuat. Karena beberapa artikel menggunakan huruf dengan warna gelap, proses pembenahan pun harus dilakukan satu persatu pada setiap artikel.
2. Framework jQuery, ini yang menjadi kekuatan Blogger Tune-Up. Mungkin bagi teman-teman yang sudah sempat menelusuri blog ini akan merasakan efek-efek gerakan lembut di beberapa bagian, semisal menu utama. Semua efek yang digunakan menggunakan framework jQuery. Hal ini Blogger Tune-Up pilih karena jQuery merupakan salah satu platform yang berdiri diatas JavaScript dengan kecepatan akses (latency) paling cepat dibanding framework yang lainnya, selain itu memiliki ukuran file yang lebih kecil.
3. Minim grafik atau gambar, hal ini dibuat untuk membuat kesan sederhana. Tampilan tidak terlalu rame dengan gambar-gambar yang kadang justru membuat tampilan blog menjadi kurang menarik untuk dilihat. Template ini lebih menitik beratkan pada perpaduan warna gelap dengan perbedaan-perbedaan warna yang tipis satu sama lain.
4. Selamat jalan iklan, dirimu ternyata kurang menguntungkan bagi Blogger Tune-Up dan hanya menjadi benalu yang terus menerus menggerogotiku. Keputusan yang dipertimbangkan sangat rumit ini akhirnya berbunyi "bahwa iklan pada Blogger Tune-Up dibuang". Tetapi tidak menutup kemungkinan dipasang lagi dikemudian hari jika hal itu dirasa perlu dengan syarat dan ketentuan yang telah ditetapkan dan dalam tempo yang tidak menentu. (Nyatut teks proklamasi)

Dalam proses pembuatan template ini, Blogger Tune-Up melibatkan beberapa software dan perangkat untuk membantu tahap demi tahap penyusunan kode-kode template, diantaranya:

1. HTML Notepad, software yang satu ini sungguh sangat membantu Blogger Tune-Up dalam merancang kode demi kode template. Software yang sedikit berbeda dengan Notepad standar ini sangat mumpuni karena mampu menulis dan menyimpan bahasa pemrograman HTML, XHTML, CSS, PHP, Perl, Java, VBScript, JavaScript, SQL, C#, Ruby, Python, XML syntax highlighting, can edit files: *.htm, *.html, *.css, *.js, *.php, *.php3, *.phtml, *.inc, *.pl, *.pm, *.cgi, *.xml, *.xsd, *.xsl, *.xslt, *.dtd, *.java, *.vbs, *.py, *.rb, *.rbw, *.cs, *.asp, *.aspx, *.jsp, *.sql, *.conf, *.txt, *.type, *.ini, *.sh. Selain itu ukurannya file softwarenya kecil yang hanya 436 Kilobyte dan tanpa perlu installasi pada sistem. Jika mau mencobanya, silahkan unduh disini.
2. Adobe Photoshop, siapa yang tidak kenal software Digital Imaging yang satu ini? Software ini digunakan untuk mendesain gambar Header dan beberapa bagian lainnya. Sedangkan untuk icon, Blogger Tune-Up mengambilnya dari Crystal Project milik Everaldo.
3. Adobe Dreamweaver, ada yang belum tahu software yang satu ini? Software ini digunakan untuk mendesain layout template mentah, mulai dari mendesain header, content, sidebar, footer, penempatan gambar, pencampuran warna dan lain sebagainya. Tetapi jangan harap bisa langsung dipakai template hasil desain pada Adobe Dreamweaver. Kita hanya dapat menggunakan desain CSS dan JavaScript-nya untuk digunakan pada blog kita, sedangkan kode XHTML dibuat pada HTML Notepad.
4. Laptop, mouse, keyboard, rokok, kopi dan listrik. Perlu dicantumkan link-nya?
5. Sedangkan efek yang digunakan Blogger Tune-Up antara lain; Kwick Menu, Sliding Panel, Facebox, Slide Accordion dan ScrollTop (tunggu artikelnya). Sebelumnya Blogger Tune-Up mencoba menggunakan Page Navigation milik Abu Farhan tetapi setelah dicoba pada template, ditemukan beberapa kejanggalan yang belum ditemukan perbaikannya.

Tetapi bukan berarti template ini sudah sempurna, justru masih banyak kekurangan yang masih menjadi Pekerjaan Rumah yang harus diselesaikan, diantaranya:

• Daftar Isi, ini masih menjadi permasalahan karena ternyata daftar artikel yang ditampilkan pada daftar isi tidak mampu sampai ratusan dan juga conditional expression-nya belum ditemukan yang cocok alias masih mumet. Ada saran?
• Search Site, ini juga masih menjadi masalah, karena hasil pencarian tidak bisa berupa link judul artikel saja, tetapi termasuk isi artikelnya. Mau ikut mengkoreksi?
• HTML Validation dan CSS Validation masih banyak terdapat kesalahan (error). Ada ide?
• Main Menu yang masih bingung isinya. Apa ya kira-kira?

Demikian sekilas tentang Blogger Tune-Up dengan template baru. Jika ada ide, saran, kritik, masukan, hujatan, cacian, makian, silahkan tinggalkan pada kotak komentar. Sedangkan untuk donasi, silahkan ditunggu dengan senang hati melalui PayPal.

Read more

Template Blogger Tag b:widget

Bagaimana dengan tutorial sebelumnya yang membahas Blogger Template Tag b:section? Mudah-mudahan sudah di pahami dengan baik. Jika belum mampu dipahami, ulangilah sampai benar-benar mengerti dengan maksud dan tujuannya. OK... Blogger Tune-Up menganggap sudah menguasai dengan baik, maka lanjutkanlah dengan artikel berikut yang akan membahas Blogger Template Tag b:widget. Seperti telah di bahas pada tutorial Anatomi Utama Tata Letak Template Blogger, bahwa widget adalah elemen halaman individu seperti gambar, blogroll, atau elemen lain dari sebuah bagian elemen halaman.

Tag <b:widget> bisa dikatakan sebagai wadah (container) dari berbagai elemen halaman. Satu tag <b:section> bisa berisi satu atau lebih widget, tetapi satu tag <b:widget> hanya dapat berisi satu elemen halaman. Widget dibuka dengan tag <b:widget> dan ditutup dengan tag </b:widget>, maka diantaranya hanya dapat diisi satu elemen halaman. Perhatikan gambar ilustrasi dibawah ini.

Jika dilihat dari gambar diatas dapat diterjemahkan bahwa;

• Tag <b:section> (kotak warna biru) dapat berisi beberapa widget
• Tag <b:widget> (kotak warna kuning) hanya dapat berisi satu elemen halaman
• Tag <b:section> dan tag <b:widget> berada didalam BODY CONTENT (berada diantara tag <body>)
• Hurup "b" didalam tag adalah singkatan dari "blog" sehingga jika dibaca menjadi "blog:section" dan "blog:widget"
• "Widget" dalam bahasa Indonesia adalah "Gadget", tetapi dalam kode template blogger tetap ditulis "widget"

Tag <b:widget> diikuti atribut seperti tabel dibawah ini.

Atribut	Diperlukan?	Keterangan
id	Diperlukan	Suatu nama yang unik bisa berupa huruf atau nomor, dan setiap ID widget di template blogger harus unik.Sebuah ID widget tidak dapat diubah tanpa menghapus widgetnya dan kemudian membuat yang baru lagi.
type	Diperlukan	Harus salah satu dari tipe widget yang diterima, tipe widget terdiri seperti daftar dibawah ini.
locked	Tambahan	Bisa 'yes' atau 'no', dengan 'no' sebagai standar. Widget yang terkunci tidak bisa dipindahkan atau dihapus dari tab "Tata Letak - Elemen Halaman".
title	Tambahan	Judul tampilan untuk widget. Jika tidak ditetapkan, judul secara standar akan disiapkan (misal "List1").
pageType	Tambahan	Bisa 'all', 'archive', 'main', atau 'item', dengan 'all' sebagai standar. Widget akan ditampilkan hanya pada halaman yang telah ditentukan untuk blog kita. Semua widget akan ditampilkan tab "Tata Letak - Elemen Halaman", dengan mengabaikan pageType.

Tipe (type) widget ditentukan sebagai berikut :

• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar

Contoh penerapan widget didalam template :

<b:section class="" id="headersection" maxwidgets="2" showaddelement="no">
<b:widget id="Header1" locked="true" title="Hendriono Online (Header)" type="Header">
...
...
kode-kode lainnya
...
...
</b:widget>
</b:section>

Demikian artikel kali ini tentang Blogger Template Tag b:widget mudah-mudahan bermanfaat.

Artikel selanjutnya : Blogger Template Tag b:widget untuk Layout

Read more

Template Blogger Tag b:section

Setelah belajar tutorial sebelumnya Anatomi Utama Tata Letak Template Blogger, maka sekarang kita melanjutkan ke tutorial yang lumayan lebih menyentuh kebagian dalam dari template blogger. Section yang pernah di pelajari sebelumnya yaitu wilayah paling luar dari halaman website kita. Maksud wilayah terluar adalah bagian yang membatasi satu bagian dengan bagian lain dan setiap bagian tersebut haruslah unik (harus berbeda satu dengan yang lainnya). Jangan sampai ada section yang sama hal ini akan mengakibatkan kesalahan (error) pada template blogger tersebut.

Satu section dapat berisi widget, tetapi tidak dapat berisi section lain atau kode lain. Seandainya kita ingin memasukan suatu kode diantara atau disekitar widget tertentu diantara suatu section, maka kita harus membagi section tersebut menjadi dua atau lebih section-section baru.(Langsung pusing...)

Tag <b:section> dapat diikuti atribut seperti tabel dibawah ini.

Atribut	Diperlukan?	Keterangan
id	Diperlukan	Suatu nama yang unik, bisa berupa huruf atau nomor. Sebuah ID sebagai suatu server yang unik untuk sebuah section.
class	Tambahan	Biasanya berupa kelas 'navbar', 'header', 'utama', 'sidebar', dan'footer'. Jika kita beralih template nanti, nama ini membantu Blogger menentukan cara terbaik untuk mentransfer isi (content) artikel kita. Namun, kita dapat menggunakan nama yang berbeda, jika kita menginginkannya.
maxwidgets	Tambahan	Jumlah maksimum widget yang diterima/diaktifkan pada section ini. Jika kita tidak membatasinya, maka tidak ada satupun.
showaddelement	Tambahan	Dapat 'yes' atau 'no' dengan 'yes' sebagai standar. Ini menentukan apakah tab Elemen Halaman akan menampilkan link 'Add a Page Element (Versi Indonesia : Tambah Gadget)' di section (bagian) ini. Lihat gambar
growth	Tambahan	Dapat 'horizontal' atau 'vertical,' dengan 'vertical' sebagai standar. Ini menentukan apakah widget dalam (section) bagian ini disusun secara berdampingan (side-by-side) atau berurutan (stacked). Lihat gambar

Contoh penerapan section didalam template :

<b:section id='header' class='header' maxwidgets="1"  showaddelement="no">
<b:widget id="header" type='HeaderView'  locked="yes"/>
</b:section>

Tutorial selanjutnya : Blogger Template Tag b:widget

Read more

Anatomi Utama Tata Letak Template Blogger

Tutorial kali ini Blogger Tune-Up akan mencoba membongkar Tata Letak (Layout) Template Blogger, dengan harapan mampu memberikan gambaran kepada para blogger bahwa membuat atau memodifikasi Template Blogger adalah bukan hal yang menyulitkan. Untuk memulai belajar, kita hanya perlu memahami sedikit (dulu) pengetahuan mengenai koding HTML (HyperTeks Markup Language) dan koding CSS (Cascading Style Sheet), tapi jangan kuatir kedepannya Blogger Tune-Up akan mencoba menyuguhkan tutorial HTML, XHTML, CSS dan bahasa Web Design lainnya lebih mendalam.

Sebelum kita memulai proses penelusuran Tata Letak (Layout) Template Blogger alangkah lebih baiknya persiapkan dulu peralatan pendukung supaya kita selalu bersemangat dan tidak mudah jenuh, diantaranya :

• Komputer lengkap dan koneksi internet
• Cemilan ringan
• Minuman berenergi
• Khusus laki-laki yang suka rokok jangan sampai kehabisan

Pada dasarnya Template Blogger hanya terdiri dari 2 (dua) bagian utama yaitu Head dan Body.
Head berisi tentang informasi website, kata kunci, dan beberapa pengaturan utama halaman website (misal; warna dasar, jenis hurup, posisi, dan lain-lain) bahkan bisa lebih kompleks dari ini semua. (Bingungkan....) Bagian Head merupakan pintu gerbang mesin pencari dalam memberikan informasi umum kepada calon pengunjung dan berpengaruh secara keseluruhan terhadap penampilan website. Bagian head dibuka dengan Tag <head> dan ditutup dengan Tag </head>, kode yang terletak di antara Tag tersebut merupakan bagian dari head. Pada umumnya head terdiri dari dua bagian yaitu kode Meta dan kode CSS. (Tambah bingung lagi...)
Body berisi hal-hal yang akan kita sampaikan kepada pengunjung (visitor) dapat berupa artikel, gambar, iklan dan hal-hal lain yang merupakan tujuan utama (isi) dari pemilik website. (Mulai pusing...) Bagian body dibuka dengan Tag <body> dan ditutup dengan Tag </body>, kode yang terletak di antara Tag tersebut merupakan bagian dari body.

Dibawah ini bagian dasar template blogger

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
<!-- SKIN CONTENTS -->
]]></b:skin>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>

Perhatikan Tag yang di highlight berwarna biru, itu merupakan bagian yang biasanya dimodifikasi/dibuat oleh para pembuat (desainer) template. Anggaplah diluar bagian yang berwarna biru adalah hal wajib yang tidak bisa ditawar untuk dimodifikasi. Untuk SKIN CONTENTS akan dibawah terpisah dalam tutorial CSS, sedangkan yang akan kita bahas jauh adalah bagian BODY CONTENTS. BODY CONTENTS berisi Section dan Widget.

Section adalah wilayah paling luar dari halaman website kita, seperti sidebar, footer, dan lain sebagainya.
Dekalarasi Section (Section Declaration)

<b:section id='header' class='header' maxwidgets="1"  showaddelement="no">
</b:section>

Widget adalah elemen halaman individu seperti gambar, blogroll, atau elemen lain dari sebuah bagian elemen halaman. Kita dapat memasukan berbagai kode HTML disekitar section dari template.
Deklarasi Widget (Widget Declaration)

<b:widget id="header" type='HeaderView'  locked="yes"/>
<b:widget id="myList" type='ListView' locked="no"  title="My Favorite Things"/>

Demikianlah sekilas mukadimah tutorial Tata Letak Template Blogger. Mudah-mudahan mulai pusing... :)
Tutorial selanjutnya : Template Blogger Tag b:section

Read more