28 Oktober 2007

Fenomena Pesta Blogger 2007


Kalau tidak dari rasa penasaran saya tentang perkembangan para blogger di Indonesia mungkin saya tidak akan datang di Pesta Blogger 2007 ini, selain saya tidak mendapatkan 'tiket gratis' :) untuk masuk karena telat register yang akhirnya harus rela merogoh kocek Rp.100.000,- untuk menyaksikan ajang ini, siapa tahu saya mendapat sesuatu yang baru dari 'pesta' ini seperti 'Bagaimana cara Melek Internet untuk nge-Blog' yang mungkin saya dapat membantu melalui trik-trik yang akan saya berikan melalui blog saya.

Tapi seperti yang saya duga sebelumnya acara ini gak beda dengan acara-acara 'kopi darat' dari millis-millis yang pernah saya ikuti sebelumnya, selain silaturahmi para blogger terlihat sibuk untuk saling tuker kartu nama dan foto bareng dimana-mana.

Poin yang menarik dari ajang ini adalah dicanangkannya tangal 27 Oktober secara sepontan sebagai 'Hari Blogger Nasional' oleh Menkominfo Mohammad Nuh yang hadir di acara tersebut, tapi yang sedikit aneh kok ya... pak menteri menantang para blogger untuk berlomba bikin lagu, jangan-jangan nanti lagunya akan menjadi lagu wajib di 'Indonesia Idol' berikutnya lagi... :)

Belum lagi Dirjen Aplikasi Telematika, Cahyana Ahmadjayadi yang akan membuat program 'Laptop for Teacher'' untuk "Bagaimana kalau kita canangkan juga, tahun depan itu kita mencapai angka sejuta blogger", katanya. yang pada saat ini tercatat ada sekitar 130 ribu blogger.

Kalau saja tantangan Pak Menteri ini dengan memberi akses internet murah misalnya, wah... ini pasti lebih menghebohkan :) gak perlu kecepatan tinggi, sama saja dengan dial-up (64kbps) atau dibawahnya juga gak masalah asal unlimited dengan biaya 50 ribu/bulan misalnya dan kalau para guru dikasih laptop terus akses internetnya gimana yah? :) walah yang ada jangan-jangan malah dipake maen game aja lagi laptop-nya dirumah... hehehe.

Akses Internet murah mungkin bisa dengan DPLC (Distribution Power Line Communication) akses internet melalui jaringan listrik punya anak perusahaan PLN, ICON+ (memang program ini hampir tak terdengar yah...) Jadi bukan cuma guru aja kan yang bisa nge-Blog? sodara2 kita yang ada di gunung-gunung pun bisa ikutan... siapa tau... seandainya... halah...

Dan dari Pesta Blogger 2007 ini pula kayaknya panitia gak rela kalau nantinya jadi hanya 'Pahlawan Tanpa Tanda...', terlihat dari blog-blog favorit di ajang ini hampir didominasi oleh blog-blog milik panitia saja, sampai blog pendatang barupun kayaknya juga yah...

Dan yang gak jelas, cara penilaiannya itu gimana yah? bisa milih sampe 5 nominator terpilih itu? masalahnya yang menang aja bingung... hehehe seperrti Jennie S.Bev yang terpilih sebagai 'Celebrity Blog'. "Celebrity Blogger? Saya agak bingung juga dengan kategori ini sebenarnya, kok bukannya kategori “learning” atau “motivasi”? Tapi ndak apa-apalah, yang penting partisipasi.)" begitu Kata Jennie di blog-nya.

"Acara utama kita tetap kumpul2x blogger dalam Pesta Blogger 2007, acara pemilihan blog favorit ini hanya sebagai tambahan atau side-dish aja..." kata Enda (Ketua Panitia) di salah satu komentar di blog "Pesta Blogger 2007" yang juga menerima 'laptop' untuk terpilih sebagai blog ter-favorit di ajang ini, tapi secara spontan Enda menyerahkan laptop ini ke pemenang ke-2.

Tapi secara keseluruhan saya akui acara ini cukup bagus untuk cikal bakal perkembangan para Blogger di Indonesia untuk lebih meningkatkan kualitas nge-Blognya.

Maju Terus Blogger Indonesia!!!


15 Oktober 2007

Menambah Kolom di Blogspot


Sebenarnya kalau kita sedikit saja mau tau apa isi yang ada di kode html template blogspot kita mungkin akan lain ceritanya bahkan akan timbul ide lebih luas lagi bukan sekedar cuma menambah kolom saja, tapi bagaimana kita merapihkan tampilan yang ada di kolom-kolom tersebut misalnya, dan lagi kode template-template ini relatif pendek walaupun kalau di copy ke MS.Word jadi kurang lebih 10 halaman :) gak percaya? coba aja.

Trik yang saya mau coba kasih disini bukan sekedar copy kode HTML dan paste di editor template milik kita, atau uploud dan replace file .xml-nya (walaupun di akhir tulisan ini bisa di download template file .xml yang saya pakai), karena selain sudah banyak yang memberikan trik ini kita tidak pernah tau kalau misalnya ada sisipan tag (program) yang di link ke website pembuat template tersebut.

Template yang ada di blogspot merupakan program HTML walaupun dibungkus dengan XML supaya bisa difungsikan sebagai data, disini saya tidak membahas mengenai XML tapi HTML-nya.

Apa sih HTML? Nah noh katanya mau buat template kok malah ngebahas HTML? Iya ini hanya untuk yang masih remang2 aja tentang HTML, jadi yang sudah paham bisa dilewatkan poin ini, dan paling beberapa baris saja sekelumit tentang HTML-nya.

HTML merupakan singkatan dari HyperText Mark-up Language yaitu bahasa standard yang digunakan untuk mengatur atau menampilkan materi-materi informasi yang akan di terjemahkan oleh browser (Firefox, IE, dll).

Untuk simple-nya di HTML itu hanya ada 2 bagian yaitu:

bagian 'head' dan bagian 'body'

di bagian 'head' untuk mendefinikan sesuatu yang akan dipakai di 'body' (ini juga kalau ada), sementara di 'body' untuk menampilkannya.


<html>
<head></head>
<body>Ini Isi Body</body>
</html>

Coba copy kode HTML di atas dan paste di 'notepad' simpan dengan nama file test.html jalankan di browser, ya... itu udah file html. Sedangkan untuk memasukkan kode lain, masukkan saja di antara kedua tag body.

Setiap kode HTML harus ada tag pembuka <nama tag> dan tag penutup </nama tag>, dan kalau ada yang masih pernah merasakan memakai program Pengolahan Kata WS (WordStar) versi 4 atau 5 untuk membuat tebal (bold) text di program itu kan kita harus kasih tag seperti ini <b>ini text</b> atau untuk memiringan (italic) text <i>ini text</i>, tag ini sama saja di html.

Mau tes? silahkan buka dengan 'notepad' file HTML (test.html) yg disimpan tadi dan edit text yang didalam body menjadi:

Ini <b>Isi</b> Body

Simpan dan jalankan di browser!
Mungkin itu pengertian simple tentang HTML, dan yang ingin mengetahui lebih lanjut tentang HTML atau tag-tag apa saja yang bisa digunakan silahkan masuk ke website w3schools

Langkah-langkah Menambah Kolom

Trik yang saya coba untuk membuat menjadi 3 kolom pada template blogspot ini adalah dengan menduplikasi kolom kecil yang ada di template tersebut, dari definisi (variable dan css) sampai tampilan yang ada di body html-nya.

Sebagai experiment template yang saya gunakan adalah Template No. 897 Oleh: Douglas Browman, dan karena hampir semua template blogspot yang ada untuk pembagian dari definisi sampai tampilannya hampir semua relatif sama, untuk model lain silahkan ber-experiment sendiri.

Berikut Pembagian umum yang ada di template blogspot:

- header (bagian header atau image banner yang ada di atas halaman)
- main (kolom posting-an)
- sidebar (kolom yang lebih kecil)
- footer (kaki halaman)

Nah Pembagian diatas saya coba menduplikasi semua definisi yang ada di head dan penempatan di body untuk bagian 'sidebar' menjadi 'leftbar'

Berikut Langkah-langkahnya:

Langkah-1
Masuk Menu 'Template' | 'Edit HTML'
Sebelum mencoba sebaiknya back-up template anda yang sekarang, 'copy' (Ctrl-C) kode HTML yang ada di editor dan 'paste' (Ctrl-V) di notepad. Apabila terjadi error atau kegagalan dalam pengeditan anda tinggal paste kode tersebut di editor otomatis template anda akan kembali lagi.

Langkah-2
Duplikasikan definisi penentuan warna dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebarBgColor' dimana letak tag definisi dimaksud.

<Variable name="leftbarBgColor" description="Leftbar Background Color"
type="color" default="#556655" value="#EBE6E0">
<Variable name="leftbarHeaderColor" description="Leftbar Title Color"
type="color" default="#889977" value="#4c4c4c">
<Variable name="leftbarTextColor" description="Leftbar Text Color"
type="color" default="#ccddbb" value="#666666">
<Variable name="leftbarLinkColor" description="Leftbar Link Color"
type="color" default="#ffffff" value="#7f7f7f">
<Variable name="leftbarVisitedLinkColor"
description="Leftbar Visited Link Color"
type="color" default="#aabb99" value="#333333">

Copy (Ctrl+C) tag di bawah ini yang merupakan duplikat dari tag diatas tetapi sudah diganti semua text yang berwarna biru dari 'sidebar' menjadi 'leftbar' dan Paste (Ctrl+V) dibawah dari tag diatas.



Langkah-3
Duplikasikan definisi penentuan font dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebarHeaderFont' dimana letak tag definisi dimaksud.

<Variable name="sidebarHeaderFont" description="Sidebar Title Font"
type="font" default="normal bold 125% Helvetica, Arial, Verdana, Sans-serif" value="normal bold 124% Trebuchet, Trebuchet MS, Arial, sans-serif">

Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.



Langkah-4
Duplikasikan definisi konfigurasi kolom dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebar-wrapper' dimana letak tag definisi dimaksud.

#sidebar-wrapper {
background:$sidebarBgColor;
width:185px;
float:right;
padding:0;
border-top: 1px solid $frameColor;
border-bottom: 1px solid $frameColor;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
margin:0;
padding:2px 12px 10px;
}

Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.



Langkah-5
Duplikasikan definisi Warna Link dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebar a:visited' dimana letak tag definisi dimaksud.

#sidebar a {
color: $sidebarLinkColor;
}
#sidebar a:visited {
color: $sidebarVisitedLinkColor;
}
#sidebar a:hover {
color: $sidebarVisitedLinkColor;
}

Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.



Langkah-6
Duplikasikan definisi Pengaturan Posisi Element didalamnya dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebar a:visited' dimana letak tag definisi dimaksud.

/* Sidebar
----------------------------------------------- */
.sidebar h2 {
margin:1em 0 .25em;
line-height: 1.4em;
font: $sidebarHeaderFont;
color: $sidebarHeaderColor;
text-transform:lowercase;
}
.sidebar .widget {
margin:0 0 1.5em;
padding:0;
}
.sidebar ul {
list-style:none;
margin: 0;
padding: 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 20px;
text-indent:-20px;
line-height:1.4em;
}

Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.



Langkah-7
Penambahan untuk Struktur Halaman
untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'Page structure' dimana letak tag definisi dimaksud.

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
margin-top: 0;
}
body#layout #main,
body#layout #sidebar {
padding: 0,
body#layout #leftbar {
padding: 0
;
}
body#layout #main-wrapper,
body#layout #sidebar-wrapper {
height: auto,
body#layout #leftbar-wrapper {
height: auto
;
}

Tambahkan perintah text yang berwarna merah yang sebelumnya tidak ada.

Langkah-8
Menempatkan Posisi kolom baru (leftbar) di Body Template.
Ada 2 model pilihan untuk menyisip kolom baru yang kita buat, yaitu :

Model-1: 2 kolom kecil berada pada sisi kiri dan kanan halaman atau
Model-2: 2 kolom kecil berada pada sisi kanan saja (seperti template yang saya gunakan)

Untuk Model-1 copy dan paste tag dibawah berikut:



Sebelum tag berikut (cari dengan keyword 'div id='main-wrapper'') :

<div id="'main-wrapper'"> <b:section class="'main'...

Sedangkan untuk Model-2, letakkan Sebelum tag (cari dengan keyword 'div id='sidebar-wrapper''):

<div id="'sidebar-wrapper'"> <b:section class="'sidebar'...

Langkah-9
Langkah terakhir adalah menentukan/merubah besar kolom dari ke-3 kolom yang telah kita buat:

Rubah angka lebar (width) dari masing-masing class dibawah ini!
angka (warna biru) berikut adalah konfigurasi yang digunakan pada template yang saya gunakan (cari dengan nama class untuk merubahnya, contoh '#outer-wrapper').
Silahkan rubah sesuai kebutuhan template anda.

// Lebar Keseluruhan template, standard yang digunakan untuk screen 800x600px
#outer-wrapper {
...
width:779px;
...

// Lebar Kolom Kiri, atau kolom yang baru dibuat
#leftbar-wrapper {
...
width:146px;
...

// Lebar Kolom main (Postingan)
#main-wrapper {
...
width:420px;
...

// Lebar Kolom Kanan
#sidebar-wrapper {
...
width:185px;
...

Untuk memastikan kalau template kita sudah berubah coba masuk ke halaman
'Template' | 'Element Halaman' bila berhasil kolom yang anda buat akan muncul disana, dan untuk merubah warna sesuai selera anda kolom, font, dll seperti biasa tetap bisa di update melalui halaman 'Template' | 'Font dan Warna'.

Jadi secara customize tidak ada yang berubah sama sekali dari kebiasaan anda untuk meng-update blog anda.

Bagi yang ingin langsung memakai template di atas tanpa harus pusing mengikuti langkah diatas :)

Silahkan Downlaod di URL berikut : Blogspot Free Template
Dari Menu 'Template' | 'Edit HTML' | 'Backup/Restore Template' Upload file .xml tersebut dan 'save'.

Jangan lupa untuk mem-backup template anda sebelum melakukan langkah diatas, atau untuk experiment silahkan buat sebuah blog baru.

Selamat Mencoba!

13 Oktober 2007

Selamat Idul Fitri 1428H


Tahun ini kita masih bisa menikmati ketupat lebaran lagi, entah tahun depan bila masih diberi umur yang panjang oleh-Nya.
Jangan sia-siakan waktu terbuang untuk tidak mengingat kepada-Nya.

Semoga di hari yang Fitri ini kita senantiasa diberikan berkah yang melimpah serta keselamatan selalu dari Allah SWT, Amin....
Saya dan Keluarga Mengucapkan:

"Minal Aidin Wal Faidzin Mohon Maaf Lahir Bathin"

Selamat Idul Fitri 1428H

Dengan Harapan Hari Esok lebih baik dari hari ini.
2 Oktober 2007

Menghilangkan Navbar di Blogspot


Apa itu navbar?
Navbar adalah baris navigasi yang ada di bagian atas blogspot dengan tinggi 40 pixel yang berfungsi untuk mencari konten blog yang sedang dikunjungi atau untuk mencari blogger lainnya dengan button 'next blog', dan akan beralih fungsi sebagai personal dasboard setelah kita log-in di blogspot tersebut.

Dari blogspot yang menggunakan template dari 'free template' sekarang ini hampir semua blogspot tersebut dari penyedia template otomatis dihilangkan dengan berbagai alasan. Lalu bagaimana kalau pengguna template standar dari blogspot, apa bisa dihilangkan?

Bagi pengguna template standar blogspot bisa tidak menampilkan navbar tersebut dengan trik berikut:

Masuk pada menu 'Template' | 'Edit HTML'
Kemudian pada bagian editor sisip code css 'berwarna merah' dibawah ini di baris setelah keterangan pembuat template tersebut :
-----------------------------------------------
Blogger Template Style
Name: 565
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 28 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

kemudian simpan hasil editing anda.

Selamat mencoba!