Bootstrap untuk Template Blogger
Bootstrap Framework
Bootstrap sebagai framework CSS dan Javascript sudah sangat terkenal dan handal dalam membantu pengembang website.Dengan fitur yang lengkap dan kemudahan dalam menggunakannya, tentu akan memanjakan para pengembang website termasuk juga pengembang aplikasi berbasis website. Bootstrap bisa di buat dengan gaya minimalist tapi terlihat modern, karena kode yang ada di dalam bootstrap sendiri sangat diperbarui. Sampai saat ini, bootstrap sudah mencapai versi 4 tapi masih tahap alpha. Perlu di ketahui, disetiap versi bootstrap penggunaannya tidak bisa disamakan. Karena struktur penulisan kodenya sudah berbeda, terutama setiap versi utama (v2, v3 dan v4). Jika kita menggunakan kode yang ada di dokumentasi bootstrap v4, maka gunakan juga bootstrap v4.Fitur lengkap, diantaranya:
Image Thumbnail, bisa untuk mengatur gambar terlihat seperti gallery (di dalam postingan).
Icon, bervariasi dan mudah disesuaikan.
Responsive embed, menambahkan video di postingan dengan mudah dan pasti responsive.
Template Blogger
Template Blogger berperan sebagai pengendali tampilan blog itu sendiri. Penulis Blog harus menguasai template yang digunakan agar sesuai dengan keinginan penulis. Walaupun kita dapat menggunakan template siap pakai, tapi kita juga diharuskan setidaknya mengetahui struktur template blogger seperti: body, header, main-content, sidebar dan footer. Pada dasarnya struktur penulisan template blogger itu sama hal dengan template html pada umumnya. Tapi pihak blogger menambahkan aturan khusus dalam penulisan templatenya. Di mana didalamnya terdapat sedikit kode blogger untuk mempermudah dalam mendesain templatenya, tapi bagi orang awam memang terasa sedikit sulit memahami kode seperti: include, if, else dan sebagainya.Apa saja yang dibutuhkan?
Kode Editor, saya rekomendasikan Notepad++. Selain gratis dan portable, banyak juga fitur yang tersedia dan yang paling saya suka itu fitur Project/Workspace, kita bisa membuat daftar file mana saja yang ada dalam project kita. Juga fitur Collapse, berfungsi untuk menyembunyikan (toggle) kode yang panjang dalam satu baris. Download dan pilih yang versi minimalist (portable) tanpa plugin, v3.7.2 ukuran sekitar 1.1Mb (compressed). Atau alternatif code editor lain yaitu Scintilla/Scite, bersifat portable dan sangat kecil ukurannya (900Kb - single file uncompressed). Fitur sudah cukup untuk sebuah code editor yaitu collapse, bookmark, session dan bisa export to rtf/pdf/html.Ctrl + Shift + I, Firefox: Ctrl + Shift + M Pengenalan Dasar
Mempelajari Komponen dasar Template HTML
Sebelum mendesain Template untuk blogger, lebih dulu kita membuat desain HTML dan nanti kita terapkan ke Template Blogger. Sama seperti bahasa pemrograman berbasis web yang menggunakan template HTML, jadi Template HTML ini adalah dasar dari Template Blogger. Seperti dijelaskan diatas, kita memilih Framework Bootstrap untuk Template Blogger. Karena memang bootstrap sendiri banyak digunakan oleh pengembang web/desainer template HTML.Komponen Dasar HTML
Open Tag HTML, dimulai kode <html>, namum kita di sini akan menggunakan doctype HTML5 yaitu HTML yang terbaru, ini juga merupakan standar dalam penggunaan Bootstrap <!DOCTYPE html><html lang="en">. Fitur HTML5 sangat berguna dan pastinya memanjakan desainer, contohnya Placeholder pada input text yang otomatis terisi text tanpa mempengaruhi inputan yang diisi user: <input placeholder="Masukkan Password">. Dan jangan lupa untuk menulis close tag html </html> diakhir code.
Pengenalan CSS
CSS, adalah inti dari style sebuah template HTML. Mengatur warna, lebar halaman, besar font dan lainnya. Untuk menggunakan kode CSS didalam template HTML kodenya: <style></style> atau bisa juga memasukkan link dari file .css dengan kode <link rel="stylesheet" src="lokasifile.css"/>lokasi CSS ini berada di dalam tag <head> Bootstrap sudah menggunakan fitur CSS3 yang modern, salah satunya yaitu bisa menghandle sedikit logika bahasa program. Contoh: first-child{}, first-of-style{}, first-child(odd){}, nth-of-type(odd){}dan sebagainya. CSS3 juga sudah support opacity dan gradasi warna background, untuk menggunakan gradasi kita butuh tools online.
Pengenalan Javascript
Javascript selain berguna bagi programmer, juga berfungsi sebagai pemanis tampilan web. Contoh sederhana yaitu efek hover pada anchor yang bisa disisipkan style berkedip. Bisa juga scroll halaman/frame secara otomatis ketika di hover (di sorot). Open tag javascript: <script type="text/javascript"></script> Atau bisa memanggil file.js dengan menggunakan kode <script src="lokasifile.js"/> jQuery adalah framework javascript yang paling banyak digunakan, Bootstrap sendiri menggunakan jQuery sebagai bagian dari frameworknya. jQuery sudah menjadi bagian wajib bagi sebuah website, gunakan versi jQuery yang sesuai untuk Bootstrap dan plugin tambahan lain (jika ada). Pastikan tidak terjadi bentrok antara fitur Bootstrap dan plugin tambahan lainnya. Posisi Javascript berada di dalam tag <head>
Pengenalan Framework Bootstrap
Bootstrap sangat mudah digunakan, karena semua fitur yang ada sudah distandarisasikan. Terlebih sudah banyak dukungan dari pihak lain berupa plugin, seperti icon oleh glyphicon (default) dan icon sosial media. Untuk plugin javascript bawaan dari bootstrap sudah sangat cukup, fitur dari plugin javascript ini sebenarnya tersedia juga pada jQuery plugin. Tapi pihak bootstrap merancang ulang agar mudah digunakan bersamaan dengan frameworknya, mungkin juga dengan alasan kompabilitas.
Mempelajari Struktur Dasar Template Blogger
Layout Template BloggerTemplate Blogger berisi komponen Layout agar tersusun lebih rapih, yaitu Section dan Widget. Sedangkan untuk penulisan codenya ada banyak function yang memudahkan kita menyusun template diantaranya: includeable, include, if else, loop dan sebagainya. Blogger juga menyedian banyak data, yaitu data global, archive, profile, post, popular post dan sebagainya.
Section di sini sebenarnya sama halnya dengan komponen html yaitu Header, Main Content, Sidebar dan Footer. Dalam prakteknya, designer sering mengabaikan section untuk Header dan Footer, mereka hanya menulis kode html biasa kedalamnya.
Masing-masing komponen harus memiliki id dan attribute lain agar mempermudah penggunaannya. Contoh: <b:section class="main" id="main" showaddelement="no"></b:section>. Section tersebut mempunyai ID main yaitu berarti komponen utama template (main content), didalamnya terdapat blog post, detail post, comments, form-comment, paging dsb. Untuk Section Sidebar contoh kodenya: <b:section class="sidebar" id="sidebar" preferred=&qout;yes">.
Sedangkan untuk Widget ini adalah komponen yang ada di dalam Section. Blogger menyediakan fitur GUI untuk memindahkan widget, contoh di sidebar posisi widget bisa mudah dipindahkan dari atas ke bawah atau sebaliknya. Widget juga harus mempunyai ID dan attribut lain, contoh kode <b:widget id="PopularPosts2" locked="false" title="Popular Posts" type="PopularPosts" version="1" visible="true"></b:widget>. Attribute locked="false" itu berarti posisi widget bisa dipindahkan (didalam GUI tata letak blogger), jika nilainya true itu berarti posisi widget tidak bisa dipindahkan.
Banyak sekali function yang disediakan oleh Blogger, function ini berada di dalam widget. Oleh karenanya penulisan logika di blogger selalu berada di widget. Contohnya untuk penulisan paging, di dalamnya terdapat function if else yang berfungsi untuk mengetahui lokasi url yang sedang aktif. Di Blogger sendiri, function ini disebut Widget Tags karena memang berada di dalam Widget.
Contoh:Include dan Includeable, Includable adalah tag untuk komponen yang bisa di panggil kembali menggunakan Include. Contoh:
<b:includable id="post" var="post">
Title: <data:post.title/>
</b:includable>Hasil dari kode di atas dapat dipanggil kembali dengan menggunakan Include:
<b:include name="post"/> Data terbagi menjadi dua kategori yaitu Global dan Private. Data Private hanya bisa dimuat di dalam Section > Widget. Sedangkan Global data artinya data yang bisa di panggil bebas di mana saja tanpa harus membuat section dulu, contoh: <data:blog.title/> <data:blog.pageType/> <data:blog.url/> <data:blog.homepageUrl/> <data:blog.pageTitle/>.
Membuat Template Blogger
Konsep Template
Konsep disini saya buat yang sesederhana mungkin, template khusus untuk blog berita, review film/drama atau untuk blogger yang suka dengan tema minimalist. Saat ini mayoritas browsing menggunakan smartphone dengan browser canggih (chrome/firefox) dan template ini tentu mendukung browser modern tersebut. Tampilan yang responsive bisa menyesuaikan dengan perangkat yang digunakan (smartphone, tablet, desktop). Kesimpulan, saya gunakan konsep Minimalist Responsive, dengan hanya memasang 2 kolom (main content dan sidebar). Contoh template sederhana tersedia di website Bootstrap.Sketch Design
Design tidak berbeda dengan template dasar, yaitu header menu, main content, sidebar dan footer. Semua komponen tersebut nantinya akan menggunakan style bawaan bootstrap, hanya sedikit penyesuaian tata letak, ukuran dan warna.
Fitur Template
Sementara ini template hanya menyediakan (styling) fitur utama blog, sangat basic dan memerlukan pengembangan lebih lanjut. Fitur yang sudah ada, yaitu:
> menu
# home
> header label (author and time post)
> image thumbnail auto resize and fix position to left
> post summary
# post detail
> header label (author and time post)
# paging
> paging numbering
> paging nextprev
# status message (search result)
# sidebar
> blog archive
> author profile (single author)
> popular post
# footer
> menu
> copyright
Fitur lainnya masih menggunakan style bawaan blogger atau memang belum di dibuat kodenya, seperti breadcrumb, blog label (sidebar widget), share menu (post detail). Bisa juga ditambahkan sendiri, silahkan pelajari struktur kode templatenya.
boleh dicoba nih mas. thanks infonya.
ReplyDeleteGod
ReplyDelete