Skip to main content

Membuat Clickable Image Autoreadmore

auto readmore blogger logo Seperti yang kita tahu, sudah tersedia scrip Auto readmore untuk Blogger disamping read more bawaan Blogger itu sendiri (jump link). Script auto readmore itu sendiri setahu saia (yg sering saia jumpai) tidak mendukung clickable image langsung ke alamat postingan (ketika gambar di klik, tidak menuju url postingan) tetapi ke alamat url gambar itu sendiri. Hal ini mungkin menggangu untuk blog khusus gallery ato photo

Berikut ini langkah2 untuk mengaktifkan clickable image pada auto readmore (jangan lupa klik Expand Widget Templates)

Masuk ke Edit HTML dan cari kode berikut :

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 500;
summary_img =70;
img_thumb_height = 230;
img_thumb_width = 280;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
*/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+' ...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0;margin:0"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>



Ganti kode berwarna merah dengan kode berikut

function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0;margin:0"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a></span>';
summ = summary_img;
}



Terus, cari kode ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>


Ganti diatas dengan kode berikut :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>



Save

Untuk demonya, sobat bisa liat di demo Poster Inc Blogger Template


Pic : http://www.sodiycxacun.web.id/2011/10/auto-read-more-thumbnail-tanpa-java.html


** Kode auto readmore berdasarkan template Poster Inc.

Popular posts from this blog

Ini Konser Iwan Fals dan Slank !!

Sebuah konser musik tidak afdol apabila tidak ada penontonnya. Segala macam cara kadang dilakukan hanya untuk melihat artisnya beraksi dipanggung. Entah itu dengan manjat, nunggu jebolan, ato jika di pinggiran tempat konser ada pohon tinggi, rela naek itu pohon walopun anginnya gak lagi sepoi-sepoi.

Ada yang menarik jika saya mengamati konser2 musik, terutama konser musik diluar (outdoor) entah itu dari berita di tipi, atau lihat langsung. Bukan pada artisnya yang lagi manggung. Bukan pada tampilan panggungnya. Bukan pada tata panggungnya. Bukan pula pada tata suaranya tetapi pada penonton yang melihat konser tersebut.

Hampir sebagian besar konser musik outdoor, bendera OI (Orang Indonesia - Iwan Fals) dan Slank berkibar mewarnai konser padahal konser yang berlangsung bukan konser Iwan Fals ataupun konser Slank !! Gak peduli itu konser dangdut, konsernya Padi, Dewa, atau band lain atau konser kompilasi band2. Bendera OI dan Slank selalu berkibar ditengah2 para penonton.

Sebuah pertanyaa…

Oslanis Blogger Template

Salam.. Setelah kemarin rilis Axorys Blogger template, berikut ini template Blogger terbaru dari saya. Saya beri nama Oslanis Blogger Template. Secara khsusus, Oslanis Blogger template cocok untuk blog bertema fashion tapi bisa juga untuk semua tema.

Fitur Oslanis Blogger TemplateFully responsive Blogger templateMendukung Template Designer warna latar, gambar latar dan juga warna latar widget sidebar. Untuk variabel lainnya, bisa diedit via Edit HTMLMendukung browser yang umum dipakai oleh user.Mendukung konten slider.Responsive dropdown menu.Responsive video.Mendukung font icon from Font Awesome.WidgetableRelated posts dengan thumbnail.3 column footerAuto crop thumbnail dengan ukuran yang proporsional tidak ditarik/diregangkanRecent post and komen dengan thumbnailMendukung iklandan lainnya
Lihat juga :
Axorys Blogger Template. A Blogger template dengan 8 predefined styles.

Untuk setting dan download, silahkan menuju ke postingan Oslanis Blogger template ini.

Axorys : Responsive Blogger Template - 8 Pilihan Style

Beberapa hari lalu, rilis Axorys Blogger template tapi itu adalah Versi Gratis. Dan sekarang, saya merilis Versi Premium. Secara umum, fiturnya sama dengan yang versi gratis tapi saya tambahkan beberapa fitur baru.

Fitur Axorys Blogger Template Versi Premium8 predefined styles : Axorys Blogger templtae premium versi tersedia dalam 8 varian styles. Anda bisa pilih yang sesuai.

List of styles :
Big Header
Big Header Small ThumbnailBig Header Big ThumbnailBig Header Masonry StyleBig Header Default Style (support jump-link)Shrink Header
Shrink Header Small ThumbnailShrink Header Big ThumbnailShrink Header Masonry StyleShrink Header Default Style (support jump-link)Fully responsive Blogger template : Semua styles Axorys Blogger template sudah responsive.
Template Designer : hampir semua variable mendukung Template Designer. Anda bisa mengganti gambar latar, warna latar, warna link, tipe font, ukuran font, warna font, dll dengan mudah.
Featured posts : Penambahan featured posts untuk postingan yan…