Cara Membuat Menu Horizontal dan Sub Menu Horizontal dengan bertabur bintang

( Postingan telah diperbarui )
Bingung mau posting apa eh sewaktu mengotak-atik blog, ada teman yang bertanya masalah menu horizontal dan submenunya seperti pada blog ini

akhirnya saya mempostingkan artikel ini supaya dapat membantu teman saya tersebut dan semua pengguna blogger
langsung saja pada intinya.. . .
Untuk membuatnya, langkahnya seperti ini:
1. Masuk pada akun Blog anda
2. pilih Rancangan->Edit HTML -> beri tanda centang pada Expand Template Widget
3. cari kode ]]>
4. Copas (Copy Paste) kode di bawah ini sebelum kode ]]>,

#NavbarMenu {

float: center;

width: 100%px;

height: 35px;

background:#005ae1 ;

color: #ffffff

margin: 0 auto 0;

padding: 0;

font: bold 11px Algerian;
border: 3px groove #ed070d; -moz-border-radius: 10px 10px 10px 10px;

}

#NavbarMenuleft {

width: 1000px;

float: center;

margin: 0;

padding: 0;

}

#nav {

margin: 0;
color: #0000FF;
padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;
background:#005ae1 ;
margin: 0;
border: 1px solid #ed070d;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #ffffff;

display: block;

text-transform: capitalize;

margin: 0;

padding: 7px 9px 8px;

font: normal 15px Georgia, Times New Roman;

}

#nav li a:hover{ color: #transparant; text-transform: uppercase; font-weight: bolder; font-size: 14px; background: #000080 url(http://i27.tinypic.com/2626vyh.jpg);text-shadow: 0 0 3px #ccc, 0 -5px 5px #ff3, 2px -6px 7px #fd3, -2px -8px 10px #f40, 2px -10px 11px #f10; }
#nav li a:active {

background: #FF6600;

color: #ffffff;

margin: 0;

padding: 4px 4px 4px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #0000FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZ_GUNrtpKzkW7AeYiX_gWVGgCUt52EirzcwxF8vG-SMU95v4L1YyN-eEoaa-lx9IJxF9ycR_rpVrEJ53_pC1sKgyKukdYWJgIau7Q-YOx6jzaIjfG7oO7b6lzgixP3hmiC0BvRoDk4gL/s1600/navbg.png) repeat-x top;

width: 240px;

color: #ffffff;

text-transform: lowercase;

float: none;

margin: 0;

padding: 5px 5px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

font: normal 14px Georgia, Times New Roman;

}



#nav li li a:hover{ color: #00FF00; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }
#nav li li a:active {

background:  #FF6600;

color: #ffffff;

padding: 5px 5px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -35px 0 0 251px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}

5. klik Simpan Template nah,sekarang tinggal menentukan letak menu yang akan di buat. . .

Menggunakan HTML,langkahnya:

1. pilih Rancangan -> Elemen Laman
2. Klik tambah gadget ->plih HTML/JavaScript
3. masukan kode berikut:
 <div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu1</a>
<ul>
<li><a href='alamat Sub menu1'>Sub menu1.1</a></li>
<li><a href='alamat Sub menu1'>Sub menu1.2</a></li>
<li><a href='alamat Sub menu1'>Sub menu1.3</a></li>
<li><a href='alamat Sub menu1'>Sub menu1.4</a></li>
</ul></li>
<li><a href='#'>menu2</a>
<ul>
<li><a href='alamat Sub menu2'>Sub menu2.1</a></li>
<li><a href='alamat Sub menu2'>Sub menu2.2</a></li></ul>
</li>
<li><a href='#'>Menu3</a></li>
</ul>
</div>
</div>  
4. klik simpan 
Diletakan pada Template,langkahnya: 
1. pilih Rancangan ->Edit HTML -> beri tanda centang pada Expand Template Widget 
2. cari kode berikut atau yang mirip: 
<div id='header'> <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </div> 
3. masukan kode berikut setelah kode di atas: 
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a href='#'>Home</a></li> <li><a href='#'>Menu1</a> <ul> <li><a href='alamat Sub menu1'>Sub menu1.1</a></li> <li><a href='alamat Sub menu1'>Sub menu1.2</a></li> <li><a href='alamat Sub menu1'>Sub menu1.3</a></li> <li><a href='alamat Sub menu1'>Sub menu1.4</a></li> </ul></li> <li><a href='#'>menu2</a> <ul> <li><a href='alamat Sub menu2'>Sub menu2.1</a></li> <li><a href='alamat Sub menu2'>Sub menu2.2</a></li></ul> </li> <li><a href='#'>Menu3</a></li> </ul> </div> </div>

4. Simpan Template dan lihat hasilnya. . . .
catatan: untuk yang ber warna biru, ganti dengan background yang anda inginkan
Untuk Menu dan Sub menu, ganti dengan menu yang anda inginkan kode di atas dapat anda edit sendiri seperti warna, ukuran dan lain-lain selamat mencoba....
Admin

Read More

Menggambar Rambut dengan Paths Tools

Zaman sekarang ilmu grafis semakin marak seperti PHOTO SHOP,corelDRAW,GIMP dan lain-lain...

kali ini saya ingin memperkenalkan tutorial GIMP yang bisa dikatakan sederhana,yakni menggambar rambut via PATHS TOOLS..
langsung saja ya....dari pada kelamaan menunggu....

langkah pertama adalah buka program GIMP,kalau yang tidak punya bisa download programnya at GIMP portable apps bisa digunakan tanpa diinstall,atau at this untuk PC
kalau program GIMP sudah dibuka,silahkan
1. buka gambar/foto yang akan digambar rambutnya.



karena gambarnya kurang halus,
2. halusin gambar dengan klik filters-blur-selective Gaussian blur


Sesuain sendiri blur radiusnya

jika ingin mengubah gambar menjadi warna hitam putih saja, bisa klik colours - desaturate

3. setelah itu klik layer-new layer,pada layer fill type pilih yang transparency

4. agar garis rambutnya tidak terlalu besar,atur pada paintbrush yang terdapat pada toolbox

Kita mulai langkah drawingnya
5. Klik path tools, dalam langkah ini kita musti tlaten, seperti menggambar…


6. pilih warna foreground dengan warna pink kodenya [ff56ea]

kemudian STROKE PATH

PILIH STROKE WITH A PAINT TOOL


lakukan langkah seperti no.5 dan no.6 hingga sesuai jumlah rambut yang ingin ditambahkan dan untuk langkah no.6 warna foreground yang ke2 warna hijau muda,kodenya [00bed5]dan ke3 warna biru, kodenya [2f56ea] dan seterusnya sesuai kelipatannya..
7. Kemudian klik kanan pada new layer- duplicate layer


Klik colors – colourize


atur sesuai warna yang dikehendaki.....
setelah selesai mengotak-atik,simpan gambar tersebut......


selamat mencoba......

Admin

Read More

Memblokir Situs

Semakin berkembangnya teknologi,moral manusia semakin dipertanyakan,..sekarang orang tidak lagi susah untuk mengakses internet dan situs-siatus negatif yang tidak memberi manfaat sama sekali semakin marak dan banyak orang yang sudah mengetahuinya,bagaimana cara kita untuk mencegah rusaknya moral generasi anak bangsa yang telah terkontaminasi dengan situs-situs tersebut?salah satunya adalah memblokir situs-situs tersebut.Pemerintah telah melakukan upaya demikian,namun kenyataannya situs-situs tersebut terlalu banyak..so,marlah kita bantu pemerintah kita dalam melakukan hal terpuji tersebut,tapi ingat..kita jangan nonton yang gitua ya...OK
Mulai dari sekarang blokir-blokir-lah situs-situs negatif.. Dengan begitu, sedikit demi sedikit kita telah berupaya untuk membersihkan akhlak dan moral kita juga orang lain, khusus-nya anak-anak (generasi muda) dari hal-hal yang merusak.

Saya cuma mengetahui satu cara saja dan cuma cara ini saja yang saya tahu untuk memblokir situs,saya dapat dari teman blogger kita atWahyu Kodar


Langkah-langkahnya

1] Carilah file di "C:\WINDOWS\system32\drivers\etc"

2] Temukan file yang bernama "HOSTS"

3] Buka dengan notepad file HOSTS tadi. Cara-nya klik kanan pada file HOSTS dan pilih open with, lalu pilih lagi notepad.

4] Di bawah tulisan "127.0.0.1 localhost" tambahkan 127.0.0.2 www.situsyangmaudiblokir.com , dan situs nanti-nya tidak akan bisa ter-akses
5] Ok dan save dengan jenis file awal (bukan notepad).

-Jadi-

127.0.0.1 localhost
127.0.0.2 www.situsyangterblokir.com
-->www.situsyangterblokir.com sekarang tidak bisa diakses<-- Untuk menambahkan beberapa situs lagi, hanya tinggal tambahkan ip dan alamat situs yang mau diblokir di bawah-nya. Contoh : 127.0.0.1 localhost 127.0.0.2 www.situsyangterblokir.com 127.0.0.3 www.blablabla.com 127.0.0.4 www.blablabla.com 127.0.0.5 www.blablabla.com dan seterusnya. Semoga bermanfaat dan berdampak baik untuk kita semua. GO gerakan Blokir situs negatif

Read More

Membuat animasi bergerak .GIF dengan GIMP

Adobe Image Ready mungkin jadi pilihan paling populer untuk bikin animasi .GIF. Nah, bagaimana dengan pengguna Freeware? Pemakai Linux?

Kita bisa pake GIMP (GNU Image Manipulation Program). Software open source padanan Photoshop ini bisa bikin animasi GIF. Ada 2 alternatif yang bisa kita gunakan
a. Dengan plug-in GAP (Gimp Animation Package)
b. Tanpa plug-in

Plugin GAP merupakan plugin tambahan buat GIMP untuk membuat animasi GIF yang lebih advance. Menurut saya cukup rumit membuat animasi dengan plugin ini, apalagi untuk pemula.

Membuat animasi GIF tanpa plugin pun bisa. Konsepnya sederhana, buat 2 layer atau lebih, kemudian simpan dengan ekstensi *.gif sebagai animasi (nanti ada pilihan Save as Animation). Atau kita manfaatkan Script-Fu yang ada di menu Filter > Animations (GIMP versi 2.6.x)

Berikut ini saya buat tutorial membuat animasi 2 gambar atau lebih tampil bergantian, seperti berikut ini



1. Siapkan gambar yang mau dipasang, foto sendiri, tokoh idola, atau apapun lah... yang penting lebih dari 1 gambar

2. Buat New image (File > New), set ukurannya (kalo mau digunakan jadi avatar maksimal 100x100 px)



3. Buka gambar-gambar yang sudah disiapkan => File > Open as Layers > pilih gambar

4. Sesuaikan ukuran layer dengan ukuran background image (yang kita bikin pertama kali itu lho...) Bisa pake Layer > Scale Layer, atau di-crop, dipotong pake selection tool, dst

5. Setelah menyesuaikan ukuran layer, delete atau sembunyikan background image-nya (sudah gak dibutuhkan)
6. Filters > Animation > Optimize (for GIF) => biar ukuran file-nya lebih kecil (ukuran besarnya file, bukan ukuran gambar). Nanti muncul jendela baru

7. Kalo pengen preview => Filters > Animation > Playback



8. Terlalu cepat? Ubah fps-nya. Klik kanan Layer > Edit layer attributes atau klik layer 2 kali, lalu ubah tulisan 100ms menjadi 1000ms (1 detik) atau terserah mau kita





9. Simpan dengan ekstensi *.gif
Pada jendela export file, pilih Save as Animation, klik Export



Akan muncul jendela lagi, dan perhatikan bagian Delay between frames when unspecified
Kalo tadi belum diubah fps-nya, kita bisa set kecepatannya dari situ dan check (contreng) Use delay entered above..dst...



Selamat mencoba...

Read More