Teknik Dasar Cara Memodifikasi Desain Tampilan Spider Web Log Untuk Pemula
Sebuah halaman spider web baik itu spider web log maupun website ketika anda akses sehingga tampil di halaman browser yang anda gunakan (seperti: mozila firefox, google chrome, cyberspace explorer dll) pada umumnya tersusun dari gabungan beberapa script customer web, script tersebut dapat difahami dan diterjemahkan oleh browser menjadi tampilan halaman situs, script-script tersebut adalah script HTML, script CSS (Cascade trend sheet) dan Javascript, script-script tersebut sebenarnya saling berkolaborasi satu sama lain yang sengaja diprogram sedemikian rupa sehingga menampilkan halaman situs sesuai dengan yang diinginkan oleh si empunya situs atau spider web log tersebut.
Sebenarnya ketika anda membuat atau mengembangkan sebuah halaman spider web log atau website profesional seperti blog, pada umumnya ada dua kategori script yang dilibatkan, script customer dan script server, script customer adalah HTML, CSS dan javascript sedangkan script server misalnya bahasa khusus widget spider web log (seperti layaknya kode khusus yang sering kita gunakan di blogspot, ), script PHP seperti yang biasa digunakan di template wordpress, script ASP, JSP dll.
Perbedaan kedua script tersebut terletak pada lokasi pemrosesnya, script customer hanya diproses dan diterjemahkan oleh browser, sedangkan script server diproses dan diterjemahkan oleh mesin server yang merupakan sebuah mesin komputer di mana script halaman website atau spider web log diletakan, jika server membaca script server, maka server akan menterjemahkannya kedalam script HTML, jika server membaca script customer (HTML CSS Javascript) maka server akan membacanya namun tidak akan memprosesnya, scripthasil pemrosesan dari script server hasilnya akan dikirm ke reckoner customer melalui browser dalam bentyk script customer dan script tersebut diterjemahkan oleh browser yang mengaksesnya sehingga menghasilkan tampilan halaman website.
Artikel terkait: Bahasa pemrograman yang harus dikuasai untuk membuat aplikasi web
a. kode khusus widget blogspot, contohnya di blogspot (sebuah framework yang hanya dapat dimengerti oleh penterjemah mesin blogspot, kode ini akan diproses diserver oleh mesin blogspot dan diterjemahkan menjadi script html sebelum dikirim ke client)
b. PHP, contoh biasa digunakan di Wordpress (wordpress menggunakan framework khusus dengan script PHP, dengan framework wordpress anda tidak perlu mengembangkan halaman spider web dari nol, karena library sudah disediakan oleh framework wordpress itu sendiri)
c. dll, tergantung template blog, bisa saja menggunakan bahasa pemrograman berbeda.
a. Script CSS
Script ini fungsinya adalah untuk mengatur hal-hal yang berkaitan dengan tata letak dan memodifikasi desain tampilan halaman situs (pewarnaan, gambar dll), cara kerjanya sebenarnya memodifikasi tag html, baik melalui nama tag, id atau clsss tag html tertentu yang ingin di atur tata letaknya dan ingin dimodifikasi.
b. Javascript
Script ini fungsinya adalah agar halaman spider web log terlihat lebih interaktif (ketika anda berikan aksi maka bereaksi), misal ketika diklik halaman scroll sendiri, ketika mouse diarahkan ke sebuah tombol, warna tombol berubah dll, cara kerjanya mirip dengan CSS yaitu memodifikasi tag html, baik melalui nama tag, id atau classs tag html tertentu.
c. Script HTML
Script ini berfungsi sebagai pondasi atau encompass yang menggabungkan seluruh script yang digunakan, terdiri dari kode-kode berupa tag atau perintah khusus yang dapat dibaca oleh spider web browser, script html akan membungkus script css, javascript dan juga script server jika ada, semuanya dibungkus oleh script HTML ini, sifatnya wajib, artinya setidaknya halaman situs yang memperhatikan struktur kode yang baik harus mengandung script HTML didalamnya.
Artikel terkait: Cara membuat struktur computer program HTML untuk pemula
Apa itu tag?
ketika anda memodifikasi template spider web log anda pasti akan menemukan kode-kode khusus yang diletakan diantara tanda kurung siku (< dan >), itu adalah tag.
Tag adalah kode khusus yang pada umumnya dibungkus diatara karakter "<" dan "/>", yang biasanya terdiri dari tag pembuka dan penutup, format tag adalah sebagai berikut:
ada banyak sekali kode tag html.
Contoh tag misalnya tag trunk <body> tag <html> dan tag-tag lainnya.
Tag bisa memiliki lebih dari satu atribut dengan fungsi yang berbeda-beda, ada untuk mewarnai, menentukan lebar dll, tag satu dengan tag lainnya memiliki atribut berbeda satu sama laim, namun ada atribut spesial yang bisa dimiliki oleh semua tag yaitu Atribut ID dan CLASS, atribut itulah yang biasanya digunakan oleh script CSS dan juga Javascript untuk memodifikasi tag tersebut baik untuk mengatur tataletak tag tersebut maupun mendekorasi tag tersebut.
Lantas bagaimana cara kerja script css ini?
Cara kerja Script CSS begitu juga berlaku untuk javascript sangat sederhana, secript ini akan mngakses information yang terdapat didalam tag HTML kemudian memodifikasi Tag HTML melalui information yang terdapat pada tag tersebut:
a. Bisa melalui Nama tag.
b. bisa melalui Attribut Class yang dimiliki tag tersebut atau
c. bisa melalui Attribut ID yang dimiliki tag tersebut.
Jadi ketika anda ingin memodifikasi tag HTML dalam sebuah halaman situs, maka setidaknya anda harus tau terlebih dulu nama tag, atribut shape atau atribut Id yang dimiliki oleh tag yang ingin anda modifikasi tersebut. jika anda sudah tau nama tag atau attribut ID atau attribut Class yang dimiliki oleh tag yang ingin dimodifikasi, maka anda bisa dengan mudah mendekorasi dan mengatur tataletak dari tag tersebut melalui 1 dari iii cara diatas (bisa melalui nama tag-nya, attribut id, atau atribut class).
Sebagai contoh:
Misalkan saja saya punya struktur html yang ingin dimodifikasi adalah sebagai berikut:
<html>
<head>
<title>contoh</title>
</head>
<body>
<div id='main_content' class='main_content'>
<h1 class='titleku' id='xxx'>Teknik dasar memodifikasi tampilan blog</h1>
</div>
</body>
</html>
Struktur html diatas jika dibaca oleh browser maka kan menampikan tulisan besar tebal dengan ukuran H1:
Teknik dasar memodifikasi tampilan blog
Misalkan saja, saya ingin memberikan warna biru pada tulisan tersebut dan tulisannya ingin dirubah menjadi besar semua, ingat urusan mendesain adalah keja script CSS, maka salah satu cara adalah dengan menggunakan kode CSS sebagai berikut:
a. jika menggunakan attribut shape (lihat attribut shape untuk h1 diatas adalah titleku [class='titleku']), bisa dilihat bahwa atribut shape yang dimiliki oleh tag h1 diatas namanya adalah titleku, maka untuk memodifikasi tulisan H1 tersebut kita bisa menggunakan nama shape dari tag tersebut sebagai berikut:
kode css untuk memodifikasi halaman situs tersebut bisa disimpan diantara kode <head> pada struktur template spider web log anda
Sebenarnya CSS adalah script yang paling mudah jika dibandingkan dengan script atau bahasa pemrograman lainnya, agar anda bisa secara mudah mendekorasi halaman situs atau halaman spider web log anda, maka Anda harus mengusai CSS.
Ada banyak sekali teknik CSS untuk memodifikasi halaman situs, contoh diatas adalah contoh sederhana saja, yang jelas jika anda sudah tau tekniknya kode CSS itu mudah sekali dipelajari dan asik ketika dipraktekan.
Sebagai recomendasi untuk belajar CSS anda bisa belajar di situs W3School.com/css tutorial sangat lengkap untuk anda sebagai pemula.
Juga anda bisa belajar tutorial HTML juga disana w3school.com/html
Silahkan anda pelajari di situs tersebut sampai anda paham.
Caranya hampir sama kunci utamanya anda terlebih dahulu harus memahami instruksi-instruksi CSS.
Mungkin anda akan sedikit bingung bagaimana cara memodifikasi tampilan spider web log anda, sementara kalo dilihat template spider web log itu memiliki strukturkode yang begitu banyak, wah bisa pusinng dong!.
Mungkin bisa pusing jika anda tidak tau caranya.
Tutorial ini saya sajikan untuk blogger pemula yang kebetulan belum memahami bagaimana cara memodifikasi tampilan blog. saya akan kasih tau caranya.
langkah-langkah untuk memodifikasi halaman spider web log anda adalah sebagai berikut:
Silahkan anda buka Tampilan spider web log yang ingin anda modifikasi, misal untuk spider web log saya pribadi:
Misal dari tampilan spider web log diatas saya akan memodifikasi warna background menunya yang awalnya berwarna orange saya akan modifikasi menjadi warna hitam.
Langkah-langkahnya adalah sebagai berikut:
a. Langkah pertama, kita harus cari tau tag apa yang digunakan oleh tampilan carte du jour tersebut, kita bisa lihat juga attribut shape atau attribut id yang digunakan oleh carte du jour tersebut jika memang ada.
Untuk mencari tag yang digunakan oleh carte du jour tersebut pasti akan sulit jika dilakukan secara manual, silahkan saja anda coba akses kode template spider web log anda pasti anda akan pusing melihat rangkaian kode template yang begitu banyak.
Cara termudah adalah dengan menggunakan bantuan dari browser, browser saat ini sudah menyediakan fasilitas yang bisa digunakan oleh pengembang. salah satunya adalah fasilitas inspect element,
b. Klik kanan pada tampilan halaman yang ingin dimodifikasi, kemudian pilih carte du jour inspect elemet
sebagai contoh disini saya menggunakan browser mozila firefox. tampilannya seperi gambar dibawah ini:
Dengan memilih carte du jour inspeksi elemen, fasilitas inspeksi elemen akan membantu anda untuk mempermudah mendapatkan informasi nama TAG yang digunakan eleh sebuah tampilan (misalkan menu, logo warna text dll) yang akan anda modifikasi dan juga script CSS yang sedang digunakan oleh tag tersebut.
Akan muncul tampilan fasilitas inspeksi elemen seperti gambar dibawah ini:
Akan ada iii bagian dari fasilitas inspeksi elemen yang nanti dapat digunakan untuk memodifikasi tampilan desain spider web log anda:
1. Tool Inspektor (untuk memudahkan menemukan tag html yang anda ingin modifikasi)
2. Struktur HTML window, menampilkan kode html halaman situs.
3. CSS window, yang memperlihatkan struktur script css yang menyusun tampilan tag yang dipilih.
Untuk memodifikasi tampilan, ada dua cara, memilih tag di bagian struktur html window, kemudian memodifikasi cssnya untuk melihat tapilan secara temporary. atau dengan menggunakan bantuan tool inspektor.
Agar mudah memilih tag yang tepat sesuai dengan bagian tampilan yang ingin kita modifikasi kita akan menggunakan Tool Inspektor,
Silahkan tekan tool Inspektor, kemudian arahkan pada bagian tampilan spider web log anda yang ingin anda modifikasi.
Sebagai contoh diatas, karena saya akan merubah tampilan background carte du jour maka saya akan mengarahkan tool inspektor tersebut ke carte du jour pada tampilan spider web log saya kemudian saya klik carte du jour tersebut untuk melihat Tag html dan juga CSS yang menyusun tag tersebut. akan terlihat seperti gambar dibawah ini:
karena saya ingin merubah warna background carte du jour spider web log saya, maka saya arahkan tool inspektor ke carte du jour Home spider web log saya, carte du jour tersebut akan terseleksi, dan terdapat informasi ukuran dari carte du jour tersebut, silahkan anda klik jika seleksi sudah benar.
Anda akan melihat informasi di bagian bagah fasilits inspek elemen mengenai TAG HTML untuk carte du jour tersebut dan juga CSS yang sedang digunakan oleh carte du jour tersebut.
Anda akan diperlihatkan tag HTML yang digunakan carte du jour tersebut, dan juga script CSS yang sedang digunakan oleh tag HTML tersebut,
Di bagian HTML window
ternyata diketahui bahwa carte du jour tersebut mengunakan tag a, yang letaknya di dalam tag li dengan attribut class="dropdown", dan tag li letaknya didalam tag Nav dengan id="navbarsecond"
Di CSS WIndow
Kita bisa lihat script css untuk tag a tersebut dibagian CSS Window. ternyata diketahui tag tersebut dimodifikasi dengan perintah CSS:
Karena kita akan memodifikasi background dari carte du jour tersebut, maka kita tinggal ubah di bagian background-color menjadi :black atau #000
silahkan anda edit (double click di bagian css window) di baris background-color: #ea5e00;
Kemudian silahkan anda ganti menjadi dark atau #000. sperti ilustrasi gambar dibawah ini:
Kemudian tekan enter, maka anda akan melihat perubahan pada carte du jour yang awalnya berwarna orangish menjadi hitam, terlihat seperti gambar dibawah ini:
Penting :
Tampilan di atas hanya bekerja pada retentiveness alias tidak permanen, jika spider web log anda direfresh maka tampilannya akan kembali ke awal seperti semula.
langkah tersebut harus anda tempuh sebelum anda menerapkan perubahan pada template spider web log anda, jika perubahan yang anda lakukan sesuai dengan yang anda inginkan maka anda bisa langsung menerapkannya pada template spider web log anda.
Langkah-langkahnya adalah sebagai berikut:
a. Pastikan anda sudah masuk ke akun blogspot anda
b. Aktifkan dengan memilih spider web log yang anda ingin modifikasi
c. Pada bilah carte du jour sisi kiri pilih carte du jour template > edit HTML untukmengaktifkan editor template.
d. Tekan CTRL+F untuk menampilkan trend pencarian
karena css yang kita modifikasi tadi menggunakan kunci #navbarsecond .dropdown a, silahkan anda cari menggunakan text tersebut,
Setelah text tersebut ditemukan silahkan anda ubah di bagian yang sama ketika anda melakukan modifikasi menggunakan inspeksi element. yaitu untuk bagian
background-color:#.....
menjadi
background-color:#000
e. Simpan template spider web log anda.
Jika berhasil maka perubahan pada desain template spider web log anda akan permanen.
Apapun flatform template spider web log yang anda gunakan untuk memodifikasi tampilan dan teta letak yang digunakan adalah kode CSS, namun mungkin cara meletakannya mungkin akan sedikit berbeda.
Demikian artikel tentang Teknik dasar cara memodifikasi desain tampilan blog, semoga bermanfaat. dan selamat mencoba.
Sebenarnya ketika anda membuat atau mengembangkan sebuah halaman spider web log atau website profesional seperti blog, pada umumnya ada dua kategori script yang dilibatkan, script customer dan script server, script customer adalah HTML, CSS dan javascript sedangkan script server misalnya bahasa khusus widget spider web log (seperti layaknya kode khusus yang sering kita gunakan di blogspot, ), script PHP seperti yang biasa digunakan di template wordpress, script ASP, JSP dll.
Web design
Perbedaan kedua script tersebut terletak pada lokasi pemrosesnya, script customer hanya diproses dan diterjemahkan oleh browser, sedangkan script server diproses dan diterjemahkan oleh mesin server yang merupakan sebuah mesin komputer di mana script halaman website atau spider web log diletakan, jika server membaca script server, maka server akan menterjemahkannya kedalam script HTML, jika server membaca script customer (HTML CSS Javascript) maka server akan membacanya namun tidak akan memprosesnya, scripthasil pemrosesan dari script server hasilnya akan dikirm ke reckoner customer melalui browser dalam bentyk script customer dan script tersebut diterjemahkan oleh browser yang mengaksesnya sehingga menghasilkan tampilan halaman website.
Artikel terkait: Bahasa pemrograman yang harus dikuasai untuk membuat aplikasi web
Mengenal Script yang menyusun tampilan halaman blog
Di artikel kali ini saya akan jelaskan bagaimana teknik dasar cara memodifikasi desain tampilan blog, namun sebelum saya uraikan panjang lebar anda harus tau dulu fungsi dari script-script yang menyusun tampilan halaman blog, diantarnaya:A. Script server
Script server pada umumnya akan diterjemahkan oleh mesin server menjadi script client, contoh dari script server beberapa diantaranya adalah sebagai berikut:a. kode khusus widget blogspot, contohnya di blogspot (sebuah framework yang hanya dapat dimengerti oleh penterjemah mesin blogspot, kode ini akan diproses diserver oleh mesin blogspot dan diterjemahkan menjadi script html sebelum dikirim ke client)
b. PHP, contoh biasa digunakan di Wordpress (wordpress menggunakan framework khusus dengan script PHP, dengan framework wordpress anda tidak perlu mengembangkan halaman spider web dari nol, karena library sudah disediakan oleh framework wordpress itu sendiri)
c. dll, tergantung template blog, bisa saja menggunakan bahasa pemrograman berbeda.
B. Script Client.
a. Script CSS
Script ini fungsinya adalah untuk mengatur hal-hal yang berkaitan dengan tata letak dan memodifikasi desain tampilan halaman situs (pewarnaan, gambar dll), cara kerjanya sebenarnya memodifikasi tag html, baik melalui nama tag, id atau clsss tag html tertentu yang ingin di atur tata letaknya dan ingin dimodifikasi.
b. Javascript
Script ini fungsinya adalah agar halaman spider web log terlihat lebih interaktif (ketika anda berikan aksi maka bereaksi), misal ketika diklik halaman scroll sendiri, ketika mouse diarahkan ke sebuah tombol, warna tombol berubah dll, cara kerjanya mirip dengan CSS yaitu memodifikasi tag html, baik melalui nama tag, id atau classs tag html tertentu.
c. Script HTML
Script ini berfungsi sebagai pondasi atau encompass yang menggabungkan seluruh script yang digunakan, terdiri dari kode-kode berupa tag atau perintah khusus yang dapat dibaca oleh spider web browser, script html akan membungkus script css, javascript dan juga script server jika ada, semuanya dibungkus oleh script HTML ini, sifatnya wajib, artinya setidaknya halaman situs yang memperhatikan struktur kode yang baik harus mengandung script HTML didalamnya.
Artikel terkait: Cara membuat struktur computer program HTML untuk pemula
Apa itu tag?
ketika anda memodifikasi template spider web log anda pasti akan menemukan kode-kode khusus yang diletakan diantara tanda kurung siku (< dan >), itu adalah tag.
Tag adalah kode khusus yang pada umumnya dibungkus diatara karakter "<" dan "/>", yang biasanya terdiri dari tag pembuka dan penutup, format tag adalah sebagai berikut:
<nama_tag atribut_1='isi atribut 1' atribut_2='isi atribut2' atribut_N='isi atribut N'> isi </nama_tag>
ada banyak sekali kode tag html.
Contoh tag misalnya tag trunk <body> tag <html> dan tag-tag lainnya.
Tag bisa memiliki lebih dari satu atribut dengan fungsi yang berbeda-beda, ada untuk mewarnai, menentukan lebar dll, tag satu dengan tag lainnya memiliki atribut berbeda satu sama laim, namun ada atribut spesial yang bisa dimiliki oleh semua tag yaitu Atribut ID dan CLASS, atribut itulah yang biasanya digunakan oleh script CSS dan juga Javascript untuk memodifikasi tag tersebut baik untuk mengatur tataletak tag tersebut maupun mendekorasi tag tersebut.
Cara Mendesain spider web log menggunakan CSS
Disini saya akan jelaskan bagaimana cara memodifikasi dan mendesain tampilan blog, ketika berurusan dengan desain tampilan spider web log maka script yang dilibatkan adalah script HTML dan CSS saja. anda bisa juga melibatkan Javascript untuk membuat halaman situs lebih interaktif, namun di sini saya hanya akan lebih fokus ke HTML dan CSS saja, oh ya di sini saya tidak akan terlalu panjang lebar menjelaskan tentang apa itu script HTML dan CSS, namun disini saya akan jelaskan prosedurnya saja, jika anda mengerti anda bisa kembangkan dengan mudah dan lebih detail.Bagaimana Script CSS Bekerja
Script CSS adalah script untuk mengatur tataletak dan mendekorasi halaman web, yang didekorasi oleh CSS adalah Tag-Tag HTML itu sendiri.Lantas bagaimana cara kerja script css ini?
Cara kerja Script CSS begitu juga berlaku untuk javascript sangat sederhana, secript ini akan mngakses information yang terdapat didalam tag HTML kemudian memodifikasi Tag HTML melalui information yang terdapat pada tag tersebut:
a. Bisa melalui Nama tag.
b. bisa melalui Attribut Class yang dimiliki tag tersebut atau
c. bisa melalui Attribut ID yang dimiliki tag tersebut.
Jadi ketika anda ingin memodifikasi tag HTML dalam sebuah halaman situs, maka setidaknya anda harus tau terlebih dulu nama tag, atribut shape atau atribut Id yang dimiliki oleh tag yang ingin anda modifikasi tersebut. jika anda sudah tau nama tag atau attribut ID atau attribut Class yang dimiliki oleh tag yang ingin dimodifikasi, maka anda bisa dengan mudah mendekorasi dan mengatur tataletak dari tag tersebut melalui 1 dari iii cara diatas (bisa melalui nama tag-nya, attribut id, atau atribut class).
1. Jika tag didekorasi menggunakan nama tag maka format perintahnya adalah:
nama_tag{perintah-perintah_css}
jika tag tersebut didekorasi melalui nama tag, maka cukup menggunakan nama tag saja didepannya.
2. Jika tag didekorasi melalui Atrribut shape maka format perintahnya adalah:
.nama_attribut_class{perintah-perintah_css}
Jika tag tersebut didekorasi melalui attribut class, maka perintah css harus dimulah dengan "." (baca titik) atau dot.
3. Jika tag didekorasi melalui Atribut ID, maka format perintahnya adalah:
#nama_attribut_id{perintah-perintah_css}
Inaget ketika kita mendekorasi tag melalui atribut ID, maka perintah CSS untuk mendekrasi tag tersebut harus dimulai dengan tanda # (baca: pagar).
Sebagai contoh:
Misalkan saja saya punya struktur html yang ingin dimodifikasi adalah sebagai berikut:
<html>
<head>
<title>contoh</title>
</head>
<body>
<div id='main_content' class='main_content'>
<h1 class='titleku' id='xxx'>Teknik dasar memodifikasi tampilan blog</h1>
</div>
</body>
</html>
Struktur html diatas jika dibaca oleh browser maka kan menampikan tulisan besar tebal dengan ukuran H1:
Teknik dasar memodifikasi tampilan blog
Misalkan saja, saya ingin memberikan warna biru pada tulisan tersebut dan tulisannya ingin dirubah menjadi besar semua, ingat urusan mendesain adalah keja script CSS, maka salah satu cara adalah dengan menggunakan kode CSS sebagai berikut:
a. jika menggunakan attribut shape (lihat attribut shape untuk h1 diatas adalah titleku [class='titleku']), bisa dilihat bahwa atribut shape yang dimiliki oleh tag h1 diatas namanya adalah titleku, maka untuk memodifikasi tulisan H1 tersebut kita bisa menggunakan nama shape dari tag tersebut sebagai berikut:
.title{color : red; text-transform:uppercase}b. atau bisa juga menggunakan nama tagnya (h1) menjadi
h1{color:red; text-transform:uppercase}atau bisa juga melalui attrbut ID nya lihat h1 memiliki id='xxx' jadi nama attribut id nya xxx
#xxx{color:red; text-transform:uppercase}
kode css untuk memodifikasi halaman situs tersebut bisa disimpan diantara kode <head> pada struktur template spider web log anda
<head>
...
kode-css
...
</head>
Sebenarnya CSS adalah script yang paling mudah jika dibandingkan dengan script atau bahasa pemrograman lainnya, agar anda bisa secara mudah mendekorasi halaman situs atau halaman spider web log anda, maka Anda harus mengusai CSS.
Ada banyak sekali teknik CSS untuk memodifikasi halaman situs, contoh diatas adalah contoh sederhana saja, yang jelas jika anda sudah tau tekniknya kode CSS itu mudah sekali dipelajari dan asik ketika dipraktekan.
Sebagai recomendasi untuk belajar CSS anda bisa belajar di situs W3School.com/css tutorial sangat lengkap untuk anda sebagai pemula.
Juga anda bisa belajar tutorial HTML juga disana w3school.com/html
Silahkan anda pelajari di situs tersebut sampai anda paham.
Bagaimana cara Memodifikasi Blog Anda Sendiri
Setelah memahami bagaimana cara kerja script CSS memodifikasi tag html, ini bisa diterapkan untuk spider web log anda manakala anda memiliki keinginan ingin memodifikasi tampilan halaman spider web log anda.Caranya hampir sama kunci utamanya anda terlebih dahulu harus memahami instruksi-instruksi CSS.
Mungkin anda akan sedikit bingung bagaimana cara memodifikasi tampilan spider web log anda, sementara kalo dilihat template spider web log itu memiliki strukturkode yang begitu banyak, wah bisa pusinng dong!.
Mungkin bisa pusing jika anda tidak tau caranya.
Tutorial ini saya sajikan untuk blogger pemula yang kebetulan belum memahami bagaimana cara memodifikasi tampilan blog. saya akan kasih tau caranya.
Teknik Sederhana cara memodifikasi Tamplan Blog Anda?
Apapun bagian spider web log yang tampilannya bisa anda lihat, itu bisa anda modifikasi, misalkan menu, background, gambar, text, jenis tulisan, warna tulisan, tata letak dll, tapi anda harus tau nama tag atau atribut ID atau attribut class dari Tag yang ingin anda modifikasi.langkah-langkah untuk memodifikasi halaman spider web log anda adalah sebagai berikut:
Silahkan anda buka Tampilan spider web log yang ingin anda modifikasi, misal untuk spider web log saya pribadi:
Misal dari tampilan spider web log diatas saya akan memodifikasi warna background menunya yang awalnya berwarna orange saya akan modifikasi menjadi warna hitam.
Langkah-langkahnya adalah sebagai berikut:
a. Langkah pertama, kita harus cari tau tag apa yang digunakan oleh tampilan carte du jour tersebut, kita bisa lihat juga attribut shape atau attribut id yang digunakan oleh carte du jour tersebut jika memang ada.
Untuk mencari tag yang digunakan oleh carte du jour tersebut pasti akan sulit jika dilakukan secara manual, silahkan saja anda coba akses kode template spider web log anda pasti anda akan pusing melihat rangkaian kode template yang begitu banyak.
Cara termudah adalah dengan menggunakan bantuan dari browser, browser saat ini sudah menyediakan fasilitas yang bisa digunakan oleh pengembang. salah satunya adalah fasilitas inspect element,
b. Klik kanan pada tampilan halaman yang ingin dimodifikasi, kemudian pilih carte du jour inspect elemet
sebagai contoh disini saya menggunakan browser mozila firefox. tampilannya seperi gambar dibawah ini:
Dengan memilih carte du jour inspeksi elemen, fasilitas inspeksi elemen akan membantu anda untuk mempermudah mendapatkan informasi nama TAG yang digunakan eleh sebuah tampilan (misalkan menu, logo warna text dll) yang akan anda modifikasi dan juga script CSS yang sedang digunakan oleh tag tersebut.
Akan muncul tampilan fasilitas inspeksi elemen seperti gambar dibawah ini:
Akan ada iii bagian dari fasilitas inspeksi elemen yang nanti dapat digunakan untuk memodifikasi tampilan desain spider web log anda:
1. Tool Inspektor (untuk memudahkan menemukan tag html yang anda ingin modifikasi)
2. Struktur HTML window, menampilkan kode html halaman situs.
3. CSS window, yang memperlihatkan struktur script css yang menyusun tampilan tag yang dipilih.
Untuk memodifikasi tampilan, ada dua cara, memilih tag di bagian struktur html window, kemudian memodifikasi cssnya untuk melihat tapilan secara temporary. atau dengan menggunakan bantuan tool inspektor.
Agar mudah memilih tag yang tepat sesuai dengan bagian tampilan yang ingin kita modifikasi kita akan menggunakan Tool Inspektor,
Silahkan tekan tool Inspektor, kemudian arahkan pada bagian tampilan spider web log anda yang ingin anda modifikasi.
Sebagai contoh diatas, karena saya akan merubah tampilan background carte du jour maka saya akan mengarahkan tool inspektor tersebut ke carte du jour pada tampilan spider web log saya kemudian saya klik carte du jour tersebut untuk melihat Tag html dan juga CSS yang menyusun tag tersebut. akan terlihat seperti gambar dibawah ini:
karena saya ingin merubah warna background carte du jour spider web log saya, maka saya arahkan tool inspektor ke carte du jour Home spider web log saya, carte du jour tersebut akan terseleksi, dan terdapat informasi ukuran dari carte du jour tersebut, silahkan anda klik jika seleksi sudah benar.
Anda akan melihat informasi di bagian bagah fasilits inspek elemen mengenai TAG HTML untuk carte du jour tersebut dan juga CSS yang sedang digunakan oleh carte du jour tersebut.
Anda akan diperlihatkan tag HTML yang digunakan carte du jour tersebut, dan juga script CSS yang sedang digunakan oleh tag HTML tersebut,
Di bagian HTML window
ternyata diketahui bahwa carte du jour tersebut mengunakan tag a, yang letaknya di dalam tag li dengan attribut class="dropdown", dan tag li letaknya didalam tag Nav dengan id="navbarsecond"
Di CSS WIndow
Kita bisa lihat script css untuk tag a tersebut dibagian CSS Window. ternyata diketahui tag tersebut dimodifikasi dengan perintah CSS:
#navbarsecond .dropdown a {untuk memodifikasi tag tersebut menggunakan #navbarsecond .dropdown a, diakses menggunakan struktur dari tag orang tuanya dulu.
color: #fff;
font-size: 14px;
font-weight: normal;
padding: 5px 10px;
background-color: #ea5e00;
line-height: 1.2;
margin-bottom: 10px;
}
Karena kita akan memodifikasi background dari carte du jour tersebut, maka kita tinggal ubah di bagian background-color menjadi :black atau #000
silahkan anda edit (double click di bagian css window) di baris background-color: #ea5e00;
Kemudian silahkan anda ganti menjadi dark atau #000. sperti ilustrasi gambar dibawah ini:
Kemudian tekan enter, maka anda akan melihat perubahan pada carte du jour yang awalnya berwarna orangish menjadi hitam, terlihat seperti gambar dibawah ini:
Penting :
Tampilan di atas hanya bekerja pada retentiveness alias tidak permanen, jika spider web log anda direfresh maka tampilannya akan kembali ke awal seperti semula.
langkah tersebut harus anda tempuh sebelum anda menerapkan perubahan pada template spider web log anda, jika perubahan yang anda lakukan sesuai dengan yang anda inginkan maka anda bisa langsung menerapkannya pada template spider web log anda.
Lakukan perubahan pada template spider web log anda
Setelah anda melihat perubahan yang terjadi melalui carte du jour inspek chemical cistron jika modifikasi yang anda lakukan sudah kelihatan cocok dengan desain yang anda inginkan, maka selanjutnya agar perubahan tersebut permanen untuk spider web log anda anda harus melakukan perubahan pada tempalte spider web log anda.Langkah-langkahnya adalah sebagai berikut:
a. Pastikan anda sudah masuk ke akun blogspot anda
b. Aktifkan dengan memilih spider web log yang anda ingin modifikasi
c. Pada bilah carte du jour sisi kiri pilih carte du jour template > edit HTML untukmengaktifkan editor template.
d. Tekan CTRL+F untuk menampilkan trend pencarian
karena css yang kita modifikasi tadi menggunakan kunci #navbarsecond .dropdown a, silahkan anda cari menggunakan text tersebut,
Setelah text tersebut ditemukan silahkan anda ubah di bagian yang sama ketika anda melakukan modifikasi menggunakan inspeksi element. yaitu untuk bagian
background-color:#.....
menjadi
background-color:#000
e. Simpan template spider web log anda.
Jika berhasil maka perubahan pada desain template spider web log anda akan permanen.
Kesimpulan.
Contoh diatas hanya sekedar ilustrasi sederhana bagaimana anda bisa melakukan modifikasi pada desain tampilan spider web log anda, sebenarnya banyak yang bisa anda lakukan yang penting anda mengusai perintah-perintah CSS dan juga HTML, dengan mengusai perintah CSS anda akan bisa memodifikasi tampilan yang meliputi tata-letak dan juga perwarnaan tampilan spider web log anda sesuai dengan yang anda inginkan.Apapun flatform template spider web log yang anda gunakan untuk memodifikasi tampilan dan teta letak yang digunakan adalah kode CSS, namun mungkin cara meletakannya mungkin akan sedikit berbeda.
Demikian artikel tentang Teknik dasar cara memodifikasi desain tampilan blog, semoga bermanfaat. dan selamat mencoba.
Komentar
Posting Komentar