Membuat headline news melayang dengan slider | Keren | Part 1

Membuat headline news melayang dengan slider | Keren | Part 1 - Halo semua, Selamat pagi! Posting kali ini saya akan membahas tentang bagaimana caranya membuat headline news. Headline news kali ini tidak sembarangan, karena dilengkapi dengan slider. Apalagi, widget ini melayang. Jadi, menghemat tempat sidebar. Demonya seperti ini :

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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRhKttoYKocoTGtkRGYjYLRpoEvcJRweDkxIGGnvpPR8NWRwlAlyDc7z0Axc0L5y8E_sKkIux9OS9fTdoSCGTHbc2EKdWtMbSxeFieNiPu55_5mO7v-dXpy3S3G7K4jr2lLa39kJiOu0k/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). 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 = &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://infoiki.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>

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.