Trik membuat gambar home dan posting berbeda. Judul ini mungkin akan sedikit agak membingungka bagi anda. Sebenarnya begini. Jika kita posting sebuah artikel beserta gambar, maka pada home blog akan tampil. Ketika kita buka halaman posting itu, gambar hidden alias tersembunyi atau hilang.
Mungkin masih kurang paham juga. Ikuti aja trik berikut ini.
Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan menjelaskan pengaplikasiannya.
Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman artikel (item).
<b:if cond='data:blog.pageType == "item"'>
Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang ingin dijadikan thumbnail.
Berikut total kode:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.thumb {display:none}
</style>
</b:if>
Letakkan kode tersebut diatas </head>
***
Masuk kehalaman posting & saat memasukkan gambar ke artikel, akan muncul kode berikut:
<a class="thumb" onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}"
href="...s1600/anonymous.png"><img style="display:block; margin:0px
auto 10px; text-align:center;cursor:pointer; cursor:hand;width:
35px; height: 35px;" src="...s400/anonymous.png" border="0"
alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>
Atau,
<img class="thumb" src="...s1600/anonymous.png" alt="" />
Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML diatas. Intinya adalah pada class="thumb". Commons ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.
Sumber: master blogger saya
Mungkin masih kurang paham juga. Ikuti aja trik berikut ini.
Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan menjelaskan pengaplikasiannya.
Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman artikel (item).
<b:if cond='data:blog.pageType == "item"'>
Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang ingin dijadikan thumbnail.
Berikut total kode:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.thumb {display:none}
</style>
</b:if>
Letakkan kode tersebut diatas </head>
***
Masuk kehalaman posting & saat memasukkan gambar ke artikel, akan muncul kode berikut:
<a class="thumb" onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}"
href="...s1600/anonymous.png"><img style="display:block; margin:0px
auto 10px; text-align:center;cursor:pointer; cursor:hand;width:
35px; height: 35px;" src="...s400/anonymous.png" border="0"
alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>
Atau,
<img class="thumb" src="...s1600/anonymous.png" alt="" />
Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML diatas. Intinya adalah pada class="thumb". Commons ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.
Sumber: master blogger saya
0 komentar:
Posting Komentar
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA dan sejenisnya tidak akan di tampilkan.