Cara Membuat Recent Post Simple, Keren Dan Responsive

Cara Membuat Recent Post Simple, Keren Dan Responsive

KabarLangit - Selain Halaman Daftar Isi, Recent post merupakan widget yang banyak digunakan para blogger untuk menarik minat pengunjung untuk membaca artikel lainya, Recent post merupakan artikel terbaru yang ada pada updatean konten blog kita dan biasanya widget ini di pasang pada sidebar di bagian bawah atau atas widget popular post. Widget Recent post yang akan saya bagikan ini merupakan salah satu widget yang dicari para pengunjung dikarenakan mempunyai fitur responsive sehingga bisa tampil di versi mobile maupun desktop, Jika anda tertarik untuk menerapkan script yang dibagikan DTE ini pada blog anda, di bawah telah saya siapkan cara pemasanganya untuk anda.

Recent Post Simple, Keren Dan Responsive

Cara Membuat Recent Post Simple, Keren Dan Responsive
1. Login ke blogger
2. Selanjutnya Ke Tata Letak => add gadget => HTML/javascript
3. Dan Silahkan Copy Paste script dibawah ke kolom yang tersedia

<style scoped="scoped">
#dte_recent-post {
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
  color:#333;
  margin:0 auto;
  padding:0;
  min-height:100px;
  background:white url('data:image/gif;base64,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') no-repeat 50% 50%;
}

#dte_recent-post li {
  list-style:none;
  margin:0;
  padding:7px;
  background-color:white;
  border-bottom:1px solid #ddd;
}

#dte_recent-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0;
  border:none;
  background:none;
  outline:none;
}

#dte_recent-post li a.title {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:#990000;
}

#dte_recent-post li a.title:hover {
  text-decoration:underline;
}

#dte_recent-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:7px;
  font-size:10px;
}
</style>
<ul id="dte_recent-post"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://kabarlangit.com", // Your blog homepage
    rp_numPosts = 5, // How many posts?
    rp_thumbWidth = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars = 100, // Number of posts summary
    rp_sortByLabel = false, // Replace `false` with your specific label name to display posts by specific label
                            // Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
    rp_noImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A 'no-image' image
    rp_monthNames = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab
    rp_loadTimer = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>

4. Silahkan ganti alamat URL nya dengan alamat blog anda sendiri, lalu Simpan dan lihat hasilnya

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »