Wednesday, November 23, 2011

Widget untuk Mengganti Warna Background secara Otomatis

Menggunakan kombinasi warna yang tepat agar tampilan blog menjadi lebih menarik dan elegan bisa menjadi alternatif bagi yang suka utak utik template.
Penggunaan kode warna sudah merupakan bagian yang tak terpisahkan bagi para blogger untuk membuat tampilan yang sesuai antara background, border, dan warna huruf.
Untuk menambah variasi dan mengurangi kejenuhan dengan penggunaan warna yang sama maka widget untuk mengganti background secara otomatis ini bisa menjadi pilihan yang tepat.

Untuk lebih lengkapnya ikuti langkah berikut.

  • Login ke akun Blogger kamu.
  • Dari halaman dashboard
  • Pilih tab Elemen Halaman ( Page Element ).
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Copykan script berikut dan letakkan pada kotak Content yang tersedia :

<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table width="100%">
<tr>
<td onclick="bgChange('')" bgcolor="Gainsboro">&nbsp;</td>
<td onclick="bgChange('DimGray')" bgcolor="DimGray">&nbsp;</td>
<td onclick="bgChange('Navy')" bgcolor="Navy">&nbsp;</td>
<td onclick="bgChange('Maroon')" bgcolor="Maroon">&nbsp;</td>
<td onclick="bgChange('DarkGreen')" bgcolor="DarkGreen">&nbsp;</td>
<td onclick="bgChange('DodgerBlue')" bgcolor="DodgerBlue">&nbsp;</td>
<td onclick="bgChange('OrangeRed')" bgcolor="OrangeRed">&nbsp;</td>
<td onclick="bgChange('Orange')" bgcolor="Orange">&nbsp;</td>
<td onclick="bgChange('HotPink ')" bgcolor="HotPink ">&nbsp;</td>
<td onclick="bgChange('PeachPuff')" bgcolor="PeachPuff">&nbsp;</td></tr>
</table>

<span style="float:right;font-size:10px;color:SeaGreen;">background Change</span>


Keterangan :
  • Warna Merah ; warna petunjuk untuk kembali ke warna background default (asli), silakan diganti dengan warna lain sesuai template ( hanya sebagai tampilan kembali ke warna asli ).
  • Warna Kuning ; warna background yang diinginkan, pada saat di klik warna background akan berubah sesuai jenis warna yang telah ditentukan. ( ubah sesuai kebutuhan ( bisa ditambah dan dikurangi ), untuk kode warna bisa dilihat disini "Menggunakan Kode warna dalam blogging"
  • Warna Aqua ; keterangan widget, ganti sesuai kebutuhan.

Selamat mencoba...!

Wednesday, November 9, 2011

Ruang Terbuka Hijau Perkotaan


Ruang Terbuka Hijau (RTH) kota adalah :
Bagian dari ruang-ruang terbuka (open spaces) suatu wilayah perkotaan yang diisi oleh tumbuhan, tanaman, dan vegetasi (endemik, introduksi) guna mendukung manfaat langsung dan/atau tidak langsung yang dihasilkan oleh RTH dalam kota tersebut yaitu :
  • Keamanan
  • Kenyamanan
  • Kesejahteraan
  • dan Keindahan wilayah perkotaan tersebut.
Permintaan akan pemanfaatan lahan kota yang terus tumbuh dan bersifat akseleratif untuk pembangunan berbagai fasilitas perkotaan, termasuk kemajuan teknologi, industri dan transportasi, selain sering mengubah konfigurasi alami lahan/bentang alam perkotaan juga menyita lahan-lahan tersebut dan berbagai bentukan ruang terbuka lainnya. Kedua hal ini umumnya merugikan keberadaan RTH yang sering dianggap sebagai lahan cadangan dan tidak ekonomis.
Di lain pihak, kemajuan alat dan pertambahan jalur transportasi dan sistem utilitas, sebagai bagian dari peningkatan kesejahteraan warga kota, juga telah menambah jumlah bahan pencemar dan telah menimbulkan ketidak nyamanan di lingkungan perkotan.
Untuk mengatasi kondisi lingkungan kota seperti ini sangat diperlukan RTH sebagai suatu teknik bioengineering dan bentukan biofilter yang relatif lebih murah, aman, sehat, dan menyamankan

Berdasarkan bobot kealamiannya, bentuk RTH dapat diklasifikasi menjadi :
  1. Bentuk RTH alami (habitat liar/alami, kawasan lindung) dan 
  2. Bentuk RTH non alami atau RTH binaan (pertanian kota, pertamanan kota, lapangan olah raga, pemakaman
Berdasarkan sifat dan karakter ekologisnya diklasifikasi menjadi :
  1. Bentuk RTH kawasan (areal, non linear), dan
  2. Bentuk RTH jalur ( koridor, linear),
Berdasarkan penggunaan lahan atau kawasan fungsionalnya diklasifikasi menjadi :
  1. RTH kawasan perdagangan,
  2. RTH kawasan perindustrian,
  3. RTH kawasan permukiman,
  4. RTH kawasan pertanian, dan
  5. RTH kawasan-kawasan khusus, seperti pemakaman, hankam, olah raga, alamiah.

Status kepemilikan RTH diklasifikasikan menjadi :
  1. RTH publik, yaitu RTH yang berlokasi pada lahan-lahan publik atau lahan yang dimiliki oleh pemerintah (pusat, daerah), dan
  2. RTH privat atau non publik, yaitu RTH yang berlokasi pada lahan-lahan milik privat.

Tuesday, November 1, 2011

Cara mudah membuat slide show

Membuat blog lebih tampil menarik salah satunya dengan menampilkan slide show berupa gambar, cara ini cukup mudah dan cepat, Untuk lebih lengkapnya ikuti langkah berikut.
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard
  • Pilih tab Elemen Halaman ( Page Element ).
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Copykan script berikut dan letakkan pada kotak Content ( dimana saja bisa ) yang tersedia :

<script language="JavaScript1.2">
var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZCdecMdWRBaFJT4ss3NoVukzOfaAJcOLReW_fIL13lLos31FnEkk1OHYnDabyLsQkBl_XW00r7nq8R-BfwwX2wONRnn3YuPIvtbN2VTCKECYW5HIJ500WAKYQxMmOAuz6J63jybE5wHE/s128/header_u15.png', '', '']
variableslide[1]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmiuCA211nPKvUzF3SQ0GRfPPdqKRXEGdDDfLY8_c7qH6L2GbAXI1xPP488XhmmJ5pPcKwghXwSx4VvXeX8A0BoFWJB38L__Lac7fQDO32VC22GkD-j2CB-YfKen2R3XyTLTZv2A4LJUs/s128/header_u18.png', '', '']
variableslide[2]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5_gd2bgsfEixVtSf49au6DLyF86YpoLUSUiWwHnpQYPsWYqAL2kOA3ZYvcHyDfleekY-siNTjEK5SmR_utksMwWBhs1X2j-GeqyWRv_P23lqgIDzPB8gUIjzPMO6XlUYBl5v86afZQg/s128/header_u2.png', '', '']
variableslide[3]=['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOgZfamOFFMvzRMhurVTrH-BWa-vyzIA_3V9VR3KeV-chcuUqnSxIj2C5UdZ2IlJ-U1EEF36MUl0COigYzddcqjQ6Mc17he-VbTBNd1A1GrInE2fycr6kJWZjzoZjrfKSIlGdeSLx7p0c/s128/header_u3.png', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='300px' //set to width of LARGEST image in your slideshow
var slideheight='auto' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgcolor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

Keterangan :
  • Warna Merah ; alamat URL image yang akan dipasang, silakan ganti dengan punya kamu sendiri.
  • Warna Kuning ; lebar widget yang ada, sesuaikan dengan kebutuhan.
  • Warna Aqua ; waktu perputaran tampilan image, silakan ganti sesuai kebutuhan tambah besar makin lambat.

Selamat mencoba...!

Sumber : http://dynamicdrive.com