Modifikasi Latest Post Johny Kenthir Banget

White Lion
By -White Lion
Januari 13, 2013
Bagaimana caranya merubah latest post pada template Johny Kenthir Banget dengan artikel terbaru Jos Banget.

Berikut adalah langka-langkahnya:
Pertama anda harus menyembunyikan dulu feature latest post bawaan Johny Kenthir Banget,dan setelah selesai selanjutnya membuat artikel terbaru ala Jos Banget.

1.Untuk menyembunyikan latest post cari kode di bawah ini:
<b:includable id='main' var='top'>

Jika sudah ketemu tambahkan kode di bawah ini tepat di bawah kode diatas:


<b:if cond='data:blog.url != data:blog.homepageUrl'>


2.Lalu cari kode di bawah ini:

<data:adEnd/>
</div>

Jika sudah ketemu tambahkan kode dibawah ini tepat di bawah kode </div>

</b:if>


Jadi semuanya akan terlihat seperti ini:
<b:includable id='main' var='top'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
</b:if>

Kode yang berwarna biru adalah kode tambahan yang nantinya akan menyembunyikan latest post tersebut,

Lihat gambar di bawah ini:
 Dan untuk menyembunyikan Navigation silahkan cari kode di bawah ini:

<!--Page Navigation Starts-->

<script type='text/javascript'>

var pageCount=10;

var displayPageNum=5;

var upPageWord =&#39;Previous Page&#39;;

var downPageWord =&#39;Next Page&#39;;

</script>

<script type='text/javascript'>

<!--Page Navigation Ends -->


Kode di atas silahkan di hapus atau di sembunyikan saja dengan cara seperti langkah no.1 dan 2.

Dan untuk menyembunyikan tulisan "Beranda dan Posting Lama" cari kode di bawah ini:

  <div class='blog-pager' id='blog-pager'>


Kalo sudah ketemu taroh kode di bawah ini tepat di bawah kode di atas:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

Kemudian cari lagi kode di bawah ini:

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

Kemudian tambahkan kode  </b:if> di bawahnya.

Jadi semuanya akan terlihat seperti ini:

  <div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
    </b:if>
  </div>

Lihat kode yang berwarna merah yang baru saja di tambahkan..


Untuk menyembunyikan latest post sudah selesai,sekarang kita akan melakukan pemasangan artikel terbaru ala Jos Banget:

Tutorial di bawah ini langsung saya ambil dari sumbernya :
 Untuk lebih jelas silahkan ke sini

recent post maskolis
  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1c5wRFkQSOk9fy3jQhHTRqtMWRPh2Q5rZqpTVbJJYYp90o5K57rk2dyCk2Pi-VaRmP0dr4_EcIajKRFYhURcF0cRI5kOtoXANBkw1Lml3DXGEvIiN5ZOxCE1dLGlq6okxQ3BG6PdpbS4/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
    Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
  6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://johny-gantengbanget.blogspot.com/";
    var charac = 100;
    var urlprevious, urlnext;

    function maskolisfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed =  showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpKg0Ofa56poV7JtanNOf1ad56mOVC3DgE6NorPn_48ok78yj2Gx136yB4WylKKKhFO5swgOzOvzbBfMvOoLoNvj65UTdGqdlyIL7UMnJ55dEmlzK5zGQ7aM6glYaAt3NmO6cM1tkVw0I/s1600/no+image.jpg";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
    Keterangan :
    var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
    var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda
    var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
  7. Setelah itu cari kode di bawah ini:

    <div id='main-wrapper'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='newsfea'>
    Latest <span class='color:#e68b14'>Post</span>
    </div>
    </b:if></b:if>

     Jika sudah ketemu kemudian letakan kode di bawah ini tepat di bawah kode di atas:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>

    <div id='terbaru'/>

    <div id='mas-navigasifeed'/>

    </b:if></b:if></b:if>

     Jadi semuanya akan terlihat seperti ini:

    <div id='main-wrapper'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='newsfea'>
    Latest <span class='color:#e68b14'>Post</span>
    </div>
    </b:if></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='terbaru'/>
    <div id='mas-navigasifeed'/>
    </b:if></b:if></b:if>

    Terakhir save atau pratinjau dulu untuk memastikan kelancarannya.
Demikian tutorial ini yang saya dapat inspirasi dari CREATING WEBSITE

Berikut adalah tampilan  Johny Kenthir Banget sebelum dan sesudah di modif:

Tampilan sebelum di modif:






Dan ini adalah  tampilan yang sudah saya modif:



Demikan tutorial Modifikasi Latest Post Johny Kenthir Banget dari saya,jika masih ada yang belum paham tentang ini silahkan tanyakan pada kotak komentar:

Semoga bermanfaat:
Tags:

You Might Like

Tampilkan selengkapnya
Tutorial Blog
Bagikan ke aplikasi lainnya
Salin Tautan Pos