Cara Menampilkan Random Post Image Horizontal Di Bog
RANDOM post atau posting acak yakni daftar goresan pena yang ditampilkan secara acak (random) oleh instruksi javascript yang dipasang di template blog.
Random Posts berfungsi sebagai internal link juga navivagasi yang sangat baik buat blog alasannya yakni memudahkan pemnaca mengeksplorasi konten blog. Google menganjurkan biar kita memberi fasilitas kemudahan kepada pembaca untuk melihat konten blog kita.
Namun demikian, random post menciptakan blog jadi berat alasannya yakni begitu dibuka, sang instruksi random post butuh waktu untuk mengambil posting mana saja yang akan ditampilkan, apalagi bila random postsnya memakai image (gambar thumbnail).
Bagi Anda yang berminat menampilkan random posts berupa gambar horizontal, berikut iin cara memasang atau menampilkannya. Tinggal copy paste kode!
Cara Menampilkan Random Post Image Horizontal di Bog
1. Klik "Layout"2. Klik "Add a Gadget" di atas Blog Post
3. Pilh widget "HTML/Javascript"
4. Copy + Paste instruksi di bawah ini ke kotak "Content"
<b:if cond='data:blog.pageType == "item"'> <style type="text/css">
#random-posts li {width:125px;height:150px;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:150px}
#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:2px 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/AVvXsEhqgcDnS3ZX-KCkwbHm4VGg3uyBfxtNrexxeyjjaKF9jFfb9zANiPRsOltDHJm8_lhE2lGE4nQGxohErwi1jKwbX1Ge_OTevzQiozFZ4H59VOwK4o7_Qmvzmp5R7KaFHdQcUBinaTSUV3tK/s1600/No-Image-736965.jpg"}
}} document.write("<li>"); document.write('<a href="'+d+'" rel="nofollow"><img alt="Cara Menampilkan Random Post Image Horizontal di Bog Cara Menampilkan Random Post Image Horizontal di Bog" 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>
Catatan:
Kode warna merah untuk menampilkan Random Posts di halaman depan saja. Jika mau ditampilkan di semua halama, hapus instruksi tag kondisional tersebut.
5. Save Template!
Demikian Cara Menampilkan Random Post Image Horizontal di Bog.
KODE LAINNYA
Kode lain yang dapat dipakai bila instruksi di atas tidak berfungsi:
<center><div id='bp_recent'></div><div class='bp_footer'><small><a id='bp_recent_link' target='_blank' href='https://marwanpedia.blogspot.com/search?q=horizontal-random-post-widget-thumbnail?utm_src=bp_recent' style='padding: 1px 0px 0px 19px;text-decoration:none;'><a href='http://www.bloggerplugins.org/?utm_src=bp_recent' target='_blank' title='blogger widgets'></a></a></small></div> <script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script> <script style='text/javascript'> var numberOfPosts = 4; var showPostDate = false; var showSummary = false; var titleLength = 0; var showCommentCount = false; var showThumbs = true; var showNoImage = true; var imgDim = 125; var imgFloat = 'left'; var myMargin = 5; var mediaThumbsOnly = true; var showReadMore = false; </script> <script src='/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'> </script></center>
Demikian Cara Menampilkan Random Post Image Horizontal di Bog yang cocok untuk blog toko online atau blog foto & video. Good Luck! (CB Blogger).*
Sumber
Sumber
Sumber 2
Sumber https://testemplatecb.blogspot.com/
