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.

Cara pasang Recent posts floating bar widget di Blogspot

salam..
baru nak tanya hari tu
dah keluar..anda memang
pemurah bro..tiada rahsia
sentiasa sudi berkongsi
ilmu..TQ

Dah pasang Bro..
ada di blog saya
lagi satu..silalah
jenguk...he he..

http://bloggerjengka.blogspot.com/

Salam kalau boleh diletakkan di bahagian atas lagi cantik perkara tu rasanya. :) TQ diatas perkongsian.

salam,

Saya dah pasang...sudah letak, sudah tukar url. Nampak widget tapi recent post tak muncul juga.. Tolong bagitau mcm nak baiki widget ini.

@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>

Salam Bro,

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

wslm

@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 nescafeais2@gmail.com

bagus jugak widget ni...nak try pasang kt blog saya jadi..
thank bro..banyak ilmu saya dpt dari blog bro,thank a lot..

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.

@Captain Wsalam. Saya rasa baik En Captain buang dulu widget recent post tu. Nanti saya check kat mana yang buat error. Tq atas makluman.

sy dah ikut step tapi tak jalan jg kenape yer bro.

berape nilai kelajuan yang sesuai, saya guna 200 laju sangat..

agak lama juga aku tak mencari ilmu disini...dulu last mbb ni hilang...alhamdulillah dh ok balik.

dah ikut step tu tapi post tak keluar..huhu..

slam.. abg admin..
bole x abg follow blog sy?? =D
tq~

thanks.nice post. da pasang kat blog sy..
http://yourmediafire.blogspot.com/

BEST !,,hahaha tgok blog saya... muhammadrafik.blogspot.com

Anonymous
delete

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

Anonymous
delete

@AnonymousOk,problem solved, aku guna function add css kt advance tab tu, hopefully bole jadi tips pd yg lain, thanks for the great tips! :)

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

ak cube jgk ubah cam letak before/after kod head pastu try jugak letak before/after kod footer/wrapper still same gak nie

@Kazen
tambah ag kod bro....template yg convert dr WP ke blogger die ade kod nie

div id='contentwrap'>

so nice.....thanks dgn tutorial ini

@Captain saya tahu,cube u tgk dekat kod html y url u punye.. //maribinablog.blogspot.com/&quot perkataan /&quot tertgl..

tip dan trick yg bagus...sy pun sedang mengaplikasi nye di blog sy...

mnjadi ... TQ share. jom lah lawat blog yana http://nazlyizan.blogspot.com/

Alamak bro xleh kuar la..

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...

terima kasih atas info ini banyak membantu.please visit my blog http://businessmoms2013.blogspot.com

di template saya tidak ada kode pada langkah 5 dan 6, jadi harus saya letakkan dimana?