Bisnis Dunia Digital

Berbagi informasi seputar internet marketing dan berbagai bisnis internet

Techno-Blog

Berbagi informasi seputar cara membangun website atau Blog, tips dan trik Blogging

Pencerahan Hati

Menelaah diri dengan bercermin pada diri sendiri

Review Gadget

Review Gadget terbaru dan terpopuler, informasi harga, dan referensi pembelian

Simple Strategy

Build Your Business

Kamis, 26 April 2012

Kompresi CSS dengan Compressor Tool Online



Diperlukan pengetahuan dan pengalaman cukup untuk dapat mengedit kode CSS secara manual. Misalnya, kode Header Wrapper secara standar tertulis seperti ini

#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;
}

Apa yang perlu anda edit?
Perhatikan code CSS tersebut dengan hasil editing di bawah ini

#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;}

Kode tersebut menjadi lebih simpel dan ringan saat diloading. Bagi anda yang masih awam dengan kode CSS seperti ini, pasti masih bingung (jangan mengira saya tidak..)

Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:
-CSS Drive Gallery
-CSS Compressor
-Online CSS Optimiser/Optimizer
-Minify CSS
-CSSTidy Online

Bisa juga anda mencarinya sendiri di Search Engine 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 lain sebagainya.
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 aturan CSS tadi dan masukkan hasil kompresi ke bagian tersebut.
f. Preview dan jika tidak ada masalah lagi, save.

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.

Rabu, 25 April 2012

Mempercepat Loading Blog Dengan Hosting CSS External



Salah satu cara supaya blog anda lebih cepat dalam proses loading adalah dengan melakukan compress terhadap kode CSS (Cascading Style Sheets, adalah bahasa styling yang seringkali kita tambahkan pada HTML). Rapikan kode-kode CSS yang tidak perlu, jadikan satu bagian supaya lebih tampak kecil dan ringan.

Misalnya kode padding-top : 3px, padding left : 3px, padding bottom : 4x, padding right : 5px, bisa kita jadikan satu bagian menjadi padding : 3px 3px 4px 5px. Dengan melakukan ini berarti anda telah mempercepat loading blog. Saran saya sih jika anda belum memahami cara penulisan kode CSS lebih baik jangan dirubah.

Selain cara tersebut, kode CSS yang terlalu banyak yang menyatu dengan template blog, juga bisa memperlambat loading blog anda. Solusinya, kita bisa menggunakan CSS eksternal, yaitu dengan menyimpan kode CSS tersebut pada hosting, lalu kita tinggal menambahkan sebuah kode dalam template untuk memanggilnya.

Untuk hosting CSS kita bisa gunakan Google, karena Google mempunyai sebuah produk gratis untuk hosting berbagai jenis file dan tentu saja Blogger juga bagian dari Google sehingga akses file jadi lebih cepat. Salah satunya anda bisa manfaatkan Google Project atau yang lebih sederhana dengan cara hosting CSS di Google sebagai berikut :

1. Buka Google Sites lalu klik Create site
2. Isi title site anda pada kolom Name your Site, lalu klik Create site
3. Pilih tab create page yang ada dikanan atas site yang sudah anda buat tadi
4. Pilih File Cabinet, lalu isikan judul pada kotak name, dan klik create page
5. Klik add file, dan cari file css anda yang sudah anda simpan dalam computer. Kalau sudah selesai tekan upload.
6. Salin urlnya pada link unduh. Biasanya akan seperti ini :
https://sites.google.com/site/bloggerafif0/mycss/ blogerafif0.css?attredirects=0&d=1
7. Letakkan kode css itu pada template anda, dengan menghilangkan kode yang berwarna merah
? attredirects=0&d=1
8. Cara menuliskannya
<link rel='stylesheet' href=’https://sites.google.com/site/bloggerafif0/mycss/ blogerafif0.css' type='text/css'/>

Letakkan kode ini setelah kode </title> atau setelah kode favicon anda.

Tips ini hanya salah satu cara untuk mempercepat loading blog, masih ada elemen lain yang dapat mempengaruhi kecepatan loading blog, seperti ukuran file gambar, meletakkan urutan widget, dan lain sebagainya, bisa anda simak dipostingan saya berikutnya.

Senin, 23 April 2012

Membuat Menu Navigasi Horizontal Drop down


Memenuhi janji saya atas permintaan seorang teman, berikut ini saya coba sajikan cara membuat menu navigasi horizontal dengan tampilan drop down menu.


Langkah-langkahnya sebagai berikut :

1.Login Blogger >> Rancangan >> Edit HTML >> Copy kode dibawah ini dan taruh di atas kode mirip ]]></b:skin>

/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHm2SU97-VbG56C6d2ar_gLK5wITf10i0RveiwkEinKcysiwljzPSLfj0qQQ3nyrq-GBeFYNb4O0sgnAWi4BZv02llxrNjsc0npXHcE6VDlVbscK5GmIP2KIGerJD54DpQcI04Jqr_EV0b/ s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}

2. Berikutnya silakan cari kode , lalu taruh kode di bwah ini tepat di atas </head>

<!--Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[ function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com if(navigator.appVersion.indexOf("MSIE")==-1){return;} var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar'; for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){ lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){ lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs; this.className=cl;};lg[k].onmouseout=function(){c=this.className; this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}} //]]> </script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;}
</style> <![endif]-->

3. Setelah selesai kita akan menambahkan dan memunculkan navigasinya. Caranya dengan menaruh kode ini di bawah <body>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'> <li class='selected'>
<a href='/'>Home</a></li>
<li><a href='#'>Peristiwa</a></li>
<li'><a href='#'>Hiburan</a></li>
<li><a href='#'>Sport</a> <ul>
<li><a href='#'>Bola</a></li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>F1</a></li>
</ul>
</li>
<li><a href='#'>Politik</a></li>
<li><a href='#'>Hukum</a></li>
<li><a href='#'>Kesehatan</a></li>
<li><a href='#'>Tekno</a></li>
<li><a href='#'>Tutorial</a> <ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</li>
<li><a href='#'>Lowongan Kerja</a></li>
<li><a href='#'>Pendidikan</a></li>
<li><a href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'></li>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>


Catatan: Silakan ganti "#" link-link di atas dengan link artikel milik anda dan nama menu di blog.
laptop
xiaomi