Cara Membuat Recent Post Responsive dan Keren

Bagi anda yang ingin membuat widget yang keren dan responsive yang menampilkan postingan terbaru atau sering disebut dengan recent post berikut adalah kode widget yang bisa anda gunakan dari http://www.dte.web.id/2012/07/recent-post-widget-with-preloader.html. Widget recent post ini dilengkapi dengan thumbnail gambar yang akan menambah nilai plus pada blog anda. Berikut adalah contoh dari widget tersebut :

Cara Membuat Recent Post Responsive dan Keren

Cara untuk membuat widget tersebut cukup mudah ikuti langkah-langkah berikut ini :
  1. Login ke blogger anda
  2. Pilih tata letak/ layout kemudian add gadget
  3. pilih HTML/JavaScript
  4. Kemudian masukkan kode di bawah ini
<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://www.cahbantul.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>

Untuk yang berwarna merah http://www.cahbantul.com/ diganti dengan alamat blog anda dan angka 5 untuk menentukan jumlah post yang ditampilkan pada kolom recent post. Untuk angka 72 merupakan lebar dari gambar thumbnail tersebut dan angka 100 merupakan jumlah kata yang ditampilkan pada recent post.

Terimakasih semoga postingan tentang cara membuat recent post rensponsive dan keren ini bisa membantu anda dalam memodifikasi blog anda.

Disclaimer !

Teks di atas adalah postingan sharing semata. Seluruh media yang tersedia di Cah Bantul ini hanyalah untuk berbagi wawasan dan info update terkini tentang Cah Bantul ini. Apabila ada kesamaan nama, alamat atau juga hal lain dalam postingan harap dimaklumi menimbang informasi digital adalah bentuk sosial media yang menjadi konsumsi publik, bukan sebagai hak milik.

Berlangganan Update via Email:

2 Responses to "Cara Membuat Recent Post Responsive dan Keren"