Membuat Effect Gelap Terang pada Widget

|
Membuat Effect Gelap Terang pada Widget ~ Setelah share sebuah tips untuk Mengetahui Type Cewek dari Tangisan, hari ini ARMAN BLOG akan share sebuah Blogger Tutorial nemu dari hasil blogwalking mengenai Membuat Effect Gelap Terang pada Widget yang mungkin akan cukup menarik buat kalian terapkan di blog kesayangan kalian. Katanya effect ini dibuat menggunakan Opacity Effect dan CSS3 Transition, disusun sehingga menghasilkan sebuah effect gelap pada sebuah widget di sidebar dan akan menjadi terang/jelas setelah kalian menyentuh widget tersebut dengan cursor kalian. Untuk lebih jelasnya silahkan kalian arahkan cursor kalian ke widget di bawah ini.


He...Bagaimana? Cukup menarik bukan?. Kalau kalian tertarik, silahkan ikuti langkah-langkah berikut.

1. Login ke akun blogger kalian, bisa klik Disini

2. Jika sudah, kalian klik Rancangan/Designe >> pilih Edit HTML

3. Cari kode ]]></b:skin> , gunakan Ctrl+F untuk mempercepat pencarian kode

4. Setelah ketemu Copy kode di bawah ini dan paste di atas kode  ]]></b:skin>

.boxwidget {
      height: 250px;
      overflow: auto;
      margin: 20px 4px 10px;  
      padding: 15px 8px;
      background: #111;
      color: #666;
      border: 2px solid #555;
      border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      opacity: 0.4;
      filter:alpha(opacity=40);
     -o-transition: all ease-in 1.2s;
     -moz-transition: all ease-in 1.2s;
     -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
      background: #660000;
      color: #eee;
      opacity: 1.0;
      filter: alpha(opacity=100);
}

Keterangan :
- Nilai opacity menggunakan nilai dari 0 s/d 100.
- Nilai opacity menggunakan nilai dari 0 s/d 1.0
- Semakin kecil nilai opacity maka akan semakin gelap, demikian pula sebaliknya, semakin besar maka akan semakin terang/jelas. Silahkan kalian sesuaikan dengan keinginan.


5. Klik Simpan Template


Selanjutnya ke Widget/Gadget

1. Masih dalam tab Rancangan, silahkan kalian klik Elemen Laman

2. Kemudian klik Tambah Gadget/Widget dan copas kode di bawah ini ke kolom konten

<div class="boxwidget">
Kode Widget Kalian
</div>

Ketikan warna Hijau adalah kode untuk memanggil kode effect.
Ketikan warna Kuning  kalian ganti dengan kode widget kalian.

3. Kalau sudah selesai, klik Simpan/Save dan lihat hasilnya.

Semoga apa yang saya dapat dari hasil blogwalking ini bermanfaat
Baca juga Blogger Tutorial lainnya Happy blogging....

Source http://fajar7siblings.blogspot.com/



23 komentar:

Jejak Puisi said...

pertamaxxx... :D

hohooho... tutor buat blogger lagi nih kang... ijin nyimak dulu y kang. moga bermanfaat^^

salam blogger^^

Lensa said...

Wuiih mantap nih... Makasih ya sobat.
Oh iya, ada award buat sobat. diambil ya...

sweethy said...

Tutorial yang keren niy, Di coba kayaknya bikin bagus blog kita ya,,,Thank Friend:)

Asis Sugianto said...

wah keren banget nih efek gelap terangnya sobat...

ARMAN said...

@Jejak Puisi, Woh begadang terus sob...silahkan semoga benar bermanfaat thanks

@Lensa, Sama-sama okey thanks ntar diambil

@Sweethy, Thanks sob silahkan

@Asis, Thanks sob

agusbg said...

keren ya.. tapi cepat atau lambat nggak ada pengaturannya ya...

ARMAN said...

Coba ubah pada kode ini sob

-o-transition: all ease-in 1.2s;
-moz-transition: all ease-in 1.2s;
-webkit-transition: all ease-in 1.2s;

Nando Cyber4rt said...

saya juga sempet pake cara seperti om arman pas masih pake template hijau :D
mantap om, oh iya ada sedikit hadiah kecil buat om arman, mohon untuk diambil yah :D

Iskaruji dot com said...

tehnik hover yang mantab Sob...cocok tuk halaman dominan gelap seperti ini...nice share and happy blogging

ARMAN said...

@Iskaruji, He iya soa thanks n happy blogging

Search ilmu said...

Sangat bermanfaat

ARMAN said...

@Search ilmu, Semoga benar bermanfaat...amin...thanks

Ofie said...

sep mas.. membantu skali

Indonesia Ku said...

wah menarik artikelnya...selamt pagi..salam..

ARMAN said...

@offie, Alhamdulillah

@Indonesia Ku, Thanks selamat pagi juga

GRAVITY AND RELATIVITY said...

thanks :D

ARMAN said...

@Gravity And Relativity, Sama-sama thanks :D

pasarherbal said...

Mantep nih sob tutornya...kalo ane ijin publish ulang boleh ga...nti ane cantumin sumbernya...kalo ga boleh ya ga papa sob ane sangat menghargai ko salam sehat selalu...

ARMAN said...

@pasarherbal, Silahkan sob... thanks

kampungku corolla said...

wah asik dong bagus nig saya mu coba nih so...boleh ga saya terapkan di blog kampungku,...he...he

ARMAN said...

@kampungku, silahkan sob :D

Ruwega Pangestu said...

saya belum ngerti ni gan tentang ini ,, kasi contohnya dong ..
Ketikan warna Hijau adalah kode untuk memanggil kode effect.
Ketikan warna Kuning kalian ganti dengan kode widget kalian.

ARMAN said...

@Ruwega, Menurut sumbernya yang warna hijau adalah kode untuk mmanggil CSS yang kalian taruh di kode template sedangkan yang warna kuning adalah kode widgetnya sob atau kode dari fans page facebook seperti contoh diatas. Semua kode itu ditaruh pada widgetnya

Post a Comment

Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

Related Posts Plugin for WordPress, Blogger...