Kumpulan Desain Rumah, Berkebun

Sunday, November 15, 2009

Membuat FAVICON

Favicon adalah kependekan dari Favorites icon, di website wikipedia Favicon diterjemahkan sebagai an icon associated with a particular website or webpage atau bahasa Indonesia kurang lebih adalah sebuah icon yang mewakili dari wajah web tersebut.

Favicon dapat ditampilkan pada Internet Explorer, Mozilla, Opera dan biasanya nampak pada Address Bar. Saat kita Bookmarks suatu web, Favicon dapat mewakili karakter dari web tersebut.

Icon dapat dibuat dari bagian web tersebut atau membuat sendiri dengan bentuk lambang atau logo yang bisa mewakili web tersebut. Berikut ini adalah cara membuat, dan memasukkan Favicon ke web anda.

Pertama pastikan dulu Icon/Image mana yang akan anda jadikan Favicon, usahakan membuat Icon sekecil mungkin, sedetail dan sejelas mungkin, Ini berguna saat icon tersebut di generate agar sesuai hasilnya dengan yang anda harapkan.

Sedangkan cara memasang favicon di blogger.com adalah sebagai berikut :

Login ke blogger.com
Klik Tata Letak --> Edit HTML.
Copy kode di bawah ini dan paste di atas kode </head>

Contoh Favicon :

Untuk Icon / Image bisa kamu gunakan baik animasi maupun no animasi, bisa kamu simpan dimana saja, misalnya : Pikasa.com, photobucket.com, Google site, dll

kalau kamu mau, kamu bisa pakai contoh yang ada.......

Simpanlah hasil editing tersebut dan kamu bisa lihat hasilnya.

Cara mudah membuat TAB VIEW WIDGET

Kamu ingin membuat blog yang sederhana dengan isi lengkap maka TabView adalah salah satu alternatif dimana kamu bisa menghemat tempat dengan isi yang sama.

Tab View ini (dikenal juga dengan istilah Slide Show Menu) sangat berguna bagi kamu yang ingin menambahkan berbagai widget tapi hanya dalam satu tempat, baik itu Recent Post, Recent Comments, Link Blogroll, Link Banner teman, dll.

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /* warna background menu aktif */
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* background kotak utama */
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.

Langkah Kedua

Setelah itu letakkan kode berikut di bawah kode ]]></b:skin> tersebut

Simpanlah hasil editing tersebut.

Langkah Ketiga

Pilih tab Elemen Halaman ( Page Element ).
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">


<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>



<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>



<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>


</div></div></form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://bestdesignroom.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

Pada tulisan yang tercetak tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain ( lebih dari 3 ) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

Untuk mengganti kode warna bisa kamu lihat disini KODE WARNA atau Menggunakan kode warna dalam blogging

CONTOH PENGGUNAAN TAB VIEW

Selamat Mencoba...!!

Referensi : dari banyak Blog Sahabat.