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>
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgDlADFMxXui3nD4MNle960VsoaiJFiYQ_eQsbWU3at938sioUZMTCfrywECZVu-Q80LbwinjSpNI2CNBniOsYQXtPWcEgQgye_0DaFJfZ8hEYRngDGAbBsXoLU3PjyjyMgCHNN7wQSo/s1600/play.png') 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 = "no";
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";
label = "";
numposts = 30;
home_page = "http://www.tyralee.my/";
</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["gk_news_highlighternews-1"] = {
"animationType" : 3,
"animationSpeed" : 200,
"animationInterval" : 2000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 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.
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.
No comments:
Post a Comment