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

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.

Ganti Desain Template (Lagi)

Salam..

Sudah lama gak update Blog Ireng ini. Berhubung pengen coba jualan premium Blogger template, sekalian saja redesain blog ini. Premium templatenya sendiri hampir selesai. Semoga ajah bisa rilis bulan ini.

Desain template baru ini sebenarnya desain lama yang diambil dari blog Main Blogger dengan sedikit ubahan.

Oya, blog ini masih blog DoFollow tapi tetep saya moderasi. Keyword bisa digunakan di Nama Author karena Link Live tidak diperkenankan.

Sekedar kenang2an desain lama


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…