Dede Rosadi Blog

Jasa Pembuatan Toko Online Seo Dan Review Produk Online

Tutorial Menciptakan Recent Posts Blogger Dengan Thumbnail

No ratings yet.

Recent posts atau posting terbaru yaitu salah widget atau fitur dalam sebuah blog yang sangat penitng. Sama dengan membuat related posts, juga navigasi breadcrumbs, widget ini bisa berfungsi untuk menciptakan pengunjung blog kita semakin betah.

Memang sudah ada widget recent posts bawaan dari blogger tapi tampaknya kurang menarik, dengan menambahkan beberapa fitur pada recent posts menyerupai thumbnail, komentar, dan summary bisa menciptakan pengunjung blog sahabat tertarik untuk membaca artikel atau postingan terbaru tersebut. Yaudah eksklusif saja deh ke topik

 yaitu salah widget atau fitur dalam sebuah blog yang sangat penitng Tutorial Membuat Recent Posts Blogger dengan Thumbnail

Tutorial menciptakan recent posts atau posting terbaru dengan thumbnail

  1. Masuk ke blogger, dan terperinci kudu login lah hehehe
  2. Pilih Rancangan (Desing) > Elemen Halaman (Page Elements)
  3. Tambahkan widget/gadget HTML / Javascript
  4. Ketikkan instruksi diberikut

    <div style="overflow:auto; width:100%px; height:500px; padding:10px; border:1px solid #999999;">
    <right><style>
    img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
    .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
    ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
    .recent_posts_with_thumbs a {text-decoration:none;}
    .recent_posts_with_thumbs normal {font-size:13px;}
    </style>

    <script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recent-posts-with-thumb.js"></script>
    <script style="text/javascript">
    var numposts = 10;
    var showpostthumbnails = true;
    var displaymore = false;
    var displayseparator = true;
    var showcommentnum = false;
    var showpostdate = false;
    var showpostsummary = false;
    var numchars = 75;
    </script>

    <script type="text/javascript" src="http://nama-blog-sobat.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right></div>

  5. Sobat bisa merubah skornya menyerupai menampilkan recent posts thubmnail atau tidak, summary, jumlah posting, tanggal, separator. Atur saja sesuai selera. Jangan lupa nama blognya yang berwarna merah juga diganti sesuai blog sobat.

Praktis kan Tutorial menciptakan recent posts atau posting terbaru dengan thumbnail? Selamat mencoba 🙂

Please rate this

Updated: 7 Januari 2019 — 05:53

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Sikartun Blog © 2018 Frontier Theme