Cyber Man Blogger

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,

Template Faceblog versi 1 dan 2

Faceblog adalah sebuah Template blogger yang hampir mirip dengan Facebook. Terakhir direlease tanggal 16 Maret 2013. Template ini termasuk dalam kategori template blog paling keren.

Faceblog

Faceblog adalah template mirip Facebook pertama direlease.

16 Oktober 2012

Demo

Faceblog 2

Faceblog 2 mempunyai fitur yang sangat keren seperti layaknya Facebook.

16 Maret 2013

Demo

Faceblog 2

Faceblog 2 mempunyai fitur yang sangat keren seperti layaknya Facebook.
16 Maret 2013

PREVIEW

Faceblog

Server 1 [ 33 KB ] on Sharebeast

Faceblog 2
Server 1 [ 32 KB ] on Sharebeast

Hhihihi
Pumpung gratis coy..

0 Comments

Tag : Template,

Template Blogger Revolution

Blogger Revolution adalah Template Blogger 1 colomn dengan kecepatan loading yang sangat bagus. Direlease pada tanggal 12 Maret 2013. Template ini inspirasi dari Om Dayz, mempunyai fitur Animasi Loading Link Host dan Iframe Preloader yang menarik.

Template Preview :

DEMO

File BRSM.zip

Server 1 [ 26 KB ] on 4shared

Hhihihi
Mumpung gratis coy..

Notice! :
Download BRSM.zip
Buka Template Blogger Revolution.txt dengan notepad , lalu Copy Semua.
Masuk ke Edit html --- klik Expand template widget
Pastekan Blogger Revolution.txt nya --- Simpan Template
Lalu masuk ke Edit tata letak --- masukkan Gadget Other Menu --- Simpan
Lihat Blog --- Enjoy

0 Comments

Tag : Template,

Template Widows 8 ( 1,2,3 And Dark Edition )

Windows 8 SM adalah sebuah Template Blogger Professional yang di desain mirip dengan OS Windows. Template ini termasuk dalam kategori template blog paling keren.

Tested on browser!

Best view in Google Chrome 25+
Good view in Opera 12+ dan Mozilla Firefox
Low view in Internet Explorer

Windows 8 SM

Windows 8 SM adalah template windows 8 SM pertama direlease.
18 November 2012

PREVIEW

Windows 8 SM Versi 2

Windows 8 SM Versi 2 mempunyai fitur yang sangat lengkap , tetapi fitur music di hapus.
22 December 2012

PREVIEW

Windows 8 SM Versi 3

Windows 8 SM Versi 3 sebagian fiturnya telah diupgrade menjadi lebih bagus.
19 January 2013

PREVIEW

Windows 8 SM Dark Edition

Windows 8 SM Dark Edition mempunyai fitur komentar berbalas dan banyak lagi.
7 February 2013

PREVIEw

File Windows 8 SM

Server 1 [ 26 KB ] on sharebeast

File Windows 8 SM Versi 2
Server 1 [ 26 KB ] on sharebeast

File Windows 8 SM Versi 3
Server 1 [ 29 KB ] on sharebeast

File Windows 8 SM Dark Edition
Server 1 [ 29 KB ] on sharebeast

Hhihihi
Pumpung gratis coy..

Tambahan.!

Click Expand Template Widget saat mau upload
Nanti dibagian Gadget JS, kamu ganti windows8-sm.blogspot.com dengan url blog kamu
Tutorial Cara menganti disini.
Bonus Animasi Download di Posting.
Bonus Slide Show Foto.
Bonus Sitemap

Terima kasih bos, sukses ya,..

0 Comments

Tag : Template,

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,

Bagi-Bagi Char Pb Pangkat Major 1 Peti 3 No Tipu

Hallo Kali Ini saya akan membagikan Char PB gratis No tipu Pangkat Major 1 Petik 3
untuk mendapatkan nya anda harus menjawab beberapa teka teki dari saya

ATURAN MENJAWAB
cara menjawab nya kunjungi fanspage ini DRobani
lalu Like Terlebih Dahulu Setelah Di like Kirim Jawabannya Fanspage tadi ...

PERTANYAAN

1.Sering Dikembalikan Tetapai Tidak Pernah Di pinjam ??
jawabannya :

2.Ada enam wajah dan 21 mata ??
jawabannya :

3.Naik terus Tidak Pernah Turun ??
jawabannya :

4.Kalo kepalaku di garuk, Rambutku Bisa Berubah warna dari hitam ke merah ???
jawabnnya :

5.Banyak orang yg menunggu kedatangannya tapi ia tidak akan pernah tiba ???
jawabannya :

Untuk menjawab ikuti aturan Diatas ok !!!!

NO TIPU BOUUSSSSSSSSS GAK ADA GUNANYA MENIPU !!!

0 Comments

Tag : Char PB,

Cara Memasang Menu Dropdown CSS3

Template Faceblog versi 1 dan 2

Faceblog 2

Template Blogger Revolution

Template Widows 8 ( 1,2,3 And Dark Edition )

Windows 8 SM

Windows 8 SM Versi 2

Windows 8 SM Versi 3

Windows 8 SM Dark Edition

Widget Panel W8 SM

Bagi-Bagi Char Pb Pangkat Major 1 Peti 3 No Tipu

Labels

Recent Comment

Followers

Affiliates

Alexa Info

About Me ^_^