Tampilkan postingan dengan label Tips Trick And Tutorial. Tampilkan semua postingan

Cara Memasang Menu Dropdown CSS3

Hallo Sobat DRobani, kali ini saya akan post tentang menu dropdown css3 nih oke biar gak buang2 waktu langsung aja oke ....... ^_^

1. Buka Blogger >> Template >> Edit HTML
2. Masukan CSS di bawah ini

/* LINK TRANSITION */
a {
 -moz-transition:color 0.3s ease-out;
 -webkit-transition:color 0.3s ease-out;
 -o-transition:color 0.3s ease-out;
 transition:color 0.3s ease-out;
}
/* MENU STYLE */
header {
 width:100%;
}
header #top {
 background:#222;
 float:left;
 height:30px;
 line-height:30px;
 width:100%;
}
header nav#topmenu {
 margin:0 auto;
 padding:0 15px;
 position:relative;
 width:960px;
}
header nav#topmenu ul {
 margin:0
 padding:0;
}
header nav#topmenu ul li {
 float:left;
 position:relative;
 font-size:10px;
 list-style:none;
 margin:0;
 padding:0;
 width:90px;
 text-align:center;
 text-transform:uppercase;
 border-right:1px solid #ccc; 
}
header nav#topmenu ul li:first-child {
 border-left:1px solid #ccc;
}
header nav#topmenu ul li a {
 color:rgba(255,255,255,0.6);
 text-decoration:none;
 display:block;
}
header nav#topmenu ul li a:hover {
 color:#fff;
}
header nav#topmenu ul li:hover > a { /* ACTIVATE LINK WHEN THE MOUSE OVER SUB-MENU */
 color:#fff;
}
header nav#topmenu ul li span { 
 background:url(arrow.png) center no-repeat;
 height:10px;
 position:absolute;
 text-indent:-9999px;
 top:10px;
 right:5px;
 width:10px;
}
header nav#topmenu ul li span.arrow {
 background-position:0 2px;
}
header nav#topmenu ul li span.arrow-right {
 background-position:-10px 2px;
}
header nav#topmenu ul li ul.sublist { /* FIRST SUB-MENU STYLE */
 float:left;
 list-style:none;
 margin:0;
 padding:0;
 position:absolute;
 left:0px;
 top:31px;
 background:#222;
 width:90px;
 opacity:0;
 visibility:hidden; /* Avoids being selected even if the opacity is set to 0 */
        
        /* CSS3 Multiple Transitions */

-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
 -webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
 -o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
 transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
header nav#topmenu ul li ul.sublist li {
 border:none;
 border-bottom:1px solid #ccc;
 clear:both;
 margin-top:-15px;
 padding:0;
 width:90px;
 -moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
 -webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
 -o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
 transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

header nav#topmenu ul li ul.sublist li a {
 color:rgba(255,255,255,0);
}
header nav#topmenu ul li:hover ul.sublist {
 opacity:1;
 visibility:visible;
}
header nav#topmenu ul li:hover ul.sublist li {
 margin-top:0;
 opacity:1;
}
header nav#topmenu ul li:hover ul.sublist li a {
 color:rgba(255,255,255,0.6); 
 -moz-transition:color 0.1s ease-out;
 -webkit-transition:color 0.1s ease-out;
 -o-transition:color 0.1s ease-out;
 transition:color 0.1s ease-out;
}
header nav#topmenu ul li:hover ul.sublist li a:hover {
 color:rgba(255,255,255,1); 
 -moz-transition:color 0.3s ease-out;
 -webkit-transition:color 0.3s ease-out;
 -o-transition:color 0.3s ease-out;
 transition:color 0.3s ease-out;
}
header nav#topmenu ul li:hover ul.sublist li:hover > a { 
        /* ACTIVATE LINK SUB-MENU WHEN THE MOUSE OVER SUBSUB-MENU */
 color:#fff;
}
/* SUB-MENU SUB STYLE */
header nav#topmenu ul li ul.sublist li ul.subsublist {
 float:left;
 list-style:none;
 margin:0;
 padding:0;
 position:absolute;
 left:61px;
 top:0px;
 background:#222;
 width:90px;
 opacity:0;
 visibility:hidden;
 -moz-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
 -webkit-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
 -o-transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
 transition:opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
header nav#topmenu ul li ul.sublist li ul.subsublist li{
 border:none;
 border-bottom:1px solid #ccc;
 clear:both;
 margin:0;
 padding:0;
 width:90px;
 opacity:1;
}
header nav#topmenu ul li ul.sublist li:hover ul.subsublist {
 opacity:1;
 left:91px;
 visibility:visible;
}

3. Simpan Template
4. buka tata letak > Tambah Gadget > HTML/javascript
5.Masukan Code HTML di bawah ini

6.Ganti code berikut
-Ganti tanda # dengan Url Anda
-Ganti Sub link Sesuai yg anda inginkan

0 Comments

Tag : Tips Trick And Tutorial,

Widget Panel W8 SM

Inilah pertama kalinya saya memposting Widget Blog. Widget ini saya namakan Panel W8 SM. Saya desain menyerupaiGadget Panel OS Windows 8,7,Vista. Widget ini mempunyai pajang 100px dan lebar 100px, Berposisi Melayang. Widgetyang saya keluarkan ada dua, yaitu JAM dan TANGGAL. Jika anda tertarik memasang di blog, dibawah saya kasih tutorialnya.

OK. Langsung saja.

Masuk ke Blog kamu, dan pilih Tab Template lalu klik Edit HTML.
Tekan Tombol F3 , untuk memudahkan mencari kata kunci
Pasang CSS Widget ini di atas ]]>

.kotak-tanggal{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;right:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

.kotak-jam{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;left:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

Lalu klik Simpan

Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
Pastekan Source kode Widget ini di situ.

Setelah itu Simpan dan Lihat Hasilnya.

Demikianlah Posting Widget Panel W8 SM, semoga bermanfaat.

Note!

Anda bisa mengatur letak posisinya di CSS tadi.

0 Comments

Tag : Tips Trick And Tutorial,

Notifikasi Sederhana dengan CSS3

Hello Minna-san~ saya mau berbagi trik CSS lagi nih,Yaitu Notifikasi sederhana dengan css3,sebenarnya apasih fungsinya? awalnya juga notif ini saya gunakan untuk memberitahukan bahwa template hatsune miku sudah dapat didownload dan juga pemberitahuan bahwa template" saya sudah diupload semua ke hosting mediafire.nah karena saya cari" di google trik notifikasi yang cocok tidak ada,jadi saya membuat sendiri notifikasi ini yang merupakan hasil modifikasi dari trik "loading page dengan css3 animasi".nah,apasih yang berbeda dengan trik loading page? bedanya,html dan css notifikasi ini pastinya lebih sederhana dan lebih minim penggunaanya,contohnya yang saya kurangi yaitu background rgba yang tadinya secara menyeluruh secara fullscreen,animasi loader/loading yang saya hapus.jadi yang tersisa hanyalah text dan background,serta css3 animasi agar setelah 10 detik,nofif ini akan menghilang secara otomatis.Oia,cssnya juga sudah saya rapihkan dari versi sebelumnya,jadi tidak akan bentrok dengan banner slider,loading page,dan content slider(karena dasar html dan cssnya sama 100%).
Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.

Screenshot

CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code

#notifjo {
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,255,255,0.9); /* 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;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-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

Untuk menambah baris notif baru,tambahkan:

Di antara

1. Pengaturan posisi notifikasi.

Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

Posisi top: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)

sumber

0 Comments

Tag : Tips Trick And Tutorial,

Tampilkan postingan dengan label Tips Trick And Tutorial. Tampilkan semua postingan

Cara Memasang Menu Dropdown CSS3

Widget Panel W8 SM

Notifikasi Sederhana dengan CSS3

Labels

Recent Comment

Followers

Affiliates

Alexa Info

About Me ^_^