Membuat Recent Post Keren Tanpa Edit HTML
Cara Membuat Recent Post Keren Di Blog
Mengelola sebuah blog itu bukan hanya sebatas menampilkan artikel-artikel menarik yang kita suguhkan, tetapi ada unsur lain yang harus kita tampilkan, yaitu adanya sebuah tampilan blog yang tersusun rapi dan enak dipandang mata.
Ngeblog itu menurut saya ada nilai seninya, sebab kita bisa mengubah tampilan sebuah blog sesuka hati, kita juga bisa menambahkan gadget untuk mempercantik tampilan blog, tentu untuk melakukan hal tersebut kita harus tahu ilmunya.
Begitu juga dengan tema yang saya suguhkan, yaitu bagaimana cara membuat recent post keren, tanpa edit html, di sini anda tidak perlu perlu pergi ke menu template untuk mencari kode-kode tertentu, sehingga hal ini cukup menyulitkan anda, sebab kadang kode-kode yang kita cari sulit untuk ditemukan, apalagi jika struktur templatenya tidak sama, bisa jadi kodenya akan berbeda.
Recent post sendiri adalah postingan teranyar dari sebuah blog, biasanya terletek di bagian sidebar kanan blog, tampilan recent post default sebuah blog biasanya hanya menampilkan judulnya saja, nah, jika anda ingin merubah tampilan recent post yang menampilkan judul dan gambarnya, beriktu langkah-langkahnya:
Baik, saya persepsikan anda sudah bisa menambahkan gadget di sidebar blog, silahkan klik tata letak, kemudian tambahkan gadget HTML, lalu copas kode berikut kedalam dinding HTML.
<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.zaenalabidin.web.id",
// 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>
Ket: ganti teks yang berwarna biru dengan alamat URL anda,
Bagaimana, mudah bukan? selamat mencoba semoga berhasil.
