PROFIL KU

Foto Saya
Valery Febriansyah
Argamakmur, Bengkulu Utara, Indonesia
Terimakasih ya yang sudah melihat blog ini.. jangan lupa follow me yaw.. tanks..
Lihat profil lengkapku

Rabu, 03 Agustus 2011

Mengganti Sidebar Blog Dengan Animasi

Berikut ini akan saya terangkan bagaimana cara mengganti background sidebar pada blog sobat menjadi seperti gambar si samping 


  • Pertama Login Dulu Ke Blog
  • Kemudian Pilih Tata Letak
  • Pilih Edit HTML
  • Lalu Cari Code Berikut
Untuk mengganti background sidebar Sobat, pertama simpan dulu gambar-gambar di atas dan uploadlah gambar tersebut ke photobucket atau hosting Sobat. Atau jika Sobat mau pakai gambar lain silahkan saja, Sobat tinggal simpan file gambarnya di hosting Sobat.

Lalu, cari kode di bawah ini :

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
}

Lalu tambahkan script/link ini :

background:#f7f7f7 url(http://i696.photobucket.com/albums/vv321/milyarder/sidebarbanner.gif?imgmax=800)repeat;

Ganti link yang berwarna merah dengan link gambar Sobat. Lalu tambahkan ke dalam script .sidebar h2 yang tadi Sobat cari. Sehingga hasilanya akan seperti ini :

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
background:#f7f7f7 url(http://i696.photobucket.com/albums/vv321/milyarder/sidebarbanner.gif?imgmax=800)repeat;
}

  • Kemudian Simpan
  • Dan Lihat HAsilnya,,,
  • Semoga Bermanfaat,,,

Jumat, 01 Juli 2011

menu translate navbar


Bagus kan...? mungkin diantara JUTAAN blog didunia, sudah banyak yang memasangnya. bagi yang belum, yuk kita bahas cara membuatnya...!

1. Login Ke blogger kalian
2. Masuk Ke Rancangan / Tata Letak
3. Pilih Elemen Halaman
4. Tambah Gadget ---> HTML/Java Script
5. Copy dech script dibawah ini :

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><br />

6. simpan dan selesai.

Jumat, 17 Juni 2011

membuat box roll


Untuk membuat kotak blog roll yang juga kadang bisa dinamakan "Link exchange" atau "My friend" atau apa saja, caranya sbb :

1. Dengan menggunakan fitur yang ada di blogspot
Masuklah ke Account blogger anda
Lalu pilih 'Layout' atau 'tata letak'
Klik 'Add Gadget' atau Tambah Gadget
Pilih Blogroll
Save

Setelah itu nanti dikolom Blogroll anda bisa menuliskan Link URL teman anda atau orang yang ajak tukaran link dengan blog anda.

2. Dengan membuat sendiri ( Kustom )
Masuklah ke Account blogger anda
Lalu pilih 'Layout' atau 'tata letak'
Klik 'Add Gadget' atau Tambah Gadget
Lalu pilih 'HTML/JAVASCRIPT
Berikutnya masukkan kode HTML dibawah ini :

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#<a href="link1"/>Nama Link<a /> <br />
#<a href="link2"/>Nama Link<a /> <br />
#<a href="link3"/>Nama Link<a /> <br />
#<a href="link4"/>Nama Link<a /> <br />

</div>


Ganti Tulisan Link1 , link2 , link3 , link 4 dengan URL Blog yang lain..
(Tanda kutip jangan dihilangkan)

Sedangkan Untuk "nama Link" ini adalah yang disebut Anchor Teks ,silahkan beri nama sesuka anda.

Setelah itu , baru anda "Save"

membuat box melengkung


Nah, untuk kali ini kita akan coba sedikit utak-atik blog kita menggunakan CSS. Tenang aja, kalo ada kesalahan pada CSS dalam template, akibatnya ga sefatal saat kawan melakukan kesalahan pada editing HTML koq. Jadi santai aja kawan...

Follow these step by step below: --> Ikuti langkah-langkah dibawah ini (katanya orang bule)

  • Login Blogger dulu tentunya.
  • Klik Design/Rancangan/Layout pada Dashboard.
  • Klik Edit HTML dan beri tanda centang.
  • Kita isi dulu Kode CSSnya, di antara tag <head> dan </head>, atau kawan bisa copas kode di bawah ini tepat di atas kode ]]></b:skin>.
  • Gunakan CTRL+F pada browser kawan untuk mempercepat pencarian Script pada Edit HTML.
CSS Code :
#lengkung {
 height300px;
 width500px;
 margin0 auto;
 background#ff0000;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
}
  • Pada kode-kode yang berwarna merah tebal diatas, pastinya kawan-kawan sudah tau harus diapakan...
  • Berikutnya terserah kawan kode HTML di bawah ini mau dieditkan di bagian manapun yang disuka. Asal, itu script HTML untuk membuat BORDER.
HTML CODE :
<div id="lengkung"> 
 -- Isi dari Kotak letakkan disini -- 
</div>
  • Untuk warna merah tebal dalam kode HTML di atas, uda tau kan mau diapakan. Kalau kawan ingin isi dengan gambar juga boleh. Tapi jangan lupa rubah pula nilai lebar (width) dan tingginya (height) agar sesuai dengan gambar yang kawan buat.
  • Tapi sayang banget, lagi-lagi script di atas ga support dengan IE dan Opera 10.63.
Contoh:
Experiment VandeSoul Membuat Sudut yang bisa melengkung hanya dengan menggunakan CSS dan tidak menggunakan Gambar sama sekali.
Related Posts Plugin for WordPress, Blogger...
Guestbook

Pasang Iklan Disini

ads ads ads ads

Visitor Me

free counters

MUSIK

Get Free Music at www.divine-music.info
Get Free Music at www.divine-music.info

Free Music at divine-music.info

Follow Me

DAFTAR ISI BLOG

Berita

 

My Banner

Resent Posting

Copyright© 2007-2011 VHA-INFO | Template Blogger Designer by : vha-info' |
Template Name | Uniqx Transparent : Version 1.0 | Vha-Info