TUTORIAL : Recent Post Lebih Berstyle Di Blog

.Assalamualaikum ♥

Baru je pagi tadi Lyssa terima someone yang tanya macam mana nak buat Recent Post Berstyle macam kat blog Lyssa ni ...

Lyssa baru teringat yang Lyssa lupa nak share kat korang pasal ni . Padahal masa Lyssa buat dulu , kemain beria jugaklah nak share benda ni . Tapi , terlupa . Dan sekarang dah ada yang tanya , Lyssa pun ajarlah kat korang ye...

1. Dashboard >  Layout > Add a Gadget > Html / JavaScript

2. Copy kod ini :

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.lyssasecret.com"></a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;border: 2px;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #FF9999;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#CC3366; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #FF6699; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #FF6699;}
a.readmorelink {color: #4DACE3;}
</style>

3. Paste di ruangan HTML/JAVASCRIPT itu ..

4. Tukarkan WARNA MERAH itu kepada LINK BLOG korang ...

5. Kod Color yang ada simbol HASHTAG # tu korang boleh tukar ikut suka korang . Kalau tak tahu , cuba try and error ... Lepas tu , SAVE . View blog korang .

** Kalau masih tak puas hati dengan warna , tukar dan view lagi . ok ?

HTML CODE COLOR boleh LIHAT DI SINI ----->> HTML CODE COLOR

Mudah je kan ? Siapa nak tahu CARA BUAT POPULAR POST YANG LEBIH STLYE <<Klik sini 

Sebarang pertanyaan atau apa-apa yang nak ditanya, boleh kemuka kan di ruangan komen ya ?

Terimakasih.

Terima Kasih Sudi Baca~

KONGSIKAN ARTIKEL INI..

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest