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

LIHAT DEMONYA DISINI

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 ini :

</head>

5. Copy kode CSS di bawah ini dan taruh tepat sebelum 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.

OK... Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Buat Toko Online dengan blogger tidak kalah Profesional

Bersamaan dengan Lounching Perdana Toko Online "Jogja Smart", saya ingin berbagi pengalaman  dan pengetahuan tentang blogger kepada sobat - sobat blogger yang mampir di blog tercinta ini.
Kendati banyak yang merasa pesimis dengan tampilan blogger bila digunakan untuk berbisnis atau tidak asing bila disebut dengan toko online.

Pada artikel kali ini saya benar - benar membuktikan bahwa untuk membuat toko online menggunakan blogger tidak kalah menarik dan tetap terlihat profesional. Dan yang terpenting tidak harus mengeluarkan biaya banyak. Hanya harga domain, itupun bila anda menginginkan domain selain blogspot.com.

Langkah ini saya persembahkan untuk sobat blogger yang sudah terlanjur cinta dengan blogger dan berminat ingin membuat toko online, saya sarankan tidak perlu membuat wesite khusus toko online dengan biaya besar.

Hanya dengan memanfaatkan tutorial - tutorial yang ada di blog tercinta ini, saya bisa mewujudkan sebuah toko online menggunakan blogger. Template yang saya gunakan sama persis dengan template blog tercinta ini.

Nah andapun bisa..., Saya sangat yakin anda juga bisa merubah tampilan template seperti blog ini menjadi sebuah toko online yang bisa anda gunakan untuk berbisnis. Silahkan anda manfaatkan dan pelajari tetang CSS, HTML, dan Javascript serta didukung dengan tutorial - tutorial blogger yang sudah saya bahas di blog tercinta ini.

Bagaimana menurut anda...?, bila tampilan blog ini berubah menjadi sebuah toko online seperi DISINI, atau ini : http://www.jogjasmart.com

Buat anda yang tertarik dengan produk -produknya juga bisa langsung pesan, mumpung masih ada diskon sebulan penuh selama bulan april 2012.

Mohon maaf bila artikel ini tidak berkenan buat anda yang membaca....
Ini hanya sekedar info sekaligus motivasi dan ispirasi buat sobat - sobat blogger, untuk lebih menggali kemampuan berkreasi sambil mengelola bisnis dengan modal murah untung besar.

Apa lagi tampilan toko online yang kita buat hasil dari kreatifitas kita sendiri, dengan mengolah Template gratisan menjadi toko online yang menguntungkan...hehehe... Pasti bangga... iya kan ?

Dan tentu hasil dari semua bisnis yang kita kelola tergantung dari usaha dan kreatifitas kita sendiri.

Ok... semoga bermanfaat dan menjadi motivasi serta inspirasi buat anda...

Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :