Cara Membuat Recent Post (Postingan Terbaru) Lebih Menarik

7 Aug 2010

Salam Berkawand....
Akhirnya saya memberanikan diri buat posting mengenai tutorial memperkeren blogspot, karena saya juga masih bloger pemula jadi takut kalau kurang berkenang dihati kawand-kawand bloger...!!
saya cuma ingin berbagi dan saling tukar ilmu dari semua kawand-kawand...

Membuat Recent Post (Postingan Terbaru) Lebih Menarik

Kita mulai ya kawand.
Langkah 1 :
Login ke Blogger
Langkah 2 :
Masuk ke "Rancangan - Elemen Laman"
Langkah 3 :
Tambahkan sebuah gadget baru dengan tipe "HTML/JavaScript"
Langkah 4 :
[Buka] [Kode CSS] :

<style type="text/css">
#acrec-post{
 font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;
 padding:2px 0;
 border:1px solid #339DC6;
}
.acrecpost-label{
 background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
 font-weight:bold;
 line-height:1.4em !important;
 overflow:hidden;
 vertical-align: baseline;
 margin: 1px 3px;
 outline: none;
 cursor: pointer;
 text-decoration: none;
 padding: 2px 10px;
 color: #FFF;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 border:1px solid #2F94BA;
}
.acrecpost-label:hover{
 background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
 color:#003366;
}
#acrecpost{
 overflow:hidden;
 line-height:1.3em;
 margin:1px 3px !important;
 padding:2px !important;
 border:1px solid #339DC6;
 background-color:#FFF;
}
#acrecpost li{
 height:65px;
 padding:5px;
 list-style:none;
}
#acrecpost .news-title{
 display:block;
 font-weight:bold;
 margin-bottom:4px;
 font-size:11px;
}
#acrecpost .news-text{
 display:block;
 text-align:justify;
 padding:0 5px 0 70px;
}
#acrecpost a{
 text-decoration:none !important;
 color:#FF0000;
}
#acrecpost img{
 float:left !important;
 margin-right:5px !important;
 padding:4px !important;
 border:solid 1px #339DC6;
 width:55px !important;
 height:55px !important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://hensblog.googlecode.com/files/accrecpost-pack.js"></script>
<script style="text/javascript">
var numposts = 10;
var numchars = 200;
</script>
<script src="http://www.mari-berkawand.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Langkah 5
Simpan gagdet tanpa judul dan preview blog Kawand...
Keterangan:

  • Untuk kode CSS silahkan berekspresi sendiri.
  • Ganti URL mari-berkawand dengan URL Kawand.
  • Ubah nilai 10 pada kode var numposts = 10; untuk mengatur jumlah artikel yang akan ditampilkan.
  • Ubah nilai 200 pada kode var numchars = 200; untuk mengatur jumlah karakter yang akan ditampilkan pada penggalan artikel
Share this article on :

0 comments:

Post a Comment

 
© Copyright 2010-2011 Mari Berkawand All Rights Reserved.
Template Design Premium | Powered by Blogger.com.