Presentasi

Dapatkah Anda mengambil daftar sederhana dan menggunakan CSS untuk membuat daftar pilihan yang berbeda secara radikal? Listamatic menunjukkan kekuatan CSS bila diterapkan ke daftar sederhana.

Nah, Anda bertanya untuk mereka. Daftar bersarang! Pilih dari salah satu dari meningkatnya jumlah sampel atau menyerahkan daftar Anda sendiri.

Leer más

Variasi bingkai untuk tampilan video kesayangan

Mungin anda sedikit bosan dengan tampilan video kesayangan anda ..., posting kali ini kami tampilkan beberapa variasi bingkai untuk video kita, bingkai ini juga bisa kamu variasikan untuk menampilkan  KOLEKSI FOTO,atau untuk membingkai koleksi TV STREAMING bisa juga koleksi TV ON LINE
Langsung aja :

Koleksi video dalam bingkai TV Flatroon

KODE yang bisa kamu ambil

<center><table background="http://miamitvchannel.com/images <div align=" center"=""></table><table background="https://lh4.googleusercontent.com/-bX_HJKkosFQ/TeWzku_c-dI/AAAAAAAAArw/XYnjV1FhK0I/monitor%2525202.jpg" border="0" cellpadding="0" cellspacing="0" height="350" style="width: 529px;"><tbody> <tr> <td align="center" height="350" valign="middle" width="767"><br /> <div class="separator" style="clear: both; text-align: center;"><b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 330px; width: 480px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" /></b></b></b></div><b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><br /> <br /> <br /> </b></b></b></td></tr> </tbody></table></center><br />

Koleksi video dalam bingkai IPOD







KODE yang bisa kamu ambil

<center><table background="http://miamitvchannel.com/images <div align=" center"=""></table><table background="https://lh6.googleusercontent.com/-dSeLAOMAN4o/TeZwNWhqGkI/AAAAAAAAAsQ/IABiE6bR_V8/s512/ipods.jpg" border="0" cellpadding="0" cellspacing="0" height="517" style="width: 271px;"><tbody> <tr> <td align="center" height="271" valign="middle" width="767"><br /> <div class="separator" style="clear: both; text-align: center;"><b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 340px; width: 230px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_2" data-original-id="BLOGGER_object_2" /></b></b></b></div><b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><br /> <br /> <br /> </b></b></b></td></tr> </tbody></table></center><br />

Koleksi video dalam bingkai KOMPUTER

KODE yang bisa kamu ambil

<center><br /> <table background="http://miamitvchannel.com/images <div align=" center"=""></table><table background="https://lh6.googleusercontent.com/-iiV_gTeKZDk/TgE0MK3chaI/AAAAAAAAAzU/Gg1OBuVCGZk/s576/5.jpg" border="0" cellpadding="0" cellspacing="0" height="508" style="width: 576px;"><tbody> <tr><td align="center" height="500" width="640"><div style="text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><b color:="" magenta;"=""><b style="color: magenta;"><b style="color: magenta;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 290px; width: 538px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_3" data-original-id="BLOGGER_object_3" /></b></b></b></div><b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><br /> </b></b></b><br /> <b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><br /> </b></b></b><br /> <br /> <b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><br /> </b><br /> </b><br /> </b></td></tr> </tbody></table><br /> </center>

Koleksi video dalam bingkai IPOD posisi miring







KODE yang bisa kamu ambil

<center><table background="http://miamitvchannel.com/images <div align=" center"=""></table><table background="https://lh6.googleusercontent.com/-ug09wxQus9Q/TfE-pyq5QfI/AAAAAAAAAtk/jevHvV9qxV8/s576/ipods.jpg" border="0" cellpadding="0" cellspacing="0" height="250" style="width: 576px;"><tbody> <tr> <td align="center" height="250" valign="middle" width="767"><br /> <div class="separator" style="clear: both; text-align: center;"><b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 255px; width: 350px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_4" data-original-id="BLOGGER_object_4" /></b></b></b></div><b style="color: magenta;"><b style="color: magenta;"><b style="color: magenta;"><br /> <br /> <br /> </b></b></b></td></tr> </tbody></table></center><br />

Tampilan video agak sedikit hot ...biar semangat gitu,  jika kamu tidak berkenan kamu dapat ganti dengan dengan KOLEKSI VIDEO kamu,

Selamat mencoba

Leer más

Embed player Murotal Mp3

Sejenak kita sejukan jiwa kita dengan lantunan ayat suci alqur'an

sebagai pelengkap untuk tampilan blog kita tempatkan Player mp3 murotal al qur'an 3gp yang berisi 11 ayat alqur'an , semoga bermanfaat.

<ul><img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; clear: left; float: left; height: 350px; width: 250px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" /></ul>

Leer más

Paginator 3000 Navi Indah Halaman Baru Untuk Blogger sistim geser

Paginator 3000 Navi Indah Halaman Baru Untuk Blogger Dengan Sistim Geser

saya akan Posting Navigasi Halaman baru yang dapat mendukung lebih dari 500, dan sekarang ini Navigasi halaman dapat mendukung lebih dari 500, Alhamdulillah.
Untuk membuatnya cantik saya menggunakan Pugin Baru dari WP Paginator
Plugin ini panggilan Paginator 3000
- Ide oleh ecto (ecto.ru)
- Dikodekan oleh karaboz (karaboz.ru)
Untuk melihat hasilnya terbuka ini
Demo

Langkah 1: Terapkan Style

1. Login ke Dashboard Blogger dan arahkan ke Layout> Edit Html
2. Dona't klik kotak centang yang mengatakan "Expand Template Widget"
3. Cari ini

]]></ B: skin>

dan menggantinya dengan

. Paginator {
margin-top: 60px;
font-size: 1em;
}
paginator tabel. {
border-collapse: keruntuhan;
table-layout: fixed;
width: 100%;
}
paginator tabel. td {
padding: 0;
white-space: nowrap;
text-align: center;
}
paginator span. {
display: block;
padding: 3px 0;
color: # fff;
}
paginator span. kuat,
. Paginator span {
padding: 6px 2px;
}
. Paginator span kuat {
background: # ff6c24;
font-style: normal;
font-weight: normal;
}
paginator.. scroll_bar {
width: 100%; height: 20px;
position: relative;
margin-top: 10px;
}
paginator.. scroll_trough {
width: 100%; height: 3px;
background: # ccc;
overflow: hidden;
}
paginator.. scroll_thumb {
position: absolut;
z-index: 2;
width: 0; height: 3px;
top: 0; kiri: 0;
font-size: 1px;
background: # 363636;
}
paginator.. scroll_knob {
position: absolut;
top:-5px; kiri: 50%;
margin-left:-10px;
width: 20px; height: 20px;
overflow: hidden;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHchEfCYRSq7JxyFGjte5zonnhbszzY1wFECNQN7FcF3B4kqeQ_OLvIBdslLkIFoCd_IgOcG53Irn8zPWzVr-dwqGz6dNPN66CKHwuVoo38iBOHWoAo1mqW2-w3thECXcmMNWJRcN7nZA/s1600/slider_knob.gif) no-repeat-50% 50%;
cursor: pointer; kursor: tangan;
}
paginator.. current_page_mark {
position: absolut;
z-index: 1;
top: 0; kiri: 0;
width: 0; height: 3px;
overflow: hidden;
background: # ff6c24;
}

fullsize.. scroll_thumb {
display: none;
}

. Paginator_pages {
width: 600px;
text-align: right;
font-size: 0.8em;
color: # 808080;
margin-top:-10px;

}
]]></ B: skin>

Langkah 2: Javascript Aplly

Cari ini:

</ Body>

Ganti dengan:

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'> </ script>
<script type='text/javascript'>
var home_page ="/";
var urlactivepage = location.href;
var postPerPage = 7;
numshowpage var = 6;
</ Script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</ Body>

Perubah berdasarkan pengaturan blog Anda:
var postPerPage = 7;
numshowpage var = 6;
PostPerPage: Berapa banyak Post setiap Halaman untuk blog Anda
numshowpage: Banyak cara nomor akan muncul pada halaman Anda Navigasi

Langkah 3: Customize Label

Buka halaman Edit HTML dan "Expand Template Widget"
Cari ini

'Data: label.url'

dan Ganti dengan ini

'Data: label.url + "? & Max-results = 7"'

Ubah 7 berdasarkan berapa banyak posting setiap halaman

Leer más

Halaman navigasi untuk Blogger

Halaman navigasi untuk Blogger dengan gaya Google menggunakan Script Baru

Bismillah, ..
Google, Yang tidak tahu google!? ..
Sebuah mesin pencari yang paling banyak digunakan oleh pengguna internet ... khususnya pengguna Blogger.
Sebenarnya Abu Farhan telah posting tentang navigasi halaman dengan gaya google ...
"Halaman Navigasi untuk Blogger dengan Google Style"
Namun dalam artikel yang hanya dapat digunakan pada skrip navigasi tua ..
Jadi saya membuat script css untuk gaya google menggunakan skrip navigasi baru ...
Harap perhatikan dengan teliti, css dan javascript skrip berbeda dari skrip saya sebelumnya ... Jadi ikuti petunjuk di bawah ini untuk berjalan dengan baik ...
Berikut ini adalah tampilannya



Demo ini untuk Gaya Google: 

Demo

Google Style:
Gaya google

Langkah 1: Terapkan Style

1. Login ke Dashboard Blogger dan arahkan ke Layout> Edit Html
2. Jangan klik kotak centang yang mengatakan 'Expand Template Widget'
3. Cari ini

]]></ B: skin>

Kemudian masukkan script di depan

]]></ B: skin>

script css. 

Contoh:

<br /> <br /> <pre># Blog-pager, blog-pager {background-color: # FFFFFF; width: 100%, text-align: center;}. td.showpageOf {display: none;} # Nav {font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0 auto;} # Nav a {display: block; text-decoration: none; color: # 0066FF} # Nav a: hover {text-decoration: underline;} # Nav ba, # nav ba: visited {color: # 0000CC; text-decoration: underline; font-weight: bold}.. . Skr {font-weight: bold;} CSB {background: url repeat (http://www.google.com/images/nav_logo7.png) no-0 0; height: 26px; display: block;}. csb.cur {background-position:-44px 0pt; width: 16px;}. . Csb.movenext {color: # 20c; background-position:-76px 0pt; margin-right: 42px; width: 66px;} . Csb.moveprev {color: # 20c; background-position: 0pt 0pt; margin-left: 42px; width: 44px;} csb.ch {background-position:-60px 0pt; width: 16px;}. # Nav td {padding: 0; text-align: center} ]]></ B: skin></pre><h3>

Langkah 2: Javascript ApllyCari ini:

</ Body>

Ganti dengan:

<br /> <pre><code> <script type='text/javascript'>; var home_page ='/'; var urlactivepage = location.href; var postPerPage = 7; var numshowpage = 4; var upPageWord = 'Sebelumnya'; var downPageWord = 'Berikutnya'; </ Script>; <script src='http://accordion-template.googlecode.com/svn/trunk/jsnavigoogle-packer.js' type='text/javascript'> </ script> </ Body>

Berubah berdasarkan pengaturan blog Anda:
var postPerPage = 7;
var numshowpage = 4;
PostPerPage: Berapa banyak Post setiap Halaman untuk blog Anda
numshowpage: Banyak cara nomor akan muncul pada halaman Anda Navigasi

Langkah 3: Customize Label (jika Anda sudah menggunakan saya sebelumnya Halaman

Navi tidak menggunakan langkah ini)

Buka halaman Edit HTML dan "Expand Template Widget"

Cari ini (semua teks ini dalam xml atau template)

'Data: label.url'

dan Ganti dengan ini

'Data: label.url + "? & Max-results = 7"'

Ubah 7 berdasarkan berapa banyak posting setiap halaman.

Leer más

Membuat Spoiler Di Blogspot

Temen-temen pasti sudah akrab dengan istilah Spoiler. Spoiler biasanya digunakan pada forum , untuk menyembunyikan content yang terlalu besar size-nya, seperti foto. Sehingga waktu loding halaman menjadi sedikit berkurang. Nah, temen-temen juga dapat memasang spoiler di blog temen-temen. Spoiler ini dapat temen-temen manfaatkan untuk menyembunyikan foto, video, atau daftar link.

Banyak dari variasi yang dapat kita buat dari Sript spoiler dasar tergantung dari kreatifitas kita dankegunaan spoler itu sendiri, berikut Spoiler yang di modivikasi untuk menampilkan ber bagai macam variasi efek marquue

DEMO Efek Spoiler

Variasi efek Marquue

........................ISI....POSTING 1................................
DEMO Beberapa variasi contoh marquee

1.marquue scrol up bingkai tv flat

Rubrik Elektronik


Electronic Rubric


Kolom iklan

1.Marquee dari kanan ke kiri

........................ISI....POSTING 2................................


marquee dari kanan ke kiri

2.marquee dengan variasi hurup dan background warna

........................ISI....POSTING 3................................

Variasi efek marquue

3.marquee teks Mouse stop

........................ISI....POSTING 4................................


silahkan tunjuk ke sini

4.Marquee yang di dalam nya terdapat link

........................ISI....POSTING 5................................


Rubrik Elektronik


Electronic Rubric


Kolom iklan

Leer más

Efek Image Bubble untuk Mempercantik Blog

Efek Image Bubble untuk Mempercantik Blog

• 
• 
• 
• 

Efek Image Bubble adalah gabungan antara efek transisi dan transformasi dimana ketika kita me-mouseover suatu gambar, gambar tersebut akan bergerak menjadi lebih besar dan kemudian kembali ke ukuran semula ketika mouse tidak lagi di atasnya. Dan mungkin ada Temen-temen yang mengira kalau efek tersebut menggunakan JavaScript!? Tidak Teman, efek tersebut hanya menggunakan CSS, tepatnya CSS3. Berikut TB sajikan Tutorial membuat Efek Image Bubble :

Kode CSS:

Letakkan kode dibawah ini sebelum kode ]]></b:skin>

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

Kode HTML

<style type="text/css">

<ul class="bubblewrap">

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img225.imageshack.us/img225/7335/stumbleupon.png" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img812.imageshack.us/img812/3326/facebookfq.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img697.imageshack.us/img697/9117/diggi.png" title="Add to Digg" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img96.imageshack.us/img96/194/twitterad.png" title="Add to Twitter" /></a></li>

<li><a href="http://www.tutorial-blog.co.cc/"><img src="http://img258.imageshack.us/img258/1686/rssin.png" title="Add RSS Feed" /></a></li>

</ul>

Temen-temen bisa memilih dimana akan meletakan gambar dengan efek image bubble tersebut, apa di posting atau di elemen HTML. Jika di postingan maka tinggal copy-paste kode HTML tersebut pada Edit HTML posting. Jika ingin meletakan di Elemen Halaman maka Pilih Tambah Gadget (pada Rancangan, Elemen Halaman), kemudian pilih HTML/ JavaScript, nah, tinggal pastekan kode HTML di atas. Simpan deh.

Gambar yang digunakan tidak harus selalu berupa social bookmarks icons. Temen-temen dapat memilih gambar milik Temen-temen sendiri. Hosting-kan terlebih dahulu gambar Temen-temen, lalu co-pas direct URL gambar Temen-temen ke kode <img src="........"/>.
Dan juga gambar tidak harus berupa link, jika gambar hanya berfungsi sebagai penghias saja maka link dapat dihapus.

Leer más

Efek Hover Image Gallery

Efek Hover Image Gallery

Image Gallery Hover Effect atau Efek Hover Image Gallery merupakan efek pada sebuah gambar dimana ketika gambar tersebut di-mouseover maka gambar akan melayang dan mendekat ke pengguna. Hampir sama dengan efek image bubble pada postingan TB sebelumnya, namun dengan tambahan efek floating. Efek ini memungkinkan gambar akan terlihat seperti melayang di atas halaman. Berikut demonya:

Contoh gambar efek hofer

Sebelumnya Tutorial Blog telah mem-posting beberapa tutorial mengenai efek untuk image yaitu, efek image opacity dan efek image bubble yang dibuat menggunakan kode CSS3. Nah untuk postingan kali ini TB akan memberikan tutorial mengenai efek hover image gallery dan juga masih menggunakan kode CSS3. TB harap Temen-temen tidak bosan dengan tutorial efek image ini, ya 

Kode CSS

Letakkan kode CSS berikut sebelum  ]]></b:skin> lalu SAVE.

<style type="text/css"> /*URL: http://www.tutorial-blog.co.cc */ .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style>

<style type="text/css">
/*URL: http://www.tutorial-blog.co.cc */

.hovergallery img{

-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/

-moz-transform:scale(0.8); /*Mozilla scale version*/

-o-transform:scale(0.8); /*Opera scale version*/

-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/

-moz-transition-duration: 0.5s; /*Mozilla duration version*/

-o-transition-duration: 0.5s; /*Opera duration version*/

opacity: 0.7; /*initial opacity of images*/

margin: 0 10px 5px 0; /*margin between images*/

}

.hovergallery img:hover{

-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/

-moz-transform:scale(1.1); /*Mozilla scale version*/

-o-transform:scale(1.1); /*Opera scale version*/

box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/

-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/

-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/

opacity: 1;

}

</style>

Temen-temen bisa mengubah skala image sesuai keinginan dengan mengganti angka dalam kurung (1.1) atau bisa juga mengubah settingan shadow sesuai keinginan.

Kode HTML
Temen-temen tinggal menambahkan kode berikut ini di postingan atau di mana pun sesuai keinginan Temen-temen:

<div class="hovergallery">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7i5s9Kn0LKUpT_yJEa4HXanUxnXqykr6G_XrxnVm3cpLKoX3I8uk_aIkLeoy6vJKiwwfPuuiCmoZoxqBSVk6DUBC7jAJkVr1bm9iQ1b11GMjnE6Jlbjoj_CYrHKPDfh3acDSFg6kaW_M/s1600/menjadi+blogger+yang+baik.jpg" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGpbmGMlJjJ8Fkf1kPeTM8EPTQWYu50lx6SgKfct0NzfRaTn19291ETSESFsaFYh_yBaX-QHJFAQbl63n8Uka3EdJpju9dwN7Tq-0GvRYibaqsybiEN6y87C-BnMZzD0OngQJkoWYt3Gw/s1600/blogger.jpg" />

</div>

Tidak harus selalu memakai <div>, jika Temen-temen ingin lebih mudah dalam menerapkan efek ini pada gambar di postingan maka setelah Temen-temen mengupload sebuah gambar (ketika posting), tambahkan kode class="hovergallery" pada tag <a>. Haduu bingung ya!?
Misal:
Kode image awal:

<a href="http://1.bp.blogspot.com/.........."><img src="http://1.bp.blogspot.com/.../menjadi+blogger+yang+baik.jpg" /></a>

Nah, terus tinggal ditambahkan deh class="hovergallery" menjadi:

<a class="hovergallery" href="http://1.bp.blogspot.com/..jpg"><img src="http://1.bp.blogspot.com/.../menjadi+blogger+yang+baik.jpg" /></a>

Selesai sudah. (Simpan dulu pastinya ^_^ )

Leer más

15 Cara Optimasi Blog Agar Tampil Lebih Cepat

  Need for speed up your blog?  Siapa yang tidak ingin halaman blog-nya tampil lebih cepat, pada kenyataannya selain kualitas konten, faktor kecepatan loading page lah yang sangat besar pengaruhnya


Tips cara Optimasi blog
Nah, disini saya mencoba memberikan tips cara Optimasi blog agar bisa tampil lebih cepat.

1. Aktifkan Kompresi dengan GZIP
Browser modern biasanya mendukung kompresi untuk HTML, CSS dan Javascript. Melakukan kompresi pada ketiga file tersebut tentu akan menghemat waktu loading halaman dan secara otomatis tentu akan terjadi pengurangan waktu download. Para Webmaster pintar diluar sana sangat menyarankan kita menggunakan kompresi dengan Gzip. Untuk teknik dan tutorial Gzip silahkan disearch aja ya. Jika pembaca menggunakan Platform Blogspot abaikan saja kompresi ini karena secara default blogspot sendiri sudah mendukung teknik tersebut. Untuk pengguna Plaform lain seperti Wordpress silahkan menggunakan Kompresi Gzip ini atau kalau gak mau repot pake Gzip sebaiknya gunakan saja plugin
WP Super Cache.

2. Buang Spasi kosong pada kode HTML
Membuang Spasi kosong termasuk juga dalam teknik kompresi, yaitu dengan memadatkan kode HTML, XML atau PHP dengan cara membuang spasi yang dirasa tidak berguna. Salah satunya  termasuk juga dalam Inline untuk kode Javascript dan CSS. Dengan menghapus ruang kosong tentunya akan menyimpan banyak byte data dan imbasnya akan mempercepat waktu proses download. Untuk membuang Spasi yang tidak perlu saya biasanya menggunakan Tools Editor seperti Notepad++. Caranya sangat mudah, yaitu dengan mem-blok semua kode yang ingin dibuang spasinya kemudian pilih menu TextFX -> TextFX Edit dan pilih Delete Blank Lines atau Delete Surplus Blank Lines.

3. Lakukan Kompresi CSS (Stylesheet)
Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan sepertiYUI Kompresor dan cssmin.js.

4. Letakan CSS (Stylesheet) di Atas
Adakalanya kita tidak meletakan CSS di header, biasanya cara tersebut kita gunakan untuk membuat Style tunggal untuk gaya tertentu pada widget. Para webmaster yang ahli biasanya menyarankan kita sebaiknya memanggil semua kode CSS pada halaman HEAD entah itu CSS Internal maupun CSS External semuanya sebaiknya dijadikan satu pemanggilan dalam Header.

5. Buang CSS (Stylesheet) yang tidak perlu
Ketika browser mengakses halaman, biasanya harus melalui proses download dan menganalisa setiap baris kode dalam CSS (stylesheet) terlebih dahulu, bayangkan jika banyak kode CSS percuma yang harus diproses namun  tidak dieksekusi sama sekali! ini akan sangat mengganggu karena akan menghambat proses rendering yang harusnya lebih cepat!

6. Periksa Validasi CSS (Stylesheet)
Walaupun sering terjadi kesalahan dalam menulis kode CSS, broser tidak akan menampilkan pesan kesalahan apapun dalam layar, semua eksekusi akan terus dijalankan tanpa adanya laporan error meskipun itu hanya salah dalam satu huruf saja. Sebaiknya jangan abaikan kesalahan ini, silahkan check validasinya. Untuk lebih mudahya silahkan gunakan tools online gratis seperti W3C CSS Validations

7. Kombinasi CSS (Stylesheet) dalam file External
Kekurangan CSS Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan kode CSS melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua kode CSS hanya dalam satu file saja.  (untuk pengguna blogger abaikan teknik ini karena akan lebih bagus dengan pemanggilan internal)

8. Lakukan Kompresi Javascript
Teknik kompresi Javacsript hampir sama dengan CSS yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean Javacript juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada javascript silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor, Closure Compiler dan JSMin

9. Buang Javascript yang tidak Perlu
Suka tidak suka penggunakan javacript (JS) kadang sangat diperlukan, walaupun JS kadang membuat loading halaman akan semakin berat. Ketika browser mengakses suatu halaman, biasanya harus melalui proses download dan menganalisa kode dalam JS terlebih dahulu, bayangkan jika banyak pemanggilan JS secara percuma yang harus diproses namun tidak dieksekusi sama sekali! Silahkan teliti kembali kode JS yang menurut kita tidak berguna, cek ulang dan jangan sampai parkir terlalu lama, jika tidak digunakan lagi mending hapus saja!

10. Kombinasi Javascript dalam file External
Hampir sama kasusnya dengan CSS External diatas, Kekurangan javascript Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua koding JS hanya dalam satu file saja.

11. Lakukan Optimasi Gambar
Website dinamis tanpa dihiasi gambar tentu tidak akan menarik, namum penggunaan gambar yang berlebihan akan menjadi masalah ketika browser melakukan download pada halaman. Sebaiknya kurangi gambar yang tidak perlu, terlebih pada gambar yang mempunyai ukuran cukup besar. Jika memang terpaksa menggunakannya, sebaiknya lakukan optimasi pada gambar tersebut dengan cara melakukan kompresi tanpa harus mengurangi kualitas gambar. Saran saya silahkan gunakan Yahoo! Smush.it

12. Jangan Paksa Skala Gambar dalam HTML
Hindari menggunakan gambar yang besar hanya karena kita dapat mengatur lebar dan tinggi dalam HMTL, Kita memang bisa mengatur ulang gambar sesuka hati melalui CSSatau dalam tag <Img> seperti pada html berikut ini <img width="100" height="100" src="gambar.jpg"/> walaupun ukuran gambar sebenarnya adalah200x200px sebaiknya jangan mengecilkan dengan mengatur ulang skala gambar, akan lebih baik kita membuat gambar 100x100px sesuai dengan ukuran gambar sebenarnya.

13. Hindari Gambar SRC kosong
Pemanggilan tag SRC untuk gambar biasanya ada pada dua kemungkinan, bisa melalui HTML<img scr=""> atau memalui Javascript var img = new Image(); img.src = ""; walaupun browser mengabaikan permintaan ini jika gambar dalam keadaan kosong, tetap saja ini melalui proses rendering yang harusnya tidak membebani server. Silahkan perikasa kembali blank SRC, Jika memang tidak digunakan mending dihapus saja.

14. Periksa Kembali Broken link
Link yang telah mati bakal tidak disukai pembaca, jangankan pembaca..search engine sekalipun tidak menyukai hal ini. Lakukan pengecekan broken link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini, salah satunya yang terbaik bisa menggunakan tools dariW3C Checklink

15. Buang Widget atau plugin yang tidak Perlu
Widget yang terlalu banyak hanya membuat halaman jadi semakin berat, apalagi widget tersebut tidak begitu berguna. Silahkan kita pilah-pilah kembali widget yang sekiranya tidak ada maanfaat sama sekali seperti memasang jam dan kalender. Tanyakan pada diri kita sendiri apa gunanya memasang jam di blog, jika hanya sebagai penunjuk waktu. Lebih lengkapnya bisa Anda baca di posting Optimisasi Widget pada Blogger.

Itulah beberapa tips untuk mengoptimisasi loading blog Anda sehingga menjadi lebih cepat diakses oleh pengunjung dengan harapan pengunjung bisa lebih lama di blog Anda .

Leer más