Rz
Oktober 08, 2015

Horizontal Random post acak dengan thumbnail untuk Blogger

Baru-baru ini Ane Disibukan dengan Pekerjaan Sbg kuli Bangunan :), Untuk sore ini Ane Menyempatkan Diri Untuk Corat-coret Di blogger Menyalurkan Sedikit Hoby yang Terpendam.
Kali ini Ane mau berbagi tentang Cara Bikin Random Post Horizontal dengan thumbnail gambar Untuk blogger,

Untuk Templet yang Tidak Cocok Biasanya akan Terjadi Loading Yang cukup Berat Jika anda mau Mencobanya Silahkan Langsung saja di praktekan di Blogger anda. Untuk Tampilan Acak Widget secara otomatis bisa anda lihat contoh gambar di bawah ini :
Horizontal Random post acak dengan thumbnail untuk Blogger
Untuk Memulai Pengeditan Silahkan anda Langsung Menuju ke => dashboard Blogger anda . Pilih => tataletak => Tambah Gadget, => Pilih HTML/JavaScript
Selanjutnya : Salin Kode Di bawah ini dan Pastekan di Kotak Teks gadget HTML/JavaScript.
<style type="text/css"> #random-posts li{width:125px;height:200px;margin-right:12px;float:left;list-style:none;position:relative} #random-posts li:last-child{margin-right:0} #random-posts li img{width:125px;height:125px} #random-posts li img a{border:#333 solid 2px}; #random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom: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 .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:90%;color:#B30B0B} .isinyako p{font-size:90%;} </style> <span class="glap"> <ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 5; var rdp_snippet_length = 150; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; 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"> 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW-XPxWZ-4ErCktT7bv7nEIehJWOhI9mguOWaCgb9TkXfx4yjiqPfHpFFs1l1p2lD1aIr1OCF-Ud0Mx5rYKlZp3XpTKDZL4CD2Mv83RGnwJtPh4blRJG3rg7Hf8GrhGYUhrP85jwvOhZE/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="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></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script>
Untuk Pengeditan : Anda bisa Mengedit sesuka anda Dengan Bentuk dan Kemiringan yang anda suka yang bertanda merah.
Sesudah Terasa cukup dalam pengeditan silahkan simpan dan lihat hasilnya.
Horizontal Random post acak dengan thumbnail untuk Blogger
Pekerjaan Selesai Sekian Moga Wrok Di templet anda.
Anda baru saja membaca artikel tentang - Horizontal Random post acak dengan thumbnail untuk Blogger. Silahkan baca artikel berikutnya Tentang - Next - Jangan lupa g+1 / fb / twit :)

Artikel Terkait

Buka Komentar

Tidak ada komentar:

Posting Komentar