Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector
aboutus website design services

Willkommen auf mein web blog

Best regard. I will do my best to make it interesting and useful. Greeting to toko online Prestashop!
Tampilkan postingan dengan label HTML-series. Tampilkan semua postingan
Tampilkan postingan dengan label HTML-series. Tampilkan semua postingan

30 September 2014

website design work : Memberi komentar code

Komentar code dalam HTML website

Jika Anda harus membuat atau terbiasa membuka code HTML, PHP, style CSS atau code lainnya pasti Anda memerlukan code komentar. Anda pernah menemukan istilah "comment out" di dunia coding? Istilah itu berarti memberi kode komentar sebagai bagian dari code file template website.

Apa itu komentar kode di halaman HTML atau PHP website?

comment-out-html-website
Comments or comment codes are part of code that helps the designer and the user figure out what is what, which section is which, and what is going on within the tangle of codes.

Komentar atau kode komentar adalah bagian dari kode yang membantu desainer dan user untuk mencari tahu "what is what" - apa sebagai apa, "which section is which" yang bagian mana, dan apa yang terjadi di dalam jalinan kode.

Comments-out pada halaman HTML or PHP (outside of the PHP code)

Contohnya seperti ini:

<!-- comment here about what is going on -->

Komentar kode pada file CSS files :

/* comment here about a style */

Komentar kode di dalam code PHP :

<?php the_excerpt(); // Show excerpt and not full post content ?>

Atau seperti ini :

<?php /* This is my special hack.
         It's so special it requires a comment that spans multiple lines! */

my_special_hack();
?>

Tracking Template Files

Style CSS bisa menyeberang ke file, sehingga melacak bagian mana acuan dalam kode di file template bisa sulit jika tanpa pemberian komentar kode yang baik. Memang bukan keharusan, tetapi akan sangat membantu untuk menambahkan komentar ke opening div atau opening class seperti ini :
<div id="sidebar"><!-- sidebar begins -->

Kebanyakan orang akrab dengan HTML dan CSS mengakui bahwa id adalah awal dari section dan komentar mungkin tidak diperlukan, tetapi tentu akan membantu jika pada awal setiap loop dalam setiap Tema WordPress ada komentar seperti ini :

<!-- WordPress Loop begins here -->

Pada akhir setiap div, khususnya yang file lintas Template sebaiknya memiliki komentar akhir:

</div> <!-- end content -->

Comments in Style Sheets

Kadangkala dalam file template meliputi CSS inline style pada header.php, file index.php atau file single.php - diluar file styles.css untuk tema template.

Jika orang akan memodifikasi tema template, ada anggapan bahwa semua kode style CSS ada dalam file style.css. Maka sebaiknya jika Anda menambahkan style CSS ke file template yang sebenarnya, silahkan membuat komentar tentang hal itu dalam style.css sehingga user tahu di mana menemukannya. Adakah yang menjadikan lebih frustrasi daripada mencoba untuk mengubah style css tanpa hasil, hanya untuk menemukan website desainer menempatkan style utama dalam file header file sebenarnya.

Hanya perlu menambahkan short comment seperti :

/* Styles for the header image are found within the header.php file. */

Sebenarnya sama pentingnya menciptakan desain website yang paling indah dan inovatif, tetapi juga penting untuk membantu user menggunakan desain Anda.

Commenting Out Code

Note: Jika Anda mengirim tema ke direktori (di control Panel), kode komentar tidak boleh digunakan

Ada kalanya Anda menguji tag template, tag Plugin, atau bit yang berbeda dari kode dan Anda perlu untuk mencegah mereka dari menampilkan atau intiating (aktif). Untuk melakukan ini, lakukan "hide" (deactivate) dengan kode komentar. Untuk kembali aktivasi, hanya menghapus kode komentar.

Menyembunyikan atau deactivate  HTML:

<!-- <div class="redblock"><p>This is some HTML in the redblock class.</p></div> -->

Menyembunyikan atau deactivate CSS styles:

/* .redblock {font-size: 80%; font-style: italic; color: red; } */

Menyembunyikan atau deactivate PHP code dalam file template:

<?php // the_content(Continue Reading...); ?>

Atau

<?php /* the_content(Continue Reading...); */ ?>


That's all we know - Happy blog blogger - semoga bermanfaat


read more website design

17 September 2014

Content Management System : CMS website JOOMLA!

Apa itu yang dimaksud dengan CMS atau Content Management System? Anda akan menemukan jawabannya disini.

CMS adalah software yang memungkinkan orang atau banyak pihak, walau tidak punya basic pengetahuan HTML, CSS atau script, secara kolaboratif menambahkan dan/atau mengubah, update isi website (blog), termasuk didalamnya webstore (toko online).

CMS terdiri dua elemen :
  1. Aplikasi manajemen isi (Content Management Application, [CMA])
    Elemen CMA memungkinkan admin content - yang mungkin tidak punya pengetahuan dasar HTML (Protokol Transfer Hiperteks) - untuk mengelola membuat, mengubah, dan menghapus isi website tanpa perlu keahlian webmaster.

  2. Aplikasi pengiriman isi (content delivery application [CDA])
    Elemen CDA memakai dan menghimpun informasi yang sebelumnya ditambah, dikurangi atau diubah oleh admin content untuk memperbaharui website
Kemampuan (fitur) CMS berbeda-beda. Meski demikian, kebanyakan software CMS punya fitur publikasi berbasis Web, manajemen format, kontrol revisi, pembuatan indeks, pencarian, dan pengarsipan.
CMS website web toko online

Sejarah singkat website template Joomla!

Joomla berasal dari bahasa Swahili (salah satu bahasa di Afrika Selatan) "jumla" yang mengandung makna "kebersamaan" Joomla! adalah salah satu Sistem manajemen konten (CMS) gratis (free open source), ditulis menggunakan PHP dan basis-data MySQL untuk keperluan di internet maupun di intranet (localhost). Versi pertamanya Joomla! versi 1.0.0 release 17 September 2005.

Fitur-fitur Joomla! diantaranya sistem caching untuk peningkatan performance website, RSS, blog, polling et cetera. Joomla! menggunakan lisensi GPL.

Sama seperti template website Prestashop atau template lain, Joomla! terdiri 3 elemen dasar:
  1. Web server
    Web-server terhubung ke Internet atau Intranet (localhost atau server lokal dalam computer) yang berfungsi sebagai penyedia layanan situs. Joomla menggunakan Apache sebagai web-server.

  2. Script PHP
    Script PHP terdiri dari kode program dalam bahasa PHP

  3. Database MySQL
    Basis-data (database) merupakan tempat penyimpanan content website. Adapun basis-data yang digunakan adalah database MySQL
Pertama, user meminta akses terhadap halaman Joomla dengan mengeksekusi URL di web-browser yang kemudian terhubung ke web-server. Permintaan ini secara teknis disebut query string (selain terdapat URL juga mengandung parameter content (section, category, ID article etc)).

Berdasarkan parameter tersebut, sistem script Joomla melakukan kontak dengan database dan mengambil konten yang dimaksud berdasarkan parameternya. Terakhir, konten dan template Joomla digabung bersama dan hasilnya adalah halaman html, gambar, css dan javascript.

Paket Joomla! terdiri dari beberapa bagian terpisah dan termodul yang sangat fleksibel (mudah ddikembangkan dan diintegrasikan). Sebagai contoh "plugins" WikiBot yang memperbolehkan Super Administrator (penulis) di Joomla menggunakan "Wikitags" pada bagian artikel yang secara otomatis membuat pranala dinamis ke artikel Wikipedia pada saat ditampilkan.

Ada lebih dari 1,700 "plugins" yang secara resmi didelegasikan oleh OpenSource Matters, tersedia di http://extensions.joomla.org/ Dan kini secara resmi dipindahkan ke http://joomlacode.org dengan dukungan server lebih lengkap.

Joomla versi awal yaitu versi 1.0.0 merupakan versi alias dari Mambo 4.5.2.3 yang telah dikembangkan oleh "Pengembang Inti Mambo hingga Agustus 2005" sebelum hengkang dari Mambo.

Pemimpin Tim saat itu Andrew Eddie (dikenal dengan sebutan "MasterChief") menulis surat terbuka masalah hengkangnya di komunitas Mambo dan diumumkan di forum mamboserver.com. Tim pengembang ini kemudian membuat situs OpenSourceMatters untuk mendistrubusikan informasi ke user, developer, desainer web dan komunitas lain pada umumnya.

Perkembangan Joomla berawal dari Joomla 1.0.0 hingga ke tahap luarbiasa yaitu Joomla 1.0.15. Sekitar tahun 2007 mulai ada pengembangan Joomla 1.5.x yang memiliki beberapa persamaan dan perbedaan cukup signifikan disbanding versi sebelumnya. Pengembangan berlanjut ke Joomla 1.5.20. Kemudian ke Joomla 1.6 versi beta dan dapat diunduh diwww.joomla.org. Semakin baru versi Joomla memiliki penyempurnaan dari versi-versi sebelumnya.

Masing-masing punya daya tarik, Joomla 1.5.9 menawarkan nuansa baru dan lebih modern termasuk dalam system. Joomla 1.0.15 lebih stabil dan terdukung oleh banyak aplikasi dan developer. Kemudian dikembangkan Joomla versi 2.5.x dan versi terbaru sejak April 2014 adalah Joomla versi 3.3.

Seiring dengan semakin meratanya penggunaan smartphone, maka mulai Joomla! Versi 3.x ada tambahan fitur baru yang sangat penting, yaitu fitur Responsive. Dengan fitur ini halaman front-ends situs yang menggunakan template platform Joomla secara otomatis dapat menyesuaikan (customized) dengan lebar layer smartphone, iPad, notebook atau perangkat lain.

Elemen dasar website dengan template Joomla!

Ada 3 hal cakupan dasar yang harus ada untuk membangun website berbasis Joomla!

PHP (Personal HomePage)

PHP atau lebih dikenal dengan sebutan Hypertext Preprocessor merupakan bahasa pemrograman atau scripting yang bersifat server side. Hasil coding (pembuatan sintaks) atau program kode PHP ini akan dieksekusi oleh web-server, dan kemudian akan dikirim dalam bentuk HTML ke browser client.

Kode PHP tersebut tidak dapat dilihat oleh pengunjung, melainkan kode HTML yang merupakan hasil eksekusi kode PHP tersebut yang dapat dilihat oleh pengunjung. Untuk mengubah kode PHP tersebut menjadi kode HTML diperlukan aplikasi yaitu Engine PHP yang akan digunakan bersama-sama dengan aplikasi web-server.

Database

Tampilan kode HTML Joomla! Yang dapat dilihat oleh pengunjung diciptakan dengan menggunakan bahasa pemrograman atau scripting PHP dan penggunaan database MySQL. Database ini digunakan untuk menampung data-data Joomla! milik Anda, seperti user, password, modul, extention, image, text dan data-data lain. Jika anda ingin download aplikasi MySQL, buka http://mysql.com

Web server

PHP dan Database merupakan 2 unsur dasar yang harus ada dalam membangun situs dengan platform Joomla!, Namun ada bagian terpenting yang juga harus ada dalam website, YAITU web-server.

Web-server ini berfungsi sebagai pusat control dari pengolahan data website. Jadi input yang dilakukan oleh user internet akan diolah, kemudian dikembalikan lagi kepada pemakainya. Salah satu web-server yang paling banyak digunakan adalah Apache, karena telah banyak mendukung format file server tanpa perlu tambahan komponen aplikasi lagi.

Website dengan template platform Joomla! akan berjalan baik bila menggunakan software web-server Apache. Jika Anda ingin download aplikasi web-server Apache buka http://apache.org.


Download Joomla: http://www.joomla.org/download.html



That's all we know - Happy blog blogger


read more website design

27 April 2014

Website Store Prestashop : Struktur Dasar Konfigurasi 2


Bagaimana website toko online bekerja?

Sama seperti pada semua script PHP, Prestashop melakukan loading website menggunakan SATU-SATUNYA file index.php. Jika situs toko online pakai theme Prestashop. Itu artinya semua file .php, .tpl, .html, semua file lain beserta semua folder ditempatkan dalam CMS toko online Prestashop. Kali ini kita tidak membicarakan file Index.php, file .html atau .tpl secara detail.

Disini kita hanya peduli dengan pemahaman bagaimana PrestaShop bekerja.

Pembicaraan kali ini untuk menguatkan pemahaman esensi dari content posting Bagian SATU.

REKAPITULASI-KONFIGURASI-prestashop
CARA KERJA

Kita buka sampel toko online Prestashop. Saat ketik URL http://www.clodaclodi.com/ di address bar, web server akan loading halaman index (index.php) dan mengubahnya menjadi informasi isi web page. File index.php ini termasuk di dalamnya file config.inc.php yang ada di direktori config.

Setting konfigurasi Prestashop diperankan oleh config.inc.php untuk seluruh konfigurasi dan setting. File config.inc.php memeriksa apakah semuanya sudah ter-install dan mendefinisikan template dasar (base theme), default direktori beserta alurnya (paths), status order dan lainnya.

Kita akan sering ubah kode pada baris 29 isi file config.inc.php atau dengan CTRL-F temukan ini :

ON-OFF-display-error-file-Prestashop
Tindakan diatas untuk mengaktifkan “Error Reporting” - yaitu saat kita menginginkan pesan error ditampilkan di webpage agar mengetahui diagnosa error. (setelah diagnosa didokumentasikan, segera kembalikan status off).

Ketika file config (di folder config) dimuat (loaded), maka file index.php diperintahkan menyertakan file header.php yang diambil langsung dari root install. Yang dimaksud dengan root install berarti langsung diambil dari Prestashop, bukan dari dalam subdirektori yang ada.

INDEX.PHP

INDEX-PHP-prestashop

HEADER.PHP

HEADER-PHP-Prestashop
Snippet isi file HEADER.PHP dalam bentuk image untuk DOWNLOAD script code ada DISINI
HOOK

Baris kode :

$smarty->assign('HOOK_HOME', Module::hookExec('home'));

Baris kode ini akan menentukan Hook (Hook memungkinkan administrator situs untuk menentukan di lokasi mana mereka ingin modul tertentu ditampilkan di webpage).

DISPLAY

Baris kode :

$smarty->display(_PS_THEME_DIR_.'index.tpl');

Baris code ini mengatakan tentang tampilan  index.tpl dari direktori default theme. Prestashop (Anda menentukan theme untuk digunakan dengan pergi ke Back Office >>Preferances >> appearance).

FOOTER.PHP

Baris code :

include(dirname(__FILE__).'/footer.php');

Baris code ini mengatakan tentang php yang mencakupi file footer.php dari direktori kita (dirname).

FOOTER-PHP-website store Prestashop
FILE TPL

Setiap file diatas terkandung request PHP untuk memasukkan file lain.  Meski ada pengaturan konfigurasi Prestashop, tapi Hooks dan file-file php  belum punya HTML. Di sinilah diperlukan peranan file tpl.

File tpl adalah file template yang mencakup HTML dan kode Smarty

File tpl sebagian besar ada di direktori theme, namun ada juga di modul karena setiap penulisan modul diperlukan file template (tpl) tersendiri.

global-css-dalam -file-HEADER-PHP-Prestashop

Penjelasan kode diatas sebagai berikut :

File global.css  sedang dipanggil dari direktori theme Prestashop untuk itu diperlukan file-file CSS lain dan JavaScript yang sudah terkandung di dalamnya.

$smarty->display(_PS_THEME_DIR_.'maintenance.tpl');  

Artinya :
akan menampilkan page pemeliharaan yang disebut maintenance.tpl jika toko online ditutup */

Tampilan HTML (yaitu bagian layout halaman web) berasal dari file header.tpl


KESIMPULAN
  • File index.php memanggil (meminta) file index.tpl, file footer.php dan file footer.tpl
  • File tpl menentukan layout situs html dan ada dalam folder theme.
  • File index.php meliputi header.php, index.tpl dan footer.tpl dari direktori theme
  • File header.php memanggil file header.tpl 
  • File footer.php juga memanggil file footer.tpl


  • KESIMPULAN AKHIR :
    HTML utama berasal dari 3 file template : index.tpl, header.tpl dan footer.tpl

Review struktur dasar website store Prestashop

Agar semua masuk akal mari kita buka header.tpl, index.tpl dan footer.tpl secara bersamaan.

Header.tpl

REVIEW-Header-tpl
Snippet isi file HEADER.TPL dalam bentuk image untuk DOWNLOAD script code ada DISINI

Index.tpl


{$HOOK_HOME}

FOOTER-tpl-file-prestashop

KESIMPULAN :

Sumber dari HOMEPAGE (semua modul dalam kondisi un-instal dan ada sedikit JavaScript yang dihapus dari footer sehingga kita bisa fokus ke HTML saja) berasal dari file TPL UTAMA.


struktur-dasar-HTML-prestashop
Script code dalam bentuk image untuk DOWNLOAD script code ada DISINI

REKAPITULASI
  1. index.php loading request halaman PHP lain yang didefinisikan dalam file PHP. Lalu halaman PHP ini memanggil file-fle tpl dan bersama mengubahnya menjadi web page

  2. index.tpl hanya berisi satu baris :
    {$ HOOK_HOME}.
    Hal ini disebabkan file index hanya akan menampilkan modul-modul Prestashop yang ditugaskan untuk homepage. Kategori dan halaman produk akan ditampilkan dengan bantuan modul lain.

  3. Body ID berbeda-beda pada masing-masing halaman - misalnya : index.tpl, category.tpl, product.tpl. Sehingga kita punya fleksibilitas untuk style halaman berbeda-beda dengan hanya menggunakan aturan di global.css untuk menargetkan body ID. Darimana hal seperti ini berasal?

    Periksa header.tpl, kita akan lihat satu baris ini :

    <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
Kode itulah yang menjadikan nama page. Sehingga category.tpl akan punya <body id="category">




Sumber :
www(dot)daveegerton(dot)com/prestashop-guides/Prestashop-Designers-Guide/Structure/File-Structure(dot)

KEMBALI KE  >>>>>  BAGIAN 1

That's all we know - Happy blog blogger

read more website design

24 April 2014

Website Toko Online Prestashop : Struktur Konfigurasi 1



Sebagai Admin toko online, kita tahu Prestashop punya sedemikian banyak fitur untuk dioptimalkan pemakaiannya. Sebagai web designer, kita juga bingung ada ratusan modul khusus untuk Prestashop (berbayar maupun free) yang ditawarkan di internet oleh developer independent. Tapi kali ini kita membicarakannya dari sudut pandang website designer.

File index.php template website toko online Prestashop

Prestashop - seperti juga pada semua script PHP - akan memuat  website dengan menggunakan file index.php. Toko online http://www.clodaclodi.com/ adalah pengguna theme PRESTASHOP. Artinya, semua file seperti : .php, .tpl, .css dan semua folder dalam CMS Prestashop  akan ditempatkan pada database web server (hosting) yang digunakan oleh clodaclodi[DOT]com.

Maka saat visitor mengetik URL ini - http://www.clodaclodi.com/ pada address bar browser (Mozilla atau Google Chrome etc.), maka web server tersebut segera akan memuat halaman indeks tersebut. Halaman indeks ini merupakan informasi yang menentukan apa yang terjadi.

Untuk memahami apa yang terjadi saat memuat situs tersebut, kita perlu tahu tentang file indeks.

INDEX.PHP

Isi halaman index.php (versi 1.1.0.5) pada Prestashop garis besarnya meliputi kode berikut :

php-file-Prestashop

Secara garis besar isi file INDEX.PHP terdiri 5 baris kode (seperti terlihat diatas) sebagai struktur dasar yang membangun toko online Prestashop dan menjadikannya sebagai konfigurasi elemen-elemen dasar yang terintegrasi. Postingan kali ini akan menjelaskan kelima baris kode tersebut.

Struktur Website Prestashop : Penjelasan isi file INDEX.PHP

PENJELASAN PERTAMA : file config.inc.php

index.php termasuk di dalamnya file config.inc.php yang terletak di direktori config.
File config.inc.php ini melakukan konfigurasi dan pengaturan setting lainnya.

File config.inc.php akan memeriksa apakah semuanya sudah terpasang (install) dan mendefinisikan template dasar (base theme), default direktori dan alurnya (paths), status order dan setting lain. Saya tidak akan menyibukkan diri dengan penjelasan rinci.

Sebagai Website Desainer, kita perlu melacak jejak error dari waktu ke waktu. Jika Anda buka file config.inc.php di lokasi ini ---> .../config/config.inc.php (silahkan cari di folder config pada cPanel). Maka pada baris paling atas file, Anda akan melihat ini :


@ini_set('display_errors', 'off');


Jika Anda ubah menjadi :

@ini_set('display_errors', 'on');


Dengan di-setting "on" berarti Anda mengaktifkan “Error Reporting” – tetapi harus diingat, Anda HARUS segera mengembalikannya ke status off setelah berhasil melacak error yang terjadi.

Saya tegaskan lagi!!!.

Kembalikan ke status default “off” ketika live installation (atau setelah berhenti melacak error). Karena jika lupa mungubah ke "offf" akan muncul secara terus-menerus pesan seperti gambar ini:


status off display-error-Prestahop

PENJELASAN KEDUA : File header.php

config ini dimuat (loaded), maka file index.php diperintahkan untuk menyertakan file header.php dari instalasi root (root install). Yang dimaksud dengan root install BERARTI langsung dari situs Prestashop kita, bukan dari sesuatu yang terdapat dalam setiap sub-direktori.

File header.php

ISI-header.php-Prestashop
Snippet isi file HEADER.PHP dalam bentuk image untuk DOWNLOAD script code ada DISINI



Disini saya juga tidak akan terlalu jauh membicarakan code pada file header.php diatas.

PENJELASAN KETIGA : HOOK_HOME

Kita temukan pada baris ke-3 file INDEX.PHP (seperti terlihat pada awal postingan) baris kode ini :

$smarty->assign('HOOK_HOME', Module::hookExec('home'));

Baris kode tersebut untuk menentukan Hook (pada dasarnya Hook memungkinkan administrator untuk menentukan dimana mereka ingin modul tertentu ditampilkan pada toko Prestashop)

PENJELASAN KEEMPAT : Display File index.tpl

Selanjutnya kita temukan ini :

$smarty->display(_PS_THEME_DIR_.'index.tpl');

Baris code diatas mengatakan bahwa display file index.tpl dalam posisi dari direktori default theme.
(Anda menentukan theme tersebut untuk digunakan di Back-Office >> Preferances >> Appearance
)

PENJELASAN KELIMA : File footer.php

Pada baris kelima file INDEX.PHP kita temukan footer.php :

include(dirname(__FILE__).'/footer.php');

Baris kode diatas mengatakan php ini mencakup file footer.php dari direktori kita (dirname))

File footer.php tersebut secara garis besar memiliki snippet code berikut :

File footer.php

ISI-header.php-Prestashop



Tiap file-nya  mengandung permintaan PHP untuk memasukkan file lain. Kita hanya peduli dengan apa yang sedang terjadi. Deskripsi ini untuk memahami bagaimana PrestaShop bekerja.

SELESAI - That's all we know

Meskipun kita sudah melakukan setting konfigurasi Prestashop, namun Hooks dan berbagai file php  belum punya HTML apapun. Di sinilah template (file .tpl) masuk dan mengambil peran utama.

FILE .TPL : LAYOUT WEBSITE TOKO ONLINE PRESTASHOP

File-file tpl menentukan layout situs html (webpage Prestashop) dan ada dalam folder theme. File tpl tersebut sebagian besar berada di direktori theme, tetapi juga ada di modul karena setiap seseorang menulis modul perlu file template sendiri (tpl).

File tpl adalah file template mencakup HTML dan kode Smarty.

file-tpl-website store prestashop

Penjelasan file .css dan .tpl

Jadi file global.css sedang dipanggil dari direktori theme Prestashop. untuk pemanggilan ini diperlukan file CSS lain dan juga file JavaScript yang sudah terkandung didalamnya.

Tampilan HTML (merupakan bagian dari layout webpage) berasal dari file header.tpl, dan index.php "memanggil" index.tpl, dan demikian juga file footer.php "memanggil" (meminta) footer.tpl.

Bersambung ke >>>>    BAGIAN 2

That's all we know
read more website design

21 April 2014

Microformats : Tampilan canggih website di SERP

Microformats dan tampilan SERP website

Apa itu Microformats pada plain HTML website?

Microformats atau dikenal juga sebagai Microdata merupakan seperangkat property (sifat) yang dilekatkan pada tag html standar sehingga memungkinkan search engine mengenali bahwa data spesifik tersebut ialah jenis data tertentu.
  • Microformats   A dalah konvensi sederhana (dikenal juga sebagai entitas) yang digunakan pada website-page untuk menggambarkan jenis informasi khusus-misalnya, review, event, produk, bisnis, hotel, restoran, resep atau seseorang (person).
  • Masing-masing entitas punya property (sifat) sendiri.
    Misalnya, Microdata tentang person (orang) memiliki nama property alamat, nama orang, job title, nama perusahaan, dan alamat email.

Bagaimana memakai microdata untuk informasi website di SERP

Topik artikel ini adalah bagaimana menggunakan microdata untuk menampilkan informasi yang diperluas (extended information) di halaman hasil pencarian search engine (Search-Engine-Result-Pages - SERP), yang disebut Rich Snippets (Cuplikan Kaya).

Pernahkah Anda lihat halaman hasil pencarian mesin pencari seperti ini?

Banyak blogger dan webmaster (pengelola website) ingin menampilkan data tambahan di halaman hasil pencarian (SERP), seperti 3 contoh gambar berikut :


micro1-contoh rich snippet microdata
Atau mungkin seperti gambar di bawah ini?

contoh rich snippet microformats

Atau ini?
tiga macam rich snippet microformats

Untuk menampilkan hasil pencarian seperti diatas, Anda perlu beberapa penyesuaian tambahan di website. Tidak sulit melakukannya, hanya saja diperlukan pengetahuan dasar HTML.

This article is targeting more advanced users, who have some knowledge in HTML and preferably in PHP. Otherwise, it will be very hard for you to figure out how to do it.

Marking up data menggunakan microformats - website files

Umumnya Microformats pakai atribut class dalam tag HTML (tag yang dipakai adalah <span> atau <div>) untuk menetapkan nama singkat dan deskriptif pada entitas dan property entitas tersebut. Berikut ini contoh blok HTML yang menampilkan informasi kontak dasar untuk Bob Smith.

Source :
http://support.google.com/webmasters/bin/answer.py?hl=id&hlrm=en&answer=146897


<div>
<img src="www.example.com/bobsmith.jpg" />
<strong>Bob Smith</strong>
Senior editor at ACME Reviews
200 Main St
Desertville, AZ 12345
</div>

Berikut ini HTML marked up dari code HTML diatas.

HTML marked up diatas dibuat dengan memanfaatkan hCard (Person) microformat.

><div class="vcard">
<img class="photo" src="www.example.com/bobsmith.jpg" />
<strong class="fn">Bob Smith</strong>
<span class="title">Senior editor</span> at <span class="org">ACME Reviews</span>
<span class="adr">
<span class="street-address">200 Main St</span>
<span class="locality">Desertville</span>, <span class="region">AZ</span>
<span class="postal-code">12345</span>
</span>
</div>

Cara kerja Microformats - arsip website design

  • Pada baris pertama, class="vcard" mengindikasikan bahwa HTML tercakup dalam tag <div> yang menerangkan tentang seseorang (person). (Microformat yang digunakan untuk menerangkan tentang seseorang “dipanggil” hCard dan disebutkan dalam HTML sebagai vcard. Catatan disini tidak ada salah ketik ditulis apa adanya!.)
  • Contoh diatas menjelaskan property-property item Person (properties of the Person item), seperti adanya sebuah foto, nama, title, organisasi, dan alamat. Untuk pemberian label property-property tentang Orang diatas dijelaskan dengan vcard, setiap elemen berisi SATU property dari semua property ini (seperti <span>, <img>, atau <title>) diberikan 1 atribut class yang mengindikasikan sebuah property.
    Sebagai contoh, fn menjelaskan sebuah nama seseorang; title jabatan (job title).
    (The Help article for each information type includes a full list of recognized properties.)
  • Property dapat berisi property-property lain.
    Dalam contoh diatas, property adr menjelaskan address atau alamat orang (dalam contoh diatas), dan meliputi di dalamnya subproperty alamat jalan (street-address), localitas, wilayah dan code pos.
  • Non visible content.
    Google tidak akan menampilkan content (microdata) yang tidak dapat dilihat oleh user (pengunjung) website. Google tidak menunjukkan content (microformats atau microdata) ke user dengan cara penggunaan teks tersembunyi guna menandai informasi secara terpisah untuk mesin pencari dan aplikasi web. Hasil tampilan HTML sebelum dan sesudah disisipkan Rich Snippets ditampilkan sama persis di webpage. Lihat tampilan “AVATAR” tampilan sama di webpage sebelum-sesudah disisipkan rich snippets di URL  : A Basic Understanding and Use of Microdata for SEO
  • Anda harus mark up teks yang benar-benar muncul untuk pengguna website Anda ketika mereka mengunjungi webpage.

Untuk contoh lain, lihat Nested entities.

Dalam situasi tertentu mungkin perlu mensupply informasi detail ke mesin pencari, meskipun Anda tidak menginginkan informasi tersebut dapat dilihat pengunjung website.

Misalnya, menyediakan informasi rinci derajat lintang dan bujur suatu lokasi (tempat) dapat membantu Google memastikan bahwa itu benar dipetakan, memberikan tanggal event dalam format tanggal ISO dapat membantu memastikan bahwa itu muncul dengan benar dalam SERP. Dalam hal ini Anda dapat menggunakan Microformats pola nilai kelas (value class pattern).

Pertimbangkan contoh ini :

  • <span class="dtstart">
    <span class="value-title" title="2009-10-15T19:00-08:00" />
    15 October, 7PM
    </span>


Dengan melingkupi <span class="value-title" title="2009-10-15T19:00-08:00" />   dalam blok berlabel class="dtstart", Anda menunjukkan bahwa parser rich snippets harus menggunakan nilai dalam judul atribut untuk menemukan tanggal awal acara (event). Tanggal dalam judul atribut dapat direpresentasikan dengan menggunakan format tanggal ISO tanpa mempengaruhi cara ditampilkannya tanggal ke pengguna website.

Untuk specific vocabulary dan examples, silahkan lihat link ini :


Untuk memeriksa markup, gunakan structured data testing tool.

Item types dan item properties - arsip website

Ada berbagai jenis item. Semua item bisa ditemukan pada proyek microdata Bing, Yahoo dan Google: http://schema.org

Berikut ini daftar jenis konten yang didukung http://schema.org/docs/schemas.html. Ketika mengklik pada masing-masing, Anda mungkin menemukan item property yang perlu ditambahkan ke HTML. Beberapa item utama meliputi: events, recipes, place, local business, aggregate offer, product etc.

Misalnya saat ini Anda bekerja pada template resep, maka direkomendasikan memulai dengan itu, seperti contoh di URL ini http://schema.org/Recipe


NOTE

Google dan search engine lain tidak menjamin tampilan blog disertai Rich Snippet, meski code yang digunakan telah support. Dibutuhkan waktu lama agar website terindeks disertai Rich Snippets. Berdasar pengalaman dan catatan ahli SEO kadang dibutuhkan 6-9 bulan. ..... Be patient, please!

That's all we know - Selamat mencoba!



read more website design

18 April 2014

Menghapus Blogger HTML Tag dir="ltr" trbidi="on"



Arti dir="ltr" trbidi="on" di website blog blogger

Sejak awal di Blogosphere (dunia blog pengguna platform Blogger), saya tidak peduli dengan text  “<div dir="ltr" style="text-align: left;" trbidi="on">” ada baris awal mode page HTML setiap posting baru. Setahun-dua tahun pertama, saya  tidak merasa terganggu dengan baris tag HTML tersebut. Namun kini saya peduli karena berdampak negatif terhadap usaha SEO atau teknik Search Engine Optimization.

Blogspot-dir-ltr-apakah-menggangg-2

Definisi dir=LTR menurut official website www.w3.org

Text seperti gambar di atas sebenarnya membantu blogger menggunakan bahasa non-Inggris (e.g. blog berbahasa Indonesia). Namun TIDAK bagi blogger yang menulis dalam bahasa Inggris. Juga  tidak membantu untuk blogger yang menginginkan Blog Post dalam teks rata-kiri-dan-kanan (Justify) - “<div style="text-align: justify;">” - karena tag ini berisi style = "text-align: left;"

Jadi bagi sebagian besar blogger – terutama di Indonesia – ini adalah masalah yang biasa diabaikan dan tidak penting, seperti saya sebutkan di paragraf awal posting artikel ini.

definisi-dir-ltr-versi-w3-org

definisi atribut menurut website w3c

Berikut ini definisi atribut dir=LTR | RTL menurut World Web Wide Concortium (W3C) :
dir = LTR | RTL [CI]
This attribute specifies the base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in [UNICODE]) in an element's content and attribute values. It also specifies the directionality of tables. Possible values :
  • LTR: Left-to-right text or table.
  • RTL: Right-to-left text or table.  - for e.g. Arabic, Hebrew language   
In addition to specifying the language of a document with the lang attribute, authors may need to specify the base directionality (left-to-right or right-to-left) of portions of a document's text, of table structure, etc. This is done with the dir attribute.

Mengapa harus menghapus tag HTML dir=LTR dari website blog?

Seperti dikatakan di awal, saya tidak ambil pusing dengan tag dir=LTR, tetapi kemudian mulai terganggu ketika ditemukan dalam validasi HTML blog saya website-design (menggunakan layanan http://validator.w3.org dan http://validator.nu). Pada kedua validasi HTML tersebut teks <div dir="ltr" style="text-align: left;" trbidi="on"> menyebabkan indikasi ERROR seperti pada screenshot  :

Validation-results-website-download-blogspot-2
Pada setiap posting artikel menjadikan adanya tambahan error seperti di atas pada halaman hasil validasi HTML. Sejauh ini saya lihat hanya berdampak pada validasi HTML untuk setiap posting (ada 492 posting). Saya perlu mengatasi error tersebut. 

Menghapus dir="ltr" style="text-align: left;" trbidi="on" untuk validasi HTML

  1. Buka (LOGIN) Dashboard blogger[DOT]com 
  2. Klik Setting
  3. Pilih Language and formatting
  4. Pada menu Language, pilih disable transliterasi. Perhatikan image berikut :

    how-to-remove-html-tag-dirltr
  5. Klik tombol warna orange “SAVE SETTINGS” (Simpan Setelan)
  6. Sekarang buka kembali Blogger Homepage
  7. Klik New Post
  8. Klik tombol HTML - maka tidak lagi terlihat tag HTML dir-LTR.
  9. Artinya : You had done it successfully.
Kini setiap kali membuat post baru di website blog blogger dengan mode HTML tidak akan terlihat lagi code dir="ltr" style="text-align: left;" trbidi="on"


That's all we know

read more website design

10 Maret 2014

Flash di website platform Blogger, baik atau buruk?


Flash itu baik ataukah buruk?

Penambahan Flash pada website tentu menarik perhatian mata. Asal tidak berlebihan maka tidak masalah, meskipun Googlebots atau robots search engine lain tidak akan mengindeks script Flash.

Baik buruknya pemasangan Flash dalam website

Isu kritisnya adalah masalah penempatan. Prinsipnya Flash bisa diletakkan dimana saja untuk meningkatkan daya tarik. Tetapi jika sembarangan tanpa memperhatikan layout akan mengganggu keserasian (keindahan). Demikian juga jika terlalu banyak atau ukuran flash terlalu besar tentu akan membebani Loading halaman. Pemuatan halaman website menjadi lambat, pengunjung pergi dan berpengaruh negatif pada Google PageRank atau search engine lain.

Bagaimana Cara Menggunakan File .swf atau Flash pada website?

Caranya mudah. Untuk latihan kita gunakan script sederhana. Postingan ini dimaksudkan untuk mengenal bentuk dasar script Flash. Silahkan modifikasi dengan Flash Anda. Ini script-nya :

Code dasar Flash di website blog Blogger
script code

Anda hanya perlu mengedit text yang berwarna merah untuk mengatur ukuran sesuai dengan yang Anda inginkan dan ganti saja

URL untuk “src” dengan URL address penyimpanan file tipe .swf milik Anda. Script tersebut bisa diletakkan pada Edit HTML blog platform blogspot atau ditambahkan pada element halaman atau widget di sidebar.

Contoh 1 Flash untuk website

simbol-download-website-design

Snippet kode tampilan FLASH (saya tampilkan hanya sebagai image “download” dengan bagian yang berbentuk “panah” bergerak naik turun dengan cepat. Berikut ini potongan kodenya :

Contoh-kode-flash-di-website-design

Dengan snippet (code) Flash diatas, di halaman website akan ditampilkan Flash seperti gambar flash “Download” dengan cakram selalu berputar dan tanda panah bergerak naik-turun. Anda bisa melihat tampilan Flash dengan membuka url seperti yang tercantum pada code diatas (dalam src="...").

Contoh 2 Flash untuk website

Variasi lain dari contoh diatas adalah dengan disisipkan bgcolor=’green’ untuk menghasilkan tayangan Flash yang sama dengan background hijau. Potongan kodenya seperti ini :

Contoh snippet code flash website

Hasil tampilan Flash dengan background warna hijau seperti gambar dibawah ini (tulisan di dalamnya berkilap-kilap dan bergerak dinamis).

flash-background-hijau-website-design


That's all we know

read more website design

03 November 2013

Related posts with CSS Effect on website blog Blogger


Pentingnya navigasi website

 Navigasi   penting! Navigasi memungkinkan Anda cepat menemukan content diinginkan. Ini membantu Search Engine memahami content apa yang menjadikan Webmaster Tools (Google) berpikir menganggapnya penting. Jika blog relatif baru, pikirkan!!! "Bagaimana reader pergi dari homepage ke halaman lain berisi content lebih spesifik?” Atau sebaliknya, ”Bagaimana reader navigasi cepat kembali ke Homepage?"

Related Post with Thumbnail widget in website blog

Sebelumnya saya posting di blog INI tentang link-link judul post di bawah artikel. Ada 2 post relevan dengan artikel sekarang, yaitu :


Berikut ini posting Related Post variasi ke-3 dalam memasang widget (script) related post untuk blog blogger dengan sedikit perbedaan. Contoh dapat dilihat di :


Setelah URL diatas dibuka, silahkan gulung halaman turun hingga dibawah “RELATED POSTS.” Arahkan cursor ke setiap link DIBAWAHNYA. Akan terlihat animasi saat tersentuh cursor. Untuk membuat Related Posts seperti itu Anda perlu tambahkan CSS3 transition, mengatur padding dan background position yang terpasang di setiap link.

tiga source code untuk Related Posts with CSS3 Effects

Mohon maaf, source code yang dibutuhkan ditampilkan sebagai gambar karena memperlambat loading time blog kami, namun jika berminat isi code diatas silahkan klik :


Cara Penggunaan
  • Login ke Blogger  >>>  Design (Rancangan)  >>>  Edit HTML
  • Backup template. 
    Mengubah xHTML di bagian <body> punya resiko kegagalan yang mungkin menimbulkan kerusakan template, maka lakukan backup template seperti dibawah ini demi keamanan.
    • Klik Download Full Template
    • Simpan file template di folder computer (misalnya di folder My Document)
    • File backup ini digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara upload kembali ke blogger.
    • Cara upload :
      Klik browse. Temukan file backup di folder computer dan lanjutkan dengan klik upload.
  • Kembali ke Edit HTML dan Cari kode ]]></b:skin>
  • Letakkan kode CSS (snippet box 1) tepat di atas kode tersebut
  • Letakkan Javascript (snippet box 2) tepat di BAWAH kode tersebut
  • Sehingga :
                                        kode ]]></b:skin> berada diantara kode css dan javascript
  • SAVE TEMPLATE
  • Lanjutkan kembali dengan klik Expand Widget Template dan cari kode <data:top.authorLabel/>
  • Di atas kode <data:top.authorLabel/> ada beberapa kode lain seperti berikut 

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>


Letakkan xHTML (lihat isi Box 3) tepat di atasnya. Sehingga tersusun seperti berikut

posisi box XHTML Related Posts with CSS3 Effects
 SAVE TEMPLATE

Keterangan
  • Angka 10 merupakan jumlah posting ditampilkan di widget related posts. Ini dapat diubah sesuai jumlah yang Anda inginkan.
  • Untuk merubah tampilan related posts, perubahan cukup dilakukan pada kode css.

SELESAI  -   [Source]


That's all we know


read more website design

25 Oktober 2013

Merancang website blog dengan Dreamweaver


Dreamweaver di-release oleh Adobe Systems sebagai aplikasi HTML editor website design (rancang website dan blog) secara visual karena didukung fitur WYSIWYG (What You See Is What You Get). Website designer Pemula tidak lagi berurusan dengan tag kode HTML, CSS maupun Javascript saat merancang website. Software ini lebih praktis dibandingkan harus membuat kode HTML, CSS dan script js. Tutorial berikut menjelaskan bagaimana menggunakan Dreamweaver untuk edit website blog.

Ketika dokumen Adobe Photoshop (download : situs_bisnis.zip) tersimpan dalam bentuk web, maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu susah-payah mengetik kode html. Ini dibuktikan seperti gambar berikut :

dreamweaver for editing website

Website Design : Tutorial Penggunaan Dreamweaver 

1.     Mengubah objek menjadi background website page

Jika image berfungsi sebagai tombol, Anda dapat menambahkan menu pull-down agar tampilan website lebih menarik atau membuat tombol dalam bentuk mouse-over dan sebagainya. Pada bagian ini, kita bahas teknik penggantian objek gambar menjadi Background agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).
  1. Bukalah file index.html menggunakan Macromedia Dreamweaver.

    Gambar 1 dreamweaver
  2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan dijadikan background dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.

    Gambar 2 dreamweaver
  3. Di bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak bisa memasukkan teks di atas gambar tersebut karena objek tersebut adalah image, bukan background. Tekan DEL untuk menghapus.

    Gambar 3 dreamweaver
  4. Klik Background URL of cell untuk memilih gambar yang akan dijadikan background. Karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai background.

    Gambar 4 dreamweaver
  5. Ketik images/index_26.gif pada kolom Bg.

    Gambar 5 dreamweaver
  6. Lakukan hal sama pada bagian lain jika ingin dijadikan sebagai background agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2.     Memasukkan objek sebagai elemen website page

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver, proses memasukkan objek sangat mudah karena sudah disediakan tool lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini pembahasan masalah teknik memasukkan objek teks.
  1. Letakkan kursor pada tempat yang akan ditambahkan teks.

    Gambar 11 dreamweaver
  2. Pada panel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.

    Gambar 12 dreamweaver
  3. Ketik beberapa kalimat berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.

    Gambar 13 dreamweaver
  4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukannya, letakkan kursor di awal paragraf kemudian pilih menu INSERT > IMAGE.

    Gambar 14 dreamweaver
  5. Pilih file gambar yang akan dimasukkan dalam dokumen.

    Gambar 15 dreamweaver
  6. Jika berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.

    Gambar 16 dreamweaver
  7. Agar tampilan rapi, Anda setting posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukannya, pada panel Properties pilih Left untuk Align.

    Gambar 17 dreamweaver

3.     Membuat link navigasi website blog

Menu yang mudah digunakan (user friendly) dapat membantu user  ketika mencari informasi. Sebaiknya gunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Pada Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak perlu susah-payah menuliskan script panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

3.1. Membuat pop-up menu website page

Keunggulan software Macromedia Dreamweaver dibandingkan aplikasi lain sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi yang masih awam dengan Java, tidak perlu bingung karena disediakan panel Behavior untuk memudahkan pembuatan menu Pop-Up.

Sebelum membuat menu Pop-Up harus menyiapkan nama file sebagai link. Sebagai contoh : ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lainnya. Dan ketika user memilih salah satu opsi (Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (Save As > acer.html). Diasumsikan, Anda telah punya beberapa file sebagai link yang dimaksud.
  1. Pertama, klik menu PC.

    dreamweaver 21 dreamweaver
  2. Jika panel Behaviors belum muncul, aktifkan dulu dengan cara pilih menu Window > Behaviors.

    dreamweaver 22
  3. Pada panel Behaviors (ada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.

    dreamweaver 23.gif
  4. Selanjutnya pilih Show Pop up Menu.

    dreamweaver 24.gif
  5. Setelah klik pilihan tersebut, akan muncul kotak dialog Show Pop-up Menu yang masih kosong.

    dreamweaver 25.gif
  6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).

    dreamweaver 26.gif
  7. Kemudian masukkan alamat URL pada kolom Link.

    dreamweaver 27.gif
  8. Selanjutnya pada kolom Target, pilih _parent.

    dreamweaver 28.gif
  9. Untuk membuat menu baru, klik tanda (+) di bagian atas. Lakukan hal sama seperti pada tahap 6.

    dreamweaver 29.gif
  10. Klik TAB APPEARANCE untuk setting warna teks dan background pop-up menu. Tentukan jenis dan ukuran font. Lalu tentukan warna teks dan warna cell ketika mouse berada di atas teks.

    dreamweaver 30.gif
  11. Klik TAB ADVANCED untuk menentukan lebar, tinggi dan warna border kotak pop-up menu.

    dreamweaver 31.gif
  12. Klik TAB POSITION untuk menentukan posisi pop-up menu.

    dreamweaver 32.gif
  13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.

    dreamweaver 33.gif
  14. Untuk latihan, buatlah pop-up menu pada tombol lain.

3.2. Membuat tombol Roll-over Image 

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop-Up Menu juga menyediakan tool untuk membuat Roll-over Image sebagai tombol. Yang harus dilakukan adalah menyediakan 2 gambar berukuran sama tapi warnanya berbeda.
  1. Buatlah duplikasi gambar tombol yang telah ada.

    dreamweaver 41.gif
  2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu IMAGE > ADJUSMENT > HUE/SATURATION.

    dreamweaver 42.gif
  3. Setelah muncul kotak dialog HUE/SATURATION, aktifkan pilihan COLORIZE. geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan menekan CTRL+S.

    dreamweaver 43.gif
  4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.

    dreamweaver 44.gif
  5. Hapuslah objek tersebut dengan cara menekan tombol DEL. Selanjutnya pilih menu INSERT > IMAGE OBJECTS > ROLLEVER IMAGE.

    dreamweaver 45.gif
  6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol BROWSE. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.

    dreamweaver 46.gif
  7. Masukkan teks alternate di kolom Alt. Tentukan nama file sebagai link saat tombol tersebut di-klik.

    dreamweaver 47.gif
  8. Untuk melihat hasilnya, tekan tombol F12.



Be Blogger!

read more website design
Penelusuran topik khusus di blog ini
Loading