Catatan Galung

Minggu, 30 September 2007

Horizontal Blue Menu Navigation

Ada suka memasang menu navigasi di header? yang satu ini boleh untuk
di jadikan pilihan.Blue menu navigatioan, biru is my color. Penasaran
ingin melihat seperti apa tampilan menu navigasi ini, silahkan klik
pada tombol di bawah ini :

Bagaimana menurut sobat akan tampilan menu navigasi ini? tertarik? silahkan
ikuti cara instalasinya di sini !

Selamat mencoba !

uniQue Template R 1.3

Ada yang suka gelap? jika ada, saya sudah buatkan yang satu nih, hitam.
Black is macho, begitu katanya bagi yang sangat menggemarinya. Dari segi desain,
template ini tidak ada yang beda dengan pendahulunya yaitu uniQue template R 1.2,
yups... cuma beda warna. Lumayan buat sobat yang masih bingung otak-atik warna sudah
tidak perlu lagi berpuyeng ria karena sudah saya buatkan untuk sobat.

Untuk melihat demo, silahkan klik pada gambar di bawah :

Yang mau download, silahkan klik di sini !

Sebelum di upload ke blogger, jangan lupa untuk mengekstrak terlebih dahulu dengan software winzip.

Selamat berdownload ria !

Sabtu, 29 September 2007

Sisipkan Icon di View Profile

Jika pada postingan yang lalu telah di bahas bagaimana cara
menyisipkan mini icon pada label(kategory), maka pada kesempatan
kali ini akan coba di bahas tentang cara menyisipkan mini icon di
View My Complete Profile atau Lihat Profile Lengkap Saya.
Memang sebenarnya tidak terlalu penting, akan tetapi lumayan untuk
pemanis blog kita agar tampil sedikit lebih cantik dari sebelumnya.

Seperti biasa, sobat terlebih dahulu harus sudah mengupload mini icon
yang akan di pasang pada hosting tempat menyimpan gambar, kemudian
catat alamat gambar tersebut, misal saya telah mengupload sebuah mini
icon dan telah mempunyai lamat gambar alamat sebagai berikut :


http://24rohman.googlepages.com/icon_user.gif

Agar gambar tersebut bisa tampil, maka harus di tambah kode untuk memangilnya,
kodenya jadi seperti ini :


<img src='http://24rohman.googlepages.com/icon_user.gif'/>

Icon ini mempunyai gambar seperti ini :

Sebagai catatan saja bahwa tutor kali ini khusus bagi sobat yang memakai template baru.
Untuk menyisipkan mini icon pada View My Complete Profile, sebelumnya sobat
harus sudah menampilkan profile di blognya. Silahkan ikuti langkah-
langkah berikut ini:

Klik menu Layout.

Klik menu Edit HTML.

Klik tulisan Download Template Seluruhnya, silahkan save dulu untuk backup data.

Klik kotak kecil di samping tulisan Expand Widget Template.

Tunggu beberapa saat sampai proses selesai.

Cari kode seperti ini :

<b:if cond='data:aboutme != ""'>


<dd class='profile-textblock'><data:aboutme/>

</dd>

</b:if>

</dl>

<a class='profile-link' expr:href='data:userUrl'>

<data:viewProfileMsg/></a> </b:if>

Sisipkan kode icon seperti kode di bawah ini :


<b:if cond='data:aboutme != ""'>

<dd class='profile-textblock'><data:aboutme/>

</dd>

</b:if>

</dl>

<a class='profile-link' expr:href='data:userUrl'>

 <img src='http://24rohman.googlepages.com/icon_user.gif'/>&#160;

<data:viewProfileMsg/></a> </b:if>

Klik tombol SIMPAN TEMPLATE.

Selesai.

Untuk melihat contoh silahkan sobat klik di sini !

Selamat mencoba !

Revisi Blue Lover Template

Setelah saya melakukan blogwalking beberapa hari yang lalu,
saya menjumpai ada yang memakai templateku yaitu Blue Lover Template,
eh setelah saya perhatikan ada pemandangan yang kurang mengasyikan yaitu
pada bagian label serta bagian arsip ada tulisan yang terpotong, iya benar-benar terpotong
sehingga tidak dapat terbaca. Ada yang salah dengan rancanganku uy...

Bagi sobat yang sudah terlanjur memakai template ini, ada revisi nih dari saya.
Ada sedikit kode yang harus di tambahkan pada template sobat, silahkan untuk
mengikuti langkah-langkah berikut ini :

Klik menu Layout

Klik menu Edit HTML

Klik link Download template seluruhnya, save dulu untuk backup data

Cari kode seperti ini :

/* Sidebar Content

------------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

background: $sidebarBgcolor;

padding:5px;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

background: $sidebarBgcolor;

}

.sidebar li {

margin:0;

text-indent:-15px;

line-height:1.5em;

}

.sidebar .widget{

padding:0 0 0em;

margin:0 0 1.5em;

}

Selipkan kode yang dicetak merah seperti contoh berikut :

/* Sidebar Content

------------------------------------------------- */

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

background: $sidebarBgcolor;

padding:5px;

}

.sidebar ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

background: $sidebarBgcolor;

}

.sidebar li {

margin:0;

text-indent:-15px;

line-height:1.5em;

padding:0 0 .25em 15px; /* ini kode tambahannya */

}

.sidebar .widget{

padding:0 0 0em;

margin:0 0 1.5em;

}

Klik tombol Simpan Template

Selesai.

Bagi sobat yang akan memakai template ini, jangan kawatir karena sudah saya
perbaiki, silahkan bagi yang berminat untuk mendownloadnya di sini !
tapi jangan lupa di ektrak dulu pake winzip sebelum di upload ke blogger ya.

Kamis, 27 September 2007

Ganti Warna Sidebar Minima

Adakah diantara sobat pecinta template minima? jawabannya kemungkinan banyak, diantaranya
adalah sobat junyan. Di balik kecintaannya terhadap template minima, ada sedikit keinginan
yang masih belum bisa di lakukan yaitu mengubah warna kolom sidebar agar tidak sama dengan
warna kolom posting. Memang jika sobat merujuk kepada kode asli dari template tersebut, walhasil
tidak akan bisa membuat keduanya berbeda warna karena memang di desain untuk satu warna.
Apabila sobat ingin merubahnya tentu saja itu bisa di lakukan dan saya kira tidaklah terlalu
sulit untuk melakukannya.

Karena saat ini template minima masih terbagi dua yaitu minima klasik dan minima baru maka
akan saya coba bahas satu persatu. Sebai catatan yaitu template yang di gunakan adalah template minima
berwarna putih.

Minima Klasik

Untuk merubah warna kolom sidebar minima, silahkan cari kode seperti di bawah ini :

/* Content

----------------------------------------------- */

@media all {

#content {

width:660px;

margin:0 auto;

padding:0;

text-align:left;

}

#main {

width:410px;

float:left;

}

#sidebar {

width:220px;

float:right;

}

}

Agar warna sidebar bisa berubah warna, sobat tinggal menyisipkan kode warna yang di inginkan, contoh
warna krem :

background:#f5ede3;

Agar tulisan yang ada di sidebar tidak terlihat menabrak dinding sidebar, sobat bisa memberi sedikit
sentuhan dengan menambahkan kode padding, misal :

padding : 7px;

Maka apabila kode-kode diatas di sisipkan pada kode kolom sidebar, maka kodenya akan jadi seperti ini :

/* Content

----------------------------------------------- */

@media all {

#content {

width:660px;

margin:0 auto;

padding:0;

text-align:left;

}

#main {

width:410px;

float:left;

}

#sidebar {

width:220px;

float:right;

background:#f5ede3; /*ini kode tambahannya */

padding:7px;/*ini kode tambahannya */

}

}

Sangat mudah bukan? tidak terlalu banyak kode yang harus di tambahkan. Bagaimana apabila
kolom posting ingin di beri warna juga? sobat hanya tinggal menyisipkan kode warna diantara
kode posting, yaitu bagian #main;

#main {

width:410px;

float:left;

background:#f5ede3; /* ini kode tambahannya */

padding:7px;/* ini kode tambahannya */

}

Minima baru

Untuk template baru, ada sedikit perbedaan dalam hal pewarnaan yaitu memakai variable
warna. Dengan adanya variable warna maka si pemakai template dapat mengubah warna secara
praktis di bagian menu Font dan Warna. Contoh variable warna dari template minima
seperti ini :

<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">

Tugas dari sobat adalah membuat variable baru, terserah namanya apa, akan tetapi di sarankan
untuk membuat nama variable dengan yang mudah di ingat. Masih bingung? silahkan ikuti langkah berikut ini:

Sisipkan kode berikut diantara kode variable :



<Variable name="sidebarbgcolor" description="Warna background sidebar"

type="color" default="#999" value="#e6e6e6">

Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna merah adalah kode yang harus di tambahkan :

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

#main-wrapper {

width: 410px;

float: left;

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-wrapper {

width: 220px;

float: right;

background:$sidebarbgcolor; /* ini kode tambahannya */

padding: 7px; /* ini kode tambahannya */

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

}

Jika penambahan kode sudah selesai, jangan lupa untuk menekan tombol Simpan Template.
Bagaimana jika kolom posting juga ingin berwarna? seperti yang tadi juga, silahkan buat variable warna
dan sisipkan kode diantara kode kolom posting. Trus bagaimana apabila kolom sidebarnya ada dua? sama
saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.

Sedikit tambahan, sebenarnya untuk variable warna bisa juga tidak usah dibuat. Caranya sobat langsung
menuliskan kode warnanya pada kode sidebar, contoh :

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

#sidebar-wrapper {

width: 220px;

float: right;

background:#e6e6e6; /* ini kode tambahannya */

padding: 7px; /* ini kode tambahannya */

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

}

Akan tetapi apabila kode warna langsung di pasang seperti itu maka pada menu Font dan Warna,
warna tersebut tidak bisa di ubah-ubah.

mau melihat contoh sidebar minima yang punya warna berbeda, silahkan klik di sini !

selamat mencoba !

Buat Frame Iklan

Sobat fajar widodo rupanya tertarik untuk mengetahui bagaimana
cara membuat frame seperti frame iklan yang ada di blog ini. Apakah sobat juga
sama tertarik untuk membuat frame tersebut? baca saja sampai akhir,
saya akan memberitahu caranya.

Untuk membuat frame seperti itu banyak cara yang bisa di tempuh, diantaranya bisa
menggunakan kode HTML <div>
atau bisa juga dengan menggunakan kode HTML <span>.
Langkah yang harus di persiapkan adalah tentukan dahulu lebar, warna latar belakang,
warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih
mudah untuk di mengerti, saya buatkan sebuah contoh frame sebagai berikut:

Belajar membuat website »

Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!

http://www.resepbisnis.com/?id=rohman

Kode asli dari frame di atas adalah sebagai berikut :



<div style="border: 3px dashed red; background: #005af5; padding:10px; width:330px; text-align:left; color:white;">

<a style="font-size: 17px;COLOR: yellow; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>Belajar membuat website </b></a> &raquo;<br/>

Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!<br/>

<a style="color:yellow; font-size:12px; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html" title="klik di sini"><b>http://www.resepbisnis.com/?id=rohman</b></a>

</div>

Jika saya membuat spesifikasi pada frame iklan di atas, maka akan seperti ini :

warna pembatas : merah

style dari pembatas : garis putus-putus dengan lebar 3 pixel

jarak hurup dengan batas terluar : 10 pixel

lebar frame: 330 pixel

posisi hurup : rata kiri

warna hurup : putih

warna latar belakang : biru

warna link : kuning

Bagaimana sudah agak faham? kemungkinan besar masih bingung deh.
Agar lebih mudah cobalah sobat otak-atik sendiri kode di atas, saya
sedikit malas untuk menerangkan secara terperinci dari kode yang
saya buat.

ooo... iya lupa... sobat fajar widodo lebih spesifik menanyakan kode untuk
membuat garis putus-putus. Untuk garis putus-putus perintahnya seperti ini :

border : 3px dashed red;

3px menandakan lebar dari garis, dashed berarti garis putus-putus, red adalah kode warna merah.

Ada juga style yang lain yaitu berupa garis berbentuk garis yang solid ada juga yang berupa titik-titik.

border : 3px dashed red; --> untuk garis solid

border : 3px dotted red; --> untuk garis berupa titik-titik

Sepertinya cukup dulu deh, silahkan untuk bereksperimen menciptakan variasi-variasi baru
dari bentuk frame. Salam !