Friday, September 1, 2017

Cara Membuat Widget Artikel Terbaru Dengan Gambar di Blog

Bagi Kamu yang suka ngeblog pasti suka otak atik tampilan blognya, kamu harus mencoba tutorial blogger satu ini. Yaitu Cara Membuat Widget... thumbnail 1 summary
Bagi Kamu yang suka ngeblog pasti suka otak atik tampilan blognya, kamu harus mencoba tutorial blogger satu ini. Yaitu Cara Membuat Widget Artikel Terbaru dengan Gambar di Blog. Tutoral ini akan mengajarkan kepada Anda cara membuat daftar artikel terbaru dengan gambar dan bergerak.
Fungsi dari widget ini adalah memudahkan pengunjung blog untuk menemukan artikel terbaru di blog kamu.

Berikut tampilannya (ditandai dengan kotak warna merah) :


Langkah-langkahnya yaitu :
1. Login ke blog lalu klik Tata Letak > Tambah Widget > pilih HTML/Java Script.
2. Lalu Masukan kode berikut ini :

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small></small>
<small><a href=" http://ichad14.blogspot.com" target="_blank">News Article</a></small>

*tulisan warna merah di kode di atas ganti dengan alamat blog kamu
3. Klik Save dan selesai.

Gimana gampang dan nggak ribet kan, selamat mencoba.

4 comments

  1. Thank you for any other great post. The place else could anyone get that type
    of information in such an ideal method of writing?
    I've a presentation next week, and I am on the search for such information.

    ReplyDelete
  2. bos,, udah di coba tapi ko artikelnya ga muncul.
    www.brrosandre.com

    ReplyDelete
    Replies
    1. sangat bermanfaat kak :)
      terimakasih kak telah membagi ilmu kepada kami semua yang membaca nya , jangan lupa mampir ke website saya yaa kak di tunggu kritik dan saran nya kak :)
      www.kartumantap.com
      makasih kk :D

      Delete