New 3D Template Transformers

Description : New 3D Template Transformers Eventually Blog Tips and Trick finished well to make this 3D templ...
New 3D Template Transformers

Eventually Blog Tips and Trick finished well to make this 3D template,This template besides looks elegant, also been equipped with the latest features such as auto readmore, animated text, image opacity effect, the tab view menu, show hide floating menu, and cool horizontal menu. if you want to use this template, you can download it for free. by clicking the download below.

This is an example of image templates

Auto Readmore and Tabview Feature

gambar

Cool Horizontal Menu

gambar

Show Hide Guest Book/Shoutbox
gambar

Lower and Footer Bar
gambar



Keep enjoy and thank you for downloading my Template
Add your Comment 3 comments
Posted by: Umar Backry Blog Tips And Trick - Updated at: 3:30 AM

How To Create a Circle in CSS

Description : How To Create a Circle in CSS atau membuat sebuah bagian template menjadi berbentuk bulat,bundar dan...
How To Create a Circle in CSS atau membuat sebuah bagian template menjadi berbentuk bulat,bundar dan sebagainya. Tips ini hampir sama dengan Tips sebelumnya yaitu How To Rounded Corner in CSS , tentang membuat sudut-sudut melingkar pada bagian template, bedanya tips kali ini yaitu membuat bagian template menjadi bulat atau bundar seluruhnya. sebagai contoh Blog Tips and Trick membuat bagian header template yang dibagi 3 bagian, dan 2 dari bagian header tersebut manjadi bulat seperti pada gambar dibawah ini.

Gambar 0.1
gambar

Untuk membuat agar bagian header tersebut menjadi bulat atau berbentuk lingkaran. kita perlu menggunakan kode -Moz-Border-Radius- pada kode CSS yang ada pada halaman HTML template kita pada bagian header tersebut. contohnya seperti dibawah ini.

#header-wrapper1 {
float: left;
margin: 12px 0px 12px 0px;
padding: 0px 0px 0px 0px;
width: 170px;
height: 170px;
background: $headerbgColor;
border-top: 10px solid #747474;
border-bottom: 10px solid #747474;
border-left: 10px solid $headerBorderColor;
border-right: 10px solid $headerBorderColor;
-moz-border-radius-topleft: 95px;
-moz-border-radius-topright: 95px;
-moz-border-radius-bottomleft: 95px;
-moz-border-radius-bottomright: 95px;
}

Pada contoh kode diatas yang berwarna kuning adalah kode radius yang akan membuat header tersebut menjadi bulat, dan kode yang berwarna biru adalah ketebalan garis pinggir atau border tersebut. bila kamu tidak mau memakai garis pinggir, kamu bisa menghapus kode yang berwarna biru tersebut. yang penting untuk membuat header tersebut menjadi bulat adalah menentukan nilai ukuran dari setiap -Moz-Border-Radius-Width( Lebar) dan Height(tinggi).

pada dasarnya, setiap template yang kamu download dan kamu gunakan. biasanya jarang terdapat  ukuran Height pada setiap bagian template tersebut. seperti pada bagian Header sidebar dll. karena dapat membatasi jumlah widget pada bagian tersebut. bila kamu ingin membuat bagian dari template tersebut menjadi bulat, hal pertama yang haru kamu lakukan adalah membuatnya menjadi kotak terlebih dulu dengan memberi nilai ukuran height dan width yang sama. setelah itu kamu masukan kode -moz-border-radius- nya. contohnya untuk ukuran 170px; X 170px. saya memberi nilai 95px pada setiap sisi radiusnya. Untuk lebih jelasnya silahkan kamu praktekkan tips ini seperti contoh kode di atas. bila kamu berhasil membuat bagian dari template tersebut menjadi bulat, kamu bisa memasukan gambar yang bulat juga seperti contoh gambar speaker dibawah ini.

gambar
Sehingga menjadi seperti gambar dibawah ini

Gambar 0.3
gambar

Selamat Mencoba dan semoga bermanfaat, mohon maaf bila terapat kekurangan pada postingan kali ini, maklum masih pemula nieh....Salam blogger mania.
Add your Comment 2 comments
Posted by: Umar Backry Blog Tips And Trick - Updated at: 8:12 PM

How to Create Rounded Corner in CSS

Description : How to Create Rounded Corner in CSS " atau bagaimana caranya untuk membuat sudut melingkar ata...
How to Create Rounded Corner in CSS" atau bagaimana caranya untuk membuat sudut melingkar atau bulat pada kode CSS. Tips ini cocok sekali bagi anda yang ingin agar tampilan templatenya terlihat 3D.dengan sudut-sudut melingkar pada setiap bagian templatenya, seperti sidebar, header dll. Untuk membuat setiap bagian body template kita agar mempunyai sudut melingkar, caranya yaitu kita perlu menambahkan kode CSS -Moz-Border-Radius, pada bagian body template tersebut. misalnya kita ingin membuatnya pada bagian sidebar. caranya yaitu edit kode CSS sidebar pada halaman HTML template kamu dengan menambahkan kode -Moz-Border-Radius- seperti contoh dibawah ini.

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: $sidebar1bgColor;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
}

Maka hasilnya akan seperti gambar dibawah ini : maaf gambar ini hanya contoh loch....

gambar

Contoh gambar sidebar diatas menggunakan kode -moz-border-radius- pada setiap sisinya dengan ukuran 20px atau 20pixel. bila kamu ingin membuat agar sudut bulatan tersebut hanya pada sebagian sisi sidebar saja. kamu hanya cukup menggunakan 1, 2 atau tiga bagian dari kode radius tersebut.

contohnya untuk semua sisi

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;

Contoh untuk sisi sebelah kiri atas dan kanan atas

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;

Pada dasarnya  kita hanya cukup menambahkan kode -moz-border-radius- ditambah dengan nilai ukuran dari radius tersebut dan  sisi yang kita inginkan, seperti Topleft, Topright, Bottomleft, Bottomright dll.

Ok saya rasa cukup sekian dulu postingan Blog Tips and Trick tentang membuat sudut melingkar dengan kode CSS kali ini. mohon maaf bila terdapat kekurangan pada setiap isi postingan saya. maklum masih pemula.... semoga bermanfaat dan salam Blogger mania.
Add your Comment 2 comments
Posted by: Umar Backry Blog Tips And Trick - Updated at: 6:53 PM

How To Create 3D Template

Description : How to create 3D Template , atau bagaimana caranya membuat agar template kita terlihat 3D. cara unt...
How to create 3D Template, 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 pada bagian template tersebut. ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Blog Tips and Trick 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.

gambar

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 kamu 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: 10px solid  #ff7070;   /*-Border atas = Merah Muda--*/
border-bottom: 10px solid  #ff7070;  /*----Border Bawah = Merah Muda-*/
border-left: 10px solid  #b00000;   /*-Border kiri = Merah Tua-*/
border-right: 10px solid  #b00000;   /*Border kanan = Merah Tua--*/
}

Maka hasilnya akan seperti pada gambar dibawah ini.

gambar

Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan kamu coba praktekkan tips ini pada template kamu. dan bila kamu berminat dengan template 3D karya Blog Tips and Trick, kamu bisa lihat contoh templatenya dan mendownloadnya disini.  saya rasa cukup sekian dulu postingan Blog Tips and Trick tentang cara membuat tampilan template 3D kali ini. semoga bermanfaat dan salam Blogger mania.
Add your Comment 1 comments
Posted by: Umar Backry Blog Tips And Trick - Updated at: 5:46 PM
 
Copyright © 2012 Blog Tips and Trick | Powered by Blogger | Design by Umar Backry