Tutorial Membuat "Newsticker" Dengan "Typing Effect" Dan Ringkasan (hover)

Screenshot "Newsticker" Dengan "Typing Effect" Dan  Ringkasan (hover)

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

 ]]></b:skin> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>

/* News Ticker */
#topmenu {
background-color:#292929;
overflow:hidden;
}
#latst {
float:left;
width:760px;
}
#newsticker {
color:#FAFAFA;
}
#newsticker a {
color:#FAFAFA;
text-decoration:none;
}
.left .ticker-controls,
.left .ticker-content,
.left .ticker-title,
.left .ticker {
float:left;
}
.ticker-wrapper.has-js {
height:34px;
overflow:hidden;
margin:0;
line-height:34px;
}
.ticker {
width:680px;
position:relative;
overflow:hidden;
}
.ticker-title {
background-color:#01B1D3;
padding:0 10px;
color:#FAFAFA;
font-weight:bold;
}
.ticker-content {
margin:0;
position:absolute;
font-weight:bold;
overflow:hidden;
white-space:nowrap;
line-height:34px;
padding:0 10px;
font-size:10px;
}
.ticker-content .date {
padding:0 5px 0 0;
border-right:1px solid #272727;
}
.ticker-swipe {
position:absolute;
top:0;
background-color:#292929;
display:block;
width:800px;
height:30px;
}
.ticker-swipe span {
margin-left:1px;
background-color:#292929;
border-bottom:1px solid #FAFAFA;
height:23px;
width:7px;
display:block;
}
.ticker-controls {
padding:8px 0 0;
margin:0;
list-style-type:none;
float:left;
display:none;
}
.ticker-wrapper.has-js:hover .ticker-controls {
display:block;
}
.ticker-controls li {
padding:0;
margin-left:5px;
float:left;
cursor:pointer;
height:16px;
width:16px;
display:block;
}
.ticker-controls li {
color:#FAFAFA;
position:relative;
}
.ticker-controls li.over {
color:#01B1D3;
}
.ticker-controls li.down {
color:#01B1D3;
}
.ticker-controls li:before {
top:0;
left:0;
line-height:18px;
}
.ticker-controls li.jnt-play-pause:before {
content:"\f04b";
}
.ticker-controls li.jnt-play-pause.paused:before {
content:"\f04c";
}
.ticker-controls li.jnt-prev:before {
content:"\f04a";
}
.ticker-controls li.jnt-next:before {
content:"\f04e";
}
.right .ticker-swipe {
/*right: 80px;*/
}
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
float: right;direction: rtl;
}
.right .ticker-controls {
padding-right: 6px;
}
.right .ticker-content .date {
float: right;
margin: 0 0 0 5px;
direction: ltr;
padding: 0;
}
.js-hidden {
display:none;
}

7. Seterusnya, cari kod dibawah:

</head>

 8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/q93q1mn2ou92mky/newsticker_typing_effect.js' type='text/javascript'/>

Keterangan:
- Jika template anda sudah sedia ada script JQuery , padam kod yang di highlight berwarna hijau.

9. Klik Save Template

 10. Untuk paparkan widget , Copy (CTRL+C) kod dibawah , letakkan pada " Layout >> Add a Gadget >> HTML/Javascript " .

<div id='topmenu'>
<div id='latst'><div id='newsticker'/>
</div>
<script type='text/javascript'>
NewsTicker();
</script>
</div>

#Selesai. Selamat Mencuba :)