Senin, 18 November 2013
CARA MEMBUAT DESAIN WEBSITE MENGGUNAKAN DREAMWEAVER
19.42
Dibagian pertama tutorial berkelanjutan ini kita telah mengenal sekilas mengenai profil Dreamweaver sebagai salah satu software web design.
Oke deh, saya sarankan pembaca sudah mendownload dan sudah menginstal dreamweaver baik itu yang asli dan sudah di-purchase, trial, maupun yang versi tak asli yang serial number-nya didapat dari crack-crack-an, kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver tidak membuat kita pintar, tapi kita yang membuat dreamweaver menjadi pintar. Gimana caranya? Dibagian ini kita akan mempelajari dasar-dasar dreamweaver untuk membuat website.
1. Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya.
2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.
3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design.
Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetikbahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian splitberguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layar Code, Anda akan melihatstruktur HTML sebagai contoh struktur:
Untitled Document
dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser.
4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website.
5. Coba pembaca masuk ke layar Design seperti yang saya jelaskan pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties ini hanya terlihat jika kita bekerja pada layar Design.
6. Dibagian samping, terdapat pula bagian yang bernama Panel. Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita buat.
7. Dibagian atas tepatnya disamping menu pilihan layar, ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul pada title bar browser.
Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag .
Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuatdokumen XHTML dan CSS sebagai style library external. Rencana yang akan dipersiapkan terlebih
dahulu adalah sebagai berikut :
1. Desain Website
2. Membuat Website Dengan Dreamweaver
* * *
Desain website
Untuk memulai membuat sebuah website, terlebih dahulu kita menggambarkan desain yang akan
kita buat. Untuk kesempatan ini, kita akan membuat desain website statis dengan format xhtml
yang akan dilanjutkan dengan membuat web menggunakan dreamweaver tools.
1.1 Tampilan website
Tampilan halaman website / webpage pada kesempatan ini adalah membuat halaman web
sederhana dengan 4 bagian / block seperti gambar dibawah ini dengan deskripsi sebagai berikut :
Header
Adalah tempat Judul website yang biasanya berada diposisi teratas dari webpage
Menu
Adalah Navigator dari Content layout, berisikan link informasi sebuah
website. Pada kesempatan ini, layout menu dapat ditambahkan sesuai dengan
kebutuhan pemilik seperti : home, article, about me, contact dsb
Content
Adalah tempat utama dari sebuah webpage, berisikan content dari informasi utama
yang dapat dinavigasi melalui menu (hyperlink) pada bagian menu
dan Footer
hampir sama dengan header, namun yang membedakan adalah, posisi
footer berada di bawah dari webpage. Dimana pada tutorial ini berisikan copyright
pembuat / pemiliknya
1.2 Webpage Content
Untuk tahap awal membuat website ini, kita akan membuat 4 halaman / webpage yang akan
dinavigasi dari menu, dengan informasi sebagai berikut :
1. Home (Index.html)
Menampilkan informasi Awal dari Website, halaman ini menjadi halaman
homepage. dengan inisial Home pada menu navigasi
2. Article (Article.html)
Menampilkan informasi tentang article. dengan inisial Article pada menu navigasi
3. About Me (About.html)
Menampilkan informasi pemilik Website, halaman ini menjadi halaman homepage,
pada kesempatan ini halaman ini dijadikan kumpulan informasi article pemilik
4. Contact (Contact.html)
Menampilkan informasi Awal dari Website, halaman ini menjadi halaman
homepage, pada kesempatan ini halaman ini dijadikan kumpulan informasi article
pemilik
1.3 Menyiapkan Graphic / Gambar pendukung webpage
Pada kesempatan ini, Graphic sudah terlebih dahulu dibuat mengunakan Adobe Photoshop. Yang
ditempung pada file images sebagai berikut :
Folder/ directory gambar
background-header.png --> File gambar background header block
background-footer.png --> File gambar background footer block
background-content.png --> File gambar background content block
background-menu.png --> File gambar background menu navigasi block
pastikan file tersebut sudah anda simpan dalam PC anda pada folder images pada susunan file
website anda.
1.4 File Management Website
Sesuai dengan desain yang telah kita bahas, maka management file dari website yang akan kita
buat adalah sebagai berikut :
index.html --> html file, halaman utama / homepage
article.html --> html file, halaman article
about_me.html --> html file, halaman tentang pemilik
contact.html --> html file, halaman contact pemilik
template.css --> css file, Style Library halaman website
Folder / directory gambar
Buat 1 buah Folder / directory dengan nama “workshop” pada PC anda yang teletak pada “C:\”
File management diatas akan berada pada folder yang anda buat. “C:\workshop\”
Untuk awal tentunya anda belum mempunyai file index.html, about_me.html & template.css. file
graphic pendukung dapat dicopy dari tempat yang telah disediakan.
Membuat Website dengan Dreamweaver
Untuk Memulai membuat website dengan dreamweaver, anda dapat langsung
membukanya pada desktop shortcut atau melalui menu :
start --> All Program --> Macromedia --> Macromedia Dreamweaver MX 2004
Pastikan Applikasi ini sudah terinstall terlebih dahulu pada PC yang akan anda gunakan.
2.1 Membuat Halaman Index.html
Pada Dashboard Dreamweaver menu pilih “HTML” pada sub “Create New” Shortcut.
Anda akan memasuki workspace Dreamweaver.
Gambar 2.1.1 Title webpage
Masukan Judul “Home” pada textbox title
Gambar 2.1.2 Saving Index.html
Save halaman Pertama anda dengan
nama index.html pada folder
“C:/apache2triad/htdocs/workshop/”
Gambar 2.1.3 Setting Block Div
masukan div tag pada halaman layout dengan class sesuai dengan design yg akan dibuat container, footer, content, menu, header
seperti digambar sebelah ini.
Gambar 2.1.4 Homepage Content
masukan informasi sesuai dengan block yang telah dibuat (contoh seperti gambar disamping).
1.header block :
Dengan nama anda dan motto
2.menu block :
navigator halaman diikuti
dengan fungsi hyperlink
• Home
• Article
• About me
• Contact
3.content block :
informasi homepage
berisikan kata sambutan, dsb
4.footer block :
informasi pembuat
2.2 Membuat CSS dengan Dreamweaver MX
Cascading style sheet dapat digunakan melalui 3 macam / jenis sebagai berikut :
1. Inline style – ditulis langsung pada setiap tag / elemen
2. Document level style – ditulis diantara bagian head HTML pada setiap dokumen
3. External style sheet – ditulis difile .css sebagai file external yang dapat dipanggil /
digunakan lebih dari 1 halaman / webpage.
Kita akan membuat dengan cara yang ke 3 dengan membuat sebuah file template.css melalui
menu File --> new --> CSS pada kategori basic page. Selanjutnya gunakan template.css sebagai link
stylesheet pada index.html dengan Attach style sheet pada panel CSS.
Gambar 2.2.1 Attach External Css
Halaman index.html akan menampung script
sebagai berikut sebagai link CSS external
<link href="template.css" rel="stylesheet" type="text/css" />
• setting semua style tag webpage dengan warna abu2 dengan margin dan padding 0.
dengan menggunakan wizard dari dreamweaver atau menulis sctipt css sebagai berikut :
* {
color: #333333;
margin: 0px;
padding: 0px;
}
• selanjutnya setting style body, format text H1 dan H2 seperti script dibawah ini :
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #313131;
}
h1 {
text-transform: lowercase;
color: #3399FF;
font-size: 25px;
}
h2 {
color:#3399FF;
font-size: 14px;
text-transform: uppercase;
}
• buat style tag div
div {
padding: 5px;
border: 1px solid #FFFFFF;
}
• style class container
.container {
width: 600px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
padding: 0px;
border: 3px ridge #FFFFFF;
}
• Style class header
.header {
background: #FFFFFF url(images/background-header.png);
text-align: center;
}
• Style class content
.content {
font-size: 12px;
background: #FFFFFF url(images/background-content.png) repeat-x;
text-align: justify;
}
• Style class menu
.footer {
font-size: 11px;
color: #FFFFFF;
background: #FFFFFF url(images/background-footer.png);
text-align: center;
• Style class menu
.menu {
height:25px;
padding:0px;
border:0px;
}
• Advance class menu pada tag li, a dan a:hover
.menu li {
list-style:none;
text-align: center;
float: left;
height: auto;
width: 150px;
font: 12px/25px Verdana, Arial, Helvetica, sans-serif;
}
.menu li a {
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background: url(images/background-menu.png);
display: block;
}
.menu li a:hover {
background: url(images/background-menu.png) 0 -25px;
color:#000000;
}
Maka tampilan home page anda akan akan seperti sebagai berikut :
Gambar 2.2.2 index.html
Gambar 2.2.3 article.html
Nahhh... gimana sobat ??
Cukup Mudah Kan Tutorialnya dalam membuat website sederhana ?? :)
Semoga Bermanfaat sobat
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<span class='post-labels'>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='http://itauye.blogspot.com/2013/11/cara-membuat-desain-website-menggunakan.html#comment-form' onclick=''>0
komentar</a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1294827985'>
<a href='https://www.blogger.com/post-edit.g?blogID=6787578412120978105&postID=5554238630236581727&from=pencil' title='Edit Entri'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div></div>
<div class="date-outer">
<h2 class='date-header'><span>Rabu, 06 November 2013</span></h2>
<div class="date-posts">
<div class='post-outer'>
<div class='post hentry'>
<a name='3886065620608322808'></a>
<div class='post-timestamp' rel='bookmark' title='permanent link'>
04.48
</div>
<div class='post-body entry-content' id='post-body-3886065620608322808'>
<h2 class="post-title entry-title">
CARA MEMBUAT BLOG DI BLOGSPOT
</h2>
<div class="post-header">
</div>
<div dir="ltr" style="text-align: left;">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvVuL1XC-mjNdfT0t7AEFDsWMXxxsP6P2aYvixGLDcBnVOLSRggTJVk2sWKdHA2wPUUUe9g09c4HOASKy73uGHIPqeXLngpfrpt17tmmp4p_SvnbqgpofWjhNkT2J9LfuEXTGWrVMYiDc/s1600/cara+membuat+blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Dasar dari cara membuat blog di blogger.com" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvVuL1XC-mjNdfT0t7AEFDsWMXxxsP6P2aYvixGLDcBnVOLSRggTJVk2sWKdHA2wPUUUe9g09c4HOASKy73uGHIPqeXLngpfrpt17tmmp4p_SvnbqgpofWjhNkT2J9LfuEXTGWrVMYiDc/s1600/cara+membuat+blogger.jpg" title="Dasar dari cara membuat blog di blogger.com" /></a></div>
<b>Cara membuat blog di blogger</b> sangatlah mudah. Bahkan sudah banyak
anak SD yang mempunyai blog sendiri. Jadi rasanya anda tidak akan
mengalami kesulitan apapun di sini.</div>
<a href="http://www.blogger.com/null" name="more"></a><div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Untuk membuat blog di blogger ada 3 hal yang harus anda ketahui, yaitu:</div>
<ol style="text-align: justify;">
<li><b>Cara membuat akun di blogger</b></li>
<li><b>Cara membuat blogspot</b></li>
<li><b>Cara membuat artikel di blogspot anda</b></li>
</ol>
<div style="text-align: justify;">
</div>
<br />
<div style="text-align: justify;">
<h2>
Cara Membuat Akun Blog Di Blogger</h2>
</div>
<div style="text-align: justify;">
Ini adalah sesuatu yang sangat mudah. Yang perlu saudara lakukan
hanyalah membuat sebuah akun gmail baru, karena setiap akun gmail baru
secara otomatis mempunyai akun blogger. Jadi kalau anda sudah mempunyai
akun gmail, langsung saja menuju ke <a href="http://www.blogger.com/">http://www.blogger.com/</a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Kalau anda belum mempunyai akun gmail, berarti saudara harus membuat
dulu satu akun baru. Kalau tidak tahu caranya silahkan baca artikel <a href="http://trikmudahseo.blogspot.com/2013/02/cara-membuat-email-google-gmail-baru.html" target="_blank">CARA MEMBUAT AKUN GMAIL BARU</a>.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<h2>
Cara Membuat Blog di Blogger</h2>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Setelah anda mempunyai akun Google yang bisa digunakan untuk mengakses
blogger.com, maka anda bisa langsung memulai untuk membuat blog pertama
anda…. ikuti prosedur di bawah ini.</div>
<div style="text-align: justify;">
</div>
<ol style="text-align: left;">
<li style="text-align: justify;">Buka www.blogger.com dan masuklah dengan menggunakan username dan password gmail saudara...</li>
<li><div style="text-align: justify;">
Di dalam halaman Dasbor blogger.com anda akan melihat foto anda, dan
tepat di bawahnya ada sebuah tombol BLOG BARU. Silahkan diklik....</div>
<div style="text-align: center;">
<img alt="cara buat blog baru di blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBMEm6kR4mTpQuI03UDlfC8LTVf-8YHUy0lvZHfGs93HS70OArDpB1sMI7VmldhwVXurDWm__nY6fXDarm27TxV5psGofsfUbVx_Z3E-qAWB-YfNxMHSN2kU964e6-dj6S9qKvS3dArY/s1600/cara+buat+blog.png" title="cara buat blog baru di blogspot" /></div>
</li>
<li>Pada formulir yang terbuka anda hanya akan diminta melakukan 3 hal, yaitu menentukan Judul, Alamat, dan Template…. <br /><div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLJ0kUV5SVJTsOSvqCHasaQuTjXimNZYRtEQGQWw5jHS1_8F8k0MZvbGa9kTQ__P5Cz_KnTeT_Jw5QXYHXZmjVEPbGEHq4bpUMjVdIfF5ryjgJOF2T7zB5hV-_DmQ_OECldYNYu1da05o/s1600/formulir+pembuatan+blog.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="tampilan formulir untuk pembuatan blog baru" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLJ0kUV5SVJTsOSvqCHasaQuTjXimNZYRtEQGQWw5jHS1_8F8k0MZvbGa9kTQ__P5Cz_KnTeT_Jw5QXYHXZmjVEPbGEHq4bpUMjVdIfF5ryjgJOF2T7zB5hV-_DmQ_OECldYNYu1da05o/s1600/formulir+pembuatan+blog.jpg" title="tampilan formulir untuk pembuatan blog baru" /></a></div>
</li>
<li>Lebih jelasnya; (1)Judul sebaiknya berisikan Kata Kunci Utama atau
header dari halaman homepage blog yang akan dibuat. (2)Alamat adalah URL
yang akan diketikkan orang saat mencari blog saudara, jadi masukkan
nama subdomain pilihan anda. (3)Nama subdomain blogspot yang dipilih
harus unik dan tidak ada duanya. (4)Template adalah model tampilan dari
blog anda (untuk permulaan pilih yang mana saja, nanti kita ganti).
(5)Silahkan klik BUAT BLOG jika anda sudah puas dengan pengaturan di
atas.</li>
<li>Jika sukses berarti blog anda sudah jadi, tinggal dipercantik sana sini dan diisi artikel. </li>
</ol>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Setelah anda menyelesaikan proses pembuatan blog, maka anda akan dibawa
kembali ke Dasbor. Nama blog yang baru anda buat sudah ada di Dasbor.
Untuk melihat tampilan blog anda silahkan klik LIHAT BLOG.<br />
<br />
Kalau anda sekedar ingin membuat blog pribadi, maka anda bisa langsung
memposting artikel dengan mengklik tombol orange bergambar pensil…. Tapi
jika anda ingin membuat blog untuk publik dan tidak puas dengan model
tampilan saat ini, maka sebaiknya saudara mengganti tampilan yang ada
saat ini. </div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<h2>
Mempercantik Blog Yang Baru Dibuat<span style="color: #cc0000;"><span style="font-size: large;"><br /></span></span></h2>
</div>
<div style="text-align: justify;">
Ada dua cara untuk mempercantik tampilan blogspot anda, yaitu:</div>
<h3>
1. Edit Dengan Perancang Template Blogger</h3>
<div style="text-align: justify;">
Perancang template Blogger adalah fitur default dari blogger.com yang
bisa anda gunakan saat membuat blog untuk mengedit tampilan dari
template. Tapi perlu dicatat bahwa <span style="color: red;">fitur ini hanya dijamin bekerja pada template default blogger</span> atau template-template dari luar yang menyatakan bisa diedit dengan Perancang Template Blogger.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Jika anda tertarik untuk mencoba, maka kenali dulu fungsi-fungsi dari fitur yang satu ini dengan membaca artikel <a href="http://trikmudahseo.blogspot.com/2013/05/cara-edit-menggunakan-perancang.html" target="_blank">EDIT TEMPLATE BLOG DENGAN PERANCANG TEMPLATE BLOGGER</a></div>
<div style="text-align: justify;">
</div>
<h3>
2. Pasang Template Blogspot Yang Sudah Jadi</h3>
<div style="text-align: justify;">
Untuk yang satu ini saudara mempunyai dua pilihan, apakah lebih
menekankan pada template Blog yang SEO friendly atau pada template blog
yang keren…</div>
<h4 style="background: #e6e6e6; border: 1px dashed #aaa; padding: 5px; text-align: left;">
Mengutamakan Template Blogspot Yang SEO Friendly</h4>
<div style="text-align: justify;">
Jika saat membuat blog di blogger yang saudara kejar adalah SEO, maka
cara terbaik memulainya adalah dengan menggunakan template blogspot yang
SEO Friendly. Untuk menggunakan template blog yang SEO Friendly saudara
bisa browsing di Google, atau coba beberapa koleksi template di blog
ini.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Silahkan baca di <a href="http://trikmudahseo.blogspot.com/2013/01/pilihan-template-blogspot-seo-friendly.html" target="_blank">TEMPLATE BLOG SEO FRIENDLY TERBARU 2013</a></div>
<br />
<h4 style="background: #e6e6e6; border: 1px dashed #aaa; padding: 5px; text-align: left;">
Mengutamakan Template Blogspot yang Keren</h4>
<div style="text-align: justify;">
Jika saudara lebih mengutamakan Template Blogspot yang Keren, maka
saudara bisa mencoba mengunduh dari beberapa situs yang sudah terkenal
dalam hal template blogger ini.... Beberapa situs yang bisa saya
rekomendasikan bisa saudara baca di artikel <a href="http://trikmudahseo.blogspot.com/2013/04/download-template-blog-gratis-keren.html" target="_blank">DOWNLOAD TEMPLATE KEREN DAN GRATIS</a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Tapi perlu dicatat bahwa template keren inipun bisa dibuat sedikit SEO
Friendly. Jadi kalau punya sedikit kemampuan kode HTML, saudara bisa
coba-coba mengedit Template yang baru di download tadi. Untuk membantu
saudara coba baca artikel <a href="http://trikmudahseo.blogspot.com/2013/05/cara-membuat-template-blog-seo-friendly.html" target="_blank">CARA MEMBUAT TEMPLATE BLOG SEO FRIENDLY</a>....</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Kalau masalah Template ini sudah tuntas, maka yang perlu saudara lakukan sekarang adalah memposting artikel pertama saudara....</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<h2>
Cara Membuat Artikel Di Blogspot Baru Anda</h2>
</div>
<div style="text-align: justify;">
Tidak ada yang perlu dikuatirkan di sini, karena fitur-fitur pengetikan
pada editor blogspot sangatlah user friendly. Anda akan segera sadar
akan fungsi dari setiap-setiap komponen yang ada di dalam editor ini.
Tapi untuk membantu saudara, silahkan baca artikel <a href="http://trikmudahseo.blogspot.com/2013/05/cara-membuat-artikel-di-blogger.html" target="_blank">CARA MEMBUAT ARTIKEL DI BLOGGER</a></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Ok, jika saudara sudah menguasai semua pengetahuan di atas, berarti
saudara sudah tahu cara membuat blog di blogger dengan benar dan
setidaknya mendekati standar SEO. Mudah-mudahan artikel ini membantu
anda mengawali aktifitas di dunia blogging....</div>
</div>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<span class='post-labels'>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='http://itauye.blogspot.com/2013/11/cara-membuat-blog-di-blogspot-cara.html#comment-form' onclick=''>0
komentar</a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1294827985'>
<a href='https://www.blogger.com/post-edit.g?blogID=6787578412120978105&postID=3886065620608322808&from=pencil' title='Edit Entri'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='post-outer'>
<div class='post hentry'>
<a name='49059499639656847'></a>
<div class='post-timestamp' rel='bookmark' title='permanent link'>
04.40
</div>
<div class='post-body entry-content' id='post-body-49059499639656847'>
<h3 class="post-title entry-title" style="text-align: center;">
<a href="http://profilsmk.blogspot.com/2012/11/sejarah-smk-nu-03-kaliwungu-kendal.html">Sejarah SMK NU 03 Kaliwungu Kendal</a>
</h3>
<br />
<br />
<br />
<div class="MsoListParagraph" style="margin-left: 14.2pt; text-align: justify; text-indent: -14.2pt;">
<span style="font-size: medium;"><b><span style="font-family: "Times New Roman","serif"; line-height: 115%;"><span><span style="-moz-font-feature-settings: normal; -moz-font-language-override: normal; font-family: "Times New Roman"; font-size-adjust: none; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal;"></span></span></span></b><b><span style="font-family: "Times New Roman","serif"; line-height: 115%;"><br /></span></b></span></div>
<div class="MsoNormal" style="line-height: 150%; margin: 0cm 0cm 0.0001pt 14.2pt; text-align: justify; text-indent: 42.5pt;">
<span style="font-size: medium;"><span style="font-family: "Times New Roman","serif"; line-height: 150%;">Sekolah Menengah Kejuruan (SMK) NU 03 Kaliwungu pada
awalnya bernama STM NU 02 Kaliwungu adalah lembaga pendidikan yang </span><span style="font-family: "Times New Roman","serif"; line-height: 150%;">berada di bawah naungan Lembaga Ma’arif Kendal
</span><span style="font-family: "Times New Roman","serif"; line-height: 150%;">didirikan
pada tahun 1996 yang berlokasi di Desa Kutoharjo Kaliwungu Kab. Kendal. Pada
tahun pertama dengan pemprakarsa dan kepala sekolah pertama yaitu Bapak <b>CHUSAENI, S.Pd. </b>(Alm) membuka empat
kelas dengan rincian 3 kelas untuk program keahlian Teknik Mekanik Otomotif
(TMO) dan 1 kelas Teknik Audio Video (TAV). Beliau berjuang untuk kemajuan SMK
NU 03 Kaliwungu selama 15 Tahun sampai sebelum meninggal karena penyakit stroke
yang dideritanya selama 2 th lebih. Pada mulanya Bapak Chusaeni, S.Pd (Alm )
banyak sekali menyewa tempat yang digunakan sebagai lokasi belajar diantaranya
MI Kembangan, SD di Stasiun dan Ngaglik. Dengan segala keterbatasan dan
kekurangan fasilitas dan sarana, Beliau tetap berusaha memperjuangkan kemajuan
pendidikan di tingkat SMK di Kaliwungu ini. Dan Pada akhirnya saat sekarang SMK
NU 03 Kaliwungu mengalami kemajuan dengan menempati gedung baru yang berjumlah
10 lokal dengan dilengkapi laboratorium komputer walaupun komputernya masih
dalam keadaan terbatas. Gedung baru yang beralamat di Jl. Soekarno – Hatta Desa
Karang Tengah Kaliwungu cukup strategis karena dekat dengan jalan raya dan
mudah transportasinya.</span></span></div>
<div class="MsoNormal" style="line-height: 150%; margin: 0cm 0cm 0.0001pt 14.2pt; text-align: justify; text-indent: 42.5pt;">
</div>
<div class="MsoNormal" style="line-height: 150%; margin: 0cm 0cm 0.0001pt 14.2pt; text-align: justify; text-indent: 42.5pt;">
<span style="font-size: medium;"><span style="font-family: "Times New Roman","serif"; line-height: 150%;">Bahkan SMK NU 03 Kaliwungu sekarang sudah memiliki
website yang bisa diakses untuk mendapatkan informasi lebih lanjut tentang
sekolah ini yang dapat diakses di <b><i>www.smknu03klw.blogspot.com</i></b> atau
dapat menghubungi melalui via telepon (0294) 385376, 3686987.</span></span></div>
<div class="MsoNormal" style="line-height: 150%; margin: 0cm 0cm 0.0001pt 14.2pt; text-align: justify; text-indent: 42.5pt;">
</div>
<div class="MsoNormal" style="line-height: 150%; margin: 0cm 0cm 0.0001pt 14.2pt; text-align: justify; text-indent: 42.5pt;">
<span style="font-size: medium;"><span style="font-family: "Times New Roman","serif"; line-height: 150%;">SMK NU 03 Kaliwungu
yang berlokasi di pusat kota Kaliwungu merupakan SMK Swasta yang berbasis
Teknologi dan Religius, lokasi yang berada di jalur Strategis jalan Soekarno
Hatta memberikan kemudahan bagi siswa untuk belajar dengan aktif dan kreatif. SMK
NU 03 Kaliwungu dikenal dengan SMK Nuklir (NU Tiga) dalam mendidik siswa di
dukung oleh guru bergelar Sarjana dan Master yang berkompeten di bidangnya.</span></span></div>
<div class="MsoNormal" style="line-height: 150%; margin: 0cm 0cm 0.0001pt 14.2pt; text-align: justify; text-indent: 42.5pt;">
</div>
<div class="MsoNormal" style="line-height: 150%; margin: 0cm 0cm 0.0001pt 14.2pt; text-align: justify; text-indent: 42.5pt;">
<span style="font-size: medium;"><span style="font-family: "Times New Roman","serif"; line-height: 150%;">Di kampus SMK NU 03
Kaliwungu, seluruh Civitas Akademika dengan segala sumber dayanya siap membantu
dan membimbing siswa untuk belajar dan memasuki dunia kerja serta menyiapkan
masuk ke Perguruan Tinggi.</span></span></div>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<span class='post-labels'>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='http://itauye.blogspot.com/2013/11/sejarah-smk-nu-03-kaliwungu-kendal.html#comment-form' onclick=''>0
komentar</a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1294827985'>
<a href='https://www.blogger.com/post-edit.g?blogID=6787578412120978105&postID=49059499639656847&from=pencil' title='Edit Entri'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<span class='post-location'>
</span>
</div>
</div>
</div>
</div></div>
<!--Can't find substitution for tag [adEnd]-->
</div>
<div class='blog-pager' id='blog-pager'>
<a class='home-link' href='http://itauye.blogspot.com/'>Beranda</a>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
Langganan:
<a class='feed-link' href='http://itauye.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Postingan (Atom)</a>
</div>
</div>
</div></div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div>
<!-- end content-wrapper -->
<div id='footer-bg'>
<div id='footer'>
<!-- Remmeber!!! This free Blogger template is licensed under the Creative Commons Attribution 3.0 License. You are required to keep the footer links intact which provides due credit to its Author and Supporters. -->
Copyright © 2011 <a href='http://itauye.blogspot.com/'>sejarah SMK NU 03 KALIWUNGU</a>.
Template by <a href='http://www.newbloggertemplate.net'>New Blogger Template</a></div>
</div></div>
</div>
<!-- end outer-wrapper -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5xP1HtvlYzS-ZSTJSFZwIRTWP-9Q:1732332852157';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6787578412120978105','//itauye.blogspot.com/','6787578412120978105');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '6787578412120978105', 'title': 'sejarah SMK NU 03 KALIWUNGU', 'url': 'http://itauye.blogspot.com/', 'canonicalUrl': 'http://itauye.blogspot.com/', 'homepageUrl': 'http://itauye.blogspot.com/', 'searchUrl': 'http://itauye.blogspot.com/search', 'canonicalHomepageUrl': 'http://itauye.blogspot.com/', 'blogspotFaviconUrl': 'http://itauye.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'id', 'localeUnderscoreDelimited': 'id', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22sejarah SMK NU 03 KALIWUNGU - Atom\x22 href\x3d\x22http://itauye.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22sejarah SMK NU 03 KALIWUNGU - RSS\x22 href\x3d\x22http://itauye.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22sejarah SMK NU 03 KALIWUNGU - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/6787578412120978105/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://www.blogger.com/profile/01122447190175831190\x22 /\x3e\n', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d78375fb222d99b3', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Dapatkan link', 'key': 'link', 'shareMessage': 'Dapatkan link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Bagikan ke Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Bagikan ke X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Bagikan ke Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27id\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Baca selengkapnya', 'pageType': 'index', 'pageName': '', 'pageTitle': 'sejarah SMK NU 03 KALIWUNGU'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Tautan disalin ke papan klip!', 'ok': 'Oke', 'postLink': 'Tautan Pos'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Khusus', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'sejarah SMK NU 03 KALIWUNGU', 'description': '', 'url': 'http://itauye.blogspot.com/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}]);
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'topnav', document.getElementById('PageList1'), {'title': 'Pages', 'links': [{'isCurrentPage': true, 'href': 'http://itauye.blogspot.com/', 'title': 'Beranda'}, {'isCurrentPage': false, 'href': 'http://itauye.blogspot.com/p/blog-page.html', 'id': '6795527072927338518', 'title': ''}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sidebar', document.getElementById('HTML4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'sidebar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'sidebar', document.getElementById('Attribution1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Memuat\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar2', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar2', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar2', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2646514562-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
</script>
</body>
</html>