MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: Tidak jarang dalam sebuah blog, kamu memasukkan berbagai macam image, baik yang berukuran kecil maupun besar. Semakin besar ukuran suatu image, maka semakin besar pula waktu yang dibutuhkan untuk meloadingnya. Sehingga alangkah baiknya apabila image tersebut kamu optimasi dalam ukuran kecil yang jika didekati oleh kursor mouse akan menampilkan image yang relatif besar. Yah, lumayanlah apalagi blogku banyak gambarnya (khusus yang punya blog bergambar porno dan mau menggunakan trik ini. Jangan bilang-bilang bahwa kamu dapat triknya dari SEO he..he..he..). Bonus tambahannya, yakni teks yang dapat menampilkan image, jika didekati kursor mouse. Sebagai illustrasi, silakan dekatkan kursor pada image dan teks berikut :



Apabila kamu tertarik dengan trik blogger ini, mari kita review cara menampilkan image dalam efek zoom Image tersebut.

* Login ke account blogger kamu.
* Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

* Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* Zoom Efek */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

* Simpan template kamu

Cara penggunaan ketika kita ingin menggunakan trik ini pada suatu postingan :

Kode HTML untuk image zoom.

<a class="thumbnail" href="#thumb"><img src="http://i734.photobucket.com/albums/ww347/lerry_apriantony/seoblog.gif" border="0" /><span><img src="http://i734.photobucket.com/albums/ww347/lerry_apriantony/seoblog.gif" width="180px" height="100px"/></span></a>

Kode HTML untuk teks.

<a class="thumbnail" href="#thumb">Icon SEO<span><img src="http://i734.photobucket.com/albums/ww347/lerry_apriantony/seoblog.gif" /></span></a>

Catatan :

1. Kode yang berwarna merah merupakan default image dan teks yang akan kamu tampilkan.
2. Kode yang berwarna hijau merupakan sisipan kode, agar default image akan menampilkan efek zoom.
3. Kode berwarna biru merupakan sisipan kode, agar default teks akan menampilkan image.
4. Jika ingin memperbesar zoom, silakan atur kode yang berwarna hijau dan berkedap-kedip (width dan height).

Selamat menampilkan image dalam zoom efek...2013, By: Seo Master

Seo Master present to you: Tabel merupakan salah satu assesoris yang mungkin dapat menjadikan blog kamu tampil lebih menawan. Tapi karena caranya yang agak sedikit sulit, tidak jarang hal ini diabaikan. Tabel dalam optimasi suatu blog berfungsi untuk menguraian kata-kata atau kalimat dalam bentuk kotak-kotak agar lebih mudah dimengerti dan dipahami. Coba ambil contoh dalam postingan menampilkan kode HTML dalam postingan. Sekarang mari kita tela`ah secara seksama sebuah illustrasi di bawah ini.

Aku mempunyai 4 (empat) teman dari kelas yang berbeda beda. Si A dan B di kelas 6 kegemarannya makan bakso. Si C berada di kelas 4 sukanya sepak bola. Sedangkan si D di kelas 5, hobbynya tidur melulu.

Dari kalimat di atas seandainya kita buat ke dalam tabel mungkin bentuknya seperti ini.

Nama Temanku	Kelas	Hobby
A	6	Makan bakso
B	6	Makan bakso
C	4	Sepak bola
D	5	Tidur

Nah, selanjutnya bagaimana trik SEO membuat tabel seperti di atas ke dalam blog kamu. Singkat kata berikut kode untuk membuat tabel dalam blog.

<table border="1" width="300">
<tr bgcolor="#E0F8E0"><td align="center"><b>Nama Temanku</b></td><td align="center"><b>Kelas</b></td><td align="center"><b>Hobby</b></td&gt;</tr>
<tr><td align="center">A</td><td align="center">6</td><td align="left">Makan bakso</td&gt;</tr>
<tr><td align="center">B</td><td align="center">6</td><td align="left">Makan bakso</td&gt;</tr>
<tr><td align="center">C</td><td align="center">4</td><td align="left">Sepak bola</td&gt;</tr>
<tr><td align="center">D</td><td align="center">5</td><td align="left">Tidur</td&gt;</tr>
</table>

Catatan :

1. Kode dasar dalam tabel adalah <table> ... </table>.
2. Kode untuk membuat baris tabel <tr> ... </tr>.
3. Kode untuk membuat kolom tabel <td> ... </td>, ingat satu baris bisa terdiri dari beberapa kolom.
4. Kode umum yang menyertai dalam kode tabel adalah width (...px), border (...px), align (center, left, right) dan bgcolor (kode warna/#......).

Selamat membuat tabel dalam blog...2013, By: Seo Master

Seo Master present to you: Bagi anda yang ingin Menampilkan Kode HTML dalam Postingan dan tips dan trik Menampilkan Kode HTML dalam Postingan semoga tutorial di bawah ini bisa membantu anda semua.

Menampilkan dalam postingan tidak seperti menulis kode biasa. Jika dalam postingan kamu memasukkan kode originalnya, maka yang tampil dalam postingan adalah hasil terjemahan bahasa HTML dari kode tersebut. Coba copy kode berikut dan langsung paste dalam entry (postingan) blog kamu :

<b>"Kok, kodenya ngga muncul???"</b>

Hasilnya mungkin seperti ini "Kok, kodenya ngga muncul???"

Di bawah ini merupakan 2 (dua) trik blogger praktis agar kodenya muncul dalam postingan :

Pertama adalah dengan cara manual, yaitu merubah karakter-karakter kode tertentu. Mari kita lihat karakter-karakter yang perlu diganti :

Kode	Ganti Kode dengan
<	&lt;
>	&gt;
"	&quot;

Kedua adalah dengan memparse kode HTML yang akan kamu masukkan dengan menggunakan layanan situs online. Silakan kamu kunjungi :

http://www.centricle.com/tools/html-entities

Masukkan kode yang akan kamu parse, kemudian tekan "Encode" atau jika ingin mengembalikan ke kode semula tekan "Decode".

Atau

http://www.blogcrowds.com/resources/parse_html.php

Masukkan kode yang akan diparse, namun kali ini kamu hanya menekan tombol "Parse".
Selamat Menikmati.2013, By: Seo Master