Membuat Tampilan Template 3D - Blog Kang Fatur
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

Membuat Tampilan Template 3D

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

41 comments:

  1. wehh saya coba dulu ya bos, btw makasih info y

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

    ReplyDelete
  3. ada template yg keren ga Kang :D :D :D

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

    ReplyDelete
  5. wah hebat kang trim info dan trik blognya

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

    ReplyDelete
  7. This comment has been removed by the author.

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

    kasih tau donk kang yang bener ?

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



    tenz

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

    ReplyDelete
  11. 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...

    ReplyDelete
  12. @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............

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

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

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

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

    ReplyDelete
  17. kak fatur gimana caranya buat widget jam dengan muka sendiri

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

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

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

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

    ReplyDelete
  22. Mantep bgt blognya gan....

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

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

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

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

    ReplyDelete
  26. 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...

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

    ReplyDelete
  28. Makasih infonya gan. Bermanfaat banget buatku

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo