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
Posts
