Membuat Popular Post Grid Berdasarkan Label Ala Fansub Anime

Oke udah lama ndak update tulisan tentang blogging lagi, ya karena kebanyakan terjun di blog Anime Yang saya kelola jadi kurang memperhatikan blog ini dah... :D

yups, langsung saja kali ini saya mau share tutorial membuat Image Grid Label Ala Fansub Anime, seperti yang terlihat pada thumbnail dan Demo yang saya bagikan, dalam widget ini memiliki beberapa kelebihan dan tentunya kelemahan, untuk kelebihan dari widget ini pada khususnya yaitu design yang responsif serta tampilan yang dinamis sedangkan untuk kekuranganya yaitu untuk customasi update perlabel perimage. jadi tiap kalian ingin mengupdate image label kalian harus memasukkan melalui Edit Html.

DEMO  

Membuat Image Grid Label Ala Fansub Anime

Untuk membuatnya pertama-tama Copy Kode Html dan pasang Pada Widget kalian, letakkan widget Html tersebut dibawah atau diatas bidang Post

Copy Kode HTML berikut dan paste pada widget yang telah kalian buat

HTML<div id='reko'>
<div class='rekomendasi'>
<h2>NEW ANIME SERIES</h2>
<div class='listreko'>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Akame%20ga%20Kill'><img src='http://cdn.myanimelist.net/images/anime/5/64581.jpg' style='width: 148px; height: 209px;'/><h2>Akame ga Kill!</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Sword%20Art%20Online'><img src='http://cdn.myanimelist.net/images/anime/11/65185.jpg' style='width: 148px; height: 209px;'/><h2>Sword Art Online II</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Tokyo%20Ghoul'><img src='http://cdn.myanimelist.net/images/anime/5/64449.jpg' style='width: 148px; height: 209px;'/><h2>Tokyo Ghoul</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Haikyuu%21%21'><img src='http://cdn.myanimelist.net/images/anime/4/60431.jpg' style='width: 148px; height: 209px;'/><h2>Haikyuu!!</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Psycho%20-%20Pass'><img src='http://cdn.myanimelist.net/images/anime/9/66879.jpg' style='width: 148px; height: 209px;'/><h2>Psycho - Pass</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Naruto%20Shippuden'><img src='http://cdn.myanimelist.net/images/anime/13/11194.jpg' style='width: 148px; height: 209px;'/><h2>Naruto Shippuden</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Gintama'><img src='http://cdn.myanimelist.net/images/anime/13/50359.jpg' style='width: 148px; height: 209px;'/><h2>Gintama</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Fate%20%2F%20Stay%20Night%20Unlimited%20Blade%20Works'><img src='http://cdn.myanimelist.net/images/anime/10/58805.jpg' style='width: 148px; height: 209px;'/><h2>Fate / Stay Night Unlimited Blade Works</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Amagi%20Brilliant%20Park'><img src='http://cdn.myanimelist.net/images/anime/7/65293.jpg' style='width: 148px; height: 209px;'/><h2>Amagi Brilliant Park</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Nanatsu%20no%20Taizai'><img src='http://cdn.myanimelist.net/images/anime/8/65409.jpg' style='width: 148px; height: 209px;'/><h2>Nanatsu no Taizai</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Shingeki%20no%20Bahamut%20Genesis'><img src='http://cdn.myanimelist.net/images/anime/6/65715.jpg' style='width: 148px; height: 209px;'/><h2>Shingeki no Bahamut: Genesis</h2></a></div></div>
<div class='boxreko'>
<div class='gambar'>
<a href='/search/label/Seirei%20Tsukai%20no%20Blade%20Dance'><img src='http://cdn.myanimelist.net/images/anime/6/64599.jpg' style='width: 148px; height: 209px;'/><h2>Seirei Tsukai no Blade Dance Specials</h2></a></div></div>
</div></div></div>

Selanjutnya masuk ke Template > Edit Html, Copy Kode CSS dibawah letakkan tepat diatas code ]]></b:skin>

CSS #reko {position: relative; height: auto; overflow: hidden;}
.rekomendasi {margin: 10px;}
.rekomendasi h2 {box-shadow: none;background-color: #2e6df4;background-image: -moz-linear-gradient(center top , #2e6df4, #2e6df4);border: 1px solid transparent;color: #fff;text-shadow: 0px 1px rgba(0, 0, 0, 0.1);border-radius: 2px;font:bold 13px Arial;text-align: left;padding: 5px 10px;margin-bottom: 5px;}
.listreko {height: auto;}
.gambar {float: left;margin: 4px 7px 0 0px;position: relative;}
.gambar img {width: 148px;height: 209px;padding: 0px;border: 1px solid #777;}
.rekomendasi .gambar h2 {margin-bottom:6px;position: absolute;bottom: 0px;font-size: 12px;text-align: center;width: 142px;background: none repeat scroll 0% 0% #1D1D1D;opacity: 0.7;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #fff;padding: 3px;}
.clear {clear: both;}
.breadcrumbs {border:1px solid #C4C4C4; border-top-color:#E4E4E4; border-left-color:#E4E4E4; color:#424242 !important; text-align:left; text-shadow:0 -1px 0 white; text-decoration:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background:#EDEDED; background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) ); background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% );padding:5px 10px; margin:0 10px 10px; font-size:85%; line-height: 1.4em;}
h2{line-height:1.4em;text-transform:none;color:#000;margin:.5em 0 .25em}
h3.date-header{text-transform:none;font: 11px Arial;color:#0030cb;line-height:1.2em;margin:.1em 0}
.post{background:#fff;margin:5px 5px 15px;padding:5px 15px 15px;}
.rilatest {margin: 0px 10px 10px 10px;}
.rilatest h2 {box-shadow: none;background-color: #e77522;background-image: -moz-linear-gradient(center top , #DD4B39, #e77522);border: 1px solid transparent;color: #fff;text-shadow: 0px 1px rgba(0, 0, 0, 0.1);border-radius: 2px;font:bold 13px Arial;text-transform: uppercase;text-align: left;padding: 5px 10px;margin-bottom: 5px;}
.post h1,.post h2{font:bold 22px Arial;line-height:1.0em;color:#000;margin:.0em 0 0;padding:4px 0;}
.post h1 a,.post h1 a:visited,.post h1 strong{display:block;text-decoration:none;color:#000000}
.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#000000}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#e77522}
.post-body{border-top:1px solid #fff;padding-top:10px;font:normal 16px Arial;line height:1.0em;color:#000;margin:.0em 0 0;}
.post-body blockquote{line-height:1.3em}
.post-footer{color:#000;text-transform:none;letter-spacing:.01em;font:12px Arial;line-height:1.4em;margin:.75em 0}
.comment-link{margin-left:.1em}
.post blockquote{line-height:1.6em;color:#000;background:#eee;border-left:20px solid #cccccc;margin:10px 10px 10px 20px;padding:10px 15px}
.post blockquote p{margin:.75em 0}
.post img,#header2 img,.sidebar1 img{max-width:100%;width:auto;} 

Bila Kalian Ingin Image Grid Label tersebut hanya dapat muncul pada home page saja maka Letakkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah <b:includable id='main'> dan </b:if> diatas kode </b:includable> seperti berikut:

HTML<b:widget id='HTML7' locked='false' title='' type='HTML'>
  <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>
 </div>

Gimana gampang kan, dengan widget ini sangat cocok buat kalian yang mengembangkan blog-blog seperti baca komik atau untuk streaming anime atau fansub.