0 Cara Membuat Slice Random Recent Post

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan yang berisi gambar dan snippet artikel yang muncul kebawah ketika pointer mouse kita arahkan diatas salah satu judul.
Modifikasi recent post ini saya beri nama Slice Random Recent Post.... Ya.. mudah - mudahan sobat blogger berkenan dengan nama yang saya berikan...hehehe..



OK langsung saja.... bila anda berminat, anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML. 

4. Cari kode di bawah ini atau yang mirip dengan kode </head>

5. Copy kode CSS di bawah ini dan taruh tepat di atas kode </head> :

<style type="text/css" media="screen">
.noerlist{

display:block;
position:relative;
width:100%;
height:52px;
overflow:hidden;
margin-topt:10px;
border:1px solid #;
margin:auto;
z-index:1000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.noerlist:hover{
display:block;
position:relative;
width:100%;
height:340px;
overflow:hidden;
margin-top:10px;
border:1px solid #;
margin:auto;
z-index:1000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.noertitle {
height:40px;
overflow:hidden;
background-color:#eee;
margin:auto;
margin-bottom:5px;
padding-left:5px;
padding-right:10px;
padding-top:0px;
padding-bottom:10px;
}

.noertitle ul{
height:40px;
}

.noertitle a{
text-decoration:none;
color:#000;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.noerlist .postsummary{
float:left;
display:block;
height:105px;
width:95%;
text-decoration:none;
color:#000;
font-size:12px;
font-weight:normal;
font-style:normal;
line-height:18px;
text-shadow: 1px 3px 3px #fff;
border-bottom:1px solid #ccc;
overflow:hidden;
padding-top:5px;
padding-left:10px;
padding-bottom:5px;
padding-right:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.noerlist .postsummary .separator{
display:none;
}

.noergambar img{
float:left;
width:95%;
height:150px;
padding:2px;
background:#ffffff;
border:1px solid #bbb;
}

.noercomment{
float:left;
display:block;
overflow:hidden;
font-size:14px;
font-weight:normal;
text-shadow: 0px 1px 0px #fff;
text-align:center;
color:#FF8A00;
background:transparent url(file:///C:/Users/LIFINA/Pictures/bgcomment%203.png)center no-repeat;
padding-top:10px;
padding-right:5px;
margin-top:-100px;
margin-left:25px;
width:35px;
height:35px;
font-family:Tahoma,Arial,verdana, sans-serif;
z-index:1500;
}

</style>

6. SIMPAN TEMPLATE.


Langkah Selanjutnya :

1. Klik Rancangan dan pilih Elemen Laman

 

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="noerlist-recent">
<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 250;
cellspacing = 1;
borderColor = "#fff";
bgTD = "#ccc";
thumbwidth =200;
thumbheight = 150;
fntsize = 11;
acolor = "#ffffff";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#ffffff";
icon2 = " ";
numposts = 7;
home_page = "ULR BLOG ANDA";
</script>


<script type='text/javascript'>
//<![CDATA[
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 showrecentposts(json){document.write('<table width="300px' +boxwidth+'" border=0 bordercolor="#cccccc" align="left" >');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='yes')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var div='<div class="noerlist"><div class="noertitle"><ul><li><a href="'+posturl+'">'+posttitle+'</a></li></ul></div><div class="noergambar"><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></div><div class="postsummary"><i>'+s+'</i></div></div>';document.write(div);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");document.write('<a href="http://www.carabuatwebgratis.com/" target="_blank">  </a>');//]]></script></div>

Catatan: Pada kode diatas terdapat teks "ULR BLOG ANDA", Silahkan anda ganti dengan ULR blog anda.

5. SIMPAN.