membuat garis lengkung atau Rounder Corner

pada postingan kali ini saya akan sedikit mengurai tentang bagaimana cara untuk membuat garis melengkung pada blog. Untuk demonya sobat blogger bisa melihat blog milik saya pada postingan. Tertarik untuk membuatnya silahkan ikuti tutorial dibawah ini...!

• Login pada blogger anda
• Masuk pada Rancangan
• Lanjut untuk memilih Edit HTML
• Selanjutnya pilih garis mana yang ingin anda buat melengkung
• Lalu copy dan pastekan code dibawah ini

border-left:3px solid #FF0000;
border-right:3px solid #FF0000;
border-top:3px solid #FF0000;
border-bottom:0px solid #FF0000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;

pada script diatas artinya yaitu:

border-kiri tebal 3px dengan mode solid berwarna merah
border-kanan tebal 3px dengan mode solid berwarna merah
border-atas tebal 3px dengan mode solid berwarna merah
border-bawah tebal 3px dengan mode solid berwarna merah
pada border atas-kiri mempunyai lengkung radius 15px
pada border atas-kanan mempunyai lengkung radius 15px
pada border bawah-kiri mempunyai lengkung radius 15px
pada border bawah-kanan mempunyai lengkung radius 15px

dalam contoh disini saya akan mencoba untuk memasukkan pada post-body dibawah ini:

.post-body{

maka sobat tinggal letakkan script diatas pada post-body tadi jadi scriptnya akan menjadi seperti dibawah ini:

.post-body{
border-left:3px solid #FF0000;
border-right:3px solid #FF0000;
border-top:3px solid #FF0000;
border-bottom:0px solid #FF0000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;

atau bisa juga menggunakannya dengan kita memangkas dari script diatas menjadi

border-radius:15px;

-moz-border-radius:15px;

Script diatas hanya bisa pada browser tertentu seperti mozilla firefox dan belum bisa tampil pada browser lain misalkan IE(Internet Explorer) milik windows. Untuk lengkapnya saya sediakan scriptnya agar rounder corner yang Anda buat bisa tampil diseluruh browser. Script dibawah ini sudah saya test pada browser IE, Firefox, Crome dan Opera dan rounder cornernya bisa ditampilkan.

 -moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;

Nah selanjutnya tinggal Anda dituntut sampai dimana bisa berkreasi rounder corne diatas pada blog Anda. Apabila Anda masih bingung dan belum mengerti silahkan tinggalkan komentar Sekian Tutorialnya.

Compress CSS Blog Anda

Pernahkah anda merasa ketika anda membuka blog anda  loading blog anda terasa berat padahal koneksi internet anda dalam keadaan normal(baca: tidak lemot)? apakah Anda tahu mengapa blog Anda loading berat? jawabannya adalah karena banyaknya jenis widget yang dipasang pada blog anda mungkin juga karena terlalu seringnya anda mengedit dan banyaknya anda memasang script CSS.

Mengapa kita bisa terlalu banyak memasang widget? ya karena dapat membuat blog kita lebih baik dan membuat enak dipandang mata. Di samping itu, kita juga bisa membuat pengunjung merasa betah berada di blog kita. lalu bagaimana cara untuk mempercepat loading pada blog kita tanpa mengurangi  satupun wedget yang kita pasang?jawabannya adalah dengan mengcmpres script CSS blog anda. ingin melakukannya? silahkan ikuti caranya dibawah ini.

• Pertama-tama Login pada akun blog anda
• Masuk ke Layout
• klik EditHTML
• centang Expand Template Widget
• jangan lupa back up back up dulu template anda
• Cut semua kode <b:skin> <! [CDATA ] dan sebelum kode ]]></ b: skin>
• Masuk ke alamat: http://www.csscompressor.com/
• Dan letakkan kode yang Anda cut sebelumnya dalam kotak yang tersedia
• Klik Compress
• Tunggu sampai kode kompresi yang keluar
• Copy dan Paste Kode telah dikompresi sebelumnya, setelah kode <b:skin>
  <! [CDATA /]* dan sebelum kode ]]></ b: skin>
• Simpan template Anda, dan ukur kecepatan blog Anda di http://www.iwebtool.com/speed_test

Kemudian rasakan bedanya. 
selesai.

Energy Saving, Power Saving, Screen Saver pada Blog

sudah tahu semua kan dengan apa yang namanya screen saver? saya yakini aja deh kalau anda tau tentang screen saver. tapi kalau belum tau saya kasih tau saja daripada saya dimarahi.

screen saver itu adalah aplikasi yang muncul apabila tidak ada aktifitas pada sebuah system. Untuk mengakhiri aplikasi ini cukup anda gerakkan saja mouse atau tekan sebuah tombol pada keyboard dan gunanya adalah untuk menghemat energi, mengistirahatkan monitor dan juga membuat tampilan pada layar indah. Sudah mengertikan dengan scereen saver?

kalau sudah saya akan membahas tentang screen saver ini. Saya tidak akan membahas screen saver yang ada pada sebuah operasi system pada komputer atau laptop anda tetapi saya akan membahas screen saver yang dipasang pada sebuah website atau blog. manfaat screen saver pada blog kita yaitu membuat blog kita tambah indah juga kita membantu komputer untuk saving energy karena memang apikasi yang ada pada OS [operasi system] maupun di website atau blog itu untuk menghemat energy ketika kita tidak melakukan aktifitas apapun. kalau anda tertarik untuk membuatnya ikuti step by step caranya dibawah ini.

1. Login ke blogger
2. lalu klick tab Layout
3. Dan pilih Edit HTML
4. Jangan lupa chek box(Expand Template Widget)
5. Cari Kode <head>
6. Letakan kode di bawah ini, diatas kode <head>

<script src='https://sites.google.com/site/gebryd/jojo/screensaver.js'>
</script>

lalu simpan dan selesai. Anda sudah bisa melihat hasilnya

tapi jika anda ingin berkreasi sendiri ikuti cara dibawah ini

1.silahkan anda copy kode dibawah ini:

<script type='javascript'> var idleTime=0;var standby=false;function CheckInactivity(){idleTime+=10;if(idleTime>60){InitializeStandBy()}}function InitializeStandBy(){if(!standby){var a=0;a=jQuery(window).height();jQuery("#energysaving").show().css({height:"0",width:"0",left:"50%",top:"50%"}).

animate({width:"100%",height:a,left:"0",top:"0",opacity:"1"},1000);standby=true}}function StopStandBy(){if(standby){jQuery("#energysaving").animate({width:"0",height:"0",opacity:"0",left:"50%",top:"50%"},

500);setTimeout('jQuery("#energysaving").hide();',800);standby=false}}document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">');if(typeof(jQuery)=="undefined")

{document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"><\/script>')}function InitJQuery(){if(typeof(jQuery)=="undefined"){setTimeout("InitJQuery();",50)}else{jQuery(function(){jQuery

(document).ready(function(){setInterval("CheckInactivity();",10000);jQuery(this).mousemove(function(a)

{idleTime=0;StopStandBy()});jQuery(document).keypress(function(a){idleTime=0;StopStandBy()});jQuery

("body").append('<div id="energysaving"><p><font style="color: #2fb2fa;">SCREEN SAVER MODE IS "<blink>ACTIVE</blink>"</font><br/><span><font style="color: #FFFFFF;">please move the cursor if you want to "<blink>NONACTIVE</blink>" the Screen Saver</font></span></p><div id="copyrightOnlineLeaf"><font style="color: #00FF00;">Copyright 2010 - Helwie | visit my blog | http://helwie-ahmad.blogspot.com/</font> <font style="color: #FFFFFF;">Supported by: www.onlineleaf.com</font></div></div>');jQuery("#energysaving").hide()})})}}InitJQuery();</script>

2. Lalu anda paste pada notepad atau sejenisnya. silahkan kreasikan sebisa anda
3. Setelah mengedit, silahkan anda copy script yang anda edit tadi
4. Cari kode <head> lalu lanjutkan dengan paste di atas kode <head> tadi
5. Lalu simpan. dan lihat hasilnya

jika anda mempunyai hosting anda bisa mengikuti step dibawah ini

1. Simpanlah script yang sudah anda edit di notpad tadi dengan extensi [dot]JS atau javasscript.

2. Lalu upload pada hostingan anda.

3. Copy direct link (baca:alamat) javascript yang anda upload tadi

4 Lalu letekkan pada tulisan url file js Yang sudah anda upload pada code dibawah ini

<script src='URL File JS Yang sudah anda upload'>
</script>

sekarang sudah Selesai.