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 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 Cara Membuat Recent Post Responsive dan Keren di atas adalah postingan sharing semata. Seluruh media yang tersedia di Cah Bantul ini hanyalah untuk berbagi wawasan dan info update terkini. 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: