Cara Mendesain Blog Dengan Dreamweaver

Cara Mudah mendesain blog yaitu dengan Adobe Dreamweaver

langkah pertama yang harus anda lakukan adalah Download Dreamweavernya dulu sana.

selanjutnya, siapkan juga Corel Draw untuk mendesain Gambar yang akan ditempel di Blog.

Jika perlengkapan yang tertera di atas sudah anda siapakan maka lanjut ke tahap Analisis

kenapa analisis?
untuk mengetahui bagian mana saja yang akan kita Ganti, Hapus atau Tambahkan.

Pertama Anda Pilih Template blog yang ingin anda desain, Template blog bisa anda pakai sesuai yang disediakan pada blog itu sendiri.
maka setelah itu anda "Lihat Blog" seperti pada Gambar yang saya sertakan
Gambar 1

Maka akan muncul tampilan blog anda seperti ini
Gambar 2

Selanjutnya Anda "Save AS" atau "Simpan Sebagai"
gambar 3

Simpan dimana aja anda gampang menemukannya
Gambar 4

Maka akan tersimpan seperti ini punya saya berlogo Chrome yg berekstensi HTML
Gambar 5

Selanjutnya buka "Adobe Dreamweavernya" Punya saya kebetulan CS6
Gambar 6

Selanjutnya saya masukan HTML yang sudah saya download tadi ke Dreamweaver. Cukup Drop and Drag aja seperti gambar berikut
gambar 7

Maka akan tampil sebagai berikut pada tampilan "Design" dilihat pada Pojok Kiri Atas
gambar 8

untuk gambar yang tidak tampil tidak masalah sperti gambar kolaknya yang gak ke ambil. haha

lanjut dan ini tampilan "CODE" pada bagian kiri Atas juga
Gambar 9

Selanjutnya saya telah menyiapkan Gambar Meme yg bernama "Laser" itu, akan saya sisipkan pada judul blognya yang berjudul "Resep masakan" nah itu nanti akan saya ganti dengan Meme ini
Gambar 10


Tinggal Drop And Drag saja maka akan tampil berukuran besar seperti pada gambar ini
gambar 11

gambar 12

Untuk ukurannya bisa kita sesuaikan sendiri secara langsung, seperti yang saya sesuaikan berikut dengan kolom Judulnya
gambar 13

 Tinggal Hapus judul Blognya dan Geser Gambarnya Ke kolom Judul maka akan tampil seperti tampilan berikut
Gambar

 Kita seleksi Gambarnya dengan meng Klik gambar memnya lalu kita Lihat di bagian "CODE"
gambar 15

 Maka pada bagian "CODE" akan tampak sebuah script yang di blok, nah nantinya script tersebut yang akan kita Copy dan Paste kan Di template blog kita
Gambar 16

 Seperti ini tampilan scriptnya
gambar 17

 bagian yang saya lingkari adalah script yang akan kita Copy dan Pastekan di templat blog
Gambar 18

 Setelah itu anda perhatikan bagian yang saya lingkari, itu adalah bagian dimana Script ini akan dipasang, tepatnya pada bagian bagian yang saya lingkari itu.
nanti anda Cari bagian yang saya lingkari pada template Blog Anda
Gambar 19

 Dan perhatikan juga bagian yang saya lingkari ini, terdapat nama (Header-inner, titlewrapper, dan title"><span style="clear;both'>")
ingat ya script diletakan pada bagian tersebut yaitu setelah "Clear;both">
dan di akhirnya ada </div>
Gambar 20


Sekarang tahap Pemasangan Di Templat blog

masuk ke remplat Blog kita Dan edit HTML nya

untuk mencari bagian ayang akan kita cari dengan mudan "Ctrl+F"
seperti pada gambar. lalu kita ketikan "skip to main" maka akan tampil tulisan "skip to main" yang di blok warna kuning.
Gambar 21

 nah dekat dari tulisan "Skip to main" kita geser ke bawah dengan teliti, tak jauh maka kita akan menemukan script yang saya lingkari seperti yang ada pada Dreamweaver tadi.
Tapi dimana tepatnya script akan kita pasang, yaitu pada bagian paling bawah yang saya lingkari, disitu terdapat "Clear;both"/> (Pastekan script dari Dreamweaver) </div>
Gambar 22

 Seperti pada gabar berikut setelah saya pastekan dibagian script tersebut, script yang saya blok adalah script editan dari Dreamweaver tadi itu
Gambar 23

 lalu coba kita "Pratinjau template" maka akan tampil seperti bagian gambar berikut.
tapi koq gambar memenya gak muncul ya, kenapa?
itu karena gambar yang kita pasang bukanlah URl gambar yang terdapat pada Internet, melainkan gambar yang ada pada komputer saya, ya jelas lah gabakalan muncul.

jika kalian ingin menghilangkan judul blognya silahkan Edit saj  Di bagian "Tata letak"
Gambar 24

untuk memunculkan gambar maka kita pergi dulu ke situ ini yang saya pake yaitu PICASA WEB, bukan aplikasi picasa ya tetapi Picasa web, dan anda harus punya akun dulu ya. bikin dulu aja gampang.
nah setelah anda memiliki akun picasa web maka langsung UPLOAD gambar tadi
Gambar25

Klik gambarnya dan Drag lepas di tempat seperti pada gambar tersebut, setelah itu 'OK' dan setelah gambarnya berhasil du Upload kita klik Gambarnya.
Gambar 26

maka akan tampil seperti ini. lanjut kita klik Kanan dan kita Salin Alamat Gambar bukan Simpan gambar ya.
Gambar 27

setelah itu pergi ke template Blog Kita yang sebelumnya sedang kita Edit, kita caru Script yang tadi lalu kita cari namaGambar kita sebelumnya apa, nah otu namanya ditemgah-tengah tanda kutip ya Hapus namanya yang saya blok itu
Gambar 28

lalu kita Pastekan script Gambar dari Picasa Web tadi, maka begini scriptnya, ingat scriptnya di pastekan pada bagian tengah-tengan tanda kutip
( "URL Gambar" )
Gambar 29

 Lanjut lalu kit lihat "pratinjau Template"
Gambar 29

Selanjutnya Kita "Simpan template" dan Lihat blog sudah terisi gambar
Gambar 30

itu contoh kecil yang saya berikan, selanjutnya jika anda inginj berkreasi dengan menyimpan tombol-tombol sosmed atau bagian lainnya seperti Merubah Background. caranya sama saja Di Adobe Dreamweaver sudah disediakan dan sangat mudah digunakan.

Terima Kasih