Cara Membuat/Memasang Widget Artikel Terbaru di Blogger

Pada kesempatan kali ini Algofixs akan berbagi tutorial mengenai Cara Membuat Widget Artikel Terbaru di Blogger. 
Baca juga
Cara Mudah Memasang Kotak Widget Sosial di Blog

Navigasi/Lalu lintas Widget artikel terbaru pada blog sangatlah penting, karena navigasi dibuat untuk menggolongkan jenis konten dan memudahkan kita untuk mengakses isi blog.
Selain itu membuat navigasi juga akan membuat pengunjung nyaman.

Nah untuk menfaat memasang widget artikel terbaru sendiri antara lain :

1. Memudahkan pengunjung untuk mencari artikel Update
2. Menambah link Url Konten di widget
3. Memberikan peluang konten dibaca karena navigasi yang mudah.

Untuk tampilan widget artikel terbaru sangat beragam, ada yang hanya berupa teks, ada juga yang berupa teks dan gambar bahkan hingga yang kekinian recomended new conten recent berbentuk slide.
Dan kali ini saya akan meberikan 3 Jenis Widget artikel terbaru, yaitu Standard, Ringan dan slide.
Jika penasaran mari simak bersama cara memasang widget artikel terbaru di blog:

Cara memasang widget artikel terbaru model standard

• Pertama masuk ke akun blogger anda
• Pada meu dashboard pilih Tata letak/Layout
• Klik add a gadget
• Masukkan kode di bawah ini

<script src="http://id-pemula-javascript.googlecode.com/files/artikel-terbaru.js"></script>
<script>var numposts =7; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="URL SITUS ANDA/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Keterangan
Untuk yang saya beri tanda merah silakan ganti dengan URL SITUS ANDA
Untuk yang saya beri warna biru silakan ganti sesuai dengan jumlah artikel terbaru yang akan anda tampilkan.

Nah jika anda ingin menggunakan widget artikel terbaru yang rinag dan tidak memberatkan blog, sobat bisa menggunakan widget di bawah ini :

<script src="http://id-pemula-javascript.googlecode.com/files/artikel-terbaru.js"></script>
<script>var numposts = 7; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="URL SITUS ANDA/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://goo.gl/zAnmTu" rel="nofollow">Label Posts Widget</a>

Caranya seperti tutorial di atas.

Dan untuk konsep yang terakhir, widget artikel terbaru ini berbentuk slide
jika penasaran ingin mencobanya silakan ikuti langkah-langkah di bawa ini:
Baca Juga Cara Mudah Membuat Recent Post Bergerak di Blogger.

• Masuk ke blog sobat
• Pada menu dashboard pilih Template
• Klik Edit HTML/JavaScript
• Cari kode ]]></b:skin> (Untuk lebih mudahnya silakan tekan CTRL + F)
• Masukkan kode di bawah ini tepat di atas  ]]></b:skin>

#kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:35px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-35px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}

• Setelah itu masukkan kode di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });

$(document).ready(function(){
 var kislidingbox      = $(&#39;#kislidingbox&#39;);
    var closed      = $(&#39;#kislidingbox-close&#39;);
    var minimize    = $(&#39;#kislidingbox-minimize&#39;);
    var maximize    = $(&#39;#kislidingbox-maximize&#39;);

    maximize.hide();

    closed.click(function(){
        kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;});
        kislidingbox.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>

• Yang terakhir copy kode di bawah ini, lalu letakkan tepan di bawah <div class='post-footer'>, Jika kode tersebut ada dua, silakkan letakkan kode di bawah ini di <div class='post-footer'> yang terakhir.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Baca Juga</span>
        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ8-OUaN1zL8Pda4YRQ-ktQjb_IqXpp7E6S7w6GKOSArRKC03Urmcl64e28m9xLPf_99G2fLYVexUvRhSNw2tSxfQDFvcF9CVqtlMHHakSrMbERmt2j-j-IhqFFDnSLkf-3YWeSTTs/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKcEv2Y0TCP1RoBXT6cMuE6mpYAmhfyBD_vcURErWnvgzqB7Jpj3gHjlJ4Va6PLwvyVB7oOWCA9YbAM9NBbPXNaxt-dGY8nUwXc3Txw8klOsH5H7AsKvjPzcOH36vYVd12eOXNZoy/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgylngrDNIsCBCBtoLDVph3-zcp0VAEEMnSXar5CW4s6pHnDg4KXgdS_un4qBWu5iGXrLpcFDnKYjTZjLuQcX5DZ2gXmH4XiejqQoNqhJDtjTHeySyl3as4PK_rgkYl8firdTjML2mE/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='sliding-tab'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
      numPosts: 2,
      summaryLength: 35,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 45,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;sliding-tab&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle:2,
      callBack: function() {}
  };
  </script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>      
    </div>
</div>
</b:if>

Keterangan
Silakan ganti teks "baca juga" yang saya beri tanda merah sesuai dengan keinginan anda.

Nah sekian untuk tuorial  Cara Membuat/Memasang Widget Artikel Terbaru di Blogger, Jika masih ada pertanyaan silakan tinggalkan di kolom komentar. Semoga bermanfaat.
Baca juga  Cara Memasang Widget Headline Breaking News di Blog

Share :