Mencari kunci gitar dengan winamp

Pengen bisa mainin lagu ini,lagu itu,lagu Rock,Pop,lagu yg melow,tapi nggak tahu kunci atau chordnya
sekarang saya punya solusi buat yang masih pemula dalam bermain gitar atau belum bisa mencari kunci atau chord lagu utamanya pada gitar atau piano. Saya mau kasih software pencari kunci gitar, namanya EasyChords dan mudah-mudahan bisa membantu temen-temen. Sebetulnya software ini adalah plugin winamp yang berfungsi mencari chord dari lagu yang sedang diputar. Jadi asik banget, tinggal stel lagunya dan plugin ini akan mencarikan chord-nya secara otomatis.

Catatan:
Setelah meng-install plugin ini, maka setiap kita menjalankan winamp akan ada tab baru yang merupakan tab easychord ini. Putar lagu, dan aktifkan fungsi pluginnya. Chord tidak langsung ditampilkan, tetapi kita harus sekali lagi memutar lagu tersebut. Jadi pertama memutar, plugin akan menganalisa lagu kemudian saat lagu diputar kembali, chord akan ditampilkan. Saya sudah coba, tingkat akurasinya sekitar 80% akurat. Setidaknya nada dasarnya.
Oiya.. plugin ini juga akan menampilkan diagram chord-nya pada layar. Selain gitar, chord piano juga bisa ditampilkan oleh plugin ini.

langsung aja download softwarenya klik disini

Read more »

Hacking Database Dengan Schemafuzzy

Udah pada tau khaan Schemafuzz apaan? klo belum, schemafuzz adalah tools yg di buat oleh Sauron dari darkc0de. Tools ini berfungsi utk SQL injection dan di buat menggunakan bhs Python. Oke, langsung aja…
Utk pengguna windoss, install dlu interpreter python, coz bhs ini ga default ada… (ckckckc… windos… windos… repot emang). Utk linux, langsung pake aja… ^^
NOTE: UTK MEMPERBESAR GAMBAR, KLIK KANAN LALU PILIH “VIEW IMAGE”
1. Cari dlu web yg vul terhadap SQL injection. “Gimana cara-nya mas?” tenang, blum selesai. Oke, bug SQL injc biasa-nya terdapat pada halaman news,berita, atau sejenis nya. Utk mengetahui web tsb vul atau tidak, coba gunakan single quote (’) di akhir url. Contoh: http://target.com/news.php?id=2′ << Singel quote (’) di akhir url. Nah, apabila muncul pesan error “MySQL error syntax blablabla…” berarti web tsb vul terhadap SQL injection. Paham? oke, lanjut…
2. Target kita kali ini adalah www.rayner.com/products.php?id=22 . setelah kita mendapatkan target yang vulnerable, yang harus kita cari pertama kali adalah jumlah column
a. cari jumlah column dan magic number,..
command :
schemafuzz.py – -findcol -u

 

Nanti akan muncul seperti ini:

disitu dapat kita lihat bahwa jumlah column nya adalah 10 dimulai dari angka 0, dan yang null adalah column ke 1,..
3. cari database name,..
command :
schemafuzz.py – -dbs -u
disini link url nya kita copykan dari out put langkah diatas yaitu darkc0de url. Yang di blok adalah nama Database-nya

 

setelah kita mendapat kan nama databasenya sekarang kita liat schema table dan colum yang ada dalam database tersebut,
4. lihat table dan column,
command :
schemafuzz.py – -schema -u
jangan lupa untuk menambahkan nama database nya di depan url dengan command -D namatadabase
hasil nya akan terlihat seperti ini,

 

digambar terlihat jelas semua nama table dan columnnya, langkah terakhir adalah melihat semua data yang ada dalam table dan column tersebut, disini kita akan melihat data yang ada dalam table auth dengan nama column name,pass (Table No. 1)
5. lihat data dalam collum!
command :
schemafuzz.py – -dump -u
jangan lupa didepan url kita tambahkan nama database, nama table, dan nama column, dengan command -D namadatabe -T namatable -C namacolumn. Contoh : # python schemafuzz.py –dump -u http://www.rayner.com/products.php?id=22+AND+1=2+UNION+SELECT+0,darkc0de,2,3,4,5,6,7,8,9 -D db2889_rayner_en -T auth -C name,pass

 

Yang di block adalah username dan password ^^

Selesai… gunakan tools ini dng bijak yaa

Read more »

membuat footer tambahan

Default footer pada templates "MINIMA" dari blogspot cuma 1 kolom. Sekarang kita akan belajar bagaimana menambahkan footer baru, biar ada tiga (3) footer. Kalau ada yang tertinggal tutorial sebelum-nya... kali ini tidak apa-apa langsung baca tutorial ini tanpa baca tutoial sebelumnya... Sekarang cari script CSS footer dari templates MINIMA, script-nya seperti ini:

/* Footer
----------------------------------------------- */
#footer {
width:660px
clear:both
margin:0 auto
padding-top:15px
line-height: 1.6em
text-transform:uppercase
letter-spacing:.1em
text-align: center
}

Tulisan yang saya warnai merah itu lebar bungkus yang akan kita ubah.



Maka ubah dan tambahkan script menjadi seperti ini:

/* footer Column */

#footer {
width: 925px
position: relative
clear:both
margin: 0 auto 10px
color:#000
float: left
padding: 0
}

#left-footer{
width: 295px
float: left
margin-left:10px
padding-top: 10px
background:#f7f7f7
border:1px solid #FFFFFF
}

#middle-footer {
width: 299px
margin-left:10px
float: left
padding-top: 10px
background:#f7f7f7
border:1px solid #FFFFFF
}

#right-footer {
width: 295px
margin-left:10px
float: right
padding-top: 10px
background:#f7f7f7
border:1px solid #FFFFFF
}

script yang saya warnai merah itu yang diubah menjadi seperti itu dan script yang warna biru itu yang ditambahkan. Dari bahasa-nya Anda pasti ngerti kan!? left itu apa middle itu apa dan right itu apa.. Itu untuk penempatan layout-nya.


Dan sekarang cari-lah script XML-nya, seperti ini:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Ubah dan tambahkan script di atas menjadi seperti ini:

<div id='footer-wrapper'>
<b:section class='footer' id='left-footer'/>
<b:section class='footer' id='middle-footer'/> <b:section class='footer' id='right-footer'/>
</div>

Tulisan yang saya beri warna hijau itu-lah script tambahannya. Sekarang coba save dan lihat hasil-nya dengan view blog. Sekarang di footer Anda sudah ada tiga footer dengan warna background abu-abu, karena tadi di script CSS-nya disetting warna abu-abu.


Semoga bermanfaat.

Read more »

blog templates part 5

Kali ini kita akan sama-sama belajar yang agak sederhana dulu, yaitu cara menghilangkan garis bawah pada "LINK" dan "LINK ACTIVE"... Mungkin ada sebagian dari Anda ada yang kurang suka atau bahkan tidak suka bila link-nya ada tambahan garis bawah, seperti contoh gambar ini:



Nah untuk menghilangkan-nya... Masuk ke menu layout --> edit html --> dan cari script css berikut :

/* links */

a:link {
color: $linkcolor
text-decoration: italic
}

a:visited {
color: $visitedlinkcolor
text-decoration: italic
}

a:hover {
color: #5B739C
text-decoration: italic
}

a:active {
color: #5B739C
text-decoration: italic
}

Tulisan yang saya beri warna merah itu-lah yang harus diganti menjadi seperti ini :

/* links */

a:link {
color: $linkcolor
text-decoration: none
}

a:visited {
color: $visitedlinkcolor
text-decoration: none
}

a:hover {
color: #5B739C
text-decoration: none
}

a:active {
color: #5B739C
text-decoration: none
}

Nah... Coba sekarang dilihat lagi... hasil-nya akan seperti ini :

 

Nah kalau ternyata script templates Anda tidak ada tambahan text decoration seperti ini :

/* links */

a:link {
color: $linkcolor
}

a:visited {
color: $visitedlinkcolor
}

a:hover {
color: #5B739C
}

a:active {
color: #5B739C
}

Script di atas tidak ada perintah "TEXT-DECORATION"-nya... Maka default-nya link akan digaris bawahi... Kalau tidak mau digaris bawahi, tambahkan perintah "TEXT-DECORATION:NONE" di setiap CSS-nya (sama seperti contoh script yang nomor dua (2) dari atas...


Semoga bermanfaat...

Read more »

blog templates part 4

Kali ini kita akan mulai belajar cara menyisipkan gambar sebagai latar belakang blog (background). Berarti yang harus kita siapkan ialah "GAMBAR", bisa berformat .jpg, .gif, .png. Untuk masalah penempatannya kali ini kita coba taruh di bagian atas atau header.. dan kita akan taruh juga latar belakang blog dengan gambar... Siapkan dulu gambar-nya, kalau sudah cari-lah script ini (masih templates MINIMA dari blogspot):

#left-header-wrapper {

float:left

width:463px

margin:0 auto 0px

border:px solid $bordercolor

}


#right-header-wrapper {

float:right

width:462px

margin:0 auto 0px

border:px solid $bordercolor

}

Untuk pengertiannya, perintah script untuk memasukkan/memasang/menyisipkan/menaruh warna atau gambar ialah dengan perintah "BACKGROUND". Hanya saja ada perbedaan antara memasukkan warna dengan gambar. Inilah perbedaan-nya:

Untuk mengganti/menambahkan warna pada background :

background: #FFOOOO

Untuk manambahkan gambar pada background :

background-image: url(http://alamat link Anda menaruh gambar.gif/.png/.jpg)

Jangan lupa setelah kode selesai, diakhiri dengan tanda";"!!. Dan coba perhatikan perbedaan antara background warna dan background gambar pada contoh script di atas.

Baik sampai di sini aja teori-nya... Mari kita mulai praktek-nya.. Sekarang kita ganti dulu warna background-nya menjadi warna hitam misal-kan, dan script-nya akan menjadi seperti ini :

#left-header-wrapper {

float:left

width:463px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}


#right-header-wrapper {

float:right

width:462px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}

Tulisan yang saya merah itulah script yang ditambahkan.. (#000000 : kode warna hitam). Kalau sudah diganti coba langsung dilihat perubahan-nya bagaimana!? Ternyata gambar-nya akan seperti ini loh :


 

Lihat panjang vertikal-nya tidak sama antara left header dengan right header... Jangan khawatir.. kita harus menambahkan script baru lagi, dan script-nya sekarang akan menjadi seperti ini :

#left-header-wrapper {

float:left

width:463px

height:250px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}


#right-header-wrapper {

float:right

width:462px

height:250px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}

Tulisan yang saya beri warna hijau itulah script yang ditambahkan. Yaitu untuk mengatur berapa lebar vertikal-nya.. Maka-nya antara left-header dengan right-header nilai "PX"-nya saya sama-kan (250px) agar lebar-nya rata atau sejajar.. Lebar-nya bisa Anda sesuai-kan dengan keinginan Anda (kalau 250px itu menurut Anda terlalu lebar atau masih agak kecil). Dan gambar-nya pun akan seperti ini (dengan height 250px) :
 
 
Gimana?? semakin lama templates yang kita buat semakin "KEREN" kan!? hohohoho!!!..



Sekarang kita taruh gambar sebagai background pada header.. Siap-kan dulu alamat link-nya..

http://i482.photobucket.com/albums/rr182/Wahyukodir/RIGHTHEADER-1.gif (untuk gambar background sebelah kanan).

http://i482.photobucket.com/albums/rr182/Wahyukodir/LEFTHEADER.gif (untuk gambar background sebelah kiri).


Di atas hanya contoh penempatan gambar-nya saja (mau di kanan atau di kiri), Anda bisa mengatur sesuai selera. Atau antara left header dengan right header may disisipkan dengan gambar yang sama!!.


Maka contoh script-nya seperti ini :

#left-header-wrapper {

float:left

width:463px

height:235px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

background-image: url(

http://i482.photobucket.com/albums/rr182/Wahyukodir/LEFTHEADER.gif)

}


#right-header-wrapper {

float:right

width:462px

height:235px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

background-image: url(http://i482.photobucket.com/albums/rr182/Wahyukodir/RIGHTHEADER-1.gif)

}

Tulisan yang berwarna biru-lah yang saya tambahkan.. Maka hasil-nya akan seperti ini :

 
Gimana dengan gambar Anda?? "KEREN" kan... hohohoho... Gambar di atas orange dan hijau (itu gambar-nya aja yang kurang keren hohoho!!%$#$^)..


Dan sekarang kita akan merubah background tempaltes minima yang putih itu menjadi warna hitam.. Cari-lah script ini :

body {

background:$bgcolor

margin:0

color:$textcolor

font:x-small Georgia Serif

font-size/* */:/**/small

font-size: /**/small

text-align: center

}

Nah... tulisan yang saya warnai merah itu yang harus dirubah/ganti... Menjadi seperti ini :

body {

background: #000000

margin:0

color:$textcolor

font:x-small Georgia Serif

font-size/* */:/**/small

font-size: /**/small

text-align: center

}

Jangan lupa setelah kode warna disipkan kode ";" sebagai end... Seperti ini maksud-nya (background: #000000;). Maka gambar-nya akan seperti ini :

 

Wuiihhhh sekarang jadi lebih keren... Jadi seperti bukan templates MINIMA!! hohohoho


Kalau Anda mau background-nya menjadi gambar (dari background warna hitam di atas).. Anda bisa mengikuti contoh yang menyisipkan gambar di header di contoh yang atas tadi itu loh!!... 

Read more »

blog templates part 3

Seperti kata saya kemarin bahwa kali ini kita akan belajar membuat dua (2) buah header, yaitu left header dan right header. Kalau diantara Anda masih ada yang tertinggal atau belum membaca postingan saya yang sebelumnya, silahkan Anda baca dan pahami dulu postingan sebelumnya :

1. Blog templates part 1.

2. Blog templates part 2.

Kalau sudah dibaca dan mengerti, mari kita lanjutkan ke pembahasan postingan ini. Yaitu membuat left header dan right header dengan memodifikasi templates "MINIMA" dari blogspot.


Sebelum kita mengexplore script, ada baiknya kita harus paham dengan teori script.. Kita sekarang kan mau merubah sebuah header menjadi dua buah header!?. Nah jadi, pengertianya... kita harus membuat script header baru, tetapi script yang akan kita buat tetap berada di dalam pembungkus header itu sendiri. Pembungkus biasa dikenal dengan bahasa script sebagai "WRAPPER". Jadi kita akan buat atau memecahkan sebuah header menjadi dua buah header di dalam header wrapper.. Sampai sini paham?! kalau kurang paham atau tidak paham, dilanjut aja membaca-nya nanti juga lama kelamaan ngerti..

Baik sekarang cari script header wrapper :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:925px
margin:0 auto 10px
border:1px solid $bordercolor
}

#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}

#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}

#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}

#header a {
color:$pagetitlecolor
text-decoration:none
}

#header a:hover {
color:$pagetitlecolor
}

#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}

#header img {
margin-$startSide: auto
margin-$endSide: auto
}

Lebar header atau satu buah header pada script di atas ialah 925px.. Jadi kalau kita mau membuat dua buah header, maka nilai pixel atau ukuran di atas dibagi menjadi 2 (dua), yaitu 925:2=462,5... Silahkan yang setengah-nya mau di kemana-kan.. Misal di ke kirikan, berarti untuk left header 463px dan untuk right header 462px. Atau sesuai keinginan Anda, misal yang right header mau lebih kecil... Anda bisa mengecilkan ukuran pixelnya. Tetapi dengan syarat kalau jarak margin dan lebar border harus kita tiadakan menjadi 0px. Karena lebar keseluruhan 925px, kalau lebar left header+lebar right header+jarak margin misal 10px (x2)+lebar border misal 1px(x2) jadi jumlahnya 947px. 947px itu over bila outer wrapper hanya 925px, jadi pengertiannya, 947px itu di luar pembungkus. Maka-nya lebar border yang default dari MINIMA 1px kita ubah menjadi 0px dan jarak margin 10px kita ubah menjadi 0px juga. Karena lebar left header+lebar right header, lebarnya sudah pas atau sama dengan lebar outer wrapper yaitu 925px.

Sekarang mari ubah kode CSS di atas menjadi seperti ini :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:925px
margin:0 auto 0px
border:0px solid $bordercolor
}

#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}

#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}

#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}

#header a {
color:$pagetitlecolor
text-decoration:none
}

#header a:hover {
color:$pagetitlecolor
}

#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}

#header img {
margin-$startSide: auto
margin-$endSide: auto
}

Tulisan yang berwarna biru di atas lah yang harus diganti.

Selanjut-nya merubah dan menambahkan kode CSS header wrapper. Maksud merubah ialah, menentukan posisi left dan right-nya dan menambahkan ialah menambahkan sebuah header baru (buat bikin right header). Tetapi sebelumnya, kita harus tau pengertian-nya dulu... Untuk mengatur apakah header mau ditempatkan di kiri atau di kanan yaitu dengan menambahkan script "FLOAT:right (kalau mau di kanan) left (kalau mau di kiri)". Dan tambahkan id header wrapper.. "id" yang menunjukkan kesinambungan dengan XML script yang nanti akan kita buat. Jadi kalau kurang mengerti dengan pengertian tadi, langsung saja lihat kode yang sudah saya ubah ini :

/* Header
-----------------------------------------------
*/

#left-header-wrapper {
width:463px
float:left
margin:0 auto 0px
border:0px solid $bordercolor
}

#right-header-wrapper {
width:462px
float:right
margin:0 auto 0px
border:0px solid $bordercolor
}

#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}

#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}

#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}

#header a {
color:$pagetitlecolor
text-decoration:none
}

#header a:hover {
color:$pagetitlecolor
}

#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}

#header img {
margin-$startSide: auto
margin-$endSide: auto
}

Perhatikan script di atas, saya harap tanpa saya banyak kata, Anda sudah mengerti.. Saya merubah header-wrapper menjadi "LEFT-HEADER-WRAPPER" dan menambahkan perintah float:left karena untuk berada di posisi kiri. Dan saya mengcopy script left-header-wrapper lalu saya taruh di bagian dari header (dalam contoh di atas saya taruh di bawah left-header-wrapper). Copy-an tadi saya ubah sedikit, menjadi "RIGHT-HEADER-WRAPPER" dan width-nya seperti yang sudah kita kalkulasikan di awal, yaitu untuk lebar right-nya 462px.. serta saya tambahkan float:right agar posisi-nya berada di kanan.

Kalau script-nya sudah Anda ubah seperti script di atas, mari kita lanjutkan ke penambahan script XML-nya. Cari-lah script ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>

Nah tulisan yang saya warnai merah itu mungkin berbeda dengan script "MINIMA" Anda..

Ket :

MAXWIDGETS : berapa banyak gadget yang bisa ditambahkan..
SHOWADDELEMENT : tampilkan add gadget..
LOCKED : kunci penambahan gadget..
Untuk yang "BLOG ARCHIVE" itu hanya penempatan isi gadget atau widget.. pada kondisi script di atas, blog archive-nya saya taruh di header. Jadi untuk "BLOG ARCHIVE" biar gampangnya Anda ubah di menu page element saja. Sedangkan maxwidget, showaddelement dan locked bisa Anda ubah langsung.

Sekarang copy script tadi dan paste dibawah-nya, lalu di hasil copy-an tadi hilangkan widget blog archive-nya. Karena tidak mungkin blog archive-nya ada dua (memang bisa, tapi untuk kali ini silahkan dihapus), maka hasilnya akan seperti ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
</b:section>

Nah, sekarang tinggal menyambungkan "id" masing-masing script XML di atas agar nyambung dengan "id" script CSS.. Maka script-nya akan seperti ini :

<div id='left-header-wrapper'>
<b:section class='header' id='left-header' maxwidgets='4' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>

<div id='right-header-wrapper'>
<b:section class='header' id='right-header' maxwidgets='4' showaddelement='yes'>
</b:section>

Tulisan yang berwarna biru yaitu script yang harus ditambahkan.. Sekarang coba save templates-nya dan masuk ke menu "LAYOUT" --> "PAGE ELEMENT". Dan taruh widget atau script apa saja di header... Maka contoh gambar-nya akan seperti ini :

 Perhatikan!! Sudah ada dua header (left header dan right header)... Jangan khawatir meskipun gambar pada layout menunjukkan kalau right header ada di bawah left header... Tapi sebenar-nya itu sejajar kok.. Itu hanya karena halaman-nya saja yang tidak muat atau ada bagian dari footer wrapper yang width-nya harus diperlebar lagi... Tapi coba view aja blog-nya... Udah keren kok!!, nih gambar-nya :

 

Pada gambar di atas saya taruh blog archive di left header dan profile/about me di right header.. Anda bisa mengganti-nya dengan yang lain semisal iklan atau gambar.

Cukup sekian dulu tutorial-nya, nanti dilanjutkan ke bagian 4 yang membahas cara memasang background gambar di header.


Semoga jelas dan bermanfaat...

Read more »

blog templates part 2

Sebelum memulai sebaiknya Anda mereview ulang "basic membuat templates bagian 1" agar pembahasan yang akan saya berikan dapat dengan mudah dimengerti. Silahkan ke sini dulu bagi Anda yang belum pernah membaca bagian pertama atau bagi Anda yang lupa Blog templates part 1

Baik kalau sudah dimengerti, mari kita lanjutkan ke tahapan selanjutnya yaitu "MERUBAH UKURAN BLOGPOST DAN SIDEBAR".

Masuk ke menu layout lalu "EDIT HTML". Lihat dulu kode sebelum kita ubah seperti ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

#main-wrapper {
width: 410px
float: $startSide
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: $endSide
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 */
}

Dan gambar sebelum kita ubah seperti ini :

 

Sekarang kita akan ubah lebar blogpost dan sidebar-nya menjadi matching.. Lihat saja gambar di atas masih tidak matching, jarak margin antara blog post dan sidebar terlalu jauh..

Sekarang terserah Anda mau berapa lebar blogpost dan sidebar-nya, tetapi untuk mudahnya dalam pembelajaran kali ini, maka ikuti saja langkah-langkah berikut dengan sama. Nanti kalau memang Anda sudah mengerti baru-lah Anda bisa mengexplore sendiri...

Kita tahu bahwa lebar "OUTER WRAPPER" sudah diubah menjadi 925px dari lebar default templates "MINIMA" yaitu 660px. Tetapi lebar main wrapper dan sidebar wrapper belum kita ubah. Nah, lebar main wrapper dan sidebar wrapper-lah yang harus kita ubah.. Jika kita mau lebar antara blogpost dan sidebar sama, maka lebar outer wrapper dibagi dua yaitu 925px : 2 = 462,5 px. Kita beri saja yang 0,5-nya ke blogpost.. jadi lebar main wrapper-nya 463px dan lebar sidebar wrapper-nya menjadi 462px. Coba Anda ubah kode CSS-nya menjadi seperti ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

#main-wrapper {
width: 463px
float: $startSide
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: 462px
float: $endSide
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 */
}

Jangan disave dulu!!, coba dipreview dulu, maka gambar-nya akan seperti ini :

 

Seperti yang kita lihat gambar-nya masih tidak matching.. border antara blogpost dan border sidebar beradu (tapi sesuai selera Anda).. Dan seperti-nya lebar sidebar terlalu kebesaran... Yang ideal buat saya (kalau buat Anda ya terserah, sebabnya selera kita berbeda-beda) yaitu lebar blogpost harus lebih lebar dibandingkan lebar sidebar.. Alasannya kalau lebar blogpost kecil, maka artikel kita akan dempet (bahasa mana tuh dempet?? hehehe) maka tulisannya terlalu dekat, rumit dan panjang ke bawah pastinya, yang membuat pembaca merasa agak malas untuk membaca.. Tapi kalau jarak tulisannya jelas, maka pembaca pun akan merasa nyaman untuk membaca.

Jadi coba ubah lebar main wrappernya menjadi "525px" dan berilah margin antara blogpost dan sidebar selebar "20px", berarti sisa sidebar ialah 925px (lebar outer wrapper)-525px (lebar main wrapper atau blog post)-20px (untuk margin)=380px. Jadi lebar untuk sidebar yaitu "380px". Dan kode CSS-nya menjadi seperti ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

#main-wrapper {
width: 525px
float: $startSide
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: 380px
float: $endSide
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 */
}

Maka gambar-nya akan menjadi seperti ini :

 

 
Gimana? matching kan sekarang ukurannya? kalau menurut Anda kurang matching, Anda bisa merubah-ubahnya sendiri sesuai selera Anda. Untuk saat ini, cukup sekian dulu, nanti dilanjut dengan pembuatan dua buah header, yaitu left header dan right header. Kalau dibahas langsung di sini... Wah pusing nanti (hehehe ... maksud-nya saya yang pusing!!@#$^*).. Ayo terus semangat membuat templates sendiri. Karena biar bagaimana pun, buatan sendiri itu bisa lebih dibanggakan!!..

Semoga dapat membantu Anda yang mau belajar membuat templates dan semoga bermanfaat..

Read more »

blog templates part 1

Ada postingan bagus nih gan dari blog tetangga sebelah untuk  para pemula bloger yuukk kita pelajari..

MENGENAL LAYOUT DAN MACAM-MACAMNYA

Tentu-nya para blogger sudah mengetahui apa yang dimaksud dengan layout... Tetapi sebelum kita membahas layout, kita harus tau terlebih dahulu structure template. Structure templates terdiri dari Header, Blog Post, Sidebar, dan Footer

Setelah kita tau structure sebuah template, baru-lah kita harus tau layout-nya. Sebenarnya langkah awal kita dalam membuat sebuah templates, kita harus memikirkan layout (tata letak) blog yang akan kita buat templates-nya. Jadi, bayangkan terlebih dahulu structure layout yang mau Anda buat. Berikut contoh-contoh-nya :

 

  
Gambar layout di atas mempunyai sebuah header, sebuah blog post, dua buah sidebar (left dan right), dan sebuah footer.

Gambar di atas mempunyai dua buah header (left dan right), sebuah blog post, dua buah sidebar (left dan right), dan sebuah footer.
 

  
Gambar di atas mempunyai dua buah header (left dan right), sebuah blog post, sebuah sidebar, dua buah sidebar bottom (left sidebar bottom dan right sidebar bottom), dan sebuah footer.Layout di atas ialah layout yang sedang saya pakai ini hehehe...





Catatan pertama :

1. Structure layout di atas hanya beberapa contoh saja, Anda bisa membuat structure sesuai selera Anda, misalkan Anda buat left header, center header, dan right header (misalkan). Coba Anda bayangkan dulu structure layout yang mau Anda buat.

2. Untuk `BLOG POST` hanya satu saja (stabdar dan umum-nya), tapi kalau Anda pintar dalam hack blog, mungkin bisa aja blog post-nya ada dua atau tiga !. Tetapi selama ini, belum pernah ada satu pun templates seseorang yang blog post-nya lebih dari satu.


Selanjutnya setelah Anda telah memikirkan structure layout yang mau Anda buat, Anda harus tau dulu cara kerja sebuah `script`. Biasa itu di mana-mana kalau nulis dari atas ke bawah.. Nulis script juga begitu... Dan layout yang muncul pun begitu, dari atas lalu ke bawah. Jadi yang paling utama kita buat adalah `HEADER` dulu. Tentukan structure header, apakah header saja (sebuah) atau dua buah header (left dan right), atau tiga buah, pokonya terserah Anda. Penulisan script `HEADER` kita anggap saja sudah kita simpan, selanjutnya ialah ke bawah header... "kalau yang sering menggunakan dreamweaver, terus edit-edit HTML, pastinya sudah tau setelah dari header itu akan ke mana". Setelah dari header itu akan menuju left (kiri) di bawah header. Untuk left-nya, Anda bisa menaruh blog post dulu atau sidebar dulu, itu terserah Anda. Kalau blog post dulu, berarti sidebar-nya nanti ada di samping kanan. Kalau sidebar dulu, berarti blog post-nya yang ada di samping kanan. Seperti ketiga contoh structure layout di atas, blog post-nya dulu baru kemudian sidebar. "Jadi dari atas lalu ke kiri di bawah-nya, dan dari kiri lalu ke kanan-nya atau bisa juga ke bawahnya langsung (niasanya buat templates yang tidak menggunakan sidebar), terakhir dari kanan ke bawah". Berikut gambar salah satu contoh diikuti dengan step by step-nya :

 

 
 
Setelah pengertian-pengertian di atas kita tau dan kita ingat, baru-lah kita menuju pembuatan script-nya. Tetapi lagi-lagi sebelum harus tau pembuatan script-nya, kita harus tau fungsi-fungsi script-nya. Kita mulai dari header dulu okey ??. Sekarang mari kita trial templates dari blogger langsung, ambil script templates minima yang warna putih (untuk uji coba).


Baik sekarang kita edit-edit header dulu ya ?!. Inilah script CSS Header dari templates minima yang putih.. "header ini atau semua structure berada di dalam outer wrapper", jadi sebenar-nya kita harus tau outer wrapper dulu. Yang membungkus header, blog post, sidebar dan footer ialah outer wrapper.. Kita bisa mengatur berapa lebar keseluruhan blog ? Kita juga bisa menaruh gambar kita di outer wrapper untuk background dasar blog. Okey, tuju dulu CSS outer wrapper, inilah script CSS outer wrapper di minima putih (template default dari blogger.com) : 

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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: $endSide;
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 */
}

 

Coba lihat, ada outer wrapper, ada main wrapper dan ada sidebar wrapper.. Kali ini tutorial-nya untuk memperlebarkan dan mengecilkan wrapper dulu saja ya... Okey sekarang coba lihat dulu preview-nya, jangan diedit-edit dulu.

Coba lihat garis bagian kiri blog post sama rata dengan garis bagian kiri header. Itu karena width (lebar) blog post dan sidebar sudah disesuaikan dengan lebar dari header wrapper dan kesemuanya disesuaikan dengan outer wrapper. Sekarang coba Anda ke CSS header wrapper, ini CSS-nya :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px
margin:0 auto 10px
border:1px solid $bordercolor
}

#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}

#header {
margin: 5px
border: 1px solid $bordercolor
text-align: center
color:$pagetitlecolor
}

#header h1 {
margin:5px 5px 0
padding:15px 20px .25em
line-height:1.2em
text-transform:uppercase
letter-spacing:.2em
font: $pagetitlefont
}

#header a {
color:$pagetitlecolor
text-decoration:none
}

#header a:hover {
color:$pagetitlecolor
}

#header .description {
margin:0 5px 5px
padding:0 20px 15px
max-width:700px
text-transform:uppercase
letter-spacing:.2em
line-height: 1.4em
font: $descriptionfont
color: $descriptioncolor
}

#header img {
margin-$startSide: auto
margin-$endSide: auto
}

Rumus ala saya hehehe :

Lebar blog post + lebar sidebar + padding = lebar header wrapper (kalau sisi kiri dan kanan mau sejajar seperti gambar di atas, gambar template minima). Berarti, lebar blog post (main-wrapper) 410px + 220px (dari sidebar wrapper) = 630px. Dan sisa dari 660px-630px=30px ialah padding. Lebih jelas-nya, ini gambar-nya :

 Sekarang coba ubah lebar header-wrapper-nya, dari 660px menjadi 925px.

 
Maka kita akan lihat, header-nya memanjang ke kanan dan tidak center. Karena lebar header sudah keluar batas lebar outer-wrapper... Cara untuk header itu kembali center lagi ialah, kita harus bungkus kembali lebar header wrapper ke dalam lebar outer-wrapper, minimal di samakan lebar kedua-nya (geader wrapper dan outer wrapper) menjadi 925px. Maka hasil-nya akan seperti ini :

Lihat header-nya kembali center dan lebih panjang, sebesar setting-an kita tadi yaitu 660px. Dan outer-nya pun menjadi lebih lebar. Tetapi jarak atau padding antara blog post dan sidebar semakin jauh. Karena kita sedang bahas header, jadi kali ini tidak beranjak ke pengaturan blog post dan sidebar dulu ya ?!.

Untuk template minima ini agak ribet untuk memasukkan sebuah gambar di header-nya (bagi saya yang awam hehehe) karena ternyata yang buat ribet ialah header-nya yang dikunci. Jadi kita gak bisa menghapus border header atau-pun tulisan yang ada di dalam border, dalam kasus di atas yaitu tulisan "YOUR LIKE" (judul blog), maka gambar yang akan kita mau sisipkan pin terhalangkan.. Bagaimana cara-nya ? ya mudah saja, kunci tadi kita buka, di mana ? ya di script-nya, di script XML-nya.. Coba cari script ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>

Ubah yang locked=true menjadi locked=false. Maka Anda bisa menghapus header tadi dengan cara :

1. Klik Layout dari dashbord di blogger.com.

2. Maka halaman `Page Element` akan terbuka. dan klik edit pada header.

3. Dan Anda bisa menghapus-nya sekarang atau mengedit-edit.

Lihat !! structure layout-nya tidak ada header-nya.. Tapi sekarang Anda lebih mudah dalam memasukkan gambar header atau pun iklan-iklan di header. Meskipun header di atas tidak ada, tetapi tetap Anda bisa menambah-kan widget atau gambar dan atau yang lainnya di header... Ada dua cara untuk memasukkan gambar di header..

Cara pertama yaitu dengan cara add gadget dan masukkan link di mana Anda mengupload foto anda... Biar foto atau gambar sesuai dengan lebar header maka ada dua cara lagi juga hehehe... yang pertama, anda memang sudah mencocokkan lebar gambar dengan lebar header dengan cara anda mengatur lebar gambarnya dengan software sepeti photoshop, maka setelah selesai diedit di photoshop lalu diupload semisal ke www.photobucket.com, maka setelah Anda dapat link Anda meng-upload gambar tadi dan memasukkannya ke add gadget dengan add HTML/Java script, lebar gambar dengan lebar header pun sesuai. Nah cara yang ke dua-nya, kasih script tambahan setelah script ( <img ) menjadi( <img weight="925" xxxxxxxx ) "xxxxxxx" adalah link tempat Anda menyimpan gambarnya.


Cara yang kedua ialah dengan memasukkan link gambar Anda di script CSS-nya, sebagai contoh di bawah ini :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:925px
margin:0 auto 10px
border:1px solid $bordercolor
background: url (http://xxxxxxxxxxxxxxxx.gif atau .jpeg)
}

#header-inner {
background-position: center
margin-left: auto
margin-right: auto
}

Gambar di atas bukti kalau header bisa ditambahkan page element..

selamat mencoba..

Read more »

MIXING DAN MASTERING LAGU

 

Buat teman-teman yang gemar musik yang baru belajar ataupun yang sudah master di dunia mixing dan mastering lagu, saya ingin berbagi link download untuk software atau program cubase 5. Alasan saya mensharing link download cubase 5 sederhana sekali yaitu agar lebih mempermudah teman-teman untuk bisa mendownload software atau program cubase 5, jadi teman-teman tidak perlu searching-searching lagi via Google. Namun link yang saya berikan ini tidak direct link karena saya hanya memiliki hosting minim bandwith dan minim space dan juga file ini bukan saya yang upload, jadi kalau link-nya broken harap beritahu saya agar saya perbaharui linknya. Silahkan download:

RAPIDSHARE

http://rapidshare.com/files/447061302/512DOMUSC5_expresshare.com.part01.rar

http://rapidshare.com/files/447061501/512DOMUSC5_expresshare.com.part03.rar

http://rapidshare.com/files/447061510/512DOMUSC5_expresshare.com.part02.rar

http://rapidshare.com/files/447061666/512DOMUSC5_expresshare.com.part06.rar

http://rapidshare.com/files/447061684/512DOMUSC5_expresshare.com.part04.rar

http://rapidshare.com/files/447061711/512DOMUSC5_expresshare.com.part05.rar

http://rapidshare.com/files/447061899/512DOMUSC5_expresshare.com.part07.rar

http://rapidshare.com/files/447061914/512DOMUSC5_expresshare.com.part08.rar

http://rapidshare.com/files/447061986/512DOMUSC5_expresshare.com.part09.rar

http://rapidshare.com/files/447062072/512DOMUSC5_expresshare.com.part10.rar

http://rapidshare.com/files/447062446/512DOMUSC5_expresshare.com.part11.rar

http://rapidshare.com/files/447062569/512DOMUSC5_expresshare.com.part12.rar

http://rapidshare.com/files/447062608/512DOMUSC5_expresshare.com.part14.rar

http://rapidshare.com/files/447062857/512DOMUSC5_expresshare.com.part16.rar

http://rapidshare.com/files/447062869/512DOMUSC5_expresshare.com.part15.rar

http://rapidshare.com/files/447062980/512DOMUSC5_expresshare.com.part13.rar

http://rapidshare.com/files/447062995/512DOMUSC5_expresshare.com.part21.rar

http://rapidshare.com/files/447063027/512DOMUSC5_expresshare.com.part18.rar

http://rapidshare.com/files/447063159/512DOMUSC5_expresshare.com.part17.rar

http://rapidshare.com/files/447063212/512DOMUSC5_expresshare.com.part19.rar

http://rapidshare.com/files/447063330/512DOMUSC5_expresshare.com.part20.rar

HOTFILE

http://hotfile.com/dl/103496138/f781c8d/512DOMUSC5_expresshare.com.part01.rar.html

http://hotfile.com/dl/103496139/a543e55/512DOMUSC5_expresshare.com.part02.rar.html

http://hotfile.com/dl/103496140/3906e02/512DOMUSC5_expresshare.com.part03.rar.html

http://hotfile.com/dl/103496141/ec36156/512DOMUSC5_expresshare.com.part04.rar.html

http://hotfile.com/dl/103496142/172bc66/512DOMUSC5_expresshare.com.part05.rar.html

http://hotfile.com/dl/103496143/d164ac1/512DOMUSC5_expresshare.com.part06.rar.html

http://hotfile.com/dl/103496144/51bc045/512DOMUSC5_expresshare.com.part07.rar.html

http://hotfile.com/dl/103496145/13949c0/512DOMUSC5_expresshare.com.part08.rar.html

http://hotfile.com/dl/103496146/11bf2e2/512DOMUSC5_expresshare.com.part09.rar.html

http://hotfile.com/dl/103496147/33f2cfe/512DOMUSC5_expresshare.com.part10.rar.html

http://hotfile.com/dl/103496148/5722ebf/512DOMUSC5_expresshare.com.part11.rar.html

http://hotfile.com/dl/103496149/81444d9/512DOMUSC5_expresshare.com.part12.rar.html

http://hotfile.com/dl/103496150/3bbe0ec/512DOMUSC5_expresshare.com.part13.rar.html

http://hotfile.com/dl/103496151/07bada4/512DOMUSC5_expresshare.com.part14.rar.html

http://hotfile.com/dl/103496152/d2a9277/512DOMUSC5_expresshare.com.part15.rar.html

http://hotfile.com/dl/103496153/fdcc9d7/512DOMUSC5_expresshare.com.part16.rar.html

http://hotfile.com/dl/103496154/66b45e4/512DOMUSC5_expresshare.com.part17.rar.html

http://hotfile.com/dl/103496155/36c366e/512DOMUSC5_expresshare.com.part18.rar.html

http://hotfile.com/dl/103496156/34f9061/512DOMUSC5_expresshare.com.part19.rar.html

http://hotfile.com/dl/103496157/72b80be/512DOMUSC5_expresshare.com.part20.rar.html

http://hotfile.com/dl/103496158/5d256d8/512DOMUSC5_expresshare.com.part21.rar.html

PROSES AWAL, PROSES TAKE AUDIO

LANGKAH-LANGKAH



TAKE AUDIO

1./Download software Cubase,dengan link di atas

2./ Settinglah dalam hal ini anda sedang take gitar, setinglah volume gitar anda. Anda harus banyak melakukan eksperimen atau percobaan, berapa yang baiknya untuk menyetel suara volume pada gitar anda, karena beda gitar beda suara yang disebabkan beda pick up atau biasa disebut spull.

3./ Anda mau menggunakan software atau effect gitar asli, jika menggunakan software contohnya software Guitar Rig maka ada baiknya anda beli hardware Guitar Rignya juga, karena kalau hanya pakai softwarenya saja dijamin pasti suaranya pecah pada saat mastering. Kalau menggunakan effect eksternal, Carilah effect yang bagus yang noisenya sedikit dan suaranya bulat, sesuaikan volume effect anda, dalam hal ini anda juga harus banyak percobaan dalam mengatur volume pada effect anda, dan ingat preamp pada computer atau audio di computer jangan pernah diubah-ubah, biarkan settingannya pada 0 db agar tidak terjadi noise atau peak.

4./ Ada banyak cara atau biasa disebut skema dalam proses pengambilan suara. Ada yang dari gitar lalu dihubungkan ke effect gitar lalu dihubungkan ke line in computer langsung. Ada juga dari gitar dihubungkan ke effect gitar lalu dihubungkan ke sound yang besar lalu taruh di depannya mic, baik di depan sound, di samping sound, agak jauh dari sound, atau dibelakang sound dan dari mic itu baru dihubungkan ke line in computer langsung. Dalam hal ini tergantung pilihan anda dan kreatif anda serta percobaan anda dalam mencari kualitas sound atau rekaman yang baik, baik mixing sampai mastering.



PROSES EDITING DAN MIXING

1./ Satu persatu anda dengarkan audio mana yang hasil takenya kurang bagus atau ada yang fals, bila nada fals anda bisa menggunakan pitch shift untuk memperbaiki nadanya. Jika sound gitar anda rasa kurang dapat seperti yang anda inginkan, anda bisa mengedit dengan equalizer yangt telah disediakan software atau anda gunakan plugin tambahan pada sound gitar.

2./ Jika anda kesulitan untuk take drum, mungkin karena kemahalan membeli sebuah drum yang bagus dan soundcard khusus drum yang harganya memang cukup mahal, anda bisa memanfaatkan software Fruity Loops(bisa anda searching sendiri di google ^.^). Setelah anda membuat take drum pada Fruity Loops, anda bisa memindahkannya ke Nuendo bersama take gitar yang telah anda buat.

3./ Banyak sekali kesalahan-kesalahan take dapat anda edit di Nuendo (dalam hal ini), Dari mencopy file, memotong audio yang tidak perlu, membuat fade out/suara yang semakin lama semakin menuju rendah, atau fade in/suara yang menuju keras. Mengedit suara kiri suara kanan atau left and right yang akan membuat audio lebih terasa nuansa stereonya. Cukup anda coba-coba dan anda ingat masing-masing fitur yang telah disediakan software.

4./ Mixing, penyelarasan suara, proses mixing ini sangat penting karena lagu enak didengar atau tidaknya sebagian besar dari mixingan anda. Jangan suara vocal menutupi suara gitar dan drum atau juga sebaliknya suara vocal tidak terdengar jelas karena tertutup distorsi gitar yang tinggi atau gain drum yang tinggi. Yang paling sulit itu mixing drum antara snare drum, kick, hit-hat, cymbal. Dalam hal ini anda harus lebih-lebih sering melakukan pengamatan dan ujicoba, jangan lupa dengarkan lagu-lagu yang sudah jadi sebagai bahan referensi anda dalam mixing sebuah lagu, gunakan telinga anda sebaik-baiknya.


PROSES MASTERING

Jika lagu yang anda mixing sudah sesuai menurut telinga anda, tetapi masih kurang besar gainnya, maka gunakanlah software wavelab (dalam hal ini) atau yang lainnya. Aturlah gain yang ada pada wavelab dan gunakanlah plugin-plugin yang bersifat memfilterisasi audio dan jangan lupa juga pasanglah monitoring audio untuk mencegah suara peak atau lebih dari 0 db. Bila anda rasa sudah cukup dengan hasil mastering, maka batch proseslah dan save/simpan dalam format wav. Dan lagu anda kini telah siap untuk dikonsumsi sendiri atau dijual. ^.^

Read more »