Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Friday, 7 February 2014

membuat Background website dari CSS

Diposkan oleh linda marlina , di 23:31
comments0 komentar
Selamat datang di blog Panduan Belajar Website Lengkap . Berikut ini adalah update artikel terbaru mengenai informasi tentang membuat Background website dari CSS silahkan untuk membaca dengan seksama dan mohon untuk disikapi dengan bijaksana mengenai informasi di artikel membuat Background website dari CSS , semoga artikel tentang membuat Background website dari CSS dapat menambah wawasan serta info yang anda cari atau butuhkan.
ni Tips saya dapatkan dari teman blog yang Ilmunya sangat membantu saya dalam membuat background Website

CSS Background

Property backgound dari CSS ini digunakan untuk membuat efek background  pada elemen.
Terdapat beberapa property backgound:
  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

background-color

Digunakan untuk memberikan warna background pada sebuah elemen.
Contoh:
body {
background-color:“blue”;
}
Property background-color ini bisa kita beri nilai dengan :
  • Nama warna seperti “red”, “blue”, “white”.
  • Nilai RGB seperti “rgb(255,0,0)”.
  • Nilai Hexadesimal seperti “#ffffff”.

background-image

Digunakan untuk memberikan beckground gambar pada sebuah elemen.
Defaultnya-> gambar diulang-ulang secara horizontal dan vertikal sehingga dia memenuhi seluruh elemen.
Contoh:
body {
background-image:url(‘fahmi.png’);
}


Pengulangan Gambar

Background-image ini mempunyai dua bentuk pengulangan, yaitu:
  • repeat-x yaitu pengulangan secara horizontal.
  • repeat-y yaitu pengulangan secara vertikal.
Contoh:
Pengulangan secara horizontal:
body {
background-image:url(‘fahmi.png’);
background-repeat:repeat-x;
}
Keterangan:
Jadi untuk membuat pengulangan gambar kita membutuhkan property background-repeat.
Muncul Pertanyaan:
Jika saya tidak ingin mengulang image backgroundnya gimana … ?
Jawaban:
Kamu bisa memberi nilai pada property background-repeat dengan ‘no-repeat‘ seperti kode dibawah ini:
background-repeat:no-repeat;

background-attachment

Digunakan saat halaman web di scroll maka terdapat dua pilihan:
  • fixed yaitu backgroundnya tetap walaupun user men-scroll halaman web.
  • scroll yaitu background ikut terscroll ketika user mens-scroll halaman web.
Cara menggunakannya adalah seperti ini:
background-attachment:fixed;
background-attachment:scroll;
Jika tidak didefinisikan maka nilai defaultnya dari background-attachment adalah scroll.

Mengatur Posisi Background

Untuk mengatur letak background gambar maka CSS menyediakan property background-position.
Contoh:
Untuk Meletakkan posisi background gambar ditengah maka kamu bisa gunakan kode dibawah ini:
background-position:center;
Terdapat tiga pendefinisian nilai untuk property background-position yaitu:
  • panjang yaitu dengan menggunakan angka disertai satuan pixel misal 20px 10px.
  • Persentasi yaitu dengan menggunakan angka diikuti tanda persen misal 10% 20%.
  • Keyword yaitu dengan menggunakan kata-kata misal top center.
Contoh:
Property background-position dengan menggunakan pixel:
background-position:20px 10px;
Keterangan:
  • 20px adalah posisi horizontal
  • 10px adalah posisi vertikal
Jadi nilai pertama adalah untuk posisi horizontal sedangkan nilai kedua untuk posisi vertikal.
Read more →
categories ,

Tuesday, 9 April 2013

Membuat Text Box Dengan Efek Hover dengan CSS 3

Diposkan oleh linda marlina , di 01:31
comments0 komentar





Setelah beberapa hari gak posting karena baru pengisian jadwal baru untuk semester 4 yang merepotkan dikarenakan dalam masa transisi kurikulum baru dan Pada kesempatan kali ini saya akan posting mengenai Membuat Text Box Dengan Efek Hover dengan CSS 3 Ok ngak perlu panjang lebar langsung saja simak


 Seperti biasa Login ke Akun Blogger sobat
Klik Template >> Klik Edit HTML >> Jangan Lupa Centang Expand Widget Template >> Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>
(gunakan CTRL + F untuk mempermudah)

.KTboxmessage{color: white;background-color: black;width: 500px;margin: 5px 60px;padding: 20px 20px 20px 20px;border: 2px dotted lightgrey;border-radius: 10px;box-shadow: -1px -1px 12px 2px gainsboro;transition: background-color .777s;-webkit-transition: background-color .777s;-moz-transition: background-color .777s;-o-transition: background-color .777s;-ms-transition: background-color .777s;}.KTboxmessage:hover{background-color: CornflowerBlue ;}.KTboxmessage:active{background-color: darkgreen ;}

 Klik Save



 Klik Save
Keterangan :
Untuk Penulisan do dalam postingan atau widget gunakan kode :

<div class="KTboxmessage" style="font-family: &quot;Courier New&quot;,Courier,monospace;">LetakanTulisan Atau Kode Disini</div>

Read more →
categories

Monday, 8 April 2013

Desember CSS Gallery Spesial

Diposkan oleh linda marlina , di 09:58
comments0 komentar


CSS Image Gallery didesain untuk memuat 10 buah image. Controll gallery berupa thumbnail serta button next dan previous. Untuk menampilkan setiap image dalam gallery dilakukan dengan meng-klik thumbnail contoll yang menampilkan 5 buah thumbnail dalam bentuk deret horizontal. Thumbnail controll sendiri sebenarnya berisikan 10 thumbnail, sehingga agar setiap thumbnail dapat terlihat maka pergeseran thumbnail dilakukan melalui button prev dan next.

Kode CSS :
#album{
        width:750px;
        height:1025px;
        margin:0 auto;
        position:relative;
        font-family:verdana, arial, sans-serif;
        background:#f8f8f8;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
}
#album #thumbs{position:absolute; left:0; top:0; height:190px; width:750px; overflow:hidden; text-align:center; z-index:500;}
#album #thumbs div{width:750px; height:270px; position:relative; padding-top:10px;}
#album #thumbs div ul{padding:0; margin:0 auto; list-style:none; width:684px;}
#album #thumbs div ul li{float:left; padding:10px 0 5px 1px; margin:0 1px 0 1px;}
#album #thumbs div ul li a{display:block; width:88px; height:139px; float:left; border:3px solid #FFFFCC;} /* tinggi - lebar bingkai thumnail */
#album #thumbs div ul li a b{display:none;}
#album #thumbs div ul li a.prev{background:url(https://lh6.googleusercontent.com/-buPnfhNt5Y8/T2vuVYNNpaI/AAAAAAAAAec/W7SmcpIU-aM/h120/prev-css-gallery.jpg) no-repeat center center;}
#album #thumbs div ul li a.next{background:url(https://lh3.googleusercontent.com/-SXF_VlYzPjU/T2vuWQAu22I/AAAAAAAAAek/0jUqBQok8u8/h120/next-css-gallery.jpg) no-repeat center center;}
#album #thumbs div ul li a img{display:block; width:88px; height:139px; border:0; opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=50);} /* tinggi-lebar thumbnail dan transparansi */
#album #thumbs div ul li a:hover img{  opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100); } 
#album #thumbs div ul li a:focus{outline:0;}
#album #fullsize{position:absolute; left:0; top:0; height:1025px; width:750px; overflow:hidden; text-align:center; z-index:200;} /* tinggi - lebar seluruh kolom album */ 
#album #fullsize div{width:750px; height:1025px; padding-top:170px; position:relative; background:#333333;} /* bingkai image preview */
#album #fullsize div img{clear:both; display:block; margin:0 auto; border:10px solid #fff; width:480px; height:710px; position:relative;} /* tinggi - lebar image show/preview */
#album #fullsize div h3{padding:10px 0 0 0; margin:0; font-size:18px; color:#33FF66;} /* h3 */
#album #fullsize div p{padding:5px 0; margin:0; font-size:12px; line-height:18px; color:#33CCFF;}

xHTML :
<div id="album">
<div id="thumbs">
<div id="thumb1">
<ul>
<li><a href="#thumb10" class="prev"><b>prev</b></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#thumb2" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb2">
<ul>
<li><a href="#thumb1" class="prev"><b>prev</b></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#thumb3" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb3">
<ul>
<li><a href="#thumb2" class="prev"><b>prev</b></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#thumb4" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb4">
<ul>
<li><a href="#thumb3" class="prev"><b>prev</b></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#thumb5" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb5">
<ul>
<li><a href="#thumb4" class="prev"><b>prev</b></a></li>
<li><a href="#gbr5"><img src="URL-image5.jpg" alt="Title Image-5" /></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#thumb6" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb6">
<ul>
<li><a href="#thumb5" class="prev"><b>prev</b></a></li>
<li><a href="#gbr6"><img src="URL-image6.jpg" alt="Title Image-6" /></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#thumb7" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb7">
<ul>
<li><a href="#thumb6" class="prev"><b>prev</b></a></li>
<li><a href="#gbr7"><img src="URL-image7.jpg" alt="Title Image-7" /></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#thumb8" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb8">
<ul>
<li><a href="#thumb7" class="prev"><b>prev</b></a></li>
<li><a href="#gbr8"><img src="URL-image8.jpg" alt="Title Image-8" /></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#thumb9" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb9">
<ul>
<li><a href="#thumb8" class="prev"><b>prev</b></a></li>
<li><a href="#gbr9"><img src="URL-image9.jpg" alt="Title Image-9" /></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Winterbranches" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#thumb10" class="next"><b>Next</b></a></li>
</ul>
</div>
<div id="thumb10">
<ul>
<li><a href="#thumb9" class="prev"><b>prev</b></a></li>
<li><a href="#gbr10"><img src="URL-image10.jpg" alt="Title Image-10" /></a></li>
<li><a href="#gbr1"><img src="URL-image1.jpg" alt="Title Image-1" /></a></li>
<li><a href="#gbr2"><img src="URL-image2.jpg" alt="Title Image-2" /></a></li>
<li><a href="#gbr3"><img src="URL-image3.jpg" alt="Title Image-3" /></a></li>
<li><a href="#gbr4"><img src="URL-image4.jpg" alt="Title Image-4" /></a></li>
<li><a href="#thumb1" class="next"><b>Next</b></a></li>
</ul>
</div>
</div>
<div id="fullsize">
<div id="gbr1">
<img src="URL-image1.jpg" alt="Title Image-1" />
<h3>Title Image-1</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr2">
<img src="URL-image2.jpg" alt="Title Image-2" />
<h3>Title Image-2</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr3">
<img src="URL-image3.jpg" alt="Title Image-3" />
<h3>Title Image-3</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr4">
<img src="URL-image4.jpg" alt="Title Image-4" />
<h3>Title Image-4</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr5">
<img src="URL-image5.jpg" alt="Title Image-5" />
<h3>Title Image-5</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center> 
</div>
<div id="gbr6">
<img src="URL-image6.jpg" alt="Title Image-6" />
<h3>Title Image-6</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr7">
<img src="URL-image7.jpg" alt="Title Image-7" />
<h3>Title Image-7</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr8">
<img src="URL-image8.jpg" alt="Title Image-8" />
<h3>Title Image-8</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr9">
<img src="URL-image9.jpg" alt="Title Image-9" />
<h3>Title Image-9</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
<div id="gbr10">
<img src="URL-image10.jpg" alt="Title Image-10" />
<h3>Title Image-10</h3>
<center><h2><p>Anda bisa melihat berbagai effect gambar dan album di bloggerstars1</p><p><a href="http://bloggerstuars.blogspot.com/">bloggerstars1 - Tutorial Blogger</a>.</p></h2></center>
</div>
</div>
</div>

Cara membuat image gallery :
  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Kembali halaman baru akan terbuka, klik "Edit HTML".
  4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
    • Backup/Restore Template » berisi fitur untuk melakukan backup template.
      Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
    • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
    • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
  5. Cari kode ]]></b:skin> pada "Box Edit Template".
  6. Copy kode CSS kemudian letakkan di atas ]]></b:skin>.
  7. Klik "Simpan Template (Save Template)".
  8. Gunakan xHTML melalui "Add a Gadget atau posting box.

Catatan/Keterangan :
  1. Image berukuran : 480 x 710 (px) » URL-image1.jpg s/d URL-image10.jpg
  2. Thumbnail berukuran : 88 x 139 (px) » URL-thumb1.jpg s/d URL-thumb10.jpg
Read more →
categories
Subscribe to: Posts (Atom)
 
tips dan trik | © 2012 by O Pregador and Dicas Blogger | Powered by Blogger
Web Analytics