Kompres Kode CSS dan Javascript

Sumber :  Compress Javascript dengan YUI Compressor by O-OM.

Mungkin kamu tahu & mengerti komponen-komponen apa saja yang menyebabkan suatu blog lambat loading (internal), antara lain :  Banyaknya assessoris blog (widget/gadget), menampilkan banyak image, tampilan full post di halaman utama (home), banyaknya script, dan lain-lain.  Atau kamu ingin mendefinisikan & menambahkan "dan lain-lain" dalam komentar.

Dalam trik blogger kali ini, kita akan mendiskusikan tentang bagaimana mengoptimalkan kode CSS & javascript agar sedikit banyaknya dapat lebih cepat loading.  Nah, layanan online yang dapat kita pergunakan untuk melaksanakan fungsi tersebut adalah Online YUI Compressor.  Cara menggunakan layanan ini juga tidak sulit, kita tinggal memasukan semua kode javascript yang ingin di-kompresi, ingat! tanpa memasukan tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> tapi hanya kode utamanya saja.

Adapun cara menggunakan Online YUI Compressor dapat direview seperti ulasan berikut :

1. Masukkan kode javascript dalam kotak "Code".
2. Pilih secara dropdown jenis file pada "File Type".
3. Selanjutnya untuk opsi-opsi kosongkan.
4. Klik tombol "Compress"
5. Tunggu beberapa saat file dikompres dan hasilnya akan ditampilkan tepat di bawah tombol "Compress".

6. Copy kode tersebut & paste di antara tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> dalam blog kamu.

Contoh :

• Javascript otomatis readmore.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>
</script>

Catatan :
Kode yang berwarna merah merupakan kode yang dimasukkan dalam kotak "Code" pada site Online YUI Compressor.

• Hasilnya setelah dikompres & dimasukkan dalam full kode Javascript otomatis readmore.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};

//]]>
</script>

Semoga bermanfaat...

[ Baca selengkapnya ]

Japaian Urang Banjar1 Template Release

Nah ini ada lagi satu template blogger yang tampil kalem (hitam-putih). Khusus bagi narablog yang suka menulis kehidupan kesehariannya, blog ini dapat menjadi template blog yang direkomendasikan. Namun tidak menutup kemungkinan narablog yang berkategori non-diary menerapkan template ini. Alkisah-nya promosi nih...

Kunjungi atau klik link berikut Japaian Urang Banjar1 Template Release untuk melihat tampilannya (sekaligus demo version). Sedangkan fitur-fitur & link downloadnya juga dapat kamu review serta download di blog tersebut. Sebagai tambahan fasilitas beda komentar antara owner blog dengan pengunjung sudah diaplikasikan dalam template Japaian Urang Banjar1 tersebut.

N/B :
Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".

Selamat mencoba...

[ Baca selengkapnya ]

Blogger Copy Template Release

Sudah lihatkan format dan gambaran tentang blog ini?  Kira-kira bagaimana menurut pendapat kamu ?  bagus, lumayan bagus, atau hampir bagus.  Lho...lho... kok bagus semua pilihannya.  Apabila kamu tertarik untuk mencoba template ini, maka akan OB tunjukkan link downloadnya.  Tapi sebelum kamu mendownload, mari kita review fitur-fitur yang diadopsi oleh "Blogger Copy Template" ini.

Blogger Copy Template support :

• Meta Tag SEO friendly.
• Favicon included.
• Horizontal navigation & search box.
• Bottom 3 column widget ready.
• Highlight author comments.
• Click the label showing the post title only.
• Paralel date header with comment link.
• Breadcrumbs included.

Sederhana bukan? Belum ditambahkan macam-macam script agar kamu yang mengadposi template blogger ini lebih leluasa untuk memodifikasinya. Berikut gambaran data waktu download (waktu halaman blogger copy template tampil penuh di layar monitor)  setelah dianalisa melalui Website Optimization.com (jelas cepat, karena belum banyak postingnya).

Hampir kelupaan, ini link downloadnya dijamin cepat tanpa ada banner/link iklan yang melingkupinya.

Versi demo

Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".  Cukup ganti link copyright-nya saja, karena letaknya sudah OB optimasi yakni penutup dari seluruh content blog (paling bawah pojok kanan).

[ Baca selengkapnya ]

Membuat "Back to Top"

Ketika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.

Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (Blog Rudi Azhar) yang merupakan salah satu admin optimasi blog.

Cara I :

• Tambahkan kode CSS berikut di atas kode ]]></b:skin>.

p.to-top {
font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;
font-size:90%;
float:right;
padding-right:10px; }

Keterangan :

1. font-family = keluarga bentuk teks yang akan kita tampilkan.
2. font-size = ukuran teks.
3. float = peletakkan teks (kanan atau kiri)
4. padding-right = jarak antara teks dengan bidang sebelah kanan.

• Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.
• Cari kode yang menunjukkan awal footer, seperti : <div class='footer-wrapper'>, <div class='footer'>, <div id='footer-wrapper'>, <div id='footer'>, & sejenisnya.
• Kemudian copas kode berikut di atasnya :

<p class='to-top'><a href='#to-top' title='back to top'>back to top</a></p>

• Jangan lupa melakukan edit pada kode <body> menjadi <body id='to-top'>
• Kemudian simpan template kamu.

Catatan :

1. Untuk peletakkan back to top tidak harus di atas footer.
2. Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.
3. Blog demonya ada di utuharies.blogspot.com.

Cara II :

• Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut & akan mengikuti scroll halaman.  Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("a[href*=#to-top]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
//]]>
</script>

Catatan :
Jquery di atas sudah dikompres (compress) menggunakan online YUI Compressor.

• Letakkan jquery back to top tersebut di atas kode </head>
• Tambahkan kode CSS berikut di atas ]]></b:skin>.

#back-to-top {right:20px;bottom:40px;position:fixed;}

• Ganti kode <body> dengan <body id='to-top'>
• Selanjutnya tambahkan kode berikut di atas kode </body>.

<div id='back-to-top'>
<a href='#to-top' title='Back to Top'><img alt='back to top' border='0' height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/></a>
</div>

Catatan :

1. height = tinggi image
2. width = lebar image
3. Silakan ganti image (http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu (Kenapa image tidak muncul?).

• Simpan template.

Selamat membuat back to top...

[ Baca selengkapnya ]