Tutorial Membuat "Newsticker" Dengan "Simply-scroll Effect"

Screenshot "Newsticker" Dengan "Simply-scroll Effect"

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 Simply Scroll
----------------------------------------------- */
.ticknews,
.simply-scroll {
float:left;
}
.ticknews {
padding:0 10px;
background-color:#01B8C0;
color:#FFFFFF;
margin-right:6px;
}
.simply-scroll {
width:90%;
}
.simply-scroll-container {
position:relative;
}
.news-item a {
text-decoration:none;
font-weight:bold;
}
.news-item span {
background-color:#01B8C0;
display:inline-block;
color:#FFFFFF;
padding:0 5px;
line-height:14px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font-size:8px;
position:relative;
top:-1px;
}
.simply-scroll .simply-scroll-clip {
width:100%;
}
.simply-scroll-clip {
position:relative;
overflow:hidden;
}
.simply-scroll-list,
.simply-scroll-list li {
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.simply-scroll-list li {
width:auto;
display:block;
float:left;
margin:0 10px;
}
#newsticker {
margin:10px;
border:1px solid #FFFFFF;
background-color:#FFFFFF;
line-height:23px;
height:23px;
overflow:hidden;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.index .post-footer, .archive .post-footer {position:absolute;left:-9999px;}

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/x4nibtruz4pvztq/newsticker_simplyscroll.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='newsticker'/>
<script class='jshilang' type='text/javascript'>
//<![CDATA[
NewsTicker({MaxPost:8});
//]]>
</script>

#Selesai. Selamat Mencuba :)