Cara Membuat Recent Post Mirip MeowNime


Cara Membuat Recent Post Mirip MeowNime - Haloo Sobat Blogger, Lamaa admin gak ngeluarin tutorial-tutorial yang seru (Anti Mainstream) sekarang admin bakal ngasih Tutorial Recent post keren yang dulusih banyak di cari orang-orang karna emang Recent Post ini punya tampilan gak biasa hehe, dimana permainan Hover title, dan label yang cukup mengagumkan.

Admin Mendapatkan Inspirasi membuat Recent Post ini dari Web Fanshare yang lagi booming dikalangan para otaku-otaku Indonesia yaitu MeowNime. Yapps MeowNime adalah web fanshare super ramah lingkungan menurut admin, kenapa? karna Unduh Anime Bajakan disana gak ribet + tampilan dekstop Web nya yang buat pecinta Desain web ngileer.

  • DEMO

Cara Membuat Recent Post Mirip MeowNime

    • Pertama masukkan CSS berikut di dalam template Sobat, letakkan sebelum tag </head>
    • <style>
      /* Recent Post Meownime
         * @Author URI : CodePelajar.com
         * @Author     : CodePelajar
      */
      li.recent-posts-list a{position:relative;overflow:hidden}ul.recent-posts-container{list-style:none;margin:0;line-height:normal;overflow:hidden;display:flex;flex-wrap:wrap}ul.recent-posts-container li.recent-posts-list{position:relative;float:left;width:32.33%;text-align:center;font-size:10px;padding:0;margin:.5%;max-height:200px;overflow:hidden}ul.recent-posts-container img.recent-post-thumb{width:100%;background:#000;margin:auto}ul.recent-posts-container .post-date{font-size:10px;float:left}ul.recent-posts-container .recent-details{display:none}ul.recent-posts-container .recent-post-title a{float:none!important;text-align:center}ul.recent-posts-container li.recent-posts-list a{position:relative;display:block;height:100%;width:100%}ul.recent-posts-container .readmorelink{position:absolute;top:5px;left:5px;padding:2px 5px;font-size:10px;background:rgba(0,0,0,.8);color:#FFF}.recent-posts-details{display:none}ul.recent-posts-container .recent-post-title{color:rgba(0,0,0,.99);padding:10px 30px;padding-top:8px;font-size:18px;background:#fff;display:inline-block;font-weight:400;width:100%;text-align:center;position:absolute;left:0}ul.recent-posts-container .recent-post-title{bottom:0;width:100%;transform:translateY(4px) scale(1.1);-webkit-transform:translateY(4px) scale(1.1);-moz-transform:translateY(4px) scale(1.1);-ms-transform:translateY(4px) scale(1.1);-o-transform:translateY(4px) scale(1.1);opacity:0;transition:0.6s all ease-in;-webkit-transition:0.6s all ease-in;-moz-transition:0.6s all ease-in;-ms-transition:0.6s all ease-in;-o-transition:0.6s all ease-in;transform-origin:center}li.recent-posts-list:hover .postedon{transform:translateX(5px);-webkit-transform:translateX(5px);-moz-transform:translateX(5px);-ms-transform:translateX(5px);-o-transform:translateX(5px)}ul.recent-posts-container li.recent-posts-list:hover .recent-post-title{transform:translateY(-20px) scale(1.1) rotate(-2deg);-webkit-transform:translateY(-20px) scale(1.1) rotate(-2deg);-moz-transform:translateY(-20px) scale(1.1) rotate(-2deg);-ms-transform:translateY(-20px) scale(1.1) rotate(-2deg);-o-transform:translateY(-20px) scale(1.1) rotate(-2deg);transition:0.6s all ease-out;-webkit-transition:0.6s all ease-out;-moz-transition:0.6s all ease-out;-ms-transition:0.6s all ease-out;-o-transition:0.6s all ease-out;opacity:1}li.recent-posts-list .postedon{position:absolute;font-size:14px;font-weight:700;z-index:2;left:-5px;top:20px;background:#6B6B6B;color:white;padding:5px;border-left:solid 5px black;transition:0.4s all ease;-webkit-transition:0.4s all ease;-moz-transition:0.4s all ease;-ms-transition:0.4s all ease;-o-transition:0.4s all ease}.completed{padding:0!important;background:##36688a!important}.completed h4{display:inline-block;width:100%;padding:10px;margin:0}.completed h4 a{text-align:center;float:right;color:#fff;font-size:14px;padding:8px 20px;line-height:1.5;display:inline-block;background:#b53428}.completed h4 span{color:#fff;display:inline-block;font-size:14px;line-height:1.5;padding:8px 0}.section{margin:0}@media (max-width:768px){ul.recent-posts-container li.recent-posts-list{width:49%}}@media (max-width:480px){ul.recent-posts-container li.recent-posts-list{width:100%;margin:0;max-height:none;margin-bottom:14px}}.completed{clear:both;margin-bottom:20px;font-weight:400;color:black;font-size:16px;margin-bottom:15px;margin-top:0;text-transform:uppercase;background:#c2382b!important;padding:15px;color:white}.completed h4{display:inline-block;width:100%;padding:10px;margin:0}
      </style>
    • Selanjut buka tata letak dan masukkan Script berikut di HTML/Javascript
    • 
      <div class='widget-content'>
      <div class="completed"><h4><span>NAMA-LABEL</span>
      <a href='/search/label/NAMA-LABEL?&max-results=7'>Read More...</a>
      </h4></div>
      
      <script>
      /* Recent Post Meownime
         * @Author URI : CodePelajar.com
         * @Author     : CodePelajar
      */
      var posts_no = 9;
      var labelnya = "NAMA-LABEL";
      var showpoststhumbs = true;var readmorelink = false;var showcommentslink = false;var posts_date = true;var post_summary = false;var summary_chars = 0;function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+130),d=s.substr(b+130,c-b-130),u=-130!=a&&-130!=b&&-130!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}
      var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list"><div class="postedon"><span><i class="fa fa-film fa-fw"></i>'+labelnya+'</span></div><a href="'+r+'">'),
      1==showpoststhumbs&&document.write('<img class="recent-post-thumb" src="'+u+'"/>'),
      document.write('<h3 class="recent-post-title"><span>'+i+"</span></h3></a>"),
      "content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";
      var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);
      var y=A.lastIndexOf(" ");A=A.substring(0,y),
      document.write(A+"...")}var _="",$=0;
      document.write('<div class="recent-posts-details"><span class="dett">'),
      1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),
      1==readmorelink&&(1==$&&(_+=" </span>"),
      _=_+'<span class="redmore"><a href="'+r+'" class="urls" target ="_top">Selengkapnya</a></span>',$=1),
      1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),
      l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),
      document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
      document.write("<script src=\/feeds\/posts\/default/-/"+labelnya+"?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs><\/script>");
      document.write("<script type=\'text\/javascript\'>\/\/<![CDATA[\r\n$(document).ready(function() {$(\'img.recent-post-thumb\').attr(\'src\', function(i, src) \r\n{return src.replace( \'s200-c\', \'w300-h190-c\' );});});\r\n\/\/]]><\/script>");
      </script>
      <script>$('img.recent-post-thumb').attr('src', function(i, src) 
      {return src.replace( 's72-c', 's360' );})</script>
      <noscript>Your browser does not support JavaScript!</noscript>
      </div>
      
    • Jika sudah Save lihat hasilnya.

Setting

Script Hasil
var posts_no = 9; Ini untuk setting berapa post yang ingin di tampilkan
var labelnya = "NAMA-LABEL"; Ganti NAMA-LABEL dengan label yang ingin di tampilkan

Oke sekian tutorial kali ini, jika ada kesulitan silahkan tinggalkan komentar di bawah dan jangan lupa untuk share ke teman-teman kalian ya Sob. yang ingin re-write saya mohon sertakan sumber jadilah Blogger yang bijak

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel