widget

Cara Memasang Hot News pada Blog

3:13 AM



Apa sih hot news?
Hot news tuh postingan terakhir dari suatu blog sob.
Bisa berjumlah 10 postingan terakhir atau 5 postingann terakhir.
Kita dapat membuat sesuka hati, dengan cara berikut ini:
1. Login blog
2. Rancangan
3. Edit html dan centang "expand widget template"
4. Letakkan kode berikut di atas </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/AVvXsEjYitVjbbCQJxjEN5Sub6yehOm7BKQCDgBntJ_X5L5KlcbSke02_lT2_iarGi1IVhjrmSYoK-b5jw31yFrkXjpCt9kJiZgIQORbysYI1WNL_dSdyfgoPtzAoWKHgwFxG7QB4LOb-xUPNNHn/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/AVvXsEgp3NLoqDK6wPnnFLBkL73S1BNcz-rSKiodUm4X7r_LU3VDZCnrSF-u8fKxgYcOzy7Jc4sd6T5C34HXdZmNk0Sbc3DvyPXI8_pepIxTPxMRDZ69JhBNFt8uUbP_l0JPA3EjxMcDs1PyMIc/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. Letakkan kode berikut dibawah  <div id='content-wrapper'>


<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.cybermig.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>


6. Simpan template dan lihat hasilnya.




You Might Also Like

0 comments

SUBSCRIBE

Like us on Facebook