Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts
Hay sobat DarkMLDC Yang unyu-unyu .
Kali ini admin akan membagikan Gimana Caranya membuat permalink Seo .

Screenshoot


Bagi yang ingin membuat , Simak Tutorial berikut .
Pertama agan masuk ke blog masing masing ,
Agan klik Edit HTML .
Agan cari code ]]><b:skin>
Ok jika sudah ketemu , copy code berikut dan paste tepat diatas code tadi .

.permalink-DMbenk{border:1px solid #efefef;padding:5px;background:transparent;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px}

Jika sudah , Jangan Disave Dulu .
Kita ke steep2 .
Masih di Edit HTML ,
Agan cari code <data:post.body/>
Jika sudah ketemu copy code berikut dan paste tepat dibawah code tadi .

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div class='permalink-DMbenk' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: justify;'>
<small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>. Anda boleh menyebarluaskan atau mengcopy artikel <strong><data:blog.pageName/></strong> ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.</small></div>
</b:if>
</b:if>

Kalau sudah , Jangan lupa di SAVE .
Ok sekian posting mengenai Cara membuat permalink Seo .
Semoga Bermanfaat .
Jangan lupa add FB saya yah AbenkSc Dan Follow Blog ini .
Terimakasih
Read More
Hay Sobat DarkMLDC Yang saya Sayangi dan saya cintai ,wkwkwkw :D
Kali ini saya ingin membagikan gimana caranya membuat Widget top komentar dengan avatar/gambar .

Untuk lebih jelasnya Silahkan lihat screensoot dibawah :


Ok bagi yang ingin membuatnya , Simak tutorial berikut

Masuk Ke blog agan masing masing ,
Tambahkan satu widget .
Dan masukan Code berikut Di kolom yang tersedia .

<style type="text/css">
    .top-commenter-line {margin: 3px 0;}
    .top-commenter-line .profile-name-link {padding-left:0;}
    .top-commenter-avatar {vertical-align:middle;}
    </style><br />
<script type="text/javascript">
    //
    // Top Commentators gadget with avatars, by MS-potilas 2012.
    // Gets a list of top commentators from all comments, or specified 
number of days in the past.
    // See http://aldoseo.blogspot.com/2012/10/cara-membuat-widget-
top-komentator.html
    //
    // CONFIG:
    var maxTopCommenters = 10;   // how big a list of top commentators
    var minComments = 1;        // how many comments must top commentator
 have at least
    var numDays = 30;            // from how many days (ex. 30), or 0
 from "all the time"
    var excludeMe = true;       // true: exclude my own comments
    var excludeUsers = ["Aldo SEO", "someotherusertoexclude"];     //
 exclude these usernames
    var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
    //
    var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
    var txtNoTopCommenters = 'No top commentators at this time.';
    var txtAnonymous = '';      // empty, or Anonymous user name
 localized if you want to localize
    //
    var sizeAvatar = 20;
    var cropAvatar = true;
    //
    var urlNoAvatar = "http://lh4.googleusercontent.com/
-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/
avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png
 resizeable
    var urlAnoAvatar = 'http://www.gravatar.com/avatar/
00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
    var urlMyProfile = ''; // set if you have no profile gadget on page
    var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
    // config end
    // for old IEs & IE modes:
    if(!Array.indexOf) {
     Array.prototype.indexOf=function(obj) {
      for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
      return -1;
    }}
    function replaceTopCmtVars(text, item, position)
    {
      if(!item || !item.author) return text;
      var author = item.author;
  
      var authorUri = "";
      if(author.uri && author.uri.$t != "")
        authorUri = author.uri.$t;
  
      var avaimg = urlAnoAvatar;
      var bloggerprofile = "http://www.blogger.com/profile/";
      if(author.gd$image && author.gd$image.src && authorUri.substr(0,
bloggerprofile.length) == bloggerprofile)
        avaimg = author.gd$image.src;
      else {
        var parseurl = document.createElement('a');
        if(authorUri != "") {
          parseurl.href = authorUri;
          avaimg = 'http://www.google.com/s2/favicons?domain='
 + parseurl.hostname;
        }
      }
      if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
        avaimg = urlMyAvatar;
      if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
        avaimg = urlNoAvatar;
      var newsize="s"+sizeAvatar;
      avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
      if(cropAvatar) newsize+="-c";
      avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  
      var authorName = author.name.$t;
      if(authorName == 'Anonymous' && txtAnonymous != '' 
&& avaimg == urlAnoAvatar)
        authorName = txtAnonymous;
      var imgcode = '<img class="top-commenter-avatar" height="'
+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" 
src="'+avaimg+'" />';
      if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  
      if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
        authorName = authorName.substr(0, maxUserNameLength-3) + "...";
      var authorcode = authorName;
      if(authorUri!="") authorcode = '<a class="profile-name-link" 
href="'+authorUri+'">'+authorcode+'</a>';
  
      text = text.replace('[user]', authorcode);
      text = text.replace('[image]', imgcode);
      text = text.replace('[#]', position);
      text = text.replace('[count]', item.count);
      return text;
    }
  
    var topcommenters = {};
    var ndxbase = 1;
    function showTopCommenters(json) {
      var one_day=1000*60*60*24;
      var today = new Date();
  
      if(urlMyProfile == "") {
        var elements = document.getElementsByTagName("*");
        var expr = /(^| )profile-link( |$)/;
        for(var i=0 ; i<elements.length ; i++)
          if(expr.test(elements[i].className)) {
            urlMyProfile = elements[i].href;
            break;
          }
      }
  
      for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i];
        if(numDays > 0) {
          var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
          var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],
datePart[3],datePart[4],datePart[5]);
  
          //Calculate difference btw the two dates, and convert to days
          var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
          if(days > numDays) break;
        }
        var authorUri = "";
        if(entry.author[0].uri && entry.author[0].uri.$t != "")
          authorUri = entry.author[0].uri.$t;
  
        if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
          continue;
        var authorName = entry.author[0].name.$t;
        if(excludeUsers.indexOf(authorName) != -1)
          continue;
  
        var hash=entry.author[0].name.$t + "-" + authorUri;
        if(topcommenters[hash])
          topcommenters[hash].count++;
        else {
          var commenter = new Object();
          commenter.author = entry.author[0];
          commenter.count = 1;
          topcommenters[hash] = commenter;
        }
      }
      if(json.feed.entry.length == 200) {
        ndxbase += 200;
        document.write('<script type="text/javascript" src="http://'+window.
location.hostname+'/feeds/comments/default?redirect=false&max-results=200&
start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters">
</'+'script>');
        return;
      }
  
      // convert object to array of tuples
      var tuplear = [];
      for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  
      tuplear.sort(function(a, b) {
        if(b[1].count-a[1].count)
            return b[1].count-a[1].count;
        return (a[1].author.name.$t.toLowerCase() < b[1].author.
name.$t.toLowerCase()) ? -1 : 1;
      });
  
      // list top topcommenters:
      var realcount = 0;
      for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
        var item = tuplear[i][1];
        if(item.count < minComments)
            break;
        document.write('<di'+'v class="top-commenter-line">');
        document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
        document.write('</d'+'iv>');
        realcount++;
      }
      if(!realcount)
        document.write(txtNoTopCommenters);
    }
    document.write('<script type="text/javascript" 
src="http://'+window.location.hostname+'/feeds/comments/
default?redirect=false&max-results=200&alt=json-in-script&callback=
showTopCommenters"></'+'script>');
</script>
<a href="
http://aldoseo.blogspot.com/2012/10/cara-membuat-widget-top-komentator.html" 
target="blank"><font color="red">-Get This-<font></font></font></a>

Source by : Aldo SEO
Read More
Halo sobat ,semua udah tau kan apa itu Banner slider .
Banner itu adalah gambar yang menunjukan sesuatu web , dan banner tersebut menjadi inisialnya .
Sedangkan slider yang berarti bergerak .

Contohnya seperti gambar dibawah .
Nah kurang lebih seperti itu ..
Ok bagi yang ingin membuatnya , simak baik baik tutotial berikut ya ..

Pertama-tama agan login ke blog agan , Terus agan Edit HTML .

Copy code HTML Dibawah dan letakan diantara kode html/didalam <body> dan </body>
(tergantung kamu mau diletakan dimana.)
<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='#' title='#'><img src='urlgambar'/></a></li>
<li>
<a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>

Keterangan :a href='#' (ganti tanda pagar ddengan URL link yang dituju)

title='#' (ganti dengan nama link yang dituju)

'urlgambar' (ganti dengan Url site yang dituju)




Yang kedua agan Letakan Code CSS Berikut diatas code ]]></b:skin>

#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;

}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}
Keterangan:Code berwarna hijau adalah posisi daipada banner itu .
                   Jadi atur Code tersebut untuk bendapatkan letak yang sesuai .

                   Dan banner tersebut hanya terbatas sampai 4 saja .

Sekian posting kali ini Mengenai Banner slider dengan CSS3.
Sourche : Blog johanes
Read More
Ok sekarang saya akan memberitahu gimana caranya memasang widget follower yang menghilang dari pilihan , mungkin hal ini pernah terjadi . Tanpa berpanjang lebar langsung saja kita lihat tutorial nya .

  • Kemudian masuk Ke Dashboard masing masing .
  • Di sebelah kanan Klik tulisan Pengikut . Lihat gambar yang saya lingkari dibawah
Cara menambah widget follower yang menghilang .
  • Setelah agan klik , Agan akan dibawa ke sebuah tempat seperti gambar dibawah ,
  • Kemudian agan klik Tambahkan Gadget Pengikut , Seperti gambar yang saya lingkari dibawah .
Cara menambah widget follower yang menghilang .
  • Setelah agan klik tombol tersebur , akan ada sebuah form yang muncul .
  • Jika form tersebut muncul Segeralah klik simpan .
Selamat Widget follower agan sudah terpasang .
Ok sekian posting mengenai Cara menambah widget follower yang menghilang .
Read More
Ok kali ini saya akan memposting cara membuat kotak dibawah header v1 .Kemaren saya sudah posting Cara membuat kotak dibawah header , dan yang sekarang versi 2nya .
Cara membuat kotak dibawah header v2
Sudah lihatkan fotonya , keren ga ?
ok bagi yang pengen tau cara membuatnya langsung saja ikuti tutorial berikut .

Siapin kopi dulu , jangan pake gula ya :D
rokok sampoerna 1 bungkus  .

ok kita nyalain dulu rokoknya ..
Masuk ke blog agan , klik EDIT HTML .
Copy code dibawah tepat diatas kode
]]><b:skin>


 #kotakbenkbenk{float:left;margin-left:55px;margin-top:-10px;border:6px solid #000;padding-top:20px;background:#1D2124 ;border-radius:15px;width:930px;height:200px;}
#benkbenk{float:left;background:#161719;position:center;border-right: 5px solid #000;
border-left:  5px solid #000;
border-bottom:  5px solid #000;
border-top: 3px solid #161719;padding:3px;border-radius:10px;width:160px;heigh:70px;margin-top:-30px;margin-left:600px;position:absolute;}
#benkbenk2{float:left;background:#161719;position:center;border-right: 5px solid #000;
border-left:  5px solid #000;
border-bottom:  5px solid #000;
border-top: 3px solid #161719;padding:3px;border-radius:10px;width:160px;heigh:70px;margin-top:-30px;margin-left:785px;position:absolute;}
#BENKheadlines{
float: left;
margin-left: 70px;
width: 320px;
height: 170px;
border-right: 5px solid #000;
border-left:  5px solid #000;
border-bottom:  5px solid #161719;
border-top: 5px solid #000;
background: #161719;
margin-top: -182px;
padding:3px;
border-radius:10px}
#benkbenk7{float:left;background:#161719;position:center;border-right: 5px solid #000;
border-left:  5px solid #000;
border-bottom:  5px solid #161719;
border-top: 5px solid #000;padding:3px;border-radius:10px;width:auto;heigh:auto;margin-top:132px;margin-left:450px;position:absolute;}

Jangan Disave Dulu gan . kita lanjut lagi .
Nyalain lagi rokoknya .
Agan cari code <div id='content-wrapper'> atau  <div id='content'>
kalau sudah ketemu agan masukan code dibawah tepat di atas code tadi .

<div id='kotakbenkbenk'>
<center><a href='-' target='_blank'>
<img alt='-' border='0' height='90' src='-' title='AnimesBakuhatsu' width='730'/></a></center>
</div>
<div id='benkbenk'>
<a href='www.blogger.com/follow-blog.g?blogID=7791197160955632295' title='Join this site / follow'><img height='70' onmouseout='this.style.opacity=0.5;this.filters.alpha.opacity=50' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='http://i.imgur.com/iSQcqFp.png' style='filter: alpha(opacity=50); opacity: 0.5;' width='160'/></a></div>
<div id='benkbenk2'><a href='http://melodicdark.blogspot.com/2013/04/cbox.html'><img height='70' onmouseout='this.style.opacity=0.5;this.filters.alpha.opacity=50' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://lh5.googleusercontent.com/-TpLHh4kMSlo/UXKN0z6707I/AAAAAAAAA1Y/NdeL1veKzsI/s160/jrKXjKM.png' style='filter: alpha(opacity=50); opacity: 0.5;' width='160'/></a></div>
<div id='BENKheadlines'><center><span style='color: #1D2124 ; font-family: &apos;Coda&apos;; font-size: 20px; text-shadow: #000 0px 0px 4px, #000 0px 0px 6px, #000 0px 0px 10px, #000 0px 0px 20px, #000 0px 0px 30px; '>Headline News</span></center><div style='overflow:auto; width:350px; height:150px; padding:0px; border:0px solid #000000;'>
<script src='https://chandra-yozers-comunity.googlecode.com/files/AC%20headlines.js'/>
<script>var numposts = 6; var showpostdate = true; var showpostsummary = false; var numchars = 100; </script>
<script src='http://melodicdark.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp'>
   </script></div></div>
<div id='benkbenk7'><a href='http://melodicdark.blogspot.com/' title=''><img height='auto' onmouseout='this.style.opacity=0.5;this.filters.alpha.opacity=50' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIduzdZP_STyQ0LePLt3ff1rRAcDplI48ARQRLTZteoidnNyr7x_ZJEra8gaLFRRoR4_rE3aJLhI902TIsXYKvCmBT0brb9DmRQgTL37Evcq6Qn42WLezTBviLNU9vxEBH4NdO5FKgbqQ/s1600/BannerDarkMelodic.gif.gif' style='filter: alpha(opacity=50); opacity: 0.5;' width='auto'/></a></div>

Catatan :
Ganti code yang berwarna MERAH dengan id follow blog agan
Ganti code yang berwarna PUTIH dengan url CBOX agan .
Code yang berwarna KUNING Jumlah headline yang mau ditampilkan
Code yang berwarna UNGU Ganti dengan gambar banner agan .


Jangan lupa sebelum menyimpan , klik pratinjau dulu .
Ok sekian posting mengenai.Cara membuat kotak dibawah header v2 .
Jangan lupa matiin rokoknya , sama dihabisin kopinya .
Read More
CSS Compression-Kompresi CSS, Percepat Loading Blog
Apa hubungan CSS dengan load time (waktu muat) halaman blog? Yang paling sederhana, ukuran file CSS menentukan berapa banyak bagian yang harus dibaca oleh browser. Semakin besar ukuran file, tentu saja bahasa perintahnya semakin banyak, dengan demikian 'waktu baca' yang dibutuhkan oleh browser semakin panjang. Anda dapat menggunakan website/blog speed test tool di blog ini untuk mengetahui kecepatan loading blog anda.
Setelah ganti template beberapa waktu yang lalu, masalah loading blog yang cenderung lebih lama daripada template yangsebelumnya muncul. Tentu saja hal ini berefek tidak baik. Yang pertama efeknya adalah ketidaknyamanan pengunjung. Terlebih lagi apabila muncul ketidaksabaran dan  kemudian diwujudkan dalam aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!". Yang kedua, Google saat ini telah melakukan penalti bagi website/blog yang memiliki waktu load yang terlalu lama. Walhasil, peringkat dalam indeks pencarian bisa turun, dengan kata lain SEO lemah.
Salah satu usaha yang saya lakukan adalah dengan mengkompres gambar PNG dengan PngGauntlet. Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya. Selain itu, dilakukan pula  beberapa langkah lain, salah satunya: melakukan perampingan CSS. Mudah-mudahan saat ini loadtime sudah berkurang meskipun belum maksimal (mudah-mudahan ga kelamaan ya).
Kembali ke CSS. File CSS adalah seluruh isi aturan style CSS yang ada di dalam template HTML, XML, maupun yang lainnya. Seluruh aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah, pada bagian ini, ada banyak aturan tidak perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak space semakin besar ukuran file.
Lalu bagaimana cara mengurangi ukuran file CSSnya?

1. Lakukan Editing CSS Secara Manual.
Ada beberapa contoh aturan berikut ini:
Misalnya aturan pada header-wrapper,
#header-wrapper {
background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}
Contoh di atas adalah penataan CSS secara standar, dimaksudkan agar browser dapat membaca aturan dengan baik dan urut. Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan seperti di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melakukan perampingan pada ruang-ruang tersebut. Contoh:
#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}
Pada contoh styling berikut:
{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }
Style margin di atas dapat kita rampingkan dengan CSS short-hand dan mengurangi spacenya:
{Margin:15px 10px;}
Karena nilai margin atas dan bawah sama serta nilai kanan dan kiri sama, kita dapat merampingkan dengan cara di atas, dimana 15px mewakili ukuran atas-bawah dan 10px mewakili kanan-kiri. Jika semua nilai margin sama, misalnya 15px, kita tinggal tuliskan: {margin:10px}. Perhatikan bahwa semua aturan nilai dimulai dari atas dan berjalan searah jarum jam: atas, kanan, bawah, dan kiri.

Ehm, sudah mulai pusingkah? Tidak kan? Bukankah belajar itu menyenangkan? ^^ Untuk melakukan cara-cara lain dan jika tertarik anda dapat mengunjungi W3 School.

2. Gunakan Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online
Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:
Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".

Langkah-langkahnya:
a. Copy semua aturan CSS dari template HTML/XML.
b. Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lains ebagainya.
c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman.
d. Download backup template terlebih dahulu pada halaman edit HTML.
e. Hapus bagian dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bagian tersebut.
f. Preview dan jika tidak ada masalah lagi, save.
Clue
Seluruh code CSS terletak di bagian head. Lebih tepatnya, semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.
Pilih jenis/opsi kompresi 'standard'  atau sejenisnya pada tool kompresi CSS yang anda gunakan.
Semoga bermanfaat dan Good luck.
Read More
Next PostNewer Posts Previous PostOlder Posts Home