Favicon "Mengganti Logo B Blogger dengan Logo Lain"

Favicon adalah gambar mungil dia awal suatu di awal suatu alamat web pada address bar. Favicon menjadi penanda atau identitas sebuah web. Sebenarnya blog yang dari blogger sudah mempunyai gambar favicon standar seperti ini nah... sekarang kita akan mengubahnya menjadi favicon kita sendiri. Bagaimana cara mengubahnya ??? Sebelumnya kita harus membuat favicon dengan favicon generator.

Baiklah inilah tutorial selengkapnya pembuatan dan cara memasang favicon di blog kita...smoga berhasil...

1. pilihlah sebuah gambar yang akan di jadikan sebagai favicon

2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan klik disini

3. Klik pada tombol Browse...

4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon

5. Klik pada tombol Generate Favicon

6. Setelah proses selesai, klik pada Click Here to Download your favicon.

7. Save ke komputer anda.

8. Langkah selanjutnya adalah anda harus meng-upload Favicon yang tadi ke tempat hosting gambar, contoh adalah ke imageshack atau geocities (tapi kelihatanya geocities akan ditutup jadi gunakan image shack saja)

9. Sekarang saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti ini : (ini hanya contoh lho...)

http://www.geocities.com/amn_tea/favicon.ico

10. Anda harus mengubah alamat URL favicon anda menjadi seperti ini :

<link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>

11. login ke blogger dengan ID anda.
12. Klik pada Tata Letak.
13. Klik Edit HTML.
14. Silahkan cari kode </head>. letakkan kode dibawah ini tepat diatas kode </head> :


<link rel="shortcut icon" href="Gambar Anda"/>

Ganti teks Gambar Anda di atas dengan Alamat URL gambar Anda.
15. Klik tombol Simpan Template.

16. Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.
Bagi anda yang masih menggunakan browser IE6, favicon anda tidak akan langsung terlihat, coba di bookmark dulu alamatnya. Berbeda jika anda menggunakan browser firefox, opera dan yang lainnya, favicon anda sudah langsung dapat di nikmati.

(Sumber : Blognya Kang Rohman )

Cara Membuat Widget Multi Halaman/TabView

Dari anda melihat gambar disamping ini saja,anda pasti sudah mengerti apa yang saya maksud dari multi halaman/multi tab tersebut.

Yup! Membuat Widget sederhana yang bertujuan untuk menghemat tempat,sekaligus menambah kerapian dari blog/web tersebut.

Selain itu,pengunjung tidak merasa lelah menaikan maupun menurunkan scrollbar hanya untuk sekedar menari status dari blog tersebut.

Nah! kesempatan kali ini,akan membahas tentang widget multi tab tersebut.
Sebenarnya artikel ini sudah di publikasikan oleh Mas Herman di artikelnya ’Menambahkan Widget Tab View Pada Blog’.

Pelajaran Blog tanpa mengurangi etika blogging,akan menjabarkannya lagi.
Sebenarnya sangat sederhana dalam membuat widget bertab-tab ini,untuk yang belum tahu cara membuatnya,anda bisa ikuti lagkah berikut:



Cara Membuat Multi Halaman

Pergilah ke Dashboard,lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript.

Letakkan kode berikut:

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://h1.ripway.com/forantum/javascript/tabview.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Untuk kode yang berwarna hijau, ubahlah dan gantilah sesuai keinginan anda,sedangkan kode yang berwarna merah,hanya sebuah penjelasan dari masing-masing kode.

Sekarang tinggal menyisipkan kode-kode html yang ingin anda letakkan pada masing-masing tab.
Anda bisa meletakkan seperti,kode Shout,Recent Comment,Blogroll dll.
Semoga berhasil ya..

(Sumber : http://pelajaran-blog.blogspot.com)

Cara Membuat Efek Marque (Teks Berjalan)

Efek marque adalah efek untuk membuat teks seperti berjalan, untuk membuat teks berjalan kita perlu menyisipkan kode HTML. Tulisan yang berjalan ini dapat digunakan untuk menuliskan kata-kata penting di blog karena tulisan ini dapat menarik perhatian pengunjung. Tak hanya itu apabila tulisan yang akan kita tuliskan cukup panjang maka efek marque ini akan sangat menghemat tempat di blog. berikut ini adalah contoh-contoh efek marque, beserta kode HTML nya :

• marque biasa

teks kamu disini



Kode HTML :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

teks kamu disini

</MARQUEE>

• marque dengan getaran

teks kamu disini



Kode HTML :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

teks kamu disini

</MARQUEE>

• marquee dengan variasi huruf dan warna latar belakang

teks kamu disini

Kode HTML :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

teks kamu disini

</MARQUEE></b></FONT></div>

• Marque berhenti bila ditunjuk mouse

teks kamu disini



Kode HTML :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

teks kamu disini

</marquee>

Sumber : http://forantum.blogspot.com/

Membuat Horizontal Menu

Horizontal menu adalah menu yang berguna untuk berguna untuk menunjukkan halaman lain yang ada diblog anda. Misalnya blog anda dibagi menjadi empat tema, maka widget ini selain indah juga berguna untuk menunjukkan tema-tema tersebut. Dengan widget ini maka tema-tema di blog anda akan lebih mudah dilihat oleh pengunjung dan membuat website lebih rapi dan indah.Selain itu, menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.

Ini adalah gambar Horizontal menu yang akan kita buat:



atau sebagai contoh horizontal menu yang asli dan bisa di klik, kunjungilah blog ini

Nah apakah anda berminat untuk membuatnya??? baiklah ini adalah cara membuatnya:

1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML
2. Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda:

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}

.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}



3. Kalau Sudah Cari Code dibawah Ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>



4. Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna kuning saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu:

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>


5. Kemudian Simpan

6. kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://poltek-malang.blogspot.com/'>Kumpulan Tutorial Blog</a></li>
<li><a href='url '>nama</a></li>
<li><a href='url '>nama</a></li>
</ul>
</div>



ket: nama dan url kamu ganti dengan nama dan url yang kamu inginkan

Nama : nama dari tema, misal : My Musik , My video, tutorilal blog, dll.
url : url yang dituju apabila nama di klik oleh pengunjung.

7. udah selesai lalu simpan.....