Cara Pasang Recent Posts Floating Bar

Salam semua. hari ini admin nak berkongsi tutorial dengan korang. kali ini admin akan kongsikan Cara Pasang Recent Posts Floating Bar. seperti yang korang tengok pada gambar diatas dan pada blog duniakongsi, "floating bar" ini akan memaparkan tajuk "recent posts" di blog korang.

Berminat nak buat?. korang ikut seperti yang akan admin ajar ni satu persatu.

1. Login dashboard > design > edit html > tick "Expand Widget Templates". untuk keselamatan, korang "download full template" dulu

2. Tekan "Ctrl+F" cari kod </head> . lepastu korang copy coding dibawah dan paste sebelum coding </head> tadi

<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:#F30F26;
margin-left:8px
}

div#news-1 .gk_news_highlighter {
font-family:Arial, Arial;
font-size:13px;
color:#F30F26
}

div#news-1 {
width:1000px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #F30F26;
border-bottom:1px solid #F30F26;
background:#000 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/AVvXsEhRmm4mOfJNxXSVdYvtqxMU_1g9oHCiYy4-Tr_VKrqyOUery4z0kSZkudjGVXCuQqlxK8iHTnHtw7aMS8Fop940Lj1q_DcArJKW2HYn7YzMrfD8yFUEFE3614Q-0bXgzLdn4GfbgCSfd2o/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:#F30F26
}

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>

3. Kemudian tekan "Ctrl+F" cari kod <div id='content-wrapper'> atau kod </footer> . korang cuba lah kod mana yang sesuai dengan template korang. kemudian paste coding ini

<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 = 100;

home_page = &quot;http://www.duniakongsi.net/&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>

4. Untuk kod <div id='content-wrapper'> , paste coding diatas betul2 dibawah atau selepas kod <div id='content-wrapper'>

5. Untuk kod </footer>, paste coding diatas betul2 diatas atau sebelum kod </footer>

6. Ejas width:1000px; dan height:24px; mengikut kesesuaian. kemudian tukar juga www.duniakongsi.net kepada nama blog korang. ubah numposts = 100; untuk seberapa banyak post yang korang nak paparkan


7. Bila dah siap semua, SAVE TEMPLATE dan lihat hasilnya. semoga berjaya yer. ikhlas admin kongsikan somoga admin dapat membantu mencantikkan lagi blog korang(^_^)

Suka dengan apa yang admin kongsikan?. sila klik pada button dibawah sebagai tanda sumbangan ikhlas anda untuk duniakongsi.net. hanya sedikit iklan untuk menampung duniakongsi. sumbangan "klik" dari anda sangat admin hargai dengan ucapan terima kasih