Tes post Highlight JS for tutorial blog posting

Oleh - tentang

Tes post Highlight JS for tutorial blog posting

Seperti yang direncanakan semula, template ini bakal punya fitur gallery dengan fitur lightbox (memunculkan gambar ukuran besar setelah klik thumbnail) bikinan sendiri. Bukannya nganggep jelek fitur lightbox bawaan Blogger, cuma biar kita gampang mengkonstumisasi aja.

Oh iya, di post ini juga kita mencoba ga pake jumplink/readmore. Seperti yang kita tau, 4 template bawaan baru Blogger (Emporio dkk) ada yang ga pake.

Langsung saja berikut tampilan gallery kita dan dibawahnya adalah bentuk HTMLnya...

Jangan diklik dulu, belum bikin js nya hahaha

  • Boram
  • Eunjung
  • Hwayoung
  • Hyomin
  • Jiyeon
  • Qri
  • Soyeon 
<div class="post-gallery" tabindex="100" id="gallery-0801171">
<ul class="post-gallery-grid">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd1nZR2N-7dGFlTN7eHGJpK_2Yqh73bq7WHlA8APXczWXlUc-m3hNlN-cKnXTltBUjy3cSaYYHUPeYHwxDzfx4Xt_u2B00bFjllstbt95sjCT13EMyBirBZupBeyImKsDEN_GsIaF77Yk/s1600/T-ara+Boram+Photo+on+Bed+di+Swiss.jpg"><img alt="Boram" class="gallery-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd1nZR2N-7dGFlTN7eHGJpK_2Yqh73bq7WHlA8APXczWXlUc-m3hNlN-cKnXTltBUjy3cSaYYHUPeYHwxDzfx4Xt_u2B00bFjllstbt95sjCT13EMyBirBZupBeyImKsDEN_GsIaF77Yk/s600/T-ara+Boram+Photo+on+Bed+di+Swiss.jpg" width="600" height="400" data-original-width="600" data-original-height="400" /></a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCguJG9QCMxMMLIUWdqoancntEZI0slJwaHBgjBghUMKjO5J6CrqyzfJGghFj_GwESV4JNO44wsR25hDTUAJchnlWL0qkjgzBJozU-vveqwTwNQ-P01OH6MdBGYLGictiiD2a6gQPRd6U/s1600/T-ara+Eunjung+Photo+on+Bed+di+Swiss.jpg"><img alt="Eunjung" class="gallery-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCguJG9QCMxMMLIUWdqoancntEZI0slJwaHBgjBghUMKjO5J6CrqyzfJGghFj_GwESV4JNO44wsR25hDTUAJchnlWL0qkjgzBJozU-vveqwTwNQ-P01OH6MdBGYLGictiiD2a6gQPRd6U/s600/T-ara+Eunjung+Photo+on+Bed+di+Swiss.jpg" width="600" height="400" data-original-width="600" data-original-height="400" /></a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHg2LlgCZxq21PiD3vwcienU2L1dqyC4TFbSNx9vSaCotcTDOM7IvlOKRhdm-bi8J0cnh6sunH8o4UKbqJxro8TDmiwjYAMgt3eSATSqwlfU6ntzEZBqsOjHFqp-0Jw1dGuVrg4dq_2c8/s1600/T-ara+Hwayoung+Photo+on+Bed+di+Swiss.jpg"><img alt="Hwayoung" class="gallery-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHg2LlgCZxq21PiD3vwcienU2L1dqyC4TFbSNx9vSaCotcTDOM7IvlOKRhdm-bi8J0cnh6sunH8o4UKbqJxro8TDmiwjYAMgt3eSATSqwlfU6ntzEZBqsOjHFqp-0Jw1dGuVrg4dq_2c8/s600/T-ara+Hwayoung+Photo+on+Bed+di+Swiss.jpg" width="600" height="400" data-original-width="600" data-original-height="900" /></a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHnBgikTUe4uzyZ0FGl1s6yS9MUzjCcUXEXV1jYV4ttWWEQeCgAU-AKUNFeEB9oc2TcdKt7cLcABMpZwnvQ7gf2yne2bioFqhJlENBIDB9MP_OmanxnWpvAE5F9-nUyVSXRDDICB-iFw/s1600/T-ara+Hyomin+Photo+on+Bed+di+Swiss.jpg"><img alt="Hyomin" class="gallery-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHnBgikTUe4uzyZ0FGl1s6yS9MUzjCcUXEXV1jYV4ttWWEQeCgAU-AKUNFeEB9oc2TcdKt7cLcABMpZwnvQ7gf2yne2bioFqhJlENBIDB9MP_OmanxnWpvAE5F9-nUyVSXRDDICB-iFw/s600/T-ara+Hyomin+Photo+on+Bed+di+Swiss.jpg" width="600" height="400" data-original-width="600" data-original-height="400" /></a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtulx5QbJiqZhZlEEtlzScgWndMLYF8i6rKpbUoukZsjBV2ZfjzECsKVN9qvBUuuguILwz7QxbHJlc_BuWxrENmkotVE4uZJ_nykZuezP59pyxCyq_DsU1cRLrqmdIrAxzZwx0W3O2JD0/s1600/T-ara+Jiyeon+Photo+on+Bed+di+Swiss.jpg"><img alt="Jiyeon" class="gallery-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtulx5QbJiqZhZlEEtlzScgWndMLYF8i6rKpbUoukZsjBV2ZfjzECsKVN9qvBUuuguILwz7QxbHJlc_BuWxrENmkotVE4uZJ_nykZuezP59pyxCyq_DsU1cRLrqmdIrAxzZwx0W3O2JD0/s600/T-ara+Jiyeon+Photo+on+Bed+di+Swiss.jpg" width="600" height="400" data-original-width="600" data-original-height="400" /></a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJpXC7-B7xobll8jqbk9Tq_NvW6j4T2EPf75bnXpfWlQ6er1EtNY08J8yq6VW5BPueD7w7E_ER-ocIn_qGG9-NrgB989naaozxwvCYsP6MG4a6dZPGKBHC-XR10yV3KmOmqK6z2Kg_Jk/s1600/T-ara+Qri+Photo+on+Bed+di+Swiss.jpg"><img alt="Qri" class="gallery-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJpXC7-B7xobll8jqbk9Tq_NvW6j4T2EPf75bnXpfWlQ6er1EtNY08J8yq6VW5BPueD7w7E_ER-ocIn_qGG9-NrgB989naaozxwvCYsP6MG4a6dZPGKBHC-XR10yV3KmOmqK6z2Kg_Jk/s600/T-ara+Qri+Photo+on+Bed+di+Swiss.jpg" width="600" height="900" data-original-width="600" data-original-height="900" /></a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyFaNiuYr4E-TTf6cC6bKOMAyO-RqjTSayhdIupQ0AIOUjIPKXBG-xUOyYDzWn4Uqh2nG4_oPmPN6Cv5DZ0Nhn3-8Qahks4lawoAbwEh0BQ9Jn-UPJvYcSHVOsWIE-qsuhNFj1Xan97g/s1600/T-ara+Soyeon+Photo+on+Bed+di+Swiss.jpg"><img alt="Soyeon" class="gallery-image" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyFaNiuYr4E-TTf6cC6bKOMAyO-RqjTSayhdIupQ0AIOUjIPKXBG-xUOyYDzWn4Uqh2nG4_oPmPN6Cv5DZ0Nhn3-8Qahks4lawoAbwEh0BQ9Jn-UPJvYcSHVOsWIE-qsuhNFj1Xan97g/s600/T-ara+Soyeon+Photo+on+Bed+di+Swiss.jpg" width="600" height="400" data-original-width="600" data-original-height="400" /></a>
</li>
</ul>
</div>
<div class="load-modules" data-modules="gallery"></div>

Under Construction......

Tags

Komentar

Berikan Tanggapanmu