Membuat Efek Blur dengan Opacity

Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat keburaman sebuah gambar. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai keburaman untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla menggunakan standar nilai 0 s/d 1.0. Apabila nilai terendah digunakan (0=nol), maka gambar akan ditampilkan dalam bentuk transparan. Jadi semakin kecil nilai opacity, maka gambar menjadi semakin buram hingga mencapai bentuk gambar transparan. Dalam penggunaannya, opacity bisa ditempatkan di bagian body atau head bergantung kepada tingkat kebutuhan pengguna. Penempatan yang bersifat permanen dilakukan pada bagian head, sedang penggunaan pada bagian body bersifat temporer. Sifat opacity yang mampu menciptakan banyak fungsi membuatnya banyak digunakan untuk menciptakan effect-effect yang atraktif dan dinamis sehingga tampilan blog menjadi semakin variatif dan menarik.



KODE-KODE di bawah ini merupakan contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar :

1. Penggunaan opacity di bagian head. KODE ini bisa ditempatkan di atas ]]></b:skin>

KODE CSS

<style type="text/css">

.blur img {filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:0;}

.blur:hover img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}

</style>

KODE untuk menampilkan effect opacity saat posting gambar/photo :

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/halleberry_004.jpg" border="0" alt="penelopecruz"/></a>

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg " border="0" alt="penelopecruz"/></a>

Catatan :

KODE berwarna hijau merupakan URL gambar yang akan di terbitkan saat posting.


2. Penggunaan opacity di bagian body (di ruang posting) yang bersifat temporer:

<a href="http://gubhugreyot.blogspot.com"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg" alt="pics" style="filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:2;"></a>

Catatan :

Ganti KODE yang berwarna kuning dan hijau dengan yang ingin dipostingkan.

Read more »

Membuat Elemen Hanya Muncul Pada Posting

Buat judul asal aja ah,,,! tapi yang saya maksud adalah elemen yang hanya muncul saat dalam postingan saja,sedangkan waktu dalam homepage tidak akan terlihat.
lihat perbedaan antara homepage saya dengan postingan yang sedang anda baca ini, dan anda akan melihat iklan(diatas dan di bawah posting), dan pada homepage iklan itu tidak ada bukan? mau tahu cara membuatnya, sangat mudah ternyata. caranya sbb:

1. Pertama-tama login ke Blogger, selanjutnya pilih menu Tata Letak > Edit HTML.

2. Backup dulu templatenya.

3. Centang checkbox Expand Template Widget.(jngn lp download dl demi keamanan)

4. Cari kode dibawah ini:


]]></b:skin>


5. Nah, lalu ketikkan kode berikut ini diatas kode tersebut:

#postonly{
display:none;
border:1px solid #000000;
padding:5px;
margin-top:10px;}

6. Cari kode berikut ini:

</head>

7. Lalu taruh kode berikut ini diatasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#postonly{display:block; border:1px solid #000000; padding:5px; margin-top:10px;}
</style>
</b:if>

8. Kalau sudah, cari kode berikut ini

<p><data:post.body/></p>

9. Lalu, ketikkan kode berikut dibawah kode diatas.

<div id='postonly'>
Ketikkan kode widget/HTML yang diinginkan disini
</div>

cuma begitu saja, selamat mencoba aja!

Read more »

Membuat Daftar Isi dan Accordion Pada Blog

Biasanya kami memiliki begitu banyak posting di blog kita dan jika kita menggunakan TOC itu akan sangat panjang. Jika kita memiliki TOC sangat panjang, itu membuat pengunjung sulit untuk membaca posting kami. Untuk membuatnya mudah dibaca saya membuat modifikasi dari script sebelumnya Tabel Isi untuk gaya Blogger baru dan saya menggunakan Accordion.Fitur dari script ini:

   1. Efek Accordion
   2. Menampilkan dan menyembunyikan efek
   3. CSS 3
   4. Otomatis tambahkan jquery
   5. Warna yang berbeda untuk konten
   6. Gaya yang berbeda untuk membuka dan menutup
   7. Auto Urutkan judul
   8. Tambahkan Baru! selama 10 entry terbaru
Cara menggunakan sangat mudah. Buat Static Page.Masukkan script dalam mode Html

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>

<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<script type="text/javascript">

var accToc=true;

</script>

<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

ganti kata yang di tandai hijau dengan blogmu

lihat DEMO disini 

gambar Berikut adalah cara membuat halaman di blogger

  

sumber

Read more »

Cara Membuat Gambar Marquee(Gambar Berjalan)

Gambar yang berjalan sama halnya dengan teks berjalan (marquee) bedanya hanya antara gambar dengan teks,  nah sekarang kita langsung aja ke TKP.....

Nah....buat yang pengen bikin gambar bergerak seperti diatas, ikuti langkah - langkahnya sebagai berikut :

• Seperti biasa login di blogger, lalu masuk ke layout kemudian page element.
  
  
• Klik add new page element --> HTML/JavaScript. Untuk letaknya terserah anda, mau diletakkan di sidebar, footer, atau dimana saja juga bisa.
• Copy Paste kode dibawah ini :
  
  
  
  <marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" onmouseover="this.stop()" width="100%" height="100"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCax2ZZNzJ0Rp6fp8uUR9uB6CzWoZRvFFZi3CWsSWl1ORSxCXGJw5xQKyMVomXv29DxdkSPS2H78zUrLuLkexHzLibxi4CE03n5lfZNYuTGdVsEOptLEsnhW1n-JkgSu7tNUrS174erDgh/s400/Firefox.jpg" alt=""/>
<img src="http://static.technorati.com/pix/fave/btn-fave2.png" alt="" />
</marquee>
  
  Text yg berwarna merah adalah kode HTML untuk gambar. Untuk mengganti gambarnya, silahkan ganti text yg berwarna merah tebal dengan url gambar anda.
  Text yg berwarna hijau tebal, adalah arah bergerak gambar. Untuk mengganti arahnya, silahkan ganti kata "up" dengan "down", "left" atau "right".
• Save dan Selesai..

::::TIPS::::

1. Gambar bergerak tersebut bisa juga disimpan di postingan. Caranya, ketika memposting klik edit html lalu masukan kode seperti diatas.
2. Untuk menampilkan gambar beserta link-nya, silahkan masukan script di bawah ini. 
3. <a href="url anda"><img src="url gambar anda"></a>

Read more »

Membuat Menu Navigasi Dengan CSS3 Menu

Sekarang ini untuk membuat menu navigasi yang keren kita tidak lagi membutuhkan waktu yang lama dan kode-kode yang lumayan panjang. Cukup dengan aplikasi "gratis" CSS3 Menu kita sudah dapat membuat menu navigasi yang cantik dan enak dilihat.

CSS3 Menu merupakan sebuah aplikasi untuk membuat sebuah menu navigasi yang keren dengan menggunakan CSS dan tanpa Javascript. Menu ini dapat berjalan dengan baik pada Firefox, Opera, Chrome dan Safari. Fungsi dropdown-nya juga dapat berjalan pada browser yang tidak kompatibel dengan CSS3  seperti IE7+. Untuk keterangan lebih jelasnya bisa dilihat di website resminya http://css3menu.com/ .

Fitur-fitur aplikasi:

1. Tidak memerlukan JavaScript
   Jadi dapat berjalan pada browser dengan Javascript yang dinonaktifkan atau browser yang tanpa dukungan Javascript sama sekali.
2. Dukungan properti-properti yang keren
   Properti-properti yang disediakan antara lain: Multi-level menu dropdown dengan sudut yang bulat, properti kotak-bayangan dan teks-bayangan. Terdapat pula properti lainnya seperti opacity, backround dan warna font, gradien linier dan gradien radial CSS3.
3. Multi kolom submenu
   Tinggal menentukan jumlah baris dan kolom yang ingin dibuat.
4. Ukuran kecil
   Tidak menggunakan file-file tambahan. Sehingga tidak memakan waktu lama saat load halaman.
5. Dukungan browser modern
   Didukung semua browser modern (kecuali IE6).
6. Interface GUI
   Mempunyai user interface yang memungkinkan kita untuk membuat menu tanpa perlu menulis coding yang kompleks, cukup dengan beberpa klik saja
7. Dsb.

Tentu saja yang namanya aplikasi yang gratisan pasti mempunyai keterbatasan. Jadi untuk menggunakan fitur-fitur dari CSS3 Menu yang lebih lengkap, kita diharuskan mengeluarkan biaya untuk membelinya. Namun untuk ukuran aplikasi "gratisan" CSS3 menu ini sudah cukup mumpuni untuk sekedar membuat menu navigasi yang "mewah" dan "keren" :)

Read more »