Membuat Headline News

Hai sobat , disini saya mau share mengenai Cara MembuatHeadline / Hot News. silahkan membaca Cara Membuat Headline / Hot News selengkapnya berikut ini:

Sebenarnya Cara mudah membuat headline news / hot news kalau saya bilang ini merupakan recent posts, karena lebih kepada artikel-artikel terbaru yang muncul, selain itu cara membuatnya sangatlah mudah. Ikuti langkah-langkah dibawah ini.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.
2. Seterusnya klick "Expand Widget Templates"
3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kode  </head>
4. Copy dan paste kode html  ini, di atas atau sebelum 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86VA9DkzA-K7D-1WZ8mS2hpXQ6fgOkNvhBKbrS8qs2fPZ6yecUi28Ru2Pmw9wMNZasFQivE15GCZhh4rvfo7vVUz7Naf8PpFROlaUOEwZN8FC_dnngQIuIz7r8iMSprVKzbeyafY2WJub/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/AVvXsEiK34HPVQECpxdZWKB54oPkqnweWBnWDgxMsf7j6ZTo3Id_Kz-dxZOXKbwe1yJLSTgEkMN7NYIL2cZjqil8gb73pMS84k_qZHPN0062lycJwWoSr9ubQ-UEwQ7LyNBzeehbUR_f1rN5U2o/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.kemudian , tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>.

Bagi blog yang menggunakan template dari template designer, cari kode  </footer>


6. Copy dan paste kode HTML dan Javascript ini, dibawah atau sesudah kode <div id='content-wrapper'>

Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di 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 = &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://dangstars.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>

7. Edit kode yang di cetak tebal  dengan warna merah dengan menggantikannya dengan URL blog Sobat dan juga jumlah postingan yang hendak ditampilkan

8. Setelah itu  klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, sila edit nilai pada kode yang di bold dengan warna biru pada langkah 4.

width:960px; (Panjang bar)
margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya)

9 . Klik Save.

sumber: http://dangstars.blogspot.com/

Tag :
cara membuat headline news, membuat judul berita baru menarik di blog, mempercantik blog dengan hot news,