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..
Previous
Next Post »

35 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
August 17, 2015 at 2:44 PM delete

wah..tq lysa bagi tutorial.. ^_^ nk try buat nanti

avatar
Zafirah Ripin
AUTHOR
August 17, 2015 at 3:07 PM delete

terima kasih share tutoria ni! berhasil!yeayy!

avatar
Farhain Azmi
AUTHOR
August 17, 2015 at 3:55 PM delete

tq lyssa..nak try nnti..hehe

avatar
Aecha Charmy
AUTHOR
August 17, 2015 at 5:06 PM delete

Thanks for sharing! Boleh guna! ^^

avatar
Azlinda Azman
AUTHOR
August 17, 2015 at 5:29 PM delete

Good Sharing Lysa


www.azlindaalin.com

avatar
Shafuhan Smab
AUTHOR
August 17, 2015 at 5:56 PM delete

Wahh! Lajunya kak lyssa. Thankyouu banyakbanyakbanyak kak lysaa. Sebenarnya semua edit blog saya pakai tutorial yg akk punya sbb mudah. Thankyouu lagi! :)

avatar
Puan Wawa
AUTHOR
August 17, 2015 at 6:01 PM delete

Thanks lyssa, blh cuba ni..

avatar
August 17, 2015 at 7:34 PM delete

cantiklah..nak try jugak la nanti

avatar
muja
AUTHOR
August 17, 2015 at 10:04 PM delete

banyaknya la tutorial lyssa.. dulu buat blog pun tgk tutorial blog lyssa la.. hehehee

avatar
August 17, 2015 at 10:24 PM delete

Tq! Suke tgk ur blog..i bru nk start blk ber blogging..pls folow my blog faranina89@blogspot.com..thanx!!

avatar
Nurul Faiz
AUTHOR
August 18, 2015 at 1:31 AM delete

nanti boleh la try. itu pon kalau sesuai dengan blog CF tu. huhu

avatar
August 18, 2015 at 9:19 AM delete

cik en nak try tp tggu nk guna template baru dlu

avatar
Asya Atien
AUTHOR
August 18, 2015 at 1:11 PM delete

tq sy ambik ya menjadi la

avatar
Asya Atien
AUTHOR
August 18, 2015 at 1:22 PM delete

lyssa npa no sy jd dekat ek?

avatar
August 18, 2015 at 1:25 PM delete

@Asya Atien
alamakk . cuba main2 tukar bahagian margin ataupun padding ... :D

cuba dulu eh .

avatar
Akif Imtiyaz
AUTHOR
August 19, 2015 at 4:54 PM delete

Nnt kalau mak buat blh la akak refer kat blog lyssa ya..thanks dear

avatar
ifah dafila
AUTHOR
August 20, 2015 at 5:06 AM delete

kak lyssa, knp no post sy jadi jauh dari tajuk post. kalau nak ubah, kt bhgian mana?

avatar
Syaidah Seha
AUTHOR
August 22, 2015 at 11:57 AM delete

terima kasih share tutorial ni..:)

avatar
PeRdU cINta
AUTHOR
September 3, 2015 at 1:37 PM delete

Sampai sekarang hakak buat fail..jeles pulak tgok kawan2 lain ok je..comel pulak tu...usaga lg...usaha lg...

avatar
Ck Tmn
AUTHOR
September 4, 2015 at 8:02 PM delete

dah cuba buat banyak kali tp tak jadi.. geram rasa.. hahahah

avatar
September 9, 2015 at 4:38 PM delete

Salam singgah sini..tq lisa sangat membantu...nampak cantik & kemas :)

avatar
adiba rusli
AUTHOR
September 16, 2015 at 6:22 PM delete

thanks lyssa. dah buat !

avatar
Mrs Yatie
AUTHOR
September 21, 2015 at 5:53 PM delete

horey! jumpa dekat sini :)
baru bertanya dekat kotak komen lyssa :)

avatar
theCYCLAZEY
AUTHOR
September 25, 2015 at 2:56 PM delete

saya dah dapat guna dah hihi :) terima kasih kak lyssa !

avatar
Syaidah Seha
AUTHOR
October 3, 2015 at 7:34 AM delete

sy guna dkt blog ya..thanks Lyssa..:)

avatar
October 13, 2015 at 5:14 AM delete

Kak lyssa, saya dah jadi tapikan kenapa tajuk "popular post" dekat sidebar tetiba jadi kecik eak ? >.< cuba akak lyssa tengok .. hukhuk ..

http://misshainanis.blogspot.my/

avatar
shaa99
AUTHOR
November 10, 2015 at 7:49 PM delete

KERJA FULLTIME/PARTTIME DI RUMAH . MELIPAT RISALAH UNTUK SYARIKAT . GAJI KASAR RM350-450 SEMINGGU . SESUAI UNTUK SURI RUMAH ATAU ANDA YANG BERUMUR 16 TAHUN KEATAS . WHATSAPP 0175156518 . TAWARAN KERJA TERHAD !

avatar
shaa99
AUTHOR
November 10, 2015 at 7:49 PM delete

KERJA FULLTIME/PARTTIME DI RUMAH . MELIPAT RISALAH UNTUK SYARIKAT . GAJI KASAR RM350-450 SEMINGGU . SESUAI UNTUK SURI RUMAH ATAU ANDA YANG BERUMUR 16 TAHUN KEATAS . WHATSAPP 0175156518 . TAWARAN KERJA TERHAD !

avatar
November 18, 2015 at 2:41 PM delete

Comell, nak guna ye kak lyssa :D

avatar
Asya Atien
AUTHOR
November 19, 2015 at 10:02 AM delete

as salam margin n padding yg mna stu bnyak n pastu nilai dia mcam mna

avatar
Firai Raizah
AUTHOR
December 7, 2015 at 2:30 AM delete

THANKYOU KAK LYSSA. JADI HEEHEE

avatar
May 12, 2016 at 5:28 PM delete

yippi! menjadi! blogger baru!

avatar

Google+ Followers