loading...

Lagi Malas Posting SEO dan Trik Blogger

// 34 komentar

Ketupat Lebaran
Emang, kalau sudah kedatangan tamu "Malas", rasanya bikin apa saja jadi serba salah.  Enaknya sih dibawa tidur :-D   Dan sekarang sedikit kesempatan, OB manfaatkan untuk hanya sekedar ber-hello ria dengan kawan-kawan narablog.  Apalagi mumpung pas lebaran, pas kondisinya, pas waktunya, pas tempatnya, pas...pas...salonpas.  OB tidak akan mengupas atau berdiskusi tentang SEO atau trik blogger.  Namun untuk ngucapin ini nih:

Saat ada...
Tiada bersuara
Saat tiada...
Teriak sesal bergema
Sebelum adamu menjadi tiada bagiku

Izinkan sesalku menghampiri lembut dalam pangkuanmu
Mohon maaf lahir dan batin

Selamat Hari Raya Idul Fitri 1431 H

[ Baca selengkapnya ]

Animasi Transparent Navbar

// 35 komentar

Sumber : (blogspot) Animasi jQuery untuk Navbar by Ardianzzz

Yang perlu dijadikan catatan pada trik ini adalah kita tidak mengubah navbar bawaan default blogger, melainkan sedikit menambah kreasi agar navbar tersebut tampil lebih menarik. Di samping itu, ketika kita mengunjungi blog lain tidak jarang ditemukan blog yang memiliki kresi pada navbarnya, antara lain ; memasang auto hide, menindih navbar bawaan blogger dengan navbar lain, mengganti dengan jenis navbar lain, bahkan menghilangkan secara permanen navbar tersebut.

Nah, jika kamu tidak ingin menghilangkan navbar default tersebut, tapi hanya ingin memodifikasinya, mungkin trik blogger ini dapat menjadi salah satu referensi untuk diterapkan dalam blog kamu. Trik ini menampilkan navbar blogger secara transparan dengan menggunakan jQuery, namun akan terlihat ketika didekati oleh kursor mouse.  Adapaun jQuery-nya dapat disimak seperti di bawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.1); }); }); </script>

Silakan Copas jQuery di atas di atas tag </head>.

Catatan :
Ganti kode yang berwarna merah (0.1 = 90%) menggambarkan transparasi navbar pada saat belum didekati kursor mouse. Jika ingin navbar tidak nampak sama sekali letakkan saja nilai 0.0 :)

Ganti kode yang berwarna hijau (1.0) menjadi 0.75 jika ingin transparasi navbar saat didekati mouse bernilai 25%. Sedangkan jika tetap pada nilai 1.0, maka navbar akan terlihat sangat jelas (tanpa transparansi) saat didekati kursor mouse.
Selamat mencoba...

[ Baca selengkapnya ]

Kompres Kode CSS dan Javascript

// 33 komentar

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 :


Online YUI Compressor

  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. Hasil Compress
  7. 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

// 21 komentar

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 ]