Mode mobile unactive
  2. tutor sederhana
  3. Membuat Template Blogger Minimalist Modern Bootstrap

Membuat Template Blogger Minimalist Modern Bootstrap

           

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.
 Link to Official Website Bootstrap / Panduan Penggunaan Komponen
 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.
 Link to Official Blogger Help - Layouts Data Tags - Widget Tags for Layouts - Page elements tags for layouts

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.
 Link to Download Notepad++. Scintilla download page
Tips! Kita bisa menyimpan session kode yang tengah kita kerjakan agar konfiguasi (collapse aktif dsb) akan tetap aktif untuk dikerjakan dihari selanjutnya. Kita juga bisa membuat workspace (berisi file apa saja yg sedang kita kerjakan), juga ada fitur folder as workspace.
Modern Browser, seperti Google Chrome dan Mozilla Firefox browser yang paling banyak digunakan. Fitur Developer Tools dibrowser tersebut sangat berguna untuk kita, terutama variasi mode device. Kita bisa melihat bagaimana tampilan blog kita jika diakses menggunakan device yang berbeda.

Tips! Untuk masuk ke mode device kita bisa gunakan shortcut Chrome: 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.

Link to Pengenalan komponen HTML

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.

Link to Pengenalan CSS3, Tips & Trick CSS3
Info! Kombinasi opacity dan gradasi warna background di CSS3 sangat luar biasa untuk style header dan footer!

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>

Link to Pengenalan Javascript, docs jquery
Info! Bootstrap v3.3.7 dapat berjalan dengan baik pada jQuery versi 1.12.4

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.

Link to CSS Bootstrap, Component Bootstrap, Javascript plugin Bootstrap
Info! Pastikan menggunakan doctype HTML5 dan meta tag untuk kompabilitas mobile, atau bootstrap tidak akan berjalan normal.

Mempelajari Struktur Dasar Template Blogger

Layout Template Blogger

Template 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.

Link to Page Element - Section & Widget
Function Blogger

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"/>
Link to Widget Tags for Layouts
Data Tags - Data yang ada Blogger

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/>.

Link to Layouts Data Tags

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.
 Link to Responsive Web Design

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.

Gambar 1: Sketch Basic
Gambar 2: Sketch Home Page
Gambar 3: Sketch Sidebar Detail
Gambar 4: Skecth Post Detail

Fitur Template

Sementara ini template hanya menyediakan (styling) fitur utama blog, sangat basic dan memerlukan pengembangan lebih lanjut. Fitur yang sudah ada, yaitu:

# header
   > 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.

Download Template XML   Demo
  Lanjut lagi nanti..
Sharing this:

Post Terkait Membuat Template Blogger Minimalist Modern Bootstrap

2 comments Membuat Template Blogger Minimalist Modern Bootstrap

Recent Comments

About Me!

No \n Profile \n Img [80x80]

Popular Posts

Img