Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

2013-04-03

Seperti yang sedikit pernah saya bahas di halaman Syntaxs CSS, baik classs ataupun ID yang ditetapkan pengguna untuk selector.

Penggunaan / Penerapan Class
Class ditentukan dengan memasukkan periode (.) tanda titik Sebelum nama selector/pemilih. Syntaxs untuk mendeklarasikan selector Class, dan sebagai contoh dibawah ini :

.[nama Class] {  
properti: value;  
...
}
Misalnya,
.contohnavbar { 
color: blue;
font-size:24px;
font-weight:bold;
border:1px solid silver;
padding:10px;
}

Agar fungsi dari Class dapat digunakan dan bisa berfungsi, Class harus dipanggil dari THML area, dalam pemanggilan Class ini nama class harus benar-benar sama dengan karakter penulisan Class yang dibuat, apabila berbeda maka fungsi dari class tidak akan berjalan, perhatikan teks warna merah contohnavbar maka berikut contoh pemanggilan Class CSS ke HTML:

<div class="contohnavbar"> Ini adalah contoh menggunakan selector Class. </div>

Maka hasilnya sebagai berikut :

Ini adalah contoh menggunakan selector Class.


Penggunaan / Penerapan ID
ID ditentukan oleh tanda pagar (#) sebelum nama selector. Syntaxs untuk mendeklarasikan selector ID adalah sebagai berikut:

.[nama Class] {  
properti: value;  
...
}
Misalnya,
#footer-contoh {
color: blue;
font-size:24px;
font-weight:bold;
border:1px solid silver;
padding:10px;
}

Untuk memanggil nama ID diatas dapat digunakan dengan kode HTML berikut
<div id="footer-contoh"> Ini adalah contoh menggunakan ID selector. </div>
Maka hasilnya sebagai berikut


Diatas merupakan contoh sederhana atau contoh yang simple tentang penggunaan Class CSS dan juga ID CSS.

Devinisi Class vs ID
Perbedaan antar Class dengan ID yaitu.

ID : ID hanya boleh digunakan dalam satu halaman saja dan tidak boleh dipanggil / digunakan ulang dalam satu halaman untuk element yang lain.  misalnya sebuah nama ID #sidebar-wrapper maka ID #sidebar-wrapper tidak boleh digunakan lagi didalam satu halaman. kalaupun bisa halaman website/blog anda akan dianggap tidak valid HTML.

Class : Berbeda dengan ID, Class css dapat digunakan untuk mengatur banyak element html sebanyak mungkin walaupun dalam satu halaman.

2013-03-10

Kemarin saya posting tentang Pengertian apa itu CSS beserta sejarah CSS yang bisa disimak disini --> , sekarang sedikit tulisan tentang mulai menggunakan CSS, perli diketahui bahwa CSS tidak masuk dalam kategori "Bahasa Pemograman" melainkan untuk pengatur dan pengendalikan tampilan sebuah element saja yang beda dengan PHP dan sejenisnya.

Secara dasar CSS dibagi menjadi 3 bagian yaitu :

  1. Selector : Ini merupkan sebuah elemen pada HTML yang akan kita kendalikan atau yang akan diatur tampilan / style-nya.
  2. Property : Property ini merupakan jenis atau atribut untuk menentukan tingkah laku element.
  3. Value  : Value merupakan isi daripada Property, dan setiap Property harus memiliki Value.
Contoh dasar CSS :


H1 {font-size:18px; text-align:center;color:red;}

  1. CSS dapat diawali dengan : H1, table, body,dll
  2. dilanjutkan dengan kurawal pembuka {
  3. Lalu deklarasi: property:value
  4. Titik koma ;
  5. terakhir yaitu kurawal penutup }
Contoh percobaan :

<html> 
  <head> 

<style>
h1 { 
   font:size:18px;
   color:red; 
   text-align:center; 

</style>

 </head> 
   <body> 

    <h1>Contoh CSS teks di Tengah Warna Merah</h1> 

   </body> 
</html>

- Untuk melihat hasilnya salin kode diatas pada Notepad
- Lalu Save as
- Beri saja nama cssdasar.html
- Save as type : All files
- dan Save

Sekarang bukalah di browser chrome, firefox atau opera dan lihat hasilnya,
Berikutnya akan saya tulis mengenai Penggunaan id/class


Apa itu CSS / Cascading Style Sheet  
CSS - Merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam tentunya tanpa CSS website tidak akan memiliki tampilan yang rapi.
CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS 
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Versi Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer.  Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

CSS3 juga dapat melakukan atau menampilkan animasi pada halaman website / blog, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

Sedikit Contoh CSS :


body {
background-color:#d0e4fe;
font-size:12px;
color:#000000;
}

h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
Seperti itulah sekiranya pengertian CSS dan Sedikit tentang sejarah CSS.
Tag : pengertian css, apa itu css, sejarah css, versi css, css1, css2, css3, definisi css, contoh css, penggunaan css.

2012-07-22

Membuat menu breadcrumbs dengan CSS3, menu bredcrumb bisa dikatakan sebagai menu petunjuk arah atau lokasi pada sebuah postingan blog atau website, manfaat navigasi breadcrumbs ini juga dapat memperbaiki SEO suatu situs yang memasang navigasi breadcrumbs ini. Menurut pakar SEO navigasi breadcrumbs ini membuat postingan blog kan cepat terindeks karena mempermudah Search Engine mengidentifikasi halaman blog. Manfaat lain breadcrumbs menu ini juga untuk mempermudah pengunjung mengetahui lokasi dia dalam sebuah halaman blog untuk kembali ke lokasi urutan dari halaman tersebut.

Saya juga pernah memposting menu hampir seperti ini namun yang dulu berbeda dengan yang ini yang dulu hanya sebuah menu Breadcrhumbs Navigasi kalau mau lihat silahkan lihat dihalaman :
Bikin breadcrumb navigasi menu
Bikin breadcrumb navigasi plus dropdown submenu

Contoh navigasi breadcrumb seperti dibawah ini :
Contoh tampilan breadcrhumbs yang akan kita buat seperti dibawah ini, dan akan nampak di atas judul posting.

Nah jika blog kamu belum memiliki breadcrumb segeralah pasang menu navigasi breadcrumb tersebut, caranya dibawah ini :

1. Masuk ke Template >> Edit HTML dan klik "Expand Widget Template"

2. Cari kode dibawah ini :

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

3. Letakkan kode berikut ini tepat di bawah kode no.2 (kode no.2 ada 2 letakkan setelah kode yang pertama)


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id='breadcrumbs'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li> <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li><b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> </b:loop> </b:if>
<li><a class='current' expr:href='data:post.url'><data:post.title/></a></li>
</ul>
</b:if>

4. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas ]]></b:skin>

Kode CSS Breadcrumb :
ul#breadcrumbs {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs{
background: #eee;font-size:11px;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
box-shadow: 0 0 2px rgba(0,0,0,.2);
/* Clear floats */
overflow: hidden;
width: 100%;
}

#breadcrumbs li{
float: left;
}

#breadcrumbs a{
padding: 3px 12px 3px 17px;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, right bottom, from(#f5f5f5), to(#ddd));
background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);
background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);
background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);
background-image: -o-linear-gradient(left, #f5f5f5, #ddd);
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}

#breadcrumbs li:first-child a{
padding-left: 1em;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

#breadcrumbs a:hover{
background: #fff;
}

#breadcrumbs a::after,
#breadcrumbs a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}

#breadcrumbs a::after{
z-index: 2;
border-left-color: #ddd;
}

#breadcrumbs a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}

#breadcrumbs a:hover::after{
border-left-color: #fff;
}

#breadcrumbs .current,
#breadcrumbs .current:hover{
font-weight: normal;
background: none;
}

#breadcrumbs .current::after,
#breadcrumbs .current::before{
content: normal;
}

5. Simpan template

Sekarang lihat hasilnya pada posting kamu, jika berhasil breadcrumb ini akan tampil diatas judul postingan blog kamu...!

2012-07-18

Sexy Image Hover Efek dengan CSS3, sebuah hover efek pada gambar yang menarik menggunakan CSS3, jadi gambar ini akan menampakkan tingkah laku yang sangat bagus tanpa menggunakan Javascript jadi tidak terlalu menambah berat beban loading blog kamu.
Supaya tidak terlalu penasaran silahkan lihat demonya : Demo Image Hover CSS3

Ini kode untuk membuat efek image hover tersebut.
#Ini untuk CSSnya :
/* IMAGE HOVER EFEK */
.gambar{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
float:left;
margin-left:-50px;
margin-right:-50px;
margin-top:-10px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.gambar img{
padding:10px;
border:1px solid #fff;
}
.gambar:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
-moz-transform:scale(0.8);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform:scale(0.8);
-o-box-shadow:0px 0px 30px #ccc;
}
.gambar .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-4:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-5:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(-360deg);
}
#img-6:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateZ(750deg);
-moz-transform: rotateZ(750deg);
-o-transform: rotat(750deg);
}

#Ini untuk kode HTMLnya :
<div class='gambar' id='img-1'>
<div class='mask'>
</div>
<img src='http://4.bp.blogspot.com/-WSD5fzD4yOc/UAawLa6-dKI/AAAAAAAACA8/AyTo4soq_EI/s1600/01.jpg' />
</div>
<div class='gambar' id='img-2'>
<div class='mask'>
</div>
<img src='http://2.bp.blogspot.com/-mlRUwrWwiLY/UAawMWT8QXI/AAAAAAAACBg/-_ZEaIwrk8k/s1600/07.jpg' />
</div>
<div class='gambar' id='img-3'>
<div class='mask' id='mask-1'>
</div>
<div class='mask' id='mask-2'>
</div>
<img src='http://4.bp.blogspot.com/-h57wte0tlQI/UAawLmLd36I/AAAAAAAACBI/iPoeUnuCe-8/s1600/05.jpg' />
</div>
<div class='gambar' id='img-4'>
<div class='mask'>
</div>
<img src='http://1.bp.blogspot.com/-aYX6nTbt5g0/UAawfTo7ZZI/AAAAAAAACB4/BM9KzC4vdhA/s1600/04.jpg' />
</div>
<div class='gambar' id='img-5'>
<div class='mask'>
</div>
<img src='http://3.bp.blogspot.com/-LYgXKRiXbUg/UAawMNxSKxI/AAAAAAAACBU/yGpGF3L_E48/s1600/06.jpg' />
</div>
<div class='gambar' id='img-6'>
<div class='mask'>
</div>
<img src='http://2.bp.blogspot.com/-coQCCz2NZSY/UAawMhzbkeI/AAAAAAAACBs/Gi3eXblLVuQ/s1600/08.jpg' />
</div>
Lalu bagaimana menerapkannya di blogger ?
Masuk ke >> Dasboard >> Template >> Edit HTML
1. Copy kode CSS (kode yang pertama) dan letakkan tepat diatas ]]>< /b:skin>
2. Lalu Copy kode HTML (kode yang kedua) dan tempatkan dimana gambar akan ditampilkan? Dipostingan bisa atau di sidebar juga bisa.
3. Jangan lupa untuk mengganti teks warna merah yaitu URL gambar yang akan ditampilkan
4. Kalau tampilan belum sesuai dengan layout sampean silahkan otak-atik sendiri sambil bereksperimen, jangan manja ya supaya Mandiri....hehehe

Bagaimana bingung ya? mudah mudahan bisa dicerna, maaf karena belum cukup punya banyak waktu untuk membuat artikel lebih terperinci.

Credit : http://www.nikesh.me/

2012-02-26



Sudah beberapa kali saya posting mengenai cara membuat Menu Navigasi horizontal yang bisa di baca Disini dan juga Disini, tetapi sekarang saya akan bahas tentang cara membuat Menu Navigasi Horizontal dengan CSS3 Menu Maker jQuery.
Kamu akan dengan mudah memilih dan menyesuikan tampilan warna dan model Menu CSS3 tersebut seperti yang kamu sukai.... Tutorial ini menggunakan tampilan blogger baru, jika belum familiar dengan tampilannya jadi sebaiknya rubah dulu ke tampilan blogger baru, Cara merubah tampilan dasboard baru bisa baca Disini dan jangan lupa juga untuk membackup template sebelum melakukan Edit Template cara membackup template bisa baca Disini!

Navigasi Menu dengan CSS3 Generator

1. Silahkan masuk ke CSS3 Menu Generator
2. Akan terlihat beberapa pilihan yang berguna untuk menyesuaikan tempilan yang diinginkan mulai dari warna menu, jenis huruf, model kotak pencarian dan lain2.
3. Kalau sudah lihat kanan atas dan Klik "Grab The Menu Code" akan muncul jendela tampilan kode dan terdapat 3 jenis kode, kode ini yang harus dimasukkan kedalam template blog kamu silahkan lanjutkan kebawah :
4. Sekarang masuk ke Dasboard >> Klik ikon tanda anak panah >> Template >> Edit HTML >> Proceed
 Akan muncul Jendela baru yaitu Kode HTML template
5. Salin dan letakkan kode 1 (pertama) diatas kode ]]></b:skin>
6. Salin dan letakkan kode 2 (kedua) tepat dibawah :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Jika tidak menemukan kode paa langkah 6 ini. cari yang mirip seperti kode diatas.
7. Salin dan letakkan kode 3 (ketiga) tepat diatas </head> (Jika terjadi error langkah 7 ini bisa dilewatkan saja)
8. Simpan Template dan lihat hasilnya

Jangan lupa untuk merubah Link dan nama Link kode ini terdapat pada kode 2 (kedua) contohnya seperti ini :
<a href="#">portfolios</a>
<a href="#">Latest Projects</a>
- Rubah tanda pagar dengan URL Blog kamu
- Rubah Teks warna Merah dengan nama dari blog kamu
Kalau menemukan kerusakan pada CSS3 Menu Maker mohon untuk memberitahu saya melalui komentar ini. Selamat mencoba maturtenkiu...

2011-12-31

Kali ini Bang U-sup pingin menulis sebuah artikel tentang Tutorial Membuat Spinning icons dengan CSS3 transform, widget sebuah icons dengan efek yang apabila disorot akan berputar secara otomatis, widget ini bisa diterapkan sebagai link social seperti Facebook, RSS, Twitter.

Berikut demonya coba arahkan kursor pada icon dibawah ini:

- socialicons1 360 degree spin onMouseover dan onMouseout

- socialicons2 60 degree spin onMouseover and onMouseout

- socialicons3 360 degree spin onMouseover ONLY


Sekarang cara membuat Spinning icons dibawah ini :

1. Login ke Blogger
2. Pada dasboard cari dan Klik Edit HTML
div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

div#socialicons1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

div#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

div#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

div#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

div#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg); }
3. Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></b:skin>
4. Jangan lupa simpan template.
5. Sekarang masuk ke Design >> Page Elements
<div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda -->
<a href="http://urlanda.com/RSS"><img border="0" src="http://1.bp.blogspot.com/-aFoaagR_vc0/Tv3m_2_OLBI/AAAAAAAABm8/MEmujyAi4Ag/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="http://4.bp.blogspot.com/-ZUhz4ru6RBs/Tv3m_X4XuYI/AAAAAAAABmo/6LQ4IolE0W0/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="http://4.bp.blogspot.com/-qWEX1j-tXHA/Tv3m_u0aWII/AAAAAAAABm0/AwN9Qkkl-Us/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="http://2.bp.blogspot.com/-tyZhlZfCKjQ/Tv3m_0e3ovI/AAAAAAAABnM/MjE8VOFkO7M/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="http://1.bp.blogspot.com/-x4DBFqxf3Jo/Tv3nAadEdNI/AAAAAAAABnY/Q3onklhZIEc/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>
6. Klik Add Gadget kemudian pilihlah HTML/Javascript
6. Sekarang salin dan tempel kode dibawah ini pada form yg tersedia kemudian simpan
7. Coba lihat blog kamu.

Model dan Penyesuaian :
  • Mengganti model diatas ada 3 pilihan model ganti saja <div id="socialicons1"> dengan angka misalnya socialicons2 atau socialicons3 
  • Jika gambar terlalu besar untuk ditampilkan pada Sidebar, dan lebih suka dengan tampilan yang lebih kecil silahkan unduh gambarnya Di sini, kemudian kecilkan gambar tersebut menggunakan Photosop atau Photo Editor lainnya, lalu uploadlah gambar ke blogger dan gantilah URL gambar dengan URL yg kamu Upload (URL gambar yg berwarna Kuning). bisa membca Di-sini bagaimana mengupload gambar di blogger
  • Kamu bisa bereksperiment sendiri untuk menghasilkan model efek dengan cara mengedit angka pada kode CSSnya, jika masih belum faham dengan css sebaiknya cara ini tidak usah
  • Ubahlah URL / URL dengan punya kamu lihat teks warna Hijau
  • Tutorial diatas bisa kamu baca langsung pada sumbernya : http://www.dynamicdrive.com dalam bahasa Inggris