Seperti yang kalian lihat pada halaman utama moencode terdapat sebuah widget yang menampilkan gambar berbentuk kaset/disc dan bisa dibilang cocok dengan topik postingan OST Animenya
. Nah, kalian yang mencari-cari tahu cara membuat seperti itu untuk blog/web kalian sendiri bagaimana, disini saya akan membagikan caranya untuk Blogger dan WordPress.
Untuk Blogger
Agar tampil silahkan beri label pada postingan dengan nama "OST"
1. Pertama pastikan Template kalian sudah terpasangi jQuery, jika belum pergi ke Tema > Edit HTML cari </head> kemudian tambahkan kode script dibawah ini tepat diatas markup </head> tadi<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>2. Kedua, cari markup
]]></b:skin> dan tambahkan CSS dibawah ini tepat diatasnya<style>
ul.mp3-content{list-style:none;margin:0;padding:0;line-height:normal}
li.recent-mp3{position:relative;float:left;width:97px;text-align:center;font-size:10px;margin:5px 4px}
img.mp3-thumb{padding:0;background:#000;margin:2px auto;border-radius:50%;border:1px solid #8f8f8f;width:100%;height:100%}
.post-date{font-size:10px;float:left}
.recent-details a{float:right;font-size:10px}
.mp3-title{border-bottom:0;font-weight:bold;font-family:sans-serif;text-transform:none;color:#097ce0;line-height:normal;font-size:11px;overflow:hidden;text-align:center;width:100%;height:54px;margin:0;padding:0}
.mp3-title a{float:none!important;text-align:center}
li.recent-mp3 a{position:relative;float:right;}
.mp3-hole{padding:8px;width:0px;border-radius:50%;position:absolute;text-align:center;top:26%;z-index:999999;right:38%;border:2px solid #c7c7c7;background:#fff;}
li.recent-mp3:hover{opacity:.7;transition:.5s}
</style>
3. Jika template kalian mempunyai widget footer panjang seperti MoeNcode, pergi ke Tata Letak > Tambahkan Widget > HTML/Javascript kemudian tambahkan kode JavaScript dibawah ini. Jika tidak bisa kalian tambahkan secara manual lewat Tema > Edit HTML dan cari tempat yang pas untuk MP3 OSTnya dan tambahkan kode JavaScript dibawah ini.<script>
function showlatestmptrialbum(K){document.write('<ul class="mp3-content">');for(var G = 0; G < posts_no; G++){var j, y = K.feed.entry[G];var C = y.title.$t;if(G == K.feed.entry.length){break;}for(var x = 0; x < y.link.length; x++){if("replies" == y.link[x].rel && "text/html" == y.link[x].type){var B = y.link[x].title;var z=y.link[x].href;}if("alternate" == y.link[x].rel){j = y.link[x].href;break;}}var J;try{J = y.media$thumbnail.url}catch(k){s = y.content.$t;a = s.indexOf("<img");b = s.indexOf('src="', a);c = s.indexOf('"', b + 5);d = s.substr(b + 5, c - b -5);J = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFbZthnzEaITwY2Kqoh6ES0YSRDj6XXfl_eJ_1UswACE0Ykh4SdZ9mx3WQHJjR7c1957PXzqL7zy6dFiMNKGOtN3Fc1ohLJTyifvrWqDEPy1gAo1tvgp5NdSA8M34pVB4INXX3GMQEw-JR/s1600/no-thumb.png";}var D = y.published.$t;var F = D.substring(0, 4);var H = D.substring(5, 7);var I = D.substring(8, 10);q = new Array;q[1] = "Januari";q[2] = "Februari";q[3] = "Maret";q[4] = "April";q[5] = "May";q[6] = "Juny";q[7] = "July";q[8] = "August";q[9] = "September";q[10] = "October";q[11] = "November";q[12] = "December";document.write('<li class="recent-mp3">');1 == posts_date && document.write('<div class="post-date">' + I + " " + q[parseInt(H, 10)] + "</div>");1 == showmptrithumb && document.write('<div class="mp3-hole"></div><a href="' + j + '"><img class="mp3-thumb" src="' + J + '"/></a>');document.write('<div class="mp3-title">' + C + "</div>");var E = "";document.write("</li>")}document.write("</ul>")};
$(document).ready(function(){$('img.mp3-thumb').attr('src', function(i, src){return src.replace('s72-c', 'w149-h149-c');});});
var posts_no = 6;
var showcommentling = true;
var posts_date = false;
var showmptrithumb = true;
</script>
<script src="/feeds/posts/default/-/ost?orderby=published&alt=json-in-script&callback=showlatestmptrialbum"></script>
4. Simpan, dan selesaiUntuk WordPress
1. Jika belum terpasang jQuery bisa tambahkan kode dibawah ini tepat diatas markup</head>.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>2. Pergi ke Tampilan > Penyunting dan pilih Style.css kemudian tambahkan CSS dibawah ini
ul.mp3-content{list-style:none;margin:0;padding:0;line-height:normal}
li.recent-mp3{position:relative;float:left;width:97px;text-align:center;font-size:10px;margin:5px 4px}
img.mp3-thumb{padding:0;background:#000;margin:2px auto;border-radius:50%;border:1px solid #8f8f8f;width:100%;height:100%}
.post-date{font-size:10px;float:left}
.recent-details a{float:right;font-size:10px}
.mp3-title{border-bottom:0;font-weight:bold;font-family:sans-serif;text-transform:none;color:#097ce0;line-height:normal;font-size:11px;overflow:hidden;text-align:center;width:100%;height:54px;margin:0;padding:0}
.mp3-title a{float:none!important;text-align:center}
li.recent-mp3 a{position:relative;float:right;}
.mp3-hole{padding:8px;width:0px;border-radius:50%;position:absolute;text-align:center;top:26%;z-index:999999;right:38%;border:2px solid #c7c7c7;background:#fff;}
li.recent-mp3:hover{opacity:.7;transition:.5s}
3. Selanjutnya pergi ke Part tema kalian yang sudah disediakan untuk OST Disc nya dan tambahkan kode php berikut.- <?php $mp3 = new WP_Query('post_type' => 'post', 'category_name' => 'ost', 'orderby' => 'date', 'showposts' => '6'); if($mp3->have_posts()){ while($mp3->have_posts()){ $mp3->the_post(); ?> <li class="recent-mp3"> <a href="<?php the_permalink(); ?>"> <img class="mp3-thumb" src="<?php the_post_thumbnail_url(); ?>"/> </a> <div class="mp3-title"><?php the_title(); ?></div> </li> <?php endwhile; endif; wp_reset_query(); ?>
Jika masih ada yang ditanyakan silahkan berkomentar
Sumber JavaScript, CSS, HTML:
MoeNcode
MoeNcode
