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..

New Popup Cbox Guestbook / Buku Tamu

cbox
Saat ini mungkin telah banyak kreasi-kreasi dari para bloger dengan memodifikasi tampilan guestbook / buku tamu. Selain bertujuan untuk mempercantik tampilan juga untuk memperhemat tempat pada halaman blog kita.
Pada kali ini saya coba berbagi sedikit kreasi yang mungkin adalah salah satu pengembangan dari sebuah code css pop up yang saya terapkan pada cbox untuk buku tamu / guestbook.
Caranya seperti biasa :
  • Login dulu ke bloger
  • Pilih Rancangan
  • Tambah gadget
  • Pilih HTML/Javascript
  • Copy paste code berikut :
<style>
label {position: relative;}
.box{
position:absolute;
left:0;top:100%;
z-index:100;
-webkit-backface-visibility:hidden;
background-color:#eee;
background:-webkit-gradient(
linear,left top,left bottom,from(#eee),to(#4f697e));
-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);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
width:270px;
padding:3px;
margin:10px 0;
opacity:0;
-webkit-transform:scale(0) skew(50deg);
-moz-transform:scale(0) skew(50deg);
-ms-transform:scale(0) skew(50deg);
-o-transform:scale(0) skew(50deg);
-webkit-transform-origin:0 -30px;
-moz-transform-origin:0 -30px;
-ms-transform-origin:0 -30px;
-o-transform-origin:0 -30px;
-webkit-transition:-webkit-transform ease-out .35s,opacity ease-out .4s;
-moz-transition:-moz-transform ease-out .35s,opacity ease-out .4s;
-ms-transition:-ms-transform ease-out .35s,opacity ease-out .4s;
-o-transition:-o-transform ease-out .35s,opacity ease-out .4s}
.box:after{
position:absolute;
bottom:100%;
left:30px;
border-bottom:20px solid #eee;
border-left:14px solid transparent;
border-right:14px solid transparent;
width:0;height:0}
.popUpControl:checked ~ label>
.box{
opacity:1;
-webkit-transform:scale(1) skew(0deg);
-moz-transform:scale(1) skew(0deg);
-ms-transform:scale(1) skew(0deg);
-o-transform:scale(1) skew(0deg)}
.popUpControl{display:none}
.button{
font-size:20px;
font-weight:bold;
padding:3px;
border:1px solid #4f697e;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px}
.button:hover{
font-size:20px;
font-weight:bold;
color:#B11B40;
margin:0;
padding:3px;
text-align:center;
border:1px solid #4f697e;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
-ms-border-radius:70px;
border-radius:70px;
-webkit-transition:all .6s ease-out;
-moz-transition:all .6s ease-out;
-o-transition:all .6s ease-out;transition:all .6s ease-out}
#cpbox:checked ~ label>span:first-child{display:none}
#cpbox:checked ~ label:before{content:"Terimakasih atas kunjungannya..!"}
</style>
<input type="checkbox" id="cpbox" class="popUpControl" />
<label for="cpbox" class="button">
<span>Guestbook!</span>
<span class="box">
<!-- BEGIN CBOX - www.cbox.ws -->
DI SINI KODE CBOX
<!-- END CBOX -->
</span></label>
Untuk code yang diblok, silakan disesuaikan.

Selamat mencoba, semoga bermanfaat..!
Read more..

Menambahkan Style Pada Widget Popular Posts

Pada kali ini kita coba oprek template di bagian sidebar pada widget "Popular Post", di mana kita hanya memanfaatkan widget yang telah di sediakan oleh blogger dengan menambahkan sedikit style agar tampak lebih keren ditambah sentuhan efek hover.

Langkahnya seperti berikut :
Login dulu ke bloger
Pilih Rancangan - > Edit HTML
Cari kode ]]></b:skin>
Tambahkan style di bawah ini di atasnya:

.item-title{
background:#123456;
text-align:left;
border-radius:3px;
font-weight: bold;
}
.item-snippet{
padding:3px;
border:3px solid #4F697E;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
.item-snippet:hover{
margin:0px;
padding:3px;
text-align:center;
border:3px solid #4F697E;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
-ms-border-radius:70px;
border-radius:70px;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
-o-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
}

Save Template
Untuk warna background item-title bisa kita sesuaikan dengan template blog kita

Selamat mencoba, semoga bermanfaat..!
Read more..

Cara Pasang Page Scroller Back to Top / Down Onmouseover

Tombol yang biasa kita sebut tombol "back to top" sering kali kita jumpai di website / blog, yang fungsinya untuk memudahkan para pembaca artikel untuk melihat kembali bagian awal halaman / atas yang biasanya terletak di sudut kiri atau kanan bawah blog.
Pada kali ini saya akan mencoba berbagi tentang bagaimana cara memasang script "back to top" tersebut yang bukan hanya utuk scroll ke atas halaman saja, tetapi bisa secroll ke bawah juga dengan perlahan.
Script page scroller ini lumayan menarik juga, karena kita atau para pembaca cukup dengan menyentuh tombol ke atas / bawah yang terletak di sudut kanan bawah blog kita.

Untuk memasang script page scroller, seperti biasa kita Login dulu ke bloger - > Pilih Rancangan - > Edit HTML - > Copy script di bawah ini sebelum code </body>

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="UrlGambar" border="0"></a><br>
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="Urlgambar" border="0"></a>
</div>
<script>
//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var Hoffset=70 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=80 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=3 //Enter scroll speed in integer (Advised: 1-3)
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0
var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}
function scrollwindow(){
window.scrollBy(0,myspeed)
}
function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}
if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)
</script>

Silakan ganti UrlGambar dengan url gambar yang telah sobat siapkan.
Apabila menemui kesulitan dalam pemasangan script di atas, coba scriptnya di parse dulu di SINI .

Selamat mencoba, semoga bermanfaat..!
Read more..