Cara Pembuatan
1). Login blog.
2). Template -> Edit HTML.
3). Lanjutkan -> Centang Expand Template Widget.
4). Cari kode </head>. Jika sudah, letakkan kode dibawah ini diatas kode </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...20/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/AVvXsEjRhKttoYKocoTGtkRGYjYLRpoEvcJRweDkxIGGnvpPR8NWRwlAlyDc7z0Axc0L5y8E_sKkIux9OS9fTdoSCGTHbc2EKdWtMbSxeFieNiPu55_5mO7v-dXpy3S3G7K4jr2lLa39kJiOu0k/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). Masih pada Edit HTML, cari kode <div id='content-wrapper'> atau </footer>.
6). Letakkan kode dibawah ini diatas atau dibawahnya.
<div
id='bd'>
<div
class='gk_news_highlighter' id='news-1'>
<div
class='gk_news_highlighter_interface'>
<span
class='text'>Lastets Posts</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://infoiki.blogspot.com/";
</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>
Keterangan
a). Anda bisa mengganti Lastest Post dengan tulisan lain, seperti : Recent Updates, Recent Post dll.
b). Numposts adalah jumblah posting yang ditampilkan.
c). Ganti http://infoiki.blogspot.com dengan url blog anda.
d). Kode berwarna hijau adalah pengukur kecepatan widget berganti. Semakin kecil berarti semakin lambat dan sebaliknya.
7). Terakhir, klik Save template dan Lihat Hasilnya.
Comments :
0 komentar to “ Membuat headline news melayang dengan slider | Keren | Part 1 ”
Posting Komentar
Aturan Berkomentar
1. No spam!
2. No live link!
3. No maho :D