bMinify : Tool Baru "Meminimalkan" Kode CSS

Terinspirasi dari tools-tools di website yaitu css compressor dan css minify. Fungsi css minify untuk mengecilkan ukuran css itu sehingga tidak terlalu besar. Selain itu juga dapat melindungi style (css) blog anda dari cloner (penjiplak template). Kalau saya lihat css compressor lebih banyak mengkompres ukuran css dibanding menggunakan minify. Karena css compressor ikut serta mengoptimiskan kode css yang anda kompres. CSS Minify hanya menghilangkan spasi dan line break yang tidak penting.

Tool ini merupakan tool simpel. Cara kerja tool ini adalah menghilangkan line break. Saya teliti lumayan bisa menghemat ukuran file css hingga 100 kb bahkan lebih, tergantung berapa kilo byte(s) ukuran file css anda. Walaupun cara kerjanya simpel, tapi saya harap tool ini dapat membantu anda.

Penggunaan

1. Masukkan kode yang akan di minimal-kan.
2. Klik tombol Minify 
3. Klik Select All untuk menyeleksi kode, dan Clear All untuk menghapus.

Read More

Mini Social Icon Dengan CSS Sprite

Baru blogwalking ke blog-blog lain. Kali ini yang saya kunjungi adalah blog Spiceupyourblog. Tahu kan blog spiceupyourblog? Pasti kalau anda penggemar Google dan suka googling, sengaja tidak sengaja pasti anda menemukan spiceupyourblog dalam list google search. Nah, lagi kunjungan tidak sengaja menemukan widget mini social icon ini. Mini social icon ini menggunakan teknik CSS Sprite.

Apa sih CSS Sprite? Jadi CSS Sprite itu adalah suatu teknik dalam dunia CSS yang menggunakan satu gambar saja untuk menciptakan efek hover. Menggunakan teknik ini, membuat loading blog anda lebih cepat dan efeknya lebih smooth. Teknik ini memainkan atribut background-position pada pseudo class :hover. Tetapi bukan berarti hanya background-position saja yang anda tulis. Anda juga dapat menambahkan kode CSS lainnya, namun dasarnya hanya menggunakan background-position saja.

Live Demo

Menambahkan Widget 

1. Login ke akun Blogger anda.

2. Masuk ke Dasbor > Tata Letak > Add Gadget (anda dapat meletakkan pada sidebar, footer, dll.)

3. Pilih HTML/Javascript.

4. Isi dengan kode dibawah ini : 

<ul class="social-sprite">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.social-sprite{float:right}ul.social-sprite li{float:left;list-style:none outside none;border:0}ul.social-sprite li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VljJ3vseY3PKTFVhhxW7OFxnPumiGSgSnwHfyw-Akl_NYjLca1ztDYH8b0qr_Fz0BfqFedzspoLdsVysfPuDAiliR7IRE_R2VC0N4d1l7PDqIffHsiLDHQJWEFjnDxTjKfaIKkNIr0rZ/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:#fff;direction:ltr;display:block;height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all .2s ease 0s;width:32px}.ie7 ul.social-sprite li a,.ie8 ul.social-sprite li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VljJ3vseY3PKTFVhhxW7OFxnPumiGSgSnwHfyw-Akl_NYjLca1ztDYH8b0qr_Fz0BfqFedzspoLdsVysfPuDAiliR7IRE_R2VC0N4d1l7PDqIffHsiLDHQJWEFjnDxTjKfaIKkNIr0rZ/s1600/spice-social-gadget-sprite.png' )}ul.social-sprite li.facebook a{background-position:0 0}ul.social-sprite li.flickr a{background-position:-32px 0}ul.social-sprite li.dribbble a{background-position:-64px 0}ul.social-sprite li.googleplus a{background-position:-96px 0}ul.social-sprite li.linkedin a{background-position:-128px 0}ul.social-sprite li.pinterest a{background-position:-160px 0}ul.social-sprite li.rss a{background-position:-192px 0}ul.social-sprite li.skype a{background-position:-224px 0}ul.social-sprite li.twitter a{background-position:-256px 0}ul.social-sprite li.vimeo a{background-position:-288px 0}ul.social-sprite li.youtube a{background-position:-320px 0}ul.social-sprite li.facebook a:hover,#sidebar ul.social-sprite li.facebook a:hover{background-position:0 -32px}ul.social-sprite li.flickr a:hover,#sidebar ul.social-sprite li.flickr a:hover{background-position:-32px -32px}ul.social-sprite li.dribbble a:hover,#sidebar ul.social-sprite li.dribbble a:hover{background-position:-64px -32px}ul.social-sprite li.googleplus a:hover,#sidebar ul.social-sprite li.googleplus a:hover{background-position:-96px -32px}ul.social-sprite li.linkedin a:hover,#sidebar ul.social-sprite li.linkedin a:hover{background-position:-128px -32px}ul.social-sprite li.pinterest a:hover,#sidebar ul.social-sprite li.pinterest a:hover{background-position:-160px -32px}ul.social-sprite li.rss a:hover,#sidebar ul.social-sprite li.rss a:hover{background-position:-192px -32px}ul.social-sprite li.skype a:hover,#sidebar ul.social-sprite li.skype a:hover{background-position:-224px -32px}ul.social-sprite li.twitter a:hover,#sidebar ul.social-sprite li.twitter a:hover{background-position:-256px -32px}ul.social-sprite li.vimeo a:hover,#sidebar ul.social-sprite li.vimeo a:hover{background-position:-288px -32px}ul.social-sprite li.youtube a:hover,#sidebar ul.social-sprite li.youtube a:hover{background-position:-320px -32px}
 </style>

5. Klik Simpan dan lihat hasilnya!

Catatan : 

• Setiap icon ada alamatnya misalnya http://twitter.com/ . Nah, anda ganti link tersebut sesuai dengan alamat twitter anda. Begitupun juga dengan Vimeo, Youtube, Facebook, dll.
• Jika anda tidak ingin menampilkan salahsatu icon social media, anda hanya menghapusnya mulai dari <li class="....."> sampai </li>. Misalnya anda tidak ingin menampilkan Vimeo. Maka yang anda hapus adalah <li class="vimeo"><a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a></li>.

Read More

Pasang Widget Dynamic Social Bookmark

Sosial media adalah tempat kita bersosialisasi menggunakan internet. Tentunya agar kita mendapat followers yang banyak atau teman yang banyak, kita dapat bahkan setidaknya ada widget sosial ini. Baik itu yang melayang, yang ada di postingan, di sidebar, atau lainnya. Sekarang saya akan membahas tentang cara memasang widget dynamic social bookmark ke Blogger. Nampak seperti apa sih widget Dynamic Social Bookmark ini?

Live Demo

Menambahkan Script jQuery

1. Login ke akun Blogger anda.

2. Masuk ke Dasbor > Template > Edit HTML

3. Cari kode </head> .

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

4. Taruh kode ini tepat sebelum kode </head> . Untuk kode yang di highlight, jika kode tersebut sudah ada di bagian template anda, maka tidak perlu ditambahkan lagi ke template anda.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

<script language='javascript'> 
var name = &quot;#floatMenu&quot;;
var menuYloc = null;
$(document).ready(function(){menuYloc = 
parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css 
(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;$(name).animate({top:offset},{duration:1000,queue:false});});}); 
</script>

Menambahkan Kode CSS

1. Cari kode ]]></b:skin>

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

2. Setelah ketemu, letakkan kode dibawah ini tepat sebelum kode tersebut.

#floatMenu {position:absolute;top:150px;float:left;width:45px;}
#floatMenu ul {list-style: none;}
#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}
#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}

Menambahkan HTML

1. Cari kode </body>.

    Catatan : Pertama klik pada kode apa saja yang ada di editor, lalu tekan CTRL+F untuk mencari.

2. Letakkan kode ini tepat sebelum kode tersebut.

<div id='floatMenu'>
<ul>
<li><a href='http://facebook.com/bloggingforstyling' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lj7uyJYdbgjy1dPxY_fmxcVp1bXo-tyT-cVgUyVws6pHk_OIgcWW4rBKQLIpn8LJxmH7CplI3tb6decT-Af9De7mzpMUSTW7KFy8mZ0EkQ0uyOB_e8ofUr1DsbYgZWLvPI6DMXT39bM/s1600/btrix-facebook.png' style='margin-bottom: 3px;' title='Follow Me On  Facebook'/></a></li>
<li><a href='http://twitter.com/bloggingforstyling' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTd3xSlqAGJQDAzmrqHkv0UBDQjDL3TD0TZNn8JyrRcIZH7Ed25A2X8PHjE0de95V0yhVMdCmbfXMXSm4eg9G7kq1qKQZ86a_zXRbkIBLTGVQk3Ws4dOVyIwGeMWUuzVP3AzLr3Ea0Vgs/s1600/btrix-twitter.png' style='margin-bottom: 3px;' title='Follow Me On  Twitter'/></a></li>
<li><a href='http://pinterest.com/bloggingforstyling/' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSvdoR2qczxTnuAC8o-IvSZWyZDJQ2X3ErchYtLUFMGRl8tSxcr71cguyDNrzTP8Svq2w6oWceiyd3_bkR1ov7751tDEIVaCSH-GyI0ObhpWzAeyXsNv2uvW8FmbFP37OPU7VVvSm7dc/s1600/btrix-pinterest.png' style='margin-bottom: 3px;' title='Follow Me On  Pinterest'/></a></li>
<li><a href='https://plus.google.com/GOOGLEPLUSID' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRnMGNWJA6LqpMJtYtU3NP62ZOMu0QTy8LsaoSfaXWI4LgTfVkhZlx2VAk3_UPzjP6MoTyZBssu8GRhqI-YqLqyCBRkVUahQVNaVvIHGJpuACNBEPsyFyh9QfqaNXxhsEyAt0VG8SWvg/s1600/btrix-googleplus.png' style='margin-bottom: 3px;' title='Add Me your Circle'/></a></li>
</ul></div>

Catatan :

• Ubah http://facebook.com/bloggingforstyling dengan alamat Facebook anda.
• Ganti http://twitter.com/bloggingforstyling dengan alamat Twitter anda.
• Ganti http://pinterest.com/bloggingforstyling/ dengan alamat Pinterest anda.
• Terakhir, ganti GOOGLEPLUSID dengan ID Google Plus anda.

Langkah terakhir, Klik Simpan Template!

Read More