 |
| Screenshot " Newsticker " Dengan " Typing Effect " |
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 Typing Effect */
#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'/>Keterangan:
<script src='https://dl.dropboxusercontent.com/s/q93q1mn2ou92mky/newsticker_typing_effect.js' type='text/javascript'/>
- 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>
#Selesai :)
