 |
| random post horizoltal responsive very great |
TutorialMixs - sobat blogger, kali ini aku mo share terkait pembuatan random post with thumbnail horizontal sangat apik banget.. sebelumnya ku juga sudah membuat recent post horizontal (walaupun pada tahap itu terjadi kesalahan tentnga title yang sebenernya he,e,e) jadi kalau kita udah jenuh akan tampilan recent post ataupun related post kali ini cobalah untuk memakai random post guna mengacak tampilan untuk menambah page view sobat..
oke langsung saja ke tutorialnya:
masuk ke Template > Penambahan Gadget > HTML Jave Script
silahkan kalau sobat sudah memilih di mana letak script random post ini mau di tampilkan, langsung saja sobat masukin script berikut di widget pilihan sobat tadi..
<b:if cond='data:blog.pageType == "item"'> <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)+"…"}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/AVvXsEgS18TfT2vQzUrU97PQlLIKi2Bw8NrjE42knOPIv2LQnQGmCWS5QTcXzCLC5YXrjYX_nmxmvY2Hh2oPV6CIJIVXF2j7wz_vtpGuElp2y1yzqEPAdd2f0rk_0cjBbq04MgfADiqTpWc9hLA/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> </b:if><a href="www.helpfulbloggertips.com" title="Helpful Bolgger Tips" style="text-decoration:none;border:0;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGLMLwHq7zdCov_gNxmKrWbnCPPSddRN40jEhe7LmAj2bpHGGvcxPhp4ClxYEXOr_tCoT-Gj9gu26ijN4h9nL2PfaWL72tacd5oKjM070j_dUrrIatFH2iBo3k6ut-l_8KOCerPO2QY8/s1600/hbt.png" alt="Helpful Blogger Tips" style="border:0" /></a>
jika sobat berkenan untuk membuat responsive Recent Post Horizontal dengan Style Mouse RollOver silahkan langsun saja klik link tersebut
kalau sudah silahkan langsung saja di save dan lihat hasilnya
salam dan semoga bermanfaat
EmoticonEmoticon