Pentingnya Menambahkan Kode Alt Gambar Pada Blog

Alt gambar pada blog adalah sebuah kode atau tag yang disisipkan pada kode HTML sebuah gambar. Kode alt pada gambar berfungsi untuk mengenali keyword gambar yang berada pada blog sehingga mudah ditemukan oleh search engine.

Untuk lebih jelasnya akan diberikan sebuah contoh:

1. Kode gambar icon home
<img src="http://i56.tinypic.com/14bsx2g.jpg" >
Hasil gambar icon home tanpa kode alt

2. Kode gambar icon home yang telah ditambahkan kode alt
<img src="http://i56.tinypic.com/14bsx2g.jpg" alt="Icon Home Haraublog"/ >
alt="Icon Home Haraublog"/ > Hasil gambar icon home yang telah ditambahkan kode alt

Perhatikan pada kedua kode html gambar diatas, kedua kode tersebut merupakan kode html gambar icon home, hasil yang diperlihatkan kedua kode tersebut sama akan tetapi kode HTML gambar yang kedua, yang memiliki tanda merah memiliki sebuah keyword gambar yang nantinya dapat ditemukan oleh search engine.

Untuk menambah kode alt gambar pada blog dapat dilakukan dengan cara menambahkan kode alt=”nama gambar/ keyword gambar”/

Maka setelah ditambahkan kodenya akan menjadi
<img src="URL gambar" alt="nama gambar/keyword gambar"/ >

»»  READMORE...

Membuat Link ke Halaman Baru

Berikut ini adalah sebuah postingan mengenai cara membuat link ke halaman baru pada blog, maksudnya link yang berada pada blog anda ketika di klik akan membuka halaman browser yang baru dan halaman blog anda tidak berubah, fungsi utama dari cara ini adalah agar pengunjung yang datang ke blog anda, ketika klik link yang berada pada blog tidak meninggalkan blog anda, dengan begitu blog anda tidak dijadikan sekedar numpang lewat menuju ke blog lain.

Dibawah ini contoh 2 buah link dengan fungsi yang berbeda:

Link ini tidak meninggalkan blog anda jika membuka halaman baru
Kode dari link diatas
<a href="http://harauku.blogspot.com" target="_blank"/>Link ini tidak meninggalkan blog anda jika membuka halaman baru</a>

Link ini meninggalkan blog anda jika membuka halaman baru
Kode dari link diatas
<a href="http://harauku.blogspot.com"/>Link ini meninggalkan blog anda jika membuka halaman baru</a>

Dari dua contoh link diatas jelas bahwa untuk membuat link ke halaman baru cukup menambahkan target="_blank" lihat cara membuatnya pada contoh kode link diatas yang diberi tanda merah.

»»  READMORE...

Membuat Daftar Isi Otomatis Tanpa Label Pada Blog

Membuat daftar isi untuk ditampilkan pada blog ada bermacam-macam cara, ada yang membuat daftar isi berikut label katagorinya beserta tampilan tanda “New” untuk postingan terbaru, namun yang akan dibahas disini adalah bagaimana cara membuat daftar isi secara otomatis tanpa label kategori, hasilnya semua postingan walaupun sudah dikelompokan dalam label kategori akan dibuat berbaris kebawah dengan diberi tanda angka 1 s/d .. sekian dan mengabaikan label katagorinya.

Cara membuat daftar isi model ini bisa dibilang cukup praktis, kodenya hanya dimasukan kedalam gadget tanpa merubah Rancangan Edit HTML halaman blog, selanjutnya bila anda membuat postingan baru secara otomatis postingan tersebut telah dimasukan ke daftar isi.

Caranya adalah sebagai berikut.

1. Login ke account blogger anda
2. Pilih tata letak/layout
3. Tambahkan gadget lalu pilih HTML/ javascript
4. Copy kode dibawah ini pada gadget anda.

<div style="border: 0px solid #000; overflow: auto; height: auto;">
<script style="text/javascript" src="http://tivadblogspot.googlecode.com/files/Contents.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
var shownumposts = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
<div align="right" style="padding:16px 5px 5px 5px;font-size:11px">
<a href="http://www.davitblog.com" target="_blank" style="color:#000">Powered By Blogger</a>
</div>

*) kode script untuk daftar isi ini saya dapatkan dari blog lain, telah dicoba pada beberapa template dan hasilnya berjalan dengan baik.

»»  READMORE...

Menghilangkan Tampilan Tang dan Obeng Pada Blog

Bagi yang telah memiliki blog hasil karya sendiri pasti sudah memahami maksud judul halaman ini dan yang belum pernah membuat blog tetapi ingin mempelajari maksudnya akan dijelaskan sedikit disini, Tampilan tang dan obeng adalah sebuah icon yang sebenarnya dinamakan Quick Edit, merupakan icon tampilan pada blog kita ketika sedang login ke Blogger, tampilan tang dan obeng ini sebenarnya hanya dapat dilihat oleh kita sendiri, orang lain yang sedang mengakses blog kita tidak dapat melihatnya, walaupun begitu nampaknya tampilan tang dan obeng ini cukup mengganggu dan banyak para blogger yang menghilangkan tampilan tersebut.

Cara menghilangkan tampilan tang dan obeng pada blog adalah sebagai berikut:

1. Login ke account blogger anda.
2. Pilih Rancangan lalu Edit HTML.
3. Masukan kode dibawah ini diatas kode ]]></b:skin>

.quickedit{
display:none;
}

Kemudian simpan template anda.

»»  READMORE...

Cara Praktis Membuat Navbar Horizontal Dengan Search Engine

Untuk membuat navbar horizontal ada berbagai macam cara, anda dapat mencari kode kode untuk membuat navbar pada artikel para blogger senior kita di Google, namun sangat disayangkan banyak script cara membuat navbar horizontal yang tidak semuanya cocok diterapkan pada template kita, maklum sebagai blogger junior saya kurang memahami fungsi dan arti kode kode HTML pada template.

Berikut ini saya akan memberikan script cara praktis membuat navbar horizontal dengan search engine yang tampil pada pinggir kanan dari navbar, dikatakan praktis karena kita hanya mencopy kode kedalam gadget tanpa harus mengedit HTML template, cara praktis ini didapatkan dari blog tetangga yang dengan baik hati membagi ilmunya untuk kemajuan blogger Indonesia.

Cara yang harus dilakukan:
1. Login ke account blogger anda
2. Pilih tata letak/layout
3. Tambahkan gadget lalu pilih HTML/ javascript
4. Copy kode dibawah ini pada gadget anda.

<style type="text/css">

.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

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

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

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href="http://haraublog.blogspot.com">Beranda</a></li>
<li><a href="#">Tips n Trik</a></li>
<li><a href="#">Serba Serbi</a></li>
<li><a href="#">Kontak Admin</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='insert keyword here...'/><input class='submitbutton' type='submit' value='search'/></form></div></div>

Ganti kata kata yang berwarna merah dengan kata kata pada navbar anda.
Ganti kata kata yang biru dengan alamat url link tujuan anda.

»»  READMORE...