Tutorial | Recent post floating bar widget

Recent posts floating bar  seperti yang korang nampak kat bawah blog ini adalah widget yang sangat menarik. Widget tersebut memaparkan tajuk post terkini yang berefek slider.

steps:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoQzDXePElMGOMaVc2B5E_rdiv-RYm0RaxdfZnHZ4_CGkIj6gjH2UZBVDSwhUsNwAUw7y3xYs_2h-Dfhg7EchCThh5G7PJvMcWjHZDg8zCh9AIY_gI5ozGRvXQdk86g6XAsB8rTTRYP-f/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgDlADFMxXui3nD4MNle960VsoaiJFiYQ_eQsbWU3at938sioUZMTCfrywECZVu-Q80LbwinjSpNI2CNBniOsYQXtPWcEgQgye_0DaFJfZ8hEYRngDGAbBsXoLU3PjyjyMgCHNN7wQSo/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. Then, 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 dibawah atau selepas kod <div id='content-wrapper'>

 Bagi blog yang guna template dari template designer, paste kod HTML dan Javascript ini kat 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://www.tyralee.my/&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. tukar yang warna merah dengan url blog korang .
8. Seterusnya klik Preview. kalau kedudukan bar terlalu ke kiri atau ke kanan, korang edit nilai pada kod yang di bold dengan warna biru kat langkah 4.

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

9 . Akhir sekali,kalau korang berpuas hati dengan kedudukan bar tersebut, klik Save.

Tyra Lee (Author)

About Guest Author:
Assalamualaikum. I'm the only author for this blog. Cik adik, cik kakak, cik abang tak kan baca je . apa pendapat korang plak? comment la sikit. Dont worry, aku open minded :D.

Follow @RarraLee