Cara pasang Recent posts floating bar widget di Blogspot

Recent posts floating bar  seperti yang boleh anda lihat di bahagian bawah blog ini adalah widget yang sangat menarik. Widget tersebut memaparkan tajuk post terkini yang berefek slider.

Untuk memasang widget Recent posts floating bar slider ini pada blog anda, sila ikut beberapa langkah di bawah.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

2. Seterusnya tick "Expand Widget Templates"

3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod </head>

4. Copy dan paste kod css ini, di atas atau sebelum kod </head>

 <style type='text/css'>

#bd {
float:bottom;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-top:5px;
font-size:12px
}

.text {
color:#98BF2F;
margin-left:8px
}

div#news-1 .gk_news_highlighter {
font-family:Verdana, Arial;
font-size:11px;
color:#666
}

div#news-1 {
width:960px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background:#000 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px;
clear:both;
overflow:hidden
}

div#news-1 .gk_news_highlighter_wrapper {
float:left;
width:820px;
height:24px;
line-height:24px;
overflow:hidden;
position:relative
}

div#news-1 .gk_news_highlighter_item {
width:auto;
height:24px;
padding-left:20px;
display:none;
position:absolute
}

div#news-1 .nowrap {
white-space:nowrap
}

div#news-1 .gk_news_highlighter_title {
padding-left:5px
}

div#news-1 .gk_news_highlighter_desc {
padding-right:5px
}

div#news-1 .gk_news_highlighter_interface {
float:left;
width:120px;
height:24px;
text-align:right;
line-height:24px;
z-index:1000
}

div#news-1 .gk_news_highlighter_interface .text {
float:left;
display:block;
width:auto;
padding-left:5px;
font-weight:700
}

div#news-1 .gk_news_highlighter_interface div {
width:30px;
float:right
}

div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
cursor:pointer;
width:13px;
height:24px;
display:block;
background:url(&#39;http://1.bp.blogspot.com/-H-u2nx45PwI/TuJ1Bwv5xDI/AAAAAAAABew/HQHKt-oVd7o/s1600/play.png&#39;) no-repeat 0 50%;
float:left
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position:-13px 50%
}

div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
color:#FFF
}

div#news-1 .gk_news_highlighter_interface a.next {
float:right;
background-position:-26px 50%
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position:-39px 50%
}

</style>



5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>.

Bagi blog yang menggunakan template dari template designer, cari kod </footer>


6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>

 Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer>


 <div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = &quot;no&quot;;
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
icon = &quot; &#187; &quot;;
label = &quot;&quot;;
numposts = 30;
home_page = &quot;http://maribinablog.blogspot.com/&quot;;
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick[&quot;gk_news_highlighternews-1&quot;] = {
&quot;animationType&quot; : 3,
&quot;animationSpeed&quot; : 200,
&quot;animationInterval&quot; : 2000,
&quot;animationFun&quot; : Fx.Transitions.linear,
&quot;mouseover&quot; : 1};
</script>


7. Edit kod yang di bold dengan warna merah dengan menggantikannya kepada URL blog anda dan juga bilangan post yang hendak dipaparkan.

8. Seterusnya klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, sila edit nilai pada kod yang di bold dengan warna biru pada langkah 4.

width:960px; (Panjang bar)
margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya)

9 . Akhir sekali, jika anda berpuas hati dengan kedudukan bar tersebut, klik Save.



{ 32 comments.. read them below or add one }

zulkbo zulkbo 5:54 PM
salam..
baru nak tanya hari tu
dah keluar..anda memang
pemurah bro..tiada rahsia
sentiasa sudi berkongsi
ilmu..TQ
zulkbo zulkbo 6:52 PM
Dah pasang Bro..
ada di blog saya
lagi satu..silalah
jenguk...he he..

http://bloggerjengka.blogspot.com/
akuanakpahang akuanakpahang 8:14 AM
Salam kalau boleh diletakkan di bahagian atas lagi cantik perkara tu rasanya. :) TQ diatas perkongsian.
Captain Captain 9:43 AM
salam,

Saya dah pasang...sudah letak, sudah tukar url. Nampak widget tapi recent post tak muncul juga.. Tolong bagitau mcm nak baiki widget ini.
Nescafe ais Nescafe ais 9:49 AM
@Captain wsalam. Cuba tengok balik step 6. Lepas tu copy kod ni dan paste atas kod </head> sama macam step 4

<script src='http://javscript-code.googlecode.com/files/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick[&quot;gk_news_highlighternews-1&quot;] = {
&quot;animationType&quot; : 3,
&quot;animationSpeed&quot; : 200,
&quot;animationInterval&quot; : 2000,
&quot;animationFun&quot; : Fx.Transitions.linear,
&quot;mouseover&quot; : 1};
</script>
Captain Captain 5:47 PM
Salam Bro,

Dah pasang yg baru, dan yg lama html kekalkan..masih tidak ada perubahan..widget tu ada.

wslm
Nescafe ais Nescafe ais 6:09 PM
@Captain wsalam. Saya rasa javascriptnya crash dengan javascript yang ada dalam blog tuan. Boleh tak send full script template blog tuan. Saya cuba ejastkan. Send kat [email protected]
Tatkala Tatkala 1:46 AM
bagus jugak widget ni...nak try pasang kt blog saya jadi..
thank bro..banyak ilmu saya dpt dari blog bro,thank a lot..
Captain Captain 6:29 PM
Nescafe ais

Salam Bro,

Saya dah buang html dan pakai lagi satu recent post yg terus pasang pd javascript..Biarkanlah begitu dahulu.

Maaf menganggu tuan, cuma masalahnya pada edit page saya masuk 7 N3 yg keluar hanya 2 N3..yg ini masalah besar juga..

wslm.
Nescafe ais Nescafe ais 6:43 PM
@Captain Wsalam. Saya rasa baik En Captain buang dulu widget recent post tu. Nanti saya check kat mana yang buat error. Tq atas makluman.
Admin Admin 6:29 PM
sy dah ikut step tapi tak jalan jg kenape yer bro.
aliff aliff 11:31 PM
berape nilai kelajuan yang sesuai, saya guna 200 laju sangat..
yastro yastro 3:52 AM
agak lama juga aku tak mencari ilmu disini...dulu last mbb ni hilang...alhamdulillah dh ok balik.
Pamie Pamie 6:16 PM
dah ikut step tu tapi post tak keluar..huhu..
nadyaz alias'94 nadyaz alias'94 2:07 PM
slam.. abg admin..
bole x abg follow blog sy?? =D
tq~
arfian arfian 12:43 PM
thanks.nice post. da pasang kat blog sy..
http://yourmediafire.blogspot.com/
medic | integrity | analogy medic | integrity | analogy 6:36 PM
BEST !,,hahaha tgok blog saya... muhammadrafik.blogspot.com
AnonymousAnonymous 9:06 PM
Salam

Bro, lepas pasang skrip ni ade keluar tulisan "-->" kt Navbar atas belah kiri tu, mcm ade sintak tak tutup tp tak jumpa, camne tu?

TQ
AnonymousAnonymous 9:45 PM
@AnonymousOk,problem solved, aku guna function add css kt advance tab tu, hopefully bole jadi tips pd yg lain, thanks for the great tips! :)
Kazen Kazen 6:33 PM
blog gua code tuk footer or wrapper xde...tp try cr wrapper je ade n try place as stated...widget tu kalu kite scroll blog die jd dup blakang pada post, picture, widget2 lain...xjd cam yg nie always on top...ade penyelesaian x bro? :)
Kazen Kazen 6:34 PM
@Kazen

ak cube jgk ubah cam letak before/after kod head pastu try jugak letak before/after kod footer/wrapper still same gak nie
Kazen Kazen 2:32 AM
@Kazen
tambah ag kod bro....template yg convert dr WP ke blogger die ade kod nie

div id='contentwrap'>
Anie Roslezah Anie Roslezah 5:39 PM
so nice.....thanks dgn tutorial ini
kasihkuabadi kasihkuabadi 2:19 PM
@Captain saya tahu,cube u tgk dekat kod html y url u punye.. //maribinablog.blogspot.com/&quot perkataan /&quot tertgl..
Muzri -Kereta Sewa Murah K.L Muzri -Kereta Sewa Murah K.L 12:20 AM
tip dan trick yg bagus...sy pun sedang mengaplikasi nye di blog sy...
Yana Aina Yana Aina 3:53 PM
mnjadi ... TQ share. jom lah lawat blog yana http://nazlyizan.blogspot.com/
shahfir shahfir 1:47 PM
Alamak bro xleh kuar la..
||Sis aLeaSaRa|| ||Sis aLeaSaRa|| 7:38 PM
slm sy mmg dh byk bljr tutorial dr blog ni.nk mta berikan tutorial atau link tutorial yg dpt selesaikan mslh sy ni;

setiap kali sy cuba 'key in' blog di google search,blog sy trs jumpe link ke akaun youtube.mmg beri kesan sbb kwn2 jd malas nk klik byk kali utk sggh ke blog.apatah lg kalau masa tu line slow.saya nak delete akaun di youtube.setiap kali nak sign in youtube,rupanya mmg saya terguna id n passwords yg sama mcm nak sign in blogger.com.

hrp dpt bantu ye...
normas idayu Yusoff normas idayu Yusoff 12:06 PM
terima kasih atas info ini banyak membantu.please visit my blog http://businessmoms2013.blogspot.com
largo-kun largo-kun 11:19 AM
di template saya tidak ada kode pada langkah 5 dan 6, jadi harus saya letakkan dimana?