Notifikasi :

Selamat Datang Di Blog Saya.

Nama : Dhaanzzzz.

Status : Pelajar.

  • Kurumi

    Tamako Kitashirakawa is the eldest daughter of a family which runs a mochi shop in her town's bustling Tama-ya shopping district.

  • Tohka

    The story is set in a futuristic and peaceful world made possible thanks to the invention of the Manifestation Engine (示現エンジン Jigen Enjin?), which solved an energy crisis five years prior.

  • Snow Miku

    Eita Kidō enters high school with the aim to attend medical school. Due to his parents getting divorced and his intention to maintain his grades, he shuns anything to do with romance or love.

  • Tsukiko

    The story is set in a world embroiled by war between Humans and Demons. The Humans' greatest hero invades the Demon King's castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.

Cara Membuat Notifikasi Sederhana Menggunakan CSS3

Hello Sobat, saya mau berbagi trik Cara Membuat Notifikasi Sederhana Menggunakan CSS3, simak baik baik ya

Langsung saja simak.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.
Screenshot

CSS

Buka blogger => template => Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

#woro {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,102,0,0.7); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#woro a {
display:block;
text-decoration:none;}
#woro span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#woro span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}

@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}



HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

*jangan pernah katakan tidak ada <body>,karena setiap template blog/website pasti ada.
kemungkinan template body anda menggunakan class,misal <body class='home blog'>

<div id='woro'>
<span>
<h2><b>Notifikasi :</b>
<p>Selamat Datang Di Blog Saya.</p>
<p>Nama : Rukmandani</p>
<p>Status : Pelajar.</p>
</h2>
</span>
</div>


Untuk menambah baris notif baru,tambahkan:

<p>text kamu</p>

di antara:

<h2> .... </h2>






1. Pengaturan posisi notifikasi. 

Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

Posisi top:10px dan right:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)

#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}

Contoh :

Atas,kanan.
right: 10px;
top: 10px;

Bawah,kanan.
right: 10px;
bottom: 10px;
Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.
top:atas
bottom:bawah
right:kanan
left:kiri


Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)

Jika notofikasi ini ingin tampil di halam utama saja maka script di taruh di bawah
 <b:if cond='data:blog.url == data:blog.homepageUrl'>

Sekian dari saya dan terimakasih sudah berkunjung di blog saya

Sumber : klik
Read More
0 Comments
Tag : ,

Tutorial Membuat Slide Show Menggunakan Adobe Flash CS3


Tak usah banyak kata kata, karna saya bukan seorang yang pintar mengarang cerita  langsung saja ke topik, seperti judul di atas, yaitu Tutorial Membuat Slider menggunakan Adobe Flash CS3, pertama  yang harus kita siapkan yaitu Aplikasinya Adobe Flash CS3, iya dong kalo ga pake Tu Aplikasinnya Mana bisa mengikuti tutorial ini
Jika Belum punya Aplikasinya bisa download Disini :

  1. link 1
  2. link 2
  3. Mirror

Yuk langsung menuju ke TKP

Pertama buka dulu Aplikasinya, jika sudah pilih yang Flash File (Action Script 2.0)


Oke setelah itu lanjut Atur ukuran Canvasnya, untuk lebih detail lihat gambar aja Smiley


Selanjutnya Jika ingin memilih warna Background, klik Background Color

lanjut lagi, ambil foto dari directori, Klik File > Import > Import to library


jika sudah, sekarang tinggal ambil gambarnya Smiley Pilih gambar > klik Open.


Oke selanjutnya, seret gambar yang sudah berada di library ke canvasnya Smiley dan atur tata letak gambar, biar gambar sama atur aja di propertinya X = 0.0 dan Y = 0.0, liat gambar ya Smiley


Selanjutnya buat time untuk membuat efeknya Smiley taruh dimana saja, misal punya saya cuma 45 sekon. Kliki kanan > insert Keyframe.


Lanjut step berikutnya Smiley Klik pada frame > Create Motion Tween. cek gambar ya Smiley


Setelah itu beri 2 pembatas pada frame, biar gambarnya istilahnya mirip fade in lah hehe Smiley klik kana pada frame > insert keframe.


Kemudian langkah berikutnya Klik No 1 dan di No 45 (ini satu satu dulu, misal No1 dulu) pada frame > klik gambarnya > pilih color > ganti menjadi alpha > terus ganti menjadi 10% (ini terserah selera anda).


Lnjut buat Linkaran kecil aja, ga usah besar besar Smiley dan lingkaran tersebut di beri warna (warna terserah selera masing - masing), dan di beri angka biar kelihatan sedikit bagus Smiley, setiap lingkaran harus mempunya i layer sendiri sendiri ya Smiley ini kan kita hanya membuat 4 slide saja Maaf baru diberitahu disini heheh Smiley jadi layer yang di butuhkan cuma 5, kok bisa 5 ?? karena layer pertama di buat untuk gambar slidenya Smiley, sedangkan layer 2 sampai layer 5 dibuat Lingkaran beserta angkanya, oke jika belum tau cara membuat lingkarannya, kli huruf O (wOw bukan w0w Smiley ) pada keyboard, selanjutnya tool Ovalnya, awalnya tool imi rectangulah, setelah kita tekan huruf O (wOw bukan w0w Smiley ) pada keyboard menjadi Oval Smiley, mudeng kan ?? harus mudeng ya Smiley.

jika sudah membuat 4 lingkaran beserta angkanya, kemudian atur warna pada ke-4 lingkaran tersebut, klik gambar yang mau diatur warnanya  > klik color > atur Alphanya menjadi 50% aja Smiley.  lebih jelas lihat gambar.

Lanjut, sekarang kita harus men-Duplicate scene yang sudah kita buat tadi, cara menampilkan scene ketik di keyboard Shift+F2 atau engga klik Window > Other Panels > Scene.


Jika Sudah, sekarang tugas kita, kita ???? lo aja kali Smiley gue engga Smiley men-Duplicate scene, caranya klik icon anak panah ke kanan pada scene, klik sebanyak slide yang di mau. lihat gambar.

Kemudian Buat lingkaran itu menjadi Button cara nya klik lingkaran > tekan F8 > pilih button > Ok. seterusnya pada lingkaran lingkaran itu, dan di scene berikutnya juga begini Smiley.



Smiley Lanjut lagi Klik kanan pada Lingkaran/Button > pilih Actions.


Maka Akan tampil gambar seperti di bawah ini

Tekan Ctrl+Shift+e (Script Assist) > Klik Global Function > Timiline Control  > double klik goto maka akan tampak seperti gambar di atas. sekarang kita tinggal pilih scene. Misal Ini kita Klik di Lingkaran/button tadi pada No 2 maka scene yang di pilih pun pada nomer 2, ini berlaku pada Lingkaran /button pada scene selanjutnya Smiley.

Selesai Sudah Pembuatannya Smiley sekarang tinggal menyimpan, jika ingin menjadikan .swf , Klik file > Export > Export Movie (CTRL+ALT+SHIF+S). jika belum tau no lihat gambar Smileyselanjutnya tinggal di beri nama > biarkan aja begitu > klik OK aja Smiley.





oke ini jika mau file .fla dan .swf nya Smiley Klik

Sekian dari saya. terima kasih sudah berkunjung di blog saya ini Smiley salam Gantengers dari saya  Smiley Smiley tunggu info lagi dari saya Smiley.
Read More
5 Comments
Tag : , ,

Labels

Popular Posts

Powered by Blogger.

- Copyright © 2013 Blog Sederhana - Yui-Lovers V2 - Powered by Blogger - Designed by Johanes Djogan -