Membuat Recent Post Dengan Berbagai Model dan Gaya / uongduro

Sahabat setia uongduro yang saya cintai, setelah berhasil merilis postingan tentang Cara Memasang Recent Post Keren Hanya Berupa Gambar pingin rasanya berbagi postingan tetap seputar Recent Post akan tetapi dengan gaya dan rasa yang berbeda [ups... seperti makanan saja, hehe]

Mari kita mulai tutorialnya ya... :)
1. Masuklah ke akun blogger sahabat jangan milik tetangga, hehe...
2. Klik Tata letak
3. Tambahkan gadget
4. Pilih dan klik HTML/JacaScript </>
5. Copy dan paste kode sesuai model dan gaya Recent Post yang sahabat inginkan didalamnya

1. Recent Post model pertama

2. Recent Post model kedua

3. Recent Post model ketiga

4. Recent Post model keempat

5. Recent Post model kelima

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script>
<style type="text/css">
.recentpoststyle {
counter-reset: countposts;
list-style-type: none;
}
.recentpoststyle a {
text-decoration: none;
color: #49A8D1;
}
.recentpoststyle a:hover {
color: #000;
}
.recentpoststyle li:before {
content: counter(countposts,decimal);
counter-increment: countposts;
float: left;z-index: 1;
position:relative;
font-size: 15px;
font-weight: bold;color:#fff;
background:#B45357;
margin:13px 5px 0px 0px;
line-height:30px;
width:30px;
height:30px;
text-align:center;
-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
}
li.recent-post-title {
margin-bottom: 5px;
padding: 0;
}
.recent-post-title a {
color: #444;
text-decoration: none;
font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;
}
.post-date {
font-size: 11px;color: #999;margin:5px 0px 15px 32px;
}
.recent-post-summ {
border-left:1px solid #69B7E2;
color: #777;
padding: 0px 5px 0px 20px;
margin-left: 10px;
font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
}
</style>
</div>

uongduro

Blogger wangi dan baik hati :)

Silahkan berbagi

Membuat Recent Post Dengan Berbagai Model dan Gaya

Belum ada tanggapan untuk "Membuat Recent Post Dengan Berbagai Model dan Gaya"

Post a Comment

Membuat Recent Post Dengan Berbagai Model dan Gaya

Postingan Terkait

Belum ada tanggapan untuk "Membuat Recent Post Dengan Berbagai Model dan Gaya"

Post a Comment