Membuat Tampilan Template 3D

4/23/2011 Blog Tutorial Blogger Dsain Template dsign template Tips dan Trik Tips Trik Blog
Membuat Template 3D, atau bagaimana caranya membuat agar template kita terlihat 3D. cara untuk membuat bagian dari body template kita agar terlihat 3D, yaitu kita hanya perlu menambahkan nilai ukuran border dan perpaduan warna pada bagian template tersebut. Ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Kita bahas kali ini, yaitu tentang cara membuat agar tampilan dari template kita terlihat 3D tanpa menggunakan Background gambar. Contohnya untuk membuat bagian sidebar, Headder, dll dari template tersebut terlihat 3D seperti contoh pada gambar dibawah ini.

tampilan template 3D


Agar bagian template kita terlihat 3D seperti pada contoh gambar diatas. caranya adalah sebagai berikut ini.

  1. Misalnya kita akan membuat bagian sidebar kita terlihat 3D. yang harus sobat lakukan adalah Edit kode CSS sidebar tersebut pada halaman HTML template kamu dengan memberi nilai ukuran border dan paduan warna pada background dan setiap sisi sidebar itu, contohnya :

    #sidebar1 .widget {
    margin: 0px 0px 5px 0px;
    padding: 5px 5px 5px 5px;
    background: #0000c0; /*-Background = Biru --*/
    border-top: 10px solid #6666ff; /*-Border atas = Biru Muda-*/
    border-bottom: 10px solid #6666ff; /*-Border Bawah = Biru Muda-*/
    border-left: 10px solid 1414b0; /*-Border kiri = Biru Tua--*/
    border-right: 10px solid 1414b0; /*-Border kanan = Biru Tua--*/
    }


  2. Terus misalnya pada bagian Header sidebar tersebut ingin dibuat 3D juga, caranya yaitu :


#sidebar1 h2 {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: #cc0000; /*-Background = Merah --*/
border-top: 5px solid #ff7070; /*-Border atas = Merah Muda--*/
border-bottom: 5px solid #ff7070; /*----Border Bawah = Merah Muda-*/
border-left: 5px solid #b00000; /*-Border kiri = Merah Tua-*/
border-right: 5px solid #b00000; /*Border kanan = Merah Tua--*/
}


Maka hasilnya akan seperti pada gambar dibawah ini :

template 3D

Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan Sobat coba praktekkan tips ini pada template Sobat. Dan bila Sobat berminat dengan template 3D karya Kang Fatur, Sobat bisa lihat contoh templatenya dan mendownloadnya disini. Saya rasa cukup sekian dulu postingan Saya tentang cara membuat tampilan template 3D kali ini.

Untuk para sobat yang perlu kode warana V3 silahkan klik disini

Selamat mencoba semoga dapat bermanfaat dan salam Blogger mania.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

41 comments

wehh saya coba dulu ya bos, btw makasih info y

Balas

Terimakasih infonya sobat, oh iya !
Ijin terapkan triknya sobat.

Balas

kang mau tanya dong, klo bikin icon addres bar sperti kang fatur gmna si???

Balas

wah hebat kang trim info dan trik blognya

Balas

sory tanpa bsa msi ijin pake templatenya Kang.....

Balas
This comment has been removed by the author.

kang kog kag bisa sih , padahal kan aku pake nya template `song oranye`

kasih tau donk kang yang bener ?

Balas

kang...
saya mau tanya cari css dimana yah...



tenz

Balas

@rahmat-internet marketing Gampang Gan dari tata letak ke Edit HTML.di situ nanti banyak kode2 css

Balas

wahhh...keren kang...
salut buat blog kang fatur ini...
top 2 jempol kang...

kunjungi blog sederhana ane juga ya kang...

buat rekan-rekan lain yang ingin belajar desain photoshop online gratis, silahkan berkunjung di

http://www.kampusphotoshop.blogspot.com

terima kasih...

Balas

@kang fatur oh yg di edit HTML nmanya kode css...
@kang fatur gmn caranya buat template 3D seperti blog kang fatur....itu kan diatas belum kasih tau langkah2nya....kasih tau langkah2nya ya kang.....
maklum baru pemula....
trimakasih kang fatur............

Balas

@rahmat-internet marketing Dari pada bikin sendiri bikin pusing kepala, mending langsung Download aja Sob disini

Balas

keren kang..tips nya ingin juga nyobanya..tapi beratnya nambah ga kang..trima kasih..

Balas

@Indonesia Ku Insya Allah enggak Gan, soalnya kita disini hanya menambah ukuran order saja

Balas

boleh juga yah kang tutorialnya,keren,menarik+mantap lagi...
makasih yang kang.follback blog simkuring yah kang

Balas

kak fatur gimana caranya buat widget jam dengan muka sendiri

Balas

@sempatascreco Gampang gan, tinggal pesan n kirim potonya saja ke saya.

Balas

kang fatur pengen deh yang kayak gene tampilan blog ku...bantu dong...blog ini emang top dan elegan

Balas

boz saya kurang tau nie..
bisa bantu saya gk boz

Balas

kunjungi blog saya yang masih sederhana ya boz http://not-4sale.blogspot.com/ Di folow boz nanti follow balik

Balas

Mantep bgt blognya gan....

kasih masukan ke blog ane ya gan, ku tunggu kunjungan sobat semua

Balas

Kapan Ane punya blog kaya gini!!! keren kang,.

Balas

Memang blog ini tampil beda.
Kreatif selalu untuk 3D.

Balas

kang fatur, Punya Link download template robot lagi ngga ya...? Mksh.

Balas

kang fatur, saya pengen belajar banyak ni tentang blogger...kang fatur ada buat buku ndak, alangkah bagusnya semua kretifitas kang fatur dibuat dalam sebuah buku...

Balas

keren banget templatenya gan, cuma buat bikinnya susah buat saya yang pemula... izin donwload kang

Balas

Makasih infonya gan. Bermanfaat banget buatku

Balas