Music of information

Banner Link "U COMMNET, I FOLLOW"

Hari ini udah masuk jum'at lagi, besok udah sabtu, lusanya udah minggu... perasaan baru juga hari senin eh mau weekend lagi, cepet banget nih hari...!!! Tapi nggak masalah tuh, yg penting semua kerjaan kantor udah beres tinggal hangout aja pas weekend bareng istri tercinta. waduh kenapa jadi curhat nih..?? apa mungkin k'ian udah lama banget g mampir sambil bikin postingan baru ya disini...!!!

Kayaknya sih iya, habis cuma serius ngurusin blog "Kolam blogging tips | kianhome", jadinya nih blog jadi kurang variatif dalam hal postingan. Oya k'ian mau ngucapin terima kasih kepada sobat "Muhammad Lailie" -->> "mymivies blog" yang sudah kirim komenter tentang bagaimana cara buat banner U Comment, I Follow di blog..??

Daripada kelamaan kita langsung menuju sasaran pembuatan :
Jika kamu mau mengkreasikan sendiri banner dengan design yang kamu inginkan, caranya bisa dengan menggunakan Photoshop atau Coreldraw. tapi kalau kamu mau membuat banner dengan cara online bisa kamu klik link dibawah ini :
.http://123-banner.com
2.http://bannersketch.com
3.http://www.bannercreator.nu
4.http://www.banner-generator.net/en/
5.http://www.bannerfans.com
6.http://123-banner.com
7.http://www.bannerbreak.com/
8.http://www.livebannermaker.com/
9.http://mybannermaker.com/
10.http://www.flashbannernow.com
11.http://highpowergraphics.com

Kalau mau praktis silahkan Copas kode dibawah ini :

<img style="width: 150px; height: 150px;" src="http://i905.photobucket.com/albums/ac257/abayzone/Banner/u-comment-i-follow.png" />	<img style="width: 150px; height: 150px;" src="http://i644.photobucket.com/albums/uu164/ismailrnast/badgeblue-1.png" />	<img style="width: 125px; height: 65px;" src="http://i152.photobucket.com/albums/s184/BillyWarhol/UCommentIFollowPink.gif" />
<img style="width: 125px; height: 65px;" src="http://i648.photobucket.com/albums/uu207/Danols/ifollowpurple.gif" />	<img style="width: 125px; height: 65px;" src="http://i152.photobucket.com/albums/s184/BillyWarhol/UCommentIFollowMagenta.gif" />	<img style="width: 125px; height: 65px;" src="http://i482.photobucket.com/albums/rr187/cashcoach/ifollow.png" />

Readmore..

banner link, comment, dofollow |

Jenis - jenis sebuah border dalam format CSS Code

Border adalah salah satu element cukup penting dalam proses design sebuah layouts, karena tampilan dari sebuah layouts tidak akan lepas dari pada sebuah garis/border. jika akan menambah atau memodifikasinya maka ada baiknya kita mengetahui jenis jenis dari border itu sendiri. nah dari pada kelamaan kita langsung menuju TKP. Berikut ini adalah tampilan untuk hasil dari layouts yang ian buat dengan contoh dari masing masing bordernya.

dotted

dashed

solid

double

groove

ridge

inset

outset

Dari contoh diatas bisa kamu gunakan dengan format CSS sebagai berikut :

<div style="border: 3px dotted rgb(128, 0, 0); padding: 10px; background: rgb(242, 242, 242) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">dotted</div>

kode yang berwarna merah menunjukkan jenis bordernya, kamu bisa mengganti jenis border tersebut sesuai dengan contoh yang sudah k'ian kasih diatas.

Baca disini untuk format modifikasi border dengan menggunakan "Radius"

Readmore..

jenis jenis border |

Cara mengatur tampilan menu Navigasi

Menannggapi sebuah comment dari neng Lia yg berbunyi sebagai berikut : "makasih banyak sobat atas sarannya..sudah saya pasang tuh..tapi koq warnanya itam dan tulisannya gak keliatan, gimana cara ganti warnanya ya??" . nah pada akhirnya k'ian berinisiatif ngebuat sebuah postingan tentang cara pengaturan menu Navigasi , mulai dari pemilihan Border, warna huruf sampai dengan format designnya...

Tanpa pikir panjang lagi kita langsung aja yach..
Langkah pertama adalah : masuk kedalam format Edit HTML dari blog kamu,
Kemudian beri tanda centang atau ceklist pada kolom " expand template widget", kemudian cari kode berikut :
1. Untuk merubah warna Background / latar belakang

#foxmenucontainer{
height:34px;
background:#000000;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu ,#menu ul {
margin: 0px 5px 0px 5px;
padding: 0px;
list-style: none;
height:34px;
}
#menu a {
color: #111;
display: block;
font-weight: normal;
padding: 10px 10px 10px 10px;
}
#menu a:hover {
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#5D0909;
width: 150px;
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
color:#DFC3C3;
}
#menu li li a:hover, #menu li li a:active {
background:#971515;width: 150px;float: none;
margin: 0px;padding: 5px 10px 5px 10px;
color:#d7a1a1;}
#menu li ul {
position: absolute; width: 150px; left: -999em;
z-index:200;}
#menu li:hover ul {left: auto;
display: block;}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

jika sudah ketemu ( kode mungkin akan berbeda tergantung dari tiap templatenya), cari pada kode background : #000000; , yang terdapat pada baris pertama dari kode diatas menunjukkan warna backgroundnya adalah warna hitam. Kamu bisa ganti dengan warna favorit kamu ( lihat di widget kode warna disamping ini ) atau jika kamu ingin menghilangkan warnanya, caranya adalah dengan menghapus kode #000000 pada kode Background:#000000; . sehingga hasilnya akan sbg berikut :

#foxmenucontainer{
height:34px;
background:;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}

sedangkan kode warna pada background dibawah ini menunjukkan warna background yang akan muncul ketika kursor mouse diarahkan. Jadi kamu bisa menentukan apakah akan diberi warna atau tidak tergantung apakah kamu akan pasang kode warnanya atau tidak.

#menu li li a:hover, #menu li li a:active {
background:#971515;
width: 150px;float: none;
margin: 0px;padding: 5px 10px 5px 10px;
color:#d7a1a1;}

2. Merubah warna tulisannya
cari kode berikut :

#menu a {
color: #111;
display: block;
font-weight: normal;
padding: 10px 10px 10px 10px;
}

pada kode yang berwarna orange tsb menunjukkan warna tulisannya, sedangkan pada kode yang berwarna merah ini (dibawah ini) menunjukkan warna yg akan muncul ketika kursor mouse kita arahkan.

#menu a:hover {
color: #fff;
display: block;
text-decoration: none;
}

nah jika sudah kamu bisa melihat hasilnya terlebih dahulu sebelum disimpan dengan meng-klik tombol pratinjau atau preview. selesai silahkan disimpan...

Readmore..

info..tips |

menu navigasi diatas Header Blog

navigation bar Pictures, Images and Photos

K'ian pada kesempatan kali ini ingin membagi sebuah tips tentang cara membuat menu navigasi pada tampilan Blog. Menu navigasi untuk sebagian blogger master, dapat diartikan sebagai jalan pintas untuk menentukan tujuan kita ketika berada pada blog tsb.

Ada banyak cara untuk membuatnya,mulai dengan menggunakan code HTML standar ataupun dengan menggunakan kode javascript. Untuk kesempatan kali ini k'ian akan membagi satu resep dengan menggunakan Menu dari Template K'ian ini :

Masuk kedalam account blog kamu..
klik menu "layouts", -->> pilih "Edit HTML",-->> beri tanda centang / ceklist pada " expand templates wigdet".
Copy kode dibawah ini dan letakkan didalam ket kode /* page struktur (bagi templates anima / klasik) atau diatas ]]></b:skin>,

/*Page menu*/

#navigasi{
height:34px;
background:#000000;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
}
#menu ,#menu ul {
margin: 0px 5px 0px 5px;
padding: 0px;
list-style: none;
height:34px;
}
#menu a {
color: #111;
display: block;
font-weight: normal;
padding: 10px 10px 10px 10px;
}
#menu a:hover {
color: #fff;
display: block;
text-decoration: none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#5D0909;
width: 150px;
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
color:#DFC3C3;
}
#menu li li a:hover, #menu li li a:active {
background:#971515;width: 150px;float: none;
margin: 0px;padding: 5px 10px 5px 10px;
color:#d7a1a1;}
#menu li ul {
position: absolute; width: 150px; left: -999em;
z-index:200;}
#menu li:hover ul {left: auto;
display: block;}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

kemudian cari kode berikut : <div id='wrapper'> atau kode <div id='outer-wrapper'> , kemudian copy kode dibawah ini tepat dibawahnya:

<div id='navigasi'>
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul>
</div>
</div>

<div class='clear'></div>

atau kamu langsung copy kode standart dibawah ini,

<div id='navigasi'>
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Post RSS'><span>Posts RSS</span></a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'><span>Comments RSS</span></a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<ul class='children'>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
<li><a href='LINK HALAMAN' >JUDUL LINK</a></li>
</ul></ul>
</div>
</div>

<div class='clear'/>

nb : tulisan yg berwarna merah menunjukkan alamat link yg harus kamu isi contoh : http://kianhome.blogspot.com , sedangkan yg berwarna hijau adalah judul / nama untuk link yang kamu pasang tadi, contoh : "kianhome" . jika digabung akan jadi seperti ini :
<li><a href='http://kianhome.blogspot.com' >kianhome</a></li>

semoga bermanfaat..

Readmore..

info..tips |

Dess Mesk Template

Dess Mesk adalah salah satu template yang cukup menarik dalam hal ini mengangkat tema tentang ruangan kerja..dengan perpaduan beberapa tampilan gambar yang menarik dan artistik mampu membawa kamu kedalam dunia kerja yang kamu inginkan.

preview | Download

Readmore..

Nuansa Bening

Satu buah tampilan template yang coba saya bagi ke kamu semua...sebuah template tentang Warna Air dari Falcon Hive

Preview | Download

Readmore..

Music of information

Followers

Daftar Blog Saya

Random post

Banner Link "U COMMNET, I FOLLOW"

Jenis - jenis sebuah border dalam format CSS Code

Cara mengatur tampilan menu Navigasi

menu navigasi diatas Header Blog

Dess Mesk Template

Nuansa Bening

Recent Comment

Link

site counter

MY BlogLog

Kategori