Rabu, 26 Januari 2011

cara meniru tampilan web/blog orang lain

Sebelumnya ada sedikit cerita nih... sejelek apapun blog kita tapi kalau karya sendiri akan membuat hati puas,

Adapun cara caranya adalah sebagai berikut:

1.silahkan sobat kunjungi salah satu blog/web yang mau ditiru, setelah sobat menemukannya lalu klick berkas/file pada sebelah kiri atas browser mozila sobat pilih simpan halaman dengan nama, lalu kasih nama file sobat kira kira seperti ini: web-percobaan-edit tanpa spasi lalu simpan pada hardisk sobat terserah dimana saja yang penting sobat ingat dimana file itu disimpan,
2.buka file yang sobat simpan tadi, disitu akan terlihat dua file yang berbeda pilih salah satu  file yang berisi kode html, kalau browser mozila disetel untuk peramban utama pada kompi sobat maka akan terlihat gambar atau logo mozila dalam file tersebut,
klick kanan pada file mozila tadi lalu klick edit atau open with pilih noteped maka disitu akan terlihat banyak dan berantakan kode kode html, (saran buka ukuran penuh pada noteped agar tidak terlihat berantakan)
nah...! disini kita agak dibingungkan dengan kode html yang begitu banyak (dan entah apa apaan tuh isinya pusing dah gue..) tapi sobat jangan menyerah dulu karena saya sudah pilih kode kodenya yang bisa kita ambil dari noteped tadi agar tampilan blog kita sama dengan blog yang kita tiru, namun jujur saya katakan saya belum bisa meniru untuk tampilan navbarnya, mungkin buat sobat yang sudah bisa meniru bagian navbarnya mohon bisa menambahkan dalam kolom komentar nantinya, oke... sekarang kita ketahap selanjutnya.

silahkan sobat pilih kode kode yang bisa diambil dari noteped tadi yang biasanya seperti ini:

untuk bagian header biasnya akan terlihat kodenya seperti ini:
#header bla bla bla }diawali tanda # dan diakhiri tanada }  atau .header bli bli bli }  dan diawali dengan titik diakhiri tanda}

silahkan sobat cari kode kode itu untuk mengganti tampilan header nya, contohnya seperti ini:

#header {
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: inset 0px 0px 20px #000;
-webkit-box-shadow: inset 0px 0px 20px #000;
-moz-box-shadow: inset 0px 0px 20px #000;
width: 960px;
height: 150px;
color: #FFF;
font-size: 18px;
margin: 0;
padding: 0;
overflow: hidden;
font-family:Impact;
text-transform: Title Case;
}

atau seperti ini:

.headerleft {
width: 460px;
float: left;
font-size: 16px;font:Impact;
font-weight: normal;
margin: 0;
padding: 0;
color: #fff;
}

dua contoh diatas adalah untuk kode bagian header, lalu bagaimana dengan bagian posts, sidebar dan yang lainnya...? oke.. intinya sama saja... semua kode yang bisa kita ambil akan diawali tanda # dan diakhiri tanda }  atau diawali dengan tanda titik (.) tanpa tanda kurung dan diakhiri tanda }

untuk bagian posts atau bagian halaman posting contoh kodenya seperti ini:

#post bla bla bla } atau .post bli bli bli }

untuk bagian sidebar seperti ini:

#sidebar bla bla bla }atau .sidebar bli bli bli }

begitulah seterusnya, lalu bagaimana untuk meletakkan kode kode tersebuuuuuuut....??

begini... sebaiknya satu satu dulu untuk sobat praktekkan yaitu untuk bagian header nya dulu agar sobat tidak dibingungkan dengan banyaknya kode kode yang akan sobat pasang,

sekarang coba sobat login ke blog sobat lalu pilih edit html expan template widget boleh dicentang, tidak dicentang juga boleh,   lalu sobat cari bagian header untuk memudahkan pencarian silahkan sobat klick ctrl F lalu ketikkan kode #header pada kolom yang berada disebelah kiri bawah,  kalau sudah sobat temukan biasanya akan terlihat beberapa kode kode tersebut berurutan kebawah,  nah silahkan sobat ganti satu persatu kode kode tadi,

misalnya kode html sobat seperti ini:


#header {
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: inset 0px 0px 20px #000;
-webkit-box-shadow: inset 0px 0px 20px #000;
-moz-box-shadow: inset 0px 0px 20px #000;
width: 960px;
height: 150px;
color: #FFF;
font-size: 18px;
margin: 0;
padding: 0;
overflow: hidden;
font-family:Impact;
text-transform: Title Case;
}
#header-inner {
background-position: left;
background-repeat: no;
}
#header h1 {
color: #fefefe;
font-size: 40px;
font-family: arial black;
font-weight: normal;
margin: 0;
padding: 15px 0 0 20px;
text-decoration: none;
text-shadow: 0px 1px 8px #000;
}
#header h1 a, #header h1 a:visited {
color: #fefefe;
font-size: 40px;
font-family: arial black;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-shadow: 0px 1px 8px #000;
}
#header h1 a:hover {
color: #fff;
text-decoration: none;
text-shadow: 0px 1px 8px #549bcc;
}
#header h3 {
color: #fff;
font-size: 18px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0px;
padding: 0px;
}

atau seperti ini:

.headerleft {
width: 460px;
float: left;
font-size: 16px;font:Impact;
font-weight: normal;
margin: 0;
padding: 0;
color: #fff;
}
.headerleft a img {
border: none;
margin: 0;
padding: 0;
}
.headerright {
width: 486px;
float: right;
margin: 0;
padding: 18px 0 0;
font-weight: bold;font-family:Georgia;
font-size: 18px;
}
.headerright a img {
border: 0px solid #FFF;
margin: 0 0 3px;
padding: 0;
}

dua contoh diatas adalah kode bagian header yang harus sobat hapus dan diganti dengan kode yang ada di noteped, setelah diganti silahakan  klick pratinjau dulu untuk melihat dan meyakinkan bahwa tampilan header sudah berubah atau belum, jika sudah berubah tapi belum sesuai letak letaknya, sobat bisa rubah ukuran lebar atau tingginya ukuran dengan merubah angka angka yang biasanya terlihat seperti contoh diatas yang berwarna kuning, begitu juga dengan ukuran ukuran lainnya. setelah semua sudah terlihat mirip bahkan persis barulah sobat boleh simpan template.

dan untuk merubah halaman posting, sidebar dan yang lain linnya caranya sama saja dengan contoh contoh diatas sobat cari saja kode kodenya pasti ada untuk bagian masing masing,

nah jika sobat sudah berhasil mempraktekkan cara ini maka selanjutnya sobat akan bisa mendesain web/blog sendiri dengan mudah yang kemungkinan bisa dijadikan uang... amin... iya gak...??

buat sobat yang lebih mahir dalam bidang ini saya mohon untuk bisa menambahkan hal hal yang lebih penting, berbagi pengetahuan itu baik... terimakasih dan alhamdulillah posting sampai disini dulu...

9 komentar:

darma_ccti mengatakan...

Tapi lebih bagus lagi klo qta tdk meniru...
Bikinan karya sndri lbh mantab,coz ad nilai trsendiri,walau kadang blog saya jelek,saya hrs bangga dgn kreasi saya sendri.
he he he
but,postingx seeep kok.nambah pengetahuan jg(walau trlalu rumit)
:-)
salam bloger...

lowongan kerja mengatakan...

bagus sob infonya... boleh mencontoh tapi kita edit lagi agar gak sama2in... be your self bro... :)

Asis Sugianto mengatakan...

emank bisa begitu yach sob, meniru tampilan blog orang lain??? baru tahu saya,,, kapan2 saya jadikan bahan praktek dech klo uda ada waktu yang luang,,,

obat alami mengatakan...

mantap bos sa ambil...
salam persahabatan.

Agus Balibo mengatakan...

all@oke thax sob,, atas kunjungan nya,,, hihi namanya meniru ya pasti tak ada rasa tersendiri,,, lo udah buatan tangan sendiri pasti enak dan dapat dirasakan rasanya....

dan satu lagi,,, mencuri itu dosa hehehe

Ari Febriant's Blog™ mengatakan...

boleh dcoba tu sob, tp lbih bangga pake tampilan sndri walau hasil download ky pnyaQ... hehehe

sichandra mengatakan...

wah mantaap nih ilmunya bos :D

string mengatakan...

Wah.. Mantap sob artikelnya..
ilmu blogging bertambah ni
Hehe

Mampir juga ya d my blog
Trick Internet Gratis

Agus Balibo mengatakan...

string@ya sama2,,, oke entar saya kunjungan ke blog anda.....

Posting Komentar

Bagi yang ingin komentar silahkan !!