Auto Read More Tanpa Gambar Pada Home Page

Di antara sobat blogger mungkin sudah pada tahu kegunaan dan fungsi dari Read More. Ya.. Coba saja bayangkan kalau kita tidak meng-cut atau memenggal kalimat setiap postingan pada bagian Home Page, untuk 2 atau 3 postingan saja pada bagian home page pasti sudah terlalu memanjang ke bawah. Untuk itu maka kita perlu memenggal kalimat tersebut baik secara manual (kita pasang pada setiap postingan) atau dengan memakai script Auto Read More yang sekarang sudah banyak melengkapi template blog.
Biasanya pada script auto read more yang sekarang ini mampu menampilkan image pertama pada postingan dan mem-float image di awal paragraf, meskipun image tersebut berada di tengah atau di akhir postingan maka akan di tampilkan di home page.
Dengan panduan beberapa sumber inspirasi, pada kesempatan kali ini saya mencoba merubah / menambahkan kode pada script Auto Read More tersebut agar sebaliknya image pada postingan tidak muncul pada Home Page. Kenapa..? Mungkin sedikit penyesuaian saja pada template blog ini dan saya  menginginkan temanya seperti itu, juga lebih kepada untuk mengurangi beban loading blog.

Script Auto Read More yang biasa kita pakaian salah satunya adalah seperti di bawah ini:
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Script Auto Readmore yang telah ditambahkan kode untuk men-disable image:
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;visibility:hidden;display:none"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Untuk sobat yang tertarik untuk mencobanya, sobat tinggal mengganti script Auto Read More yang telah ada pada template blog sobat dengan script Auto Read More yang ke-2 di atas atau menambahkan kode yang diblok pada script Auto Read More yang ke-2 di atas .

Semoga bermanfaat..!
Read more..

Style CSS Treaded Comment

<style>
li.comment{padding:3px 3px 10px 3px;background:#4f697e;border:0 dotted #507aa5;border-radius:6px}li.comment{padding:3px!important;border:0 dotted #507aa5;border-radius:6px;position:relative}li.comment a:link,li.comment a{color:#fff;text-shadow:1px 1px 1px #4f697e}li.comment:hover{color:#b11b40}li.comment .avatar-image-container{position:absolute;right:25px;top:30px;padding:1px!important;width:30px;height:30px;border:1px solid #507aa5;background:#123456;box-shadow:0 0 4px #ccc;border-radius:6px;opacity:.3;filter:alpha(opacity=30)}li.comment .avatar-image-container,.comment-block{transition:.4s;-o-transition:.4s;-moz-transition:.4s;-webkit-transition:.4s;-ms-transition:.4s}.comments .thread-toggle{text-align:center;padding:3px 6px}.comment-thread{background:transparent;padding:5px;border-radius:3px}.comment-block{font-family:&#39;lucida grande&#39;,tahoma,verdana,arial,sans-serif;font-size:11px;background-color:#eee;background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#4f697e));background:-webkit-linear-gradient(top,#eee,#4f697e);background:-moz-linear-gradient(top,#eee,#4f697e);background:-ms-linear-gradient(top,#eee,#4f697e);background:-o-linear-gradient(top,#eee,#4f697e);color:#000;padding:10px;border-bottom-right-radius:100px;margin:3px!important}li.comment:hover .avatar-image-container{opacity:1.0;filter:alpha(opacity=100);-webkit-transform:translate(0px,-50px);-moz-transform:translate(0px,-50px);-o-transform:translate(0px,-50px);-transform:translate(0px,-50px);z-index:999;-moz-box-shadow:0 0 70px #fff;-webkit-box-shadow:0 0 70px #fff;-o-box-shadow:0 0 70px #fff}li.comment .avatar-image-container img{width:32px;height:32px;display:block;margin:0!important;border-radius:4px}.inline-thread{background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);border-radius:6px;padding:8px 4px}.comment-replies,.comment-replybox-single{background:#4f697e;border-radius:4px;padding-left:10px}.thread-dropContainer,.thread-expanded{background:transparent}.comment-block{margin:3px!important}.comment-thread.inline-thread{margin-left:-10px!important}.comment-block:hover{background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);color:#ddd}.comment-header{background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);text-align:left;padding:0 5px;text-transform:uppercase;border-bottom-right-radius: 100px;}li.comment:hover .comment-header .datetime a{display:none;}li.comment:hover .comment-header{text-align:right}.comment-replybox-thread{margin-left:2px;margin-right:2px;padding-left:10px;padding-top:7px;border-radius:6px;background:#4f697e;position:relative}.comment-replybox-thread:hover{padding:7px 0 0 10px;background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee)}
.comment-form{color:#fff;font-family:&#39;lucida grande&#39;,tahoma,verdana,arial,sans-serif;font-size:11px;}.comment-form a{color:#ddd}
.comment-replybox-thread:before{
position:absolute;content:&quot;&quot;;
left:0;top:0;
width:100%;
height:100%;
background-color:#123456;
background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));
background:-webkit-linear-gradient(top,#123456,#eee);
background:-moz-linear-gradient(top,#123456,#eee);
background:-ms-linear-gradient(top,#123456,#eee);
background:-o-linear-gradient(top,#123456,#eee);
opacity:0.6;
filter:alpha(opacity=60);
border-radius:6px;
}
.comment-replybox-thread:hover:before{
width:100%;
height:0.5%;
overflow:hidden;
}
.comment-actions a{padding:0px 3px!important;font-size:10px;margin-right:6px;background-color:#eee;background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#4f697e));background:-webkit-linear-gradient(top,#eee,#4f697e);background:-moz-linear-gradient(top,#eee,#4f697e);background:-ms-linear-gradient(top,#eee,#4f697e);background:-o-linear-gradient(top,#eee,#4f697e);color:#ddd;border-radius:3px;text-transform:uppercase;font-weight:bold}.comment-actions a:hover{color:#fff!important;background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);text-decoration:none!important}
.comment-block,.comment-replybox-thread,.comment-replybox-thread:before{
transition:0.5s linear;
-o-transition:0.5s linear;
-moz-transition:0.5s linear;
-webkit-transition:0.5s linear;
-ms-transition:0.5s linear;
}
</style>
Read more..