Warung Bebas
Tampilkan postingan dengan label icon. Tampilkan semua postingan
Tampilkan postingan dengan label icon. Tampilkan semua postingan

Selasa, 21 Februari 2012

Kumpulan Icon-Icon Keren

 Kumpulan Icon-Icon Keren - Sobat mau icon menarik yang cantik, menawan dan keren, Jika mau saya akan berikan. Disini tempatnya untuk pilih-pilih icon yang sobat inginkan, Ada berbagai jenis icon dan berbagai jenis ukurannya pula. Semuanya di jamin gratis, Masih kurang apalagi coba? hehehe...

 Sedikit pengetahuan untuk sobat KUCOPAS, Sebenarnya Icon-icon ini bisa berfungsi untuk mengganti Favicon bawaan asli Blog sobat. Sebagai contoh, Sobat bisa melihat Favicon blog KUCOPAS ini. Ada icon huruf K yang saya jadikan sebagai Favicon blog ini. Namun icon-icon ini juga bisa untuk di jadikan image url agar bisa tampil dalam kode script yang akan di pasang dalam blog.

 Kegunaan url image icon diantaranya bisa digunakan untuk Menu blog atau web, Icon Emotion, Smiley dan juga bisa di buat untuk yang lainnya yang masih berhubungan dengan url image icon tersebut. Tentunya sobat tidak usah susah-susah lagi untuk membuat url image dengan cara meng-upload gambar atau icon ke situs tertentu, Dan baru menyalin url image-nya untuk di jadikan icon untuk blog sobat. Karena disini sobat tinggal salin url image-nya saja dan langsung bisa dipasang atau di terapkan ke dalam blog sobat.


 Jika sobat semua ingin memiliki Icon yang keren, Di bawah ini saya kasih contoh gambar image icon, Sobat tinggal salin saja URL image-nya, Atau mungkin jika sobat ingin pilihan gambar icon yang lebih banyak lagi, Sobat bisa lihat langsung ke sumber situsnya www.iconarchive.com

Icon 16x16 px


Icon 32x32 px


Shared by KUCOPAS

Silahkan Sobat pilih icon yang sobat inginkan
Kalau sobat ingin yang lebih banyak pilihannya dan lengkap, Silahkan sobat visit ke situs-nya langsung.
Semoga bermanfaat.

Senin, 20 Februari 2012

Cara Membuat Menu Dengan Icon Gambar Di Blog

 Cara Membuat Menu Dengan Icon Gambar Di Blog - Setelah kemarin saya posting artikel tentang trik Cara buat Daftar Isi Dengan Label Tertentu Di Blog, Dan kali ini saya akan berbagi  artikel tentang trik lagi, Tentunya supaya Blog sobat semua jadi makin tambah terlihat lebih bagus, menarik dan juga cantik. Caranya yaitu dengan menambahkan Menu Vertikal Dengan Icon atau gambar.

 Mungkin biasanya yang sering sobat lihat, jumpai dan temui hanyalah menu vertikal biasa saja tanpa di lengkapi tampilannya dengan icon gambar.

 Nah sekarang saya punya trik untuk sobat semua supaya tampilan menu di blog sobat jadi lebih menarik dan bagus lagi, Sobat bisa membuat dan memasang Menu Vertikal Dengan Icon gambar.


 Agar sobat tidak penasaran dengan tampilan menu yang menggunakan icon gambar, Sobat bisa melihat contoh gambar screenshot di bawah ini, Atau melihat langsung pada blog DEMO KUCOPAS.

Cara Membuat Menu Dengan Icon Gambar Di Blog

 Jika sobat sudah tidak sabar lagi ingin membuat dan memasang Menu Vertikal Dengan Icon gambar di blog sobat, Nanti saya akan kasih tahu caranya. Karena caranya terbilang sangat mudah sekali untuk di pahami, Asalkan sobat mengikuti langkah-langkahnya yang akan saya jelaskan dengan cermat. Okelah kalau begitu kita langsung saja menuju ke TKP. huahh...

Berikut langkah-langkahnya cara membuat dan memasang Menu Vertikal dengan Icon Gambar di Blog:

1. Silahkan sobat >> Login atau Masuk >> Ke Blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blog baru, Pilih menu >> Tata Letak >> Tambah Gadget >> HTML/Java Script.

3. Kemudian masukkan semua Kode di bawah ini pada kotak HTML/Java Script.
Masukkan semuanya dan jangan sampai ada yang terlewatkan ya sobat.

<style>
.list {
background:none; no-repeat left center;
border-bottom:1px dotted #ccc;
line-height:1.2em;
padding:2px 2px 2px 20px;
}
</style>
<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;">
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Home-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLUo9bBRDHzEYfl2iXmf4f_nBr9WYNzZpBvrJ-NhaiSTj-rePutDNaSuhxrXZ997ZmSFXNpQisFwdTq4wjS0CcHBRdnBzf5Pg5MoOsQUCd3jI7o7YGsyCwqT5n3ze9PAsNcXeSxO6Iq3c/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Daftar Isi</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Graphics-Painting-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Download Template Blog</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/soft/32/Tutorial-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Tutorial Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/emey87/social-button/32/blog-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Tips Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/brilliant-graphics/32/colors-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwItpoUtvHaTH6YJWcZKY9o6_hmfEJJ-idTLXydIeuvFzMsFVsUa2PSTeUCjUK_Q8nWnDGPK7BBcVlBhqCbVMAPW5wnidPm39oqRZ03k9TcX8LX_9AuiQhNr05gIxaeUUs9_h5GWdF-o8/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-insert-link-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg01mhnU4PkC5LRXKA09QfeLxS5JKFNJoKQblaG-gdyG19qDFnmboOUpqkj9oXE5qV8_oODow12sQQ05fbkhDRn-vp787_S7N1wzUslwPB-LnKAVXnr2oUJY9h0SNcxssHwkqdq8jOilPDK/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/real-vista-web-design/32/Banner-design-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVpD9SczL20EPQI9uXcYbKWxfhx8P31QsyAQb4wXcSrDFuY8mdQbHZtSXS4WQH4pScXo6dUEL-PY14Re75Wm5I1SwbJa_HJVUKTqNrpR739lcx_Mk6gdkWROkO2mPGPuqp0U8oaihPGpP/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Feedburner</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/phuzion/32/Misc-Misc-Box-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Kumpulan Icon</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/book-addresses-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

4. Setelah semua kode sudah sobat masukkan pada kotak HTML/Java Script, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan :
  • Berikut keterangan beberapa Kode yang bisa sobat edit atau ganti:
- Warna Biru silahkan sobat ganti warna backgroundnya sesuai dengan selera sobat.

- Warna Pink silahkan sobat ganti dengan URL Icon gambarnya sesuai dengan keinginan sobat.

- Warna Hijau silahkan sobat ganti dengan alamat URL tujuan atau target Menu.

- Warna Merah silahkan sobat ganti dengan Nama Menu yang ingin sobat tampilkan.

 Jika sobat tidak punya atau belum punya alamat URL Icon atau gambar, Silahkan Sobat bisa lihat dan pilih-pilih Kumpulan Icon Keren DISINI. Sobat bisa memodifikasi icon atau gambarnya sesuai dengan keinginan dan selera sobat.

 Semoga tips dan trik blog tentang Cara Membuat Menu Dengan Icon Gambar Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat Berkarya...
 

M-Kolom Tutorial | All Tutorial Copyright © 2012 Fast Loading -- Powered by Blogger