Loading...

Cara Membuat Random Post Hanya Thumbnail


Cara membuat random post hanya thumbnail keren, Random post thumbnail dengan tooltip, widget Random post keren untuk blogger / blogspot, Random post widget for blog..

Bangiz - Untuk sahabat Blogger yang sedang mempercantik tampilan blognya, mungkin widget yang satu ini bisa menjadi pertimbangan. Widget random post ini tentunya akan menampilkan postingan Anda secara acak yang mana tampilannya hanya menampilkan thumbnail gambar, tetapi dilengkapi juga dengan tooltip. Jadi ketika thumbnailnya tersentuh mouse maka akan muncul judul dan deskripsi atau hanya judul saja tergantung pengaturan Anda. untuk visualnya silahkan lihat gambar berikut ini:

random thumbnail
Normal
random thumbnail
Ketika tersentuh mouse
Jika tertarik dengan widget yang hanya menampilkan thumbnail dan dilengkapi dengan tooltip, berikut tutorialnya:

1. Masuk dasbor Blogger.

2. Pilih Tata Letak > Tambahkan Gadget > Cari dan pilih HTML/Javascript.

3. Silahkan ketik judul yang sesuai dan copy-paste kode berikut pada kolom yang tersedia:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#random-posts {float: center;text-transform: none; box-shadow: 0 0 0 1px white inset;-moz-box-shadow: 0 0 0 1px #fff inset;-webkit-box-shadow: 0 0 0 1px white inset;padding: 1px;}
#random-posts li{float:left;list-style:none;position:relative}
#random-posts li:last-child{margin-right:0}
#random-posts li img{width:100px;height:100px;padding:2px;}
#random-posts li img:hover {background-color: #F77B09;color: white; font-weight: bold; text-decoration: initial;}
#random-posts li .rp_animation{position:absolute;width:100px;top:-50px;z-index:2;background-color:#FFFFFF;padding:2px;font-size:100%;border:1px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .rp_animation{right:0}
#random-posts li:hover .rp_animation{top:-100px;opacity:1;visibility:visible}
.rp_animation span{font-size:100%;color:#111111}
.rp_animation p{font-size:100%;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
//<![CDATA[
var rdp_numposts = 16; //Number Of Random Posts
var rdp_snippet_length =150; //Length Of Description Text, 0 To Hide
var rdp_datecomment = 'yes'; //Show Date And Comment 'yes/no'
var rdp_comment = 'Comments'; //Text For Comment Count
var rdp_disable = 'Comments Are Off Here...'; //Text If Comment Is Disabled On Post/Blog
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);
function totalposts(a){rdp_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 b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
//]]>
</script>
<script type='text/javaScript'>
//<![CDATA[
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="rp_animation"><h5>'+m+"</h5>");if(rdp_datecomment=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')};
//]]>
</script>
</ul>
<div style='clear:both'/>
<div align='bottom-right'><a href='http://bangiz.blogspot.com' target='blank'><small>Get This</small></a></div>
</div></b:if>
4. Klik simpan dan lihat hasilnya.

Demikian tutorial cara membuat random post dengan thumbnail versi Bangiz. Untuk pengaturannya sebagian sudah diberi warna yang berbeda tinggal sesuaikan dengan template yang Anda gunakan. Disana Anda bisa mengatur tinggi dan lebar thumbnail, jumlah post yang akan ditampilkan, panjang snippet atau deskripsi, menampilkan tanggal dan komentar dan sebagainya. Jika kurang mengerti silahkan tinggalkan komentar dan jika berkenan silahkan share ke teman Anda. 

Cara membuat random post dengan efek animasi silahkan lihat disini
Name

Android,5,Blogging,108,CorelDRAW,14,Desain Grafis,24,Facebook,22,Foto Sampul,34,Gambar,54,Info,18,Internet,31,Kata Mutiara,26,Kesehatan,31,Komputer,25,Microsoft Word,12,Office,12,PhotoScape,10,Resep,6,SEO,10,Sosial media,21,Tutorial,36,Wallpaper,20,
ltr
item
Bangiz: Cara Membuat Random Post Hanya Thumbnail
Cara Membuat Random Post Hanya Thumbnail
Cara membuat random post hanya thumbnail keren, Random post thumbnail dengan tooltip, widget Random post keren untuk blogger / blogspot, Random post widget for blog..
https://3.bp.blogspot.com/-jSDecODLd2g/Uz-1OdIQqNI/AAAAAAAAMjA/dlu3FbabFcc/s1600/thumbnail.jpg
https://3.bp.blogspot.com/-jSDecODLd2g/Uz-1OdIQqNI/AAAAAAAAMjA/dlu3FbabFcc/s72-c/thumbnail.jpg
Bangiz
https://bangiz.blogspot.com/2014/04/random-post-hanya-thumbnail.html
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/
https://bangiz.blogspot.com/2014/04/random-post-hanya-thumbnail.html
true
5131493432912556385
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy