Cara Membuat Link URL/Link Anchor di Postingan Dengan Slide Gambar

Cara Membuat Link URL/Link Anchor di Postingan Dengan Slide Gambar
Setelah postingan yang lalu tentang Membuat Preview Gambar Di Blog selanjutnya kang roni akan memberi tutorial Cara Membuat Link URL/Link Anchor di Postingan Dengan Slide Gambar,postingan ini merupakan modernisasi dari Cara Membuat Link URL/Link Anchor di Postingan Blog Agar Bisa di KLIK jadi tutorial ini adalah kombinasi antara membuat link anchor dan membuat preview gambar, untuk lebih jelasnya sobat lihat saja demonya.


Dengan melihat demonya anda pasti sudah paham sekarang saatnya pertanyaan bagaimana cara membuatnya?
Untuk Membuat Link URL/Link Anchor di Postingan Dengan Slide Gambar sangatlah mudah anda ikuti saja langkah-langkahnya dibawah ini.

1.Login Blogger.com
2.Buka halaman Rancangan kemudian pilih Edit HTML
3.Download Template Lengkap untuk keamanan bila terjadi kesalahan edit
4.Beri centang pada kotak Expand Template Widget
5.Cari kode ]]></b:skin> setelah ketemu taruh kode CSS dibawah ini persis diatas kode tadi (]]></b:skin>).

<style type="text/css">

.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 */

}

</style>

6.Save template.
7.Kemudian masukkan kode HTML dibawah ini kedalam postingan anda.

<a class="thumbnail" href="http://roningasinanblog.blogspot.com/">ganti teks<span><img src=" http://en.clipart-fr.com/data/clipart/coloring_02/coloring_0748.gif " />Tutor By Kang Roni Blog </span></a>

8.Setelah artikel selesai terbitkan entri dan lihat hasilnya.

Ket:Untuk kode yang diberi warna merah ganti dengan link tujuan anda,dan biru ganti dengan teks yang dikehendaki dan warna pink ganti dengan link gambar anda.
Cara Membuat Link URL/Link Anchor di Postingan Dengan Slide Gambar


Related Post:

7 comments:

onliner said...

wah kang roni sudah semakin jauh larinya, ane baru aja bisa tengkurep dah ditinggal jauhhh sekali... langganan entri dari kang roni bisa ndak??? hajarjahanamgratis.blogspot.com

roni said...

maaf belum sempet karena lagi ikutan lomba seo,do'akan ya.

ahmad taukid said...

>> boss koq gambarnya gag bisa berjalan dgn baik.. padahal sudah aq ikutin cara2 dari kang roni.. mohon penjelasan yang lebih boss...

roni said...

mohon diperhatikan sobat,saat membuatnya pastikan ada pada mode Edit HTML dan jangan sekali-kali pindah ke mode Compose sebelum sobat menerbitkan entri,oke bila ada keluhan lagi mohon beri tahu kang roni.sukses .....

Andika said...

Harus saya coba Kang, tapi model wordpress kayaknya beda yach Kang.

roni said...

benar sobat

iconia PC tablet dengan windows 8 said...

wahhh mantep nihh.... ntar ane coba dehhh....

Post a Comment