Blogger Template Framework

Demo Download

'Blogger Template Framework' ini, seperti halnya 'WP Theme Framework', dikhususkan hanya sebagai kerangka dasar template. Saya membuat Blogger Template Framework ini sebagai pengganti template minima yang selama ini difungsikan sebagai framework. Dengan adanya template ini saya tidak terlalu repot lagi, atau banyak pembenahan jika ingin membangun sebuah template baru.

Perbedaan dasar Blogger Template Framework ini dengan Template Minima:

• Ukuran Lebar Template menjadi 940px,
• Tag tittle saya sudah rubah agar lebih friendly,
• Title pada postingan saya rubah menjadi H2 dan bisa menggunakan tag H3 untuk subjudul,
• Menu Navigasi,
• Search, dan beberapa hal lainnya.

Sip, semoga template ini bisa anda manfaatkan juga sebagai framewwork.

Read More

Free Blogger Template 1KB Grid

Demo Download

Free Blogger Template ini adalah hasil pengembangan dari Video Tutorial Edit Template Minima Blogger dengan Grid System. Grid system atau CSS Framework yang digunakan adalah dari The 1KB Grid.

Untuk lebih lengkapnya mengenai template ini dan penerapan Grid dalam template minima, anda dapat melihat pada Video Tutorial 3 tersebut, sehingga anda dapat memodifikasi atau mengembangkan template ini.

Catatan: Contoh readmore yang digunakan di template ini adalah readmore bawaan dari Blogger.

Sip terimakasih.

---
lihat juga:
Blogger Template dengan Grid System

Read More

Free Blogger Template Main Kolom

Demo Download

Free Blogger Template yang mencoba main kolom ini, tidak menggunakan javascript untuk mengatur kolom pada bagian halaman utamanya. Kolom pada template ini murni hanya menggunakan CSS. Jadi peran CSS ini untuk membedakan tampilan halaman muka (front-page) pada 'main page' yang terdiri dari tiga kolom, sedangkan pada halaman artikel hanya satu kolom.

Untuk masalah tampilan dengan menggunakan kolom, memang penggunaan javascript terlihat lebih sempurna dibanging sekedar CSS. Oleh karenanya pada template 'main kolom' ini ketika melakukan posting perlu dilihat tampilan setelah di 'publish'. Jadi bila ada yang terpotong pada bagian bawahnya mesti diperbaiki.

Saya sudah mencoba beberapa model paragraf, sejauh ini belum ada masalah. Nah yang perlu diperhatikan itu imagenya. Jika image pada postingan berada diatas, tidak masalah. Namun jika berada di tengah perlu diperhatikan agar tidak terpotong.

Supaya tampil lebih sempurna, template ini sudah menggunakan 'readmore' yang saya simpan di 'post-footer' pada bagian 'comment' (seperti standarnya template minima). Jadi readmore ini tidak menggunakan script yang rumit, sekedar link biasa.

Untuk footernya saya fungsikan sebagai tempat label. Karena hanya satu kolom, jika ingin menggunakan label dibagian ini gunakan dengan "Labels Cloud", sama seperti demo template ini.

Template ini pun sudah saya perbaiki untuk tampilan di IE6 dan IE7.

Sip semoga berkenan.

---
lihat juga template:

• Main Simpel: Free Blogger Template
• Blogger Template dengan Grid System

Read More

Free Blogger Template - Colour Lovers

Demo Download

'Free Blogger Template' ini menggunakan Colour Lovers untuk pemilihan kombinasi warna.

Dengan 'Colour Lovers' anda dapat memadukan warna berdasarkan foto atau gambar yang anda miliki. Seperti pada warna yang digunakan pada 'Blogger Template' ini adalah kaos tandang Barcelona FC.

Penggunaan 'Colour Lovers' ini sangat mudah, anda tinggal memasukkan 'url' alamat gambar di tool Colour Lovers. Secara otomatis tool Colour Lovers akan menerjemahkan warna kaos tandang Barcelona FC yang digunakan dalam gambar tersebut. Selanjutnya kita tinggal mengkombinasikannya.

Lebih lengkap anda dapat mempelajari Build Site Color Schemes from Photography.

Sip. Silahkan berkreasi memadukan warna dengan 'Free Blogger Template - Colour Lovers' ini.

Read More

Free Blogger Template - Ulet Bulu Ijo

Demo Download

'Free Blogger Template' ini, walau terlihat sederhana, tapi template ini saya konsep terlebih dahulu desainnya secara matang keseluruhannya di photoshop, karena saya ingin bermain dengan image dan warna hijau. Setelah saya merasa secara desain telah memenuhi selera, baru kemudian saya potong-potong perbagian (slice) dari image tersebut untuk terapkan di template.

Di beberapa bagian image template ini saya menggunakan teknik 'Sprites CSS', dan javascript yang digunakan 'jQuery' hanya untuk fungsi 'Back to Top'.

Untuk tampilan di IE 6, template ini sudah saya perbaiki, sehingga disemua browser template ini terlihat cukup baik. Sip semoga anda tertarik dengan 'Free Blogger Template Ulet Bulu Ijo' ini.

Read More

Main Simpel: Free Blogger Template

Demo Download

Main Simpel, 'Free Blogger Template', ini dibuat karena mulai tertarik dengan template yang simpel. Template ini tidak menggunakan bagian 'sidebar' lagi, jadi sepenuhnya elemen lain tersimpan dibagian bawah dalam beberapa kolom. Pada halaman 'index' atau 'fontpage', hanya menampilkan judul, tanggal dan 'post footer' (berupa 'author', 'comment' dan 'label'), sisi simpel 'free template' ini lebih kesana.

Template ini sebenarnya lebih mudah menggunakan 'grid system' seperti pada Blogger Template dengan Grid System, tapi tidak jadi, karena ingin memberikan trik lain diluar penggunaan grid pada video tutorial-2 edit template minima.

Sip terima kasih, semoga template ini berkenan di hati :).

Read More

Blogger Template dengan Grid System

Demo Download

Free Blogger Template ini menggunakan teknik 'grid system' dari The 960 Grid System. Dengan sistem grid ini kita akan dapat mudah melakukan pembagian tiap kolom pada template tanpa perlu lagi menggunakan width atau ukuran lebar dari kolom, serta float. Kita tinggal menambahkan tag class di setiap elemen, seperti class='grid_1' berarti jumlah kolom yang kita butuhkan 1, class='grid_2' berarti jumlah kolom yang kita butuhkan 2, dan seterusnya.

Nah dengan The 960 Grid System, secara otomatis lebar template 960px, kita tinggal menentukan jumlah kolomnya, ada 2 pilihan yaitu 12 dan 16 kolom, pada free blogger template ini menggunakan 12 kolom (class='container_12'), lihat demo bentuk pembagian kolom dari 'grid system' tersebut.

Penggunaan The 960 Grid System di Blogger Template sangat mudah, kita tinggal mendownload sourcenya. Source dari 'The 960 Grid System' ini ada 2 yang kita butuhkan, yaitu kode CSS '960' dan 'reset'. Kedua kode CSS itu yang kemudian kita input ke dalam blogger template kita.

Jika anda ingin merubah lebar dari salah satu element, misal pada main-wrapper:

<div class='grid_8' id='main-wrapper'>

anda tinggal merubah angkanya 8 tersebut, grid_8 berarti menggunakan 8 kolom pada main.

Secara keselurahan 'Blogger Template Grid System' ini pembagian elemennya seperti berikut (klik gambar untuk memperbesar):



Jika anda ingin mengetahui lebih lanjut menggenai 'Grid System' ini dapat anda pelajari dibeberapa alamat di semuanya tentang 'Grid System' terutama video tutorialnya.

Read More

Nge-grunge dengan sIFR 2.0 - Free Blogger Template

DemoDownload

'Free Blogger Template' kali ini mencoba konsep 'grunge' dengan menggunakan sIFR 2.0 untuk mengganti jenis Font/Text pada heading, kecuali h3 pada title postingan, karena sIFR 2.0 tidak mendukung text link (sIFR 3.0 bisa digunakan untuk text link, tapi textnya belum bisa digunakan untuk background transparent).

Anda dapat merubah semua jenis font heading yang saya gunakan sesuai selera anda, caranya dapat anda lihat di Menggunakan sIFR 2.0 di 'Blogger Template'. Sip semoga tertarik.

_____
lihat juga berbagai jenis font "grunge" berikut:
76 Dirty, Extreme And Creative Free Grunge Fonts

Read More

Bukan Template Coklat - Free Blogger Template

Demo Download

Free Blogger Template yang bernama 'Bukan Template Coklat' ini tidak bermaian dengan javascript, hanya bermain dengan CSS dan HTML. Kekuatannya hanya permainan warna coklatnya saja.

Template ini akan tampil lebih sempurna hanya pada browser terbaru, terutama firefox, sebab menggunakan atribut Text-Shadow yang merupakan pengembangan dari CSS3.

Jika anda ingin memodifikasi template ini silahkan saja, bahkan menghilangkan karakter dasar template ini.

Sip terimakasih.

:: lihat juga:
Free Blogger Templates dengan sentuhan jQuery
Free Blogger Templates dengan sentuhan jQuery - 2
Free Blogger Template dengan "Cufón"
Ini Minimalis Kah? Free Blogger Template

Read More

Ini Minimalis Kah? Free Blogger Template

Demo Download

Setelah membuat konsep desain template blogger 3D dan typo dengan cufon, akhirnya kepengen juga buat konsep template minimalis, tapi konsep ini tidak terlalu yakin masuk kategori minimalis, jadi template ini diberi nama "Ini Minimaliskah?".

'Free Blogger Template' ini masih menggunakan javascript, seperti pada menu, scroll up down dan link nudging dengan jQuery. terus jangan lupa untuk template ini apabila ingin posting, pada paragrap pertama, huruf pertamanya menggunakan <span class="frame">, contoh:

<span class="frame">H</span>ello

Sip semoga template ini ada yang suka.

Read More

Free Blogger Template dengan "Cufon"

demo download

'Free Blogger Template' ini menggunakan javascript untuk mengganti jenis font pada heading (h1, h2, h3, h4, dan h5). Jenis javascript yang digunakan adalah Cufón dan jenis Font "TypoLatinserif-Bold_700".

Typo-Cufón Blogger Template

Penggunaan Cufón di blogspot memang agak tidak sempurna, karena ketika loading masih terlihat jenis font aslinya, namun itu alternatif lain agar font tidak terlihat standar lagi dan lebih variatif.

Pada template ini tidak menggunakan image sama sekali, hanya bermain desain warna dan text (typo).

Penerapan Struktur Heading pada Blogger Template ini

H1 pada header
H2 pada judul postingan (standar blogspotnya h3)
H3 pada judul sidebarnya (standar blogspotnya h2)
H4 pada comment, dan
H5 pada tanggal.

Penggunaan heading h3 dapat digunakan pada tiap postingan anda, untuk subjudul.

>> Catatan Pengguna template ini harap menggunakan trik menghilangkan font jenis asli untuk pengguna cufon.

:: Jika anda ingin memanfaatkan Cufón ini dapat dilihat di Cufón pilihan lain untuk sIFR

:: Lihat juga free blogger template lainnya:
- Free Blogger Templates dengan sentuhan jQuery - 2
- Free Blogger Templates dengan sentuhan jQuery

Read More

Free Blogger Templates dengan sentuhan jQuery - 2

DemoDownload

Ini 'free bloggger template' yang kedua sebelum template 'jQuery in Blogger Template', dan template yang bergaya 3D ini saya namakan 'jQuery in Blogger Template II - Lemon Fruit Taste. Free Blogger Template'

Free Blogger Template ini menggunakan fasilitas jQuery, diantaranya:

1. Back to top whit smoothscroll.
2. Link hover animation.
3. SlideShow.
4. Dropdown Menu.

Read More

Free Blogger Templates dengan Sentuhan jQuery

Demo Download

"Free Blogger Template" ini saya buat karena ketertarikan saya terhadap fungsi jQuery yang memberikan sentuhan dinamis bagi sebuah web atau blog.

Template ini pun sengaja saya buat sedikit menyerupai situs resmi jQuery dengan warna yang berbeda.

Fasilitas jQuery yang digunakan pada tempate "jQuery in Blogger Template" ini adalah:
1. back to top
2. link hover animasi, dan
3. Toggle or slide panel.

:: Update: Fix IE6 dan Opera 9

Read More