Warung Bebas
Tampilkan postingan dengan label edit HTML. Tampilkan semua postingan
Tampilkan postingan dengan label edit HTML. Tampilkan semua postingan

Jumat, 04 November 2011

Inilah Cara Termudah Mengenal Ukuran Panjang dan Lebar Template Blog Kita

Apa yang harus kita lakukan pertama kali untuk mengetahui ukuran panjang dan lebar blog kita?
Bagi blogger pemula, mengetahui ukuran panjang dan lebar template blog merupakan hal yang cukup membingungkan. Hal ini karena kita sebagai blogger pemula merasa awam dengan begitu banyaknya kode HTML yang termuat dalam template blog.


Kalau kenyataannya sudah begini, apa akibat masalah yang kita hadapi karena edit HTML yang sulit?
Waktu akan terbuang percuma hanya untuk mencari kode HTML yang menunjukan ukuran bagian template yang tidak juga ditemukan. Selain itu, jika kode HTML ini lama tidak ditemukan juga akan membuat kita merasa kesal dan bosan bukan?

Nah, untuk mari kita perhatikan bersama bagaimana cara untuk mengetahui ukuran template blog milik kita.

Pertama, masuk ke dalam akun blogger kita masing-masing.
Klik rancangan.
Klik edit HTML.
Klik expand template widget.
Cari kode HTML berikut ini.
(hanya contoh, cari kode HTML yang dicetak tebal)

Mengetahui ukuran lebar keseluruhan template.

#outer-wrapper {
margin:20px auto;
padding:0 10px;
text-align:justify;
width:900px;
}

Mengetahui ukuran header.

#header-wrapper {
height:119px;
width:900px;
}

Mengetahui ukuran sidebar.

#sidebar-wrapper {
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Mengetahui ukuran main kolom.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}

Keterangan:

  1. Tekan tombol Ctrl+F pada keyboard untuk mempermudah proses pencarian kode HTML.
  2. Width merupakan ukuran lebar, sedangkan height merupakan ukuran tinggi.


Setelah mengetahui kode HTML dan fungsinya, maka proses editing ukuran template blog kita menjadi lebih mudah. Hemat waktu dan tidak membuat jenuh. Akan tetapi, selalu ingat jika kita perlu untuk download template blog kita terlebih dahulu sebelum memulai proses editing sebagai backup jika nanti terjadi kegagalan.

Selasa, 28 Juni 2011

Menggunakan Height dan Widht Tags Untuk Mempercepat Loading Blog

Pembahasan selanjutnya dari 6 Langkah Mempercepat Loading Blog adalah dengan cara Menggunakan Height dan Widht Tags Untuk Mempercepat Loading Blog.


Sebuah gambar yang kita tampilkan dalam postingan blog tentunya memiliki ukuran yang berbeda-beda. Nah, karena perbedaan ukuran ini lah yang akhirnya membuat search engine membutuhkan sedikit waktu untuk mengkonversikan ukuran awal gambar tersebut ke dalam sebuah ukuran standar gambar yang dimuat dalam postingan blog.

Untuk memangkas waktu tersebut, kita sebaiknya Menggunakan Height dan Widht Tags Untuk Mempercepat Loading Blog. Dengan Menggunakan Height dan Widht Tags, proses loading pada blog kita akan terasa sedikit lebih cepat. Hal ini disebabkan karena saat gambar tersebut diberikan Height dan Widht Tags, browser akan tahu jika gambar memiliki ukuran panjang/tinggi dan lebar tertentu sehingga loadingnya akan terasa cepat tanpa adanya konversi ukuran ke bentuk standar (Height=240 dan Widht=320).

Lalu, bagaimana cara penggunaan dari Menggunakan Height dan Widht Tags Untuk Mempercepat Loading Blog ini?

Mudah, kita hanya perlu untuk menyisipkan kode HTML Height dan Widht Tags di dalam kode HTML gambar tersebut saja.

Contoh :

<div style="text-align: center;">
<img alt="emoticon" height="400" id="emoticon" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8YeGB2mT6vfkwA2Pc8zDd7yD4MQud-977_rmpmAlYZsYnNJdwHLS_Eyck2mMrD-Gf8ZZiYii6WmiCWbN6JfwZ4WcOc4QINV0ejGrxrB5fkktt6T9Ics3qyOwvFKY15sfRV7kLMBryO2G/s1600/emoticon.jpg" width="400" /></div>

Maka hasilnya akan tampil sebagai berikut :

emoticon

Pemberian Height dan Widht Tags memang menjadi sebuah hal yang sangat jarang untuk kita perhatikan. Biasanya kita cenderung mengabaikannya. Karena selain pengaruhnya yang tidak begitu signifikan, kegiatan ini juga cenderung repot dan ribet.

Mungkin bukan menjadi sebuah masalah jika blog kita umumnya hanya menampilkan beberapa atau bahkan hanya satu gambar saja dalam setiap postingan blog. akan tetapi, bagaimana jadinya jika blog kita ini selalu menampilkan banyak gambar dalam setiap postingan blognya?

Ada yang ingin ditanyakan?
Jika ada yang ingin menanggapi dan menambahkan silakan disampaikan lewat kotak komentar ya kawan.
Salam blogger!

Minggu, 26 Juni 2011

Mengoptimalisasi CSS Yang Digunakan Pada Blog

Salah satu upaya yang harus kita lakukan dari 6 Langkah Mempercepat Loading Blog adalah dengan cara Mengoptimalisasi CSS Yang Digunakan Pada Blog.


Apa itu CSS?
CSS merupakan kependekan dari Cascading Style Sheets. CSS akan berguna dalam mempermudah search engine mengakses informasi dalam blog kita. Bagaimana caranya? Caranya adalah dengan mengijinkan browser tersebut untuk bisa mengakses data yang kita miliki dalam blog secara langsung, memindahkan hal yang dibutuhkan untuk bisa mengakses informasi setiap kali halaman blog dimuat.

Bagaimana optimalisasi CSS yang dapat kita lakukan?

1. Memecah dan menggabungkan kode HTML secara agregat.

Misalnya adalah kode HTML berikut,

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

Seharusnya  dapat kita ubah menjadi,

margin: 10px 20px 10px 20px;

Misalnya lagi adalah kode HTML berikut,

<p class="decorated">A paragraph of decorated text</p>
<p class="decorated">Second paragraph</p>
<p class="decorated">Third paragraph</p>
<p class="decorated">Forth paragraph</p>

Seharusnya kita ubah dan gunakan menjadi seperti berikut,

<div class="decorated">
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>

2. Menggunakan CSS Optimizer Tool.

Selain menggunakan cara manual seperti di atas, kita juga dapat menggunakan bantuan CSS Optimizer Tool untuk mempermudah pekerjaan kita. Dengan tool ini kita akan lebih simpel dalam menghapus whitespace yang tidak berguna, menggabungkan kode HTML yang sama, menghapus properti yang tidak berguna, dsb. Salah satu CSS Optimizer Tool yang dapat kita gunakan yaitu Clean CSS.

Bagaimana kawan?
Cukup mudah dipahami bukan?
Jika ada yang masih ingin ditanyakan silakan disampaikan lewat kotak komentar ya.
Salam blogger!

Jumat, 03 Juni 2011

Macam-Macam Kode HTML Warna

Sebuah warna yang biasanya kita jumpai sehari-hari jika dikonversikan dalam kode HTML ternyata memiliki kode HTML yang unik dan berbeda-beda. Kita sebagai seorang blogger setidaknya harus tahu tentang kode HTML warna ini, karena ini akan sangat berguna sekali bagi kita jika suatu saat kita ingin mengutak-atik dalam mendesain tampilan blog. Selain berguna saat kita melakukan editing template, pemahaman kode HTML warna yang baik juga akan memudahkan kita memberikan warna-warni dalam membuat isi postingan blog, meskipun cara untuk mewarnai tulisan dalam postingan blog tersebut sudah disediakan dalam fitur pembuatan postingan.


Apa saja kode HTML warna tersebut?
Berikut ini merupakan beberapa daftar kode HTML warna yang perlu untuk kita ketahui.

#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000

 

#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000

 

#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000

 

#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000

 

#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000

 

#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000


#465584
#EEF2F7
#3A4F6C
#00D
#434951
#555
#777
#DFE6EF
#345487
#F5F9FD
#3860BB
#BCD0ED
#C2CFDF
#F0F5FA
#D1DCEB
#003
#900
#CCE9FD
#E4EAF2
#4C77B6
#DFE6EF
#EEF2F7


Wah, banyak sekali ya?
Pemahaman terhadap kode HTML warna ini menjadi sangat penting bagi kita agar saat melakukan editing blog yang membutuhkan kode HTML kita bisa dengan mudah mengatasinya. Selain itu, dengan pemahaman kode HTML warna yang baik juga akan menambah wawasan kita tentang dunia blogging bukan?

Ada yang ingin bertanya?
Kalau ada yang belum jelas dan ingin bertanya atau menanggapi silakan disampaikan lewat kotak komentar di bawah ini ya kawan.
Salam blogger!
 

GEO Copyright © 2012 Fast Loading -- Powered by Blogger