cara membuat topbar pada blog

postingan ini muncul karena setelah aku browsing dan terus browsing tapi tidak menemukan yang aku cari yaitu "cara menambah sidebar pada blog"
Akhirnya, setelah mengotak-atik blog dan mengalami sedikit kerusakan,saya menemukan caranya dengan mengadaptasi dari footer. . .
OK,..inilah langkah-langkahnya. . .
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 dan letakan sebelum/di atas code ]]>

#topbar { margin-top:2px; padding:5px; width:995px; background:transparent; border: 2px groove #FFD700; line-height: 1.5em;
#topbar-a { float:left; margin-left:0px; width:320px; height:200px; border-right: 2px groove #FFD700; line-height: 1.5em;}
#topbar-b { float:left; margin-left:10px; margin-right:10px; width:330px; height:200px; border-right: 2px groove #FFD700; line-height: 1.5em;}
#topbar-c { float:left; width:320px; height:200px; }

#topbar .widget { background:none }
#topbar .widget h2 { background-color:transparent; }
#topbar .widget-content { background:transparent }

yang berwarna Hijau adalah ukuran lebar dan tinggi topbar,silakan sesuaikan dengan blog anda

5. setelah itu cari kode seperti di bawah ini atau yang mirip :

<b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='title blog (Header)' type='Header'/>
</b:section>

6. setelah itu, copy paste kode di bawah ini setelah kode di atas tadi:

<div id='topbar'>
<div class='clear'>&#160;</div>
<div id='topbar-a'>

<b:section class='topbar-div section' id='topbar-1' preferred='yes'>
</b:section>
</div>
<div id='topbar-b'>

<b:section class='topbar-div section' id='topbar-2' preferred='yes'>
</b:section>
</div>
<div id='topbar-c'>

<b:section class='topbar-div section' id='topbar-3' preferred='yes'>
</b:section>
</div>

<div class='clear'>&#160;</div>
</div>

catatan : jika setelah kode no. 5 ada CSS untuk Menu Horizontal, Letak kode no. 6 bisa setelah atau sesudah CSS Menu Horizontal tersebut. Letak Topbar tergantung anda, ingin di bawah menu horizontal atau di atas menu horizontal

7. Simpan dan sekarang pindah ke halaman Elemen Laman dan lihat hasilnya.

jika anda belum berhasil.,silakan tanyakan pada saya

ADMIN

Read More

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