ChugyGogog

Kali ini saya coba memodifikasi tampilan dari label cloud dengan menambahkan hover background ronded corner pada setiap link label cloud tersebut, secara standar label cloud ataupun link akan mengikuti pengaturan tautan link standar dari template anda. Langsung pada tutorial mengatur Label cloud dengan hover background caranya seperti berikut : Pertama tambahkan label cloud terlebih dahulu pada blog anda Tambah Gedget > Label > Cloud > Simpan . Masuk pada Edit HTML masukan kode di bawah ini pada bagian CSS atau diatas kode ]]></b:skin&gt; #Label1{ margin:0px; padding:6px } #Label1 .widget-content{ line-hight:1.4em; text-align:center; margin:0px; padding:10px } #Label1 a{ text-shadow:1px 1px 0 rgba(255,255,255,0.8); color:#000; text-decoration:none; padding:4px; } #Label1 a:hover{ padding:1px 4px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#a0a0a0; color:#fff; } Pratinjau terlebih dahulu kalau suda

Membuat ronded corner pada template mungkin akan mempercantik tempilan dari blog itu sendiri di bandingkan hanya dengan menggunakan Kotak persegi saja tapi tentunya bukan berarti template yang menggunakan kotak persegi jelek , Untuk selera dan penilaian setiap orang tentunya berbeda-beda. Ok langsung saja pada pokok pembahasan, kali ini saya akan memberikan tips cara merubah tampilan template anda dengan menggunakan ronded corner. Sebagai conton anda bisa lihat blog saya yang ini www.chulection.blogspot.com . Sebelumnya Sebagai tambahan saya akan menjelaskan sedikit tentang bagian-bagian dasar dari template itu sendiri. Bagian Bagian Dasar dari Template : Yang pertama Background : Ini merupakan lapisan paling bawah dari sebuah template. Yang kedua Outer Wraper : Ini merupakan lapisan kedua di atas background. yang ketiga Header - Main Wraper - Sidebar - Dan Footer : Ini merupakan lapisan paling atas dari sebuah template. Header mempunyai posisi di bagian atas . Main wraper mem

Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner , Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini . Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini. seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja : 1. Masuk ke Blog anda. 2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman. 3. Tambah Gadget - Lalu pilih HTML/JavaScript. 4. Masukan Kode HTML di bawah ini : <style type="text/css"> /* vertikal vertikal merah di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #vertikal-merah{ border-bottom-width: 0; } #vertikal-me

Mungkin anda pernah membuat background untuk teks area, dengan menggunakan background kotak saja,sekarang anda bisa mencoba membuat variasi lain untuk background teks area dengan menggunakan Ronded Corner. Jika sebelumnya teks area anda berujung tajam atau lancip, dengan ronded corner maka kita bisa merubah bagian bagian sudut tersebut menjadi melengkung. Masukan Kode HTML di bawah ini di bagian teks area yang anda inginkan, Jika anda ingin memasangnya di postingan seperti ini anda tinggal masuk ke Posting , Entri Baru dan pilih Edit HTML dan masukan kode di bawah ini untuk teks area anda. <div style="border: 1px solid #666; padding: 20px; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; text-align: justify;">