Advertise

Tampilkan postingan dengan label Ronded Corner. Tampilkan semua postingan
Tampilkan postingan dengan label Ronded Corner. Tampilkan semua postingan

Label Cloud Dengan Hover Background Ronded Corner

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.

label cloud hover background

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 sudah cocok silahkan disimpan.

NB :: Untuk hover background saya menambahkan ronded corner dan juga teks shadow silahkan di rubah sesuai selera anda, anda juga bisa mengcustom padding dan margin agar lebih pas dengan template anda. Selamat mencoba.

Modifikasi Tampilan Template Dengan Ronded Corner

ronded cornerMembuat 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 mempunyai posisi di Bagian tengan untuk posting .
Side bar Biasanya disamping kiri atau kanan atau juga kiri dan kanan.
Dan fotter Ditempatkan paling bawah.

Untuk Tips kali ini saya mencoba memberikan tips membuat ronded corner pada bagian outer-wraper atau bagian diatas background dan di bawah main wraper .

Sekarang buka blog anda.
Masuk pada Tata Letak dan pilih Edit HTML.
Sekarang anda cari Kode html di bawah ini.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#fff;
border:1px solid #04B4AE;
width: 660px;
margin:15px auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}
Kode diatas merupakan kode standar dari template minima. sekarang anda ganti kode di atas dengan kode di bawah ini.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background:#fff;
border:8px solid #04B4AE;
-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;
width: 660px;
margin:15px auto;
padding:15px;
text-align:$startSide;
font: $bodyfont;
}
Sekarang coba previwe atau pratinjau terlebih dahulu, Kalau sudah cocock silahkan di simpan.
Anda bisa merubah lebar atau widht-y , warna background ataupun border nya sesuai keinginan anda.Selamat mencoba.

Modifikasi Vertical Menu Dengan Ronded Corner

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-merah ul{
margin: 0px;
padding:0px;
font: normal 100% 'georgia; /*pemilihan bentuk huruf */
}

#vertikal-merah a{
display: block;
padding: 4px;
padding-left: 10px;
border:1px solid #ccc;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: black;
border-top:1px solid #f3f3f3;
border-bottom:1px solid #f3f3f3;
border-right:1px solid #f3f3f3;
background-color: #fff;
border-left: 10px solid #ccc;
}

#vertikal-merah a:hover {
background-color: #f2f2f2;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:10px solid #ccc;
color: #cc0000;
}
</style>


<!-- silahkan ganti dengan link milik anda -->

<div id="vertikal-merah">
<ul>
<a href="http://chugygogog.blogspot.com/search/label/Bisnis%20Online">Bisnis Online</a>
<a href="http://chugygogog.blogspot.com/search/label/Desain%20Grafis">Desain Grafis</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Flash%2008">Tutorial Flash 8</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Blog">Tutorial Blog</a>
<a href="http://chugygogog.blogspot.com/search/label/Komputer%20Internet">Komputer Internet</a>
<a href="http://chugygogog.blogspot.com/search/label/Tips-Trik">Tips N Trik</a>
<a href="http://chugygogog.blogspot.com/search/label/Free%20Artikle">Free Artikle</a>
<!-- untuk menambah link baru simpan di sini -->
</ul></div><p></p>

Ganti Link nya dengan link yang ingin anda gunakan.
Berikan judul untuk widget ini misalnya Menu Vertical atau apa saja terserah anda.
Jika sudah Simpan.

Tentunya anda sudah paham untuk merubah warna background ataupun warna teks jika kode di atas tidak sesuai dengan keinginan anda silahkan anda menggantinya....!!
Selamat mencoba.

Teks Area Dengan Ronded Corner

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.

ronded corner
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;">
Ini adalah area teks untuk anda memasukan teks silahkan anda gunakan area teks ini terima kasih.....
</div>

Silahkan anda ganti teks warna merah dengan teks yang anda inginkan.

NB : Tampilan Ronded Corner ini hanya akan sempurna bila anda menggunakan Browser Mozila, Jadi jangan heran kalau anda menggunakan browser IE tampilanya akan berubah... Tapi jika anda ingin tampilan ronded corner dapat sempurna di setiap browser anda tentunya harus membuat ronded corner ini menggunakan image trima kasih.