Portable Dreamweaver CS4 & CS5

Adobe Dreamweaver sampai sekarang masih memegang predikat sebagai software web editing terbaik yang digunakan oleh kebanyakan web designer & developer. Pengembangan dukungan CSS menjadikan software web editing ini cocok untuk mendesain grapic tampilan web yang komplek belum lagi ditambah dukungan Photosop Smart Objects semakin memudahkan anda para web designer untuk tetap mempertahankan kualitas gambar (image) kelihatan tajam.

Keunggulan

• Built-in HTML, CSS Editor & validator seperti halnya WYSIWYG (What You See Is What You Get).


• Pada Contect CSS Editing memudahkan anda melihat semua CSS Style yang mempunyai dampak (efek) pada area mana saja dalam suatu halaman.


• Termasuk di dalamnya Spry framework, Subversion integration bahkan dukungan untuk membuat files Adobe Air.


• Text Editor dilengkapi dengan kode pewarnaan yang berbeda untuk HTML, PHP, ASP dan beberapa bahasa pemrograman web lainnya, ditambah lagi penyelesaian tag kode yang dapat dilengkapi secara otomatis.


• Koneksi langsung dengan Adobe Photoshop dan Adobe Firework untuk melakukan edit gambar.


• Dukungan karakter khusus dan karakter UTF-8 khusus untuk membuat halaman yang tidak menggunakan bahasa Inggris.


• Dan masih banyak lagi.

Jika anda gemar bereksperimen otak-atik halaman web, software ini cocok buat anda. Namun jika anda baru mulai menekuni web programming, jangan takut terintimidasi dengan visualisasinya yang kelihatan ribet. Karena setelah tahu dan mencoba software web design ini, maka anda tidak akan mau berpindah ke web design software yang lain.

Download

DREAMWEAVER CS5 PORTABLE

Download

Selengkapnya

Dreamweaver Layout 3

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 3)

---

Jika pada bagian ke-2 template yang anda lihat sama persis dengan previewnya, selanjutnya tahap penyempurnaan akhir dapat anda praktekkan seperti yang tertulis di bawah.

Modifikasi kode 'Header'

Pada tag 'header (#header)' tambahkan kode berikut ini pada mode edit css (style.css) => position: relative; <= Kemudian tambahkan kode di bawah ini:

[css]
#header ul {
margin: 0;
list-style: none;
float: left;
right: 0px;
bottom: 0px;
position: absolute;
}

#header li {
float: left;
display: inline;
}

#header li a:link,#header li a:visited {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #4E4E4E;
padding: 34px 20px 20px 20px;
margin-right: 0.5em;
}

#header li a:hover,#header li a:active {
color: #060;
border-bottom: none;
}

#header li a.aktif {
background: url(../images/img03.jpg) no-repeat center top;
cursor: default;
color: #333;
}
[/css]

Modifikasi kode 'Konten Utama (maincontent)'

Tambahkan kode berikut ini => text-align: justify;

Modifikasi kode 'footer'

Tambahkan ID Tag seperti di bawah ini:

[css collapse="false"]
#footer p {
color: #fff;
font-size: 0.75em;
padding: 15px;
text-align: center;
font-family: arial;
font-weight: bolder;
margin: 0;
clear: both;
}
[/css]

Div Tag tambahan

Tambahkan id Tag seperti di bawah ini:

[css]
#logogambar p.text1 {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-style: italic;
margin: 0 0 0 15px;
padding: 90px 20px 0px 30px;
font-size: 30px;
color: #FFFFFF;
}
[/css]

Tambahkan juga kode ini untuk sliding tab sidebar:

[css]
#scroller-header a {
text-decoration:none;
color:#867863;
padding:0 2px;
font:12px arial;
}

#scroller-header a:hover {
text-decoration:none;
color:#4b412f
}

a.selected {
text-decoration:underline !important;
color:#4b412f !important;
}

#scroller-header {
background:url(../images/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}

#scroller-body {
background:url(../images/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
}

#mask {
width:250px;
overflow:hidden;
margin:0 auto;
}

#panel div {
float:left;
}

#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}

#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}

#panel ul li.last {
border-bottom:none !important;
}
[/css]

Nah selanjut tinggal menambahkan konten yang anda ingin tulis. Sebelumnya download dulu file tambahannya di link ini. Extract filenya, tempatkan gambar pada folder 'images' dan yang lainnya (file javascript) buatkan folder tersendiri. Beri nama folder 'js', tempatkan 'jquery.scrollTo.js' dan 'jquery-1.3.1.min.js' di folder 'js. Selanjutnya tambahkan kode berikut ini diantara tag <head> & </head>:

[jscript]
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>

$(document).ready(function() {
$('#mask').css({'height':$('#panel-1').height()});
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
$('#panel div').width($('#mask').width());
$('a[rel=panel]').click(function () {
var panelheight = $($(this).attr('href')).height();
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');
$('#mask').animate({'height':panelheight},{queue:false, duration:500});
$('#mask').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
[/jscript]

Pada bagian tag <body> dibawahnya cari dan hapus tulisan "Content for id "header" Goes Here". Untuk header kontennya akan diisikan dengan navigasi menu, ambil contoh menu yang akan dipakai antara lain "Home, gallery, tentang, link, dan kontak". Maka "Content for id "header" Goes Here" ganti dengan kode di bawah ini:

[html collapse="false"]
<ul>
<li><a href="#" class="aktif">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Kontak</a></li>
</ul>
[/html]

"<a href="#" ganti dengan alamat link url anda. Selanjutnya cari kode "<div id="logogambar"></div>" ganti dengan:

[html collapse="false"]
<div id="logogambar">
<p class="text1">&#8220;Tulis kata-kata sakti anda <br />
pada bagian ini&#8221;</p></div>
[/html]

Selanjutnya cari tulisan "Content for id "maincontent" Goes Here" dan ganti dengan konten inti yang ingin anda tulis.
Cari lagi tulisan "Content for id "footer" Goes Here" dan ganti dengan footer anda, contoh: "<p>Copyright @ 2009 nama-websiteblog-anda.com</p>"

Yang terakhir cari "Content for id "sidebar" Goes Here" dan ganti dengan kode di bawah ini:

[html]
<div id="scroller-body">
<div id="mask">
<div id="panel">
<div id="panel-1">
<ul>
<li>Populer</li>
<li>Populer 2</li>
<li>Populer 3</li>
<li>Populer 4</li>
<li>Populer 5</li>
<li>Populer 6</li>
<li>Populer 7</li>
<li>Populer 8</li>
<li class="last">Populer 9</li>
</ul>
</div>
<div id="panel-2">
<ul>
<li>Komentar 1</li>
<li>Komentar 2</li>
<li>Komentar 3</li>
<li>Komentar 4</li>
<li>Komentar 5</li>
<li>Komentar 6</li>
<li class="last">Komentar 7</li>
</ul>
</div>
<div id="panel-3">
<ul>
<li>Recent post 1</li>
<li>Recent Post 2</li>
<li class="last">Recent Post 3</li>
</ul>
</div>
<div id="panel-4">
<ul>
<li><a href="#">Categories 1</a></li>
<li><a href="#">Categories 2</a></li>
<li><a href="#">Categories 3</a></li>
<li><a href="#">Categories 4</a></li>
<li>Categories 5</li>
<li>Categories 6</li>
<li>Categories 7</li>
<li>Categories 8</li>
<li>Categories 9</li>
<li>Categories 10</li>
<li>Categories 11</li>
<li>Categories 12</li>
<li>Categories 13</li>
<li>Categories 14</li>
<li>Categories 15</li>
<li>Categories 16</li>
<li>Categories 17</li>
<li>Categories 18</li>
<li>Categories 19</li>
<li>Categories 20</li>
<li>Categories 21</li>
<li>Categories 22</li>
<li>Categories 23</li>
<li class="last">Categories 24</li>
</ul>
</div>
</div>
</div>
</div>
[/html]

Nah sudah jadi, coba preview pada halaman browser dengan klik tombol 'F12'. Atau lihat contohnya di halaman ini.

Jika masih ada yang belum jelas silahkan hubungi saya di halaman ini, atau cukup dengan mengisikan komentar pada kotak komentar di bawah. Terima kasih sudah meluangkan waktu mampir di blog saya.

Selengkapnya

Dreamweaver Layout 2

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 2)

---

Postingan kali ini adalah penyempurnaan layout website menggunakan Dreamweaver (lanjutan dari bagian 1). Jika pada bagian 1 hanya membuat layout mentahnya saja, kali ini menambahkan beberapa background gambar, menambahkan navigasi menu vertikal dan horizontal dan yang pasti tujuan utamanya adalah membuat tampilan layout website menjadi kelihatan lebih enak dipandang.

Modifikasi kode 'body'

Sebelum mulai download dulu file gambarnya di sini. Sesudah itu extract file rar dan kopikan seluruh gambar di direktori 'images', kemudian modifikasi code 'body' "background-color: #EEE;" menjadi "background: url(../images/img01.jpg) repeat-x left top #EEE;".

Modifikasi kode 'Header'

Untuk tag id 'header' ganti kode "background-color: #0C9;" menjadi "background: url(../images/img01.jpg) repeat-x left top;". Ganti kode "height: 120px;" menjadi "height: 91px;"

Modifikasi kode 'Konten Utama (maincontent)'

Ganti "padding: 0px;" menjadi "padding: 5px 10px;", dan ganti kode "width: 550px;" menjadi "width: 520px;". Dan hapus kode "background-color: #fc0;", atau sesuaikan warba backgroundnya sesuai dengan selera anda. Kemudian ganti kode "height: 400px;" menjadi "height: auto;", yang berarti tinggi dari konten utama anda menyesuaikan dengan panjangnya tulisan yang anda buat.

Modifikasi kode sidebar

Hapus "background-color: #36F;", ganti "padding: 0px;" menjadi "padding: 5px 10px;", tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;".

Modifikasi kode 'footer'

Hapus "background-color: #CFC;" dan ganti dengan "background: url(../images/footer.png) no-repeat;", ganti height: 50px;" menjadi "height: 47px;" sesuaikan dengan tinggi background gambar footer, tambahkan kode "height: auto;", ganti "width: 285px;" menjadi "width: 290px;".

Div Tag tambahan

Tambahkan kode di bawah ini pada bagian edit code css:

[css collapse="false"]
#logogambar {
width: 850px;
height: 209px;
background: url(../images/image-logo.jpg) no-repeat;
}
[/css]

Kemudian dari mode 'css source (style.css)' pindahkan ke mode 'Source Code'. Copy dan pastekan tag berikut ini => "<div id="logogambar"></div>" <= di bawah tag kode "<div id="header">Content for id "header" Goes Here</div>".

Untuk dapat memodifikasi kode css ini maka klik pilihan edit 'Code' dan klik pada "style.css" seperti yang yang dapat anda lihat pada gambar di bawah ini. ('layout-bagian-2.css' pada gambar di bawah yang saya pakai jika pada lembar kerja anda adalah 'style.css')

Dapat anda lihat hasil setengah jadinya di halaman ini. Bagian dua cukup sampai di sini, tunggu kelanjutannya pada bagian 3.

Selengkapnya

Dreamweaver Layout 1

Membuat Layout Website Menggunakan Adobe Dreamweaver (bagian 1)

---

Banyak orang yang pertama kali menggunakan Adobe Dreamweaver sebelum mulai mencoba sudah merasa terintimidasi karena mungkin bingung dengan banyaknya panel dan fitur yang ada di dalamnya. Jujur saja pertama kali saya menggunakan aplikasi ini memang merasa demikian.

Jika anda merasa demikian, jangan khawatir.. nggak usah takut, namanya juga masih belajar seperti saya ini. Dimana-mana dalam melakukan suatu hal baru yang kompleks pasti tidak ada yang dapat dilakukan dalam waktu singkat. Yang penting berani mencoba, terus belajar dan jangan dikerjakan setengah-setengah, nanti hasilnya pasti setengah-setengah juga. OK langsung mulai saja, sebelum ada baiknya anda membuat satu folder untuk menyimpan file-file yang akan anda buat. Beri nama folder tersebut dengan nama terserah anda contoh 'project', kemudian buka adobe dreamweaver. Setelah terbuka lihat menu bagian atas, klik pada menu 'Site' kemudian klik 'New Site', klik tab 'Advanced'. Pada bagian 'Site name' isikan nama project yang akan anda buat, contoh 'project'. Pada kotak isian 'Local root folder' klik pada logo folder disebelah kanannya dan arahkan pada folder tempat menyimpan file yang baru saja anda buat, contoh 'C:\My Document\project\'. 'Default images folder' arahkan pada folder di dalam folder tempat menyimpan file anda contoh 'C:\My Document\project\images\'. Klik OK.

Nah sekarang pada halaman pembuka dreamweaver klik pada menu 'File' di pojok kiri atas dan pilih 'New' atau supaya lebih cepat gunakan shortcut keybord windows dengan menekan 'Ctrl + N'. Setelah terbuka kotak dialog 'New Document', pada kolom 'Page Type:' pilih 'HTML', 'Layout' pilih 'none', kemudian tekan OK. Lembar kerja HTML baru anda sudah keluar, simpan lembar kerja tersebut dengan nama 'index.html'. Secara otomatis dokumen ini akan tersimpan di root folder anda (project), karena site project yang sedang aktif (sedang anda buka) adalah site 'project'. Dapat anda lihat pada panel sebelah kanan bagian tab 'Files' akan terdapat file HTML dengan nama index yang baru saja anda simpan.

Sekarang buat file CSS untuk layout yang akan anda buat, ikuti langkah-langkahnya seperti di bawah ini:

1. Pada tab bagian atas pilih tab 'Common', selanjutnya klik pada 'Insert Div Tag' untuk lebih jelasnya dapat anda lihat gambarnya seperti di bawah ini:
   
2. Setelah anda klik akan keluar dialog 'Insert Div tag', pada bagian 'Insert' pilih 'At insertion point' dan yang lainnya biarkan saja kosong, kemudian klik pada tombol 'New CSS Rule'. Pilih 'Tag (redifines an HTML element)' pada dropdown menu 'Selector Type'. Kemudian di bawahnya pada 'Selector Name:' pilih 'body'. Di bawah 'Selector Name:' bagian 'Rule Definition:' pilih 'New Style Sheet File', kemudian klik OK. Simpan file tersebut di directory root situs project anda, karena contoh di atas direktori rootnya 'C:\My Document\project' maka buatlah folder di dalam folder 'project' dan beri nama folder tersebut dengan nama terserah anda suatu misal 'css'. Simpan file tersebut di dalam folder css dengan nama terserah anda, misal 'style.css'. Kemudian akan muncul kotak dialog css rule, Pada kolom 'Category' klik pada 'Background' => pada jendela bagian kanan 'Background-color' silahkan pilih sendiri warna background yang menurut anda cocok, misal ketikkan di situ kode warna '#EEE'. Kemudian pada kotak kategori lagi klik pada 'Box', setting 'margin' dan 'padding' biarkan checkboxnya tercentang 'Same for all' dan isikan masing-masing dengan value '0'. Kemudian masih pada kolom 'category' klik pada 'block', pada jendela sebelah kanan pilih 'center' untuk 'Text-align' nya, klik OK. Pada kotak dialog 'Insert Div Tag' klik OK lagi.
3. Kemudian klik lagi pada ikon 'Insert Div Tag', setelah keluar kotak dialog 'Insert Div Tag' pada bagian 'Insert' pilih 'After start of tag' sebelah kanannya pastikan tag 'body' terpilih, kemudian klik tombol 'New CSS Rule'. Kotak dialog 'New CSS Rule' akan keluar, 'Selector Type' pilih 'ID (applies to only one HTML element), 'Selector Name' pada kotak di bawahnya isikan dengan '#wrapper'. Pastikan 'Rule Definition:' yang terpilih adalah CSS yang baru saja anda buat (style.css). Klik Ok. Selanjutnya akan keluar kotak dialog 'CSS Rule Definition' untuk '#wrapper'. 'Background' isikan terserah anda, contoh di sini saya isikan dengan '#FFF' atau warna background putih. 'Block' pada bagian 'Text-align' pilih 'Left', 'Box' tentukan terserah anda contoh yang saya pakai di sini '850px'. Pada bagian 'Margin' hilangkan tanda check untuk 'Same for all', isikan 'top' dan 'bottom' dengan '0', 'Right' dan 'Left' isikan dengan 'auto'. Klik OK, Klik OK lagi.
4. Nah akan muncul pada jendela design konten yang berisikan 'Content for id "wrapper" Goes Here', hapus tulisan itu. Selanjutnya buat tag headernya, klik pada 'Insert Div Tag' lagi => pada bagian 'Insert' pilih 'After start of tag', sebelah kanannya pastikan terpilih '<div id="wrapper">. Kemudian klik 'New CSS Rule'. 'Selector Type' pilih 'Compound (based on your selection)', 'Selector Name' isikan dengan '#header', selalu pastikan 'Rule Definitionnya' yang terpilih adalah css yang baru saja anda buat (style.css). Klik OK.
5. Selanjutnya kotak dialog 'CSS Rule Definition' untuk id header akan keluar, klik pada 'Box'. Isikan 'Padding' dan 'Margin' dengan '0', 'Height' isikan dengan '120'. Kemudian klik pada background dan isikan kode warnanya dengan '#0C9. Jangan khawatir pemberian warna ini hanya akan digunakan sebagai tanda pembeda dengan div tag lainnya nanti. Klik 'OK', klik 'OK' lagi.
6. Sekarang buat div tag untuk konten utama, klik pada'Insert Div Tag' => pada bagian 'Insert' pilih 'After tag', kolom sebelah kanannya pastikan terpilih '<div id="header"> => klik tombol 'New CSS Rule'. Pada jendela dialog 'New CSS Rule' => 'Selector Type:' = 'Compound (based on your selection)', 'Selector Name:' isikan dengan '#maincontent' => klik OK. Selanjutnya pada jendela 'CSS Rule Definition' untuk 'maincontent' pada bagian 'Box' category isikan 'Padding' dan 'Margin' '0', 'Height' isikan dengan '400'. Pada bagian 'Background' categori isikan warna backgroundnya dengan '#FC0'. Klik OK, klik OK lagi.
7. Giliran membuat sidebar sekarang, langkahnya sama 'Insert Div Tag' => 'Insert' pilih 'After tag' sebelah kanannya pastikan '<div id="maincontent"> yang terpilih, kemudian klik 'New CSS Rule'. Pada jendela dialog 'New CSS Rule' pilih 'Compound (based on your selection)' untuk 'Selector Type', ketikkan #sidebar pada kotak 'Selector Name'. Klik Ok. Pada jendela dokumen 'CSS Rule Definition' bagian kategori 'Box' isikan 'Margin' dan 'Paddingnya' '0', 'background color' tentukan dengan kode warna '#36F'. Klik OK, Klik OK lagi.
8. Nah sekarang div tag yang terakhir, sama seperti di atas klik pada 'Insert Div Tag', selanjutnya 'Insert' pilih 'After tag' kolom sebelah kanannya pilih '<div id="sidebar">', klik tombol 'New CSS Rule'. Pada jendela 'New CSS Rule' pilih 'Compound (based on your selection)' untuk 'Selector Type', isikan '#footer' pada kotak 'Selector Name', Klik OK. Pada jendela dialog 'CSS Rule Definition' bagian kategori 'Box' isikan 'Margin' dan 'Padding' nya '0', 'Height' = '50px'. Background warnanya '#CFC'. Klik Ok, Klik OK lagi.

Nah sampai di sini kira-kira untuk membuat layout mentah sudah setengah jadi, tinggal mengatur penempatan masing-masing div tag. Jika anda preview di browser (tekan tombol F12) dapat anda lihat masing-masing div tag berjajar dari atas ke bawah. Sidebar belum diposisikan sebagaimana mestinya, untuk mengaturnya perlu modifikasi sedikit kode css yang baru saja anda buat, ikuti langkah-langkahnya seperti di bawah ini:

1. Umumnya sidebar terletak disebelah kanan atau kiri dari konten utama (main content), tapi melihat layout yang baru saja dibuat, komponen 'maincontent' dan 'sidebar' mempunyai lebar yang sama. Maka dari itu ukuran lebar 'maincontent' dan 'sidebar' perlu dikecilkan. Untuk 'maincontent' lebarnya mengikut lebar div tag 'wrapper' sebesar 850px, kecilkan ukuran lebarnya kira-kira sebesar '550px'. Caranya pada tab 'Css Styles' yang terletak di panel sebelah kanan klik pada '#maincontent', tambahkan properties 'width' dengan klik pada 'Add Property' pada kotak 'Properties for "maincontent"'. Anda dapat mengetikkan secara manual atau scroll down ke bawah dan cari nama properti 'width', isikan valuenya dengan nilai '550px'. Masih pada 'Properties for "maincontent"', klik lagi pada 'Add Property' dan ketikkan 'float' => isikan valuenya dengan 'left'. nah sekarang sidebar dan footer sudah bergeser ke sebelah kanan maincontent.
2. Nah sekarang tinggal menyesuaikan sidebar, pada panel sebelah kanan klik pada '#sidebar'. Tambahkan properti 'width' dan isikan valuenya dengan nilai 28px, kemudian masih dalam properties untuk sidebar tambahkan 'float' dan isikan valuenya dengan 'right'.
3. Selanjut yang terakhir untuk footer, klik pada #footer. Pada properties untuk '#footer' klik pada 'Add Property' dan ketikkan 'clear' => isikan valuenya dengan 'both'. Coba sekarang preview di browser.

Nah sekarang layout mentah sudah jadi, header diatas, maincontent ditengah, sidebar di pinggir dan footer di bawah seperti layaknya konsep design suatu web pada umumnya. Capek ah.. kapan-kapan saya posting bagian keduanya.

Jika mau tahu hasilnya, lihat di halaman ini

Selengkapnya

Kelebihan Membuat Posting Blog Menggunakan Adobe DreamWeaver

Menggunakan Adobe Dreamweaver untuk membuat atau edit posting blog mempunyai beberapa kelebihan dibandingkan dengan cara posting biasa yang dilakukan melalui panel posting blogspot, drupal, wordpress, joomla, dlsb. Jika anda membuat posting langsung dari jendela admin blog, ada dua kemungkinan yang dapat anda lakukan.

Pertama melalui jendela 'Visual' dimana pada jendela anda tidak perlu bermain dengan code HTML. Dengan kata lain, susunan tampilan text, gambar atau video otomatis akan tertulis (dibuat) oleh script blog pada jendela HTML.

Kedua jika anda paham HTML gunakan jendela 'HTML', alternatif posting yang kedua lebih baik untuk optimalisasi SEO di mata search engine.

Saya pribadi tidak memilih dua alternatif di atas, karena masih ada alternatif ketiga yang saya rasa lebih baik dari dua alternatif di atas. Apa alternatif ketiganya, dapat anda lihat sesuai dengan title judul di atas. Berikut beberapa kelebihan jika membuat posting artikel blog menggunakan Adobe Dreamweaver:

1. Lebih leluasa dalam menulis, karena tampilan visual dan ruang ketik lebih lebar dibandingkan dengan standar penulisan posting default blog yang hanya memberikan sedikit ruang baik mengerjakan pada jendela visual (tulis) maupun jendela HTML.
2. Dapat melihat kode dan design (tampilan visual) secara bersamaan dalam dua jendela yang berbeda.
3. Lebih optimal buat SEO, melalui jendela code Dreamweaver memudahkan anda memanipulasi tag (heading, em, bold, dlsb) yang menjadi perhatian utama search engine.
4. Auto complete tag, code symbol, property & value inline style css.
5. Memudahkan anda menyajikan kode HTML atau code-code lainnya pada postingan blog. Contoh; jika ingin menuliskan kode HTML diantara posting tidak bisa langsung ditulis apa adanya baik dari jendela visual maupun HTML. Misalnya anda akan menyisipkan code di bawah ini:
   
   
   
   

   
   

   <p style="font-size: 1.2em; font-weight: normal; text-decoration: none;">Kode yang mau saya sisipkan</p>

   
   Jika langsung anda masukkan baik pada jendela visual maupun HTML, maka hasilnya akan seperti ini:
   
   
   Kode yang mau saya sisipkan
   
   Dapat anda lihat tag <p style="font-size: 1.2em; font-weig.... dst. tidak muncul, karena ketika anda tulis kode tersebut, sebagian blog mengganggap code aktual yang mau anda pakai. Cara tercepat untuk membuatnya, copy code diatas dan pastekan ke jendela design Adobe Dreamweaver. Kemudian lihat kode pada jendela 'Code' Adobe Dreamweaver, maka hasilnya akan seperti ini:
   
   
   
   

   
   

   <p style="font-size: 1em; font-weight: normal; text-decoration: none;">Kode yang mau saya sisipkan</p>

   
   Pastekan kode diatas pada jendela 'html' blog, baru kelihatan hasilnya.
   

Dan masih banyak lagi manfaat lainnya, diantaranya; memodifikasi template XML blogger, memudahkan anda mendesign & menyisipkan tabel ke dalam posting blog, mengatur properti image, dlsb.

Have fun...
:D

Selengkapnya