Selamat Hari Minggu teman teman,hari ini saya akan membagikan tutorial Bagaimana Cara Memasang Breaking News Berjalan di Blog,ya isi Breaking News ini adalah artikel artikel di Blog anda,Breaking News ini dapat membantu para pengunjung blog kalian untuk melihat artikel artikel terbaru yang ada di blog anda
Jika kalian pensaran dengan bagaimana penampilan asli dari Breaking News berjalan ini silahkan klik Demo dibawah
DEMO
Cara Memasang Breaking News Berjalan di Blog
1.Masuk ke akun Blogger kalian masing masing2.Masuk ke Template lalu klik Edit HTML
3.Setelah itu cari kode ]]></b:skin>,lalu letakan kode dibawah ini diatas ]]></b:skin>
/* CSS ticker */
.ticker {overflow: hidden;}
.ticker .title {
float: left;
width: 180px;
height: 40px;
line-height: 40px;
text-align: center;
color: #FFFFFF;
background: #2c97de;
margin: 7px 7px;
}
.post-tag{
display: inline-block;
height: 20px;
line-height: 20px;
padding: 0px 5px;
font-size: 13px;
margin-left: 4px;
color: #fff !important;
font-family: 'Museo500Regular', Helvetica, Arial, sans-serif;
background-color: #B565BE;
}
.ticker .ticker-icon {
float: left;
margin-left: 10px;
}
.ticker .ticker-icon i {
margin-right: 15px;
display: inline-block;
}
.ticker .title h6 {
font-family:'Oswald',sans-serif;
float: left;
line-height: 40px;
font-size: 17px;
font-weight: 400;
text-transform:uppercase;
}
.ticker .tickercontainer {
width: 80%;
margin: 0;
overflow: hidden;
float: right;
height: 40px;
}
.ticker .tickercontainer .mask {
position: relative;
overflow: hidden;
height: 40px;
}
.ticker ul.newsticker {
position: relative;
right: 100px;
list-style-type: none;
margin: 0;
padding: 0;
height: 40px;
}
.ticker ul.newsticker li {
float: left;
padding: 2px;
height: 40px;
margin-left: 15px;
}
.ticker ul.newsticker a {
white-space: nowrap;
padding: 0 7px;
color: #FFFFFF;
height: 40px;
font-size: 15px;
font-weight:400;
}
a.post-tag {
line-height: 21px;
}
.newsticker li:nth-child(1) a.post-tag{
background-color: #4791d2;
}
.newsticker li:nth-child(2) a.post-tag{
background-color: #E94B35;
}
.newsticker li:nth-child(3) a.post-tag{
background-color: #1E73BE;
}
.newsticker li:nth-child(4) a.post-tag{
background-color: #DD3333;
}
.newsticker li:nth-child(5) a.post-tag{
background-color: #E94B35;
}
.newsticker li:nth-child(6) a.post-tag{
background-color: #1E73BE;
}
.newsticker li:nth-child(7) a.post-tag{
background-color: #DD3333;
}
.newsticker li:nth-child(8) a.post-tag{
background-color: #479123;
}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {
margin: 0 10px 0 0;
}
.ticker ul.newsticker .sep {
display: inline-block;
width: 6px;
height: 7px;
}
.ticker-section {
overflow: hidden;
background: #363b3f;
-webkit-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);
-moz-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);
box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);
}
.PageList .selectnav {margin-top: 8px;}
@media screen and (max-width:1066px) {
.ticker .tickercontainer {width: 80%;}}
@media screen and (max-width:960px) {
.ticker .tickercontainer {width: 75%;}}
@media only screen and (max-width:768px){
.ticker .tickercontainer {width: 68%;}}
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
}<script>
//<![CDATA[
$(".ticker .widget-content").each(function () {
var e = $(this).text();
if (e.match("recent")) {
$.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=6",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .widget-content").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
} else {
$.ajax({
url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .widget-content").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
}
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// News Ticker plugin ~ URL: http://jonmifsud.com/open-source/jquery/jquery-webticker
(function(e){function n(e,t){var s=e.data("settings");if(typeof t==="undefined")t=false;if(t){i(e)}var o=r(e);e.animate(o.css,o.time,"linear",function(){e.css(s.direction,"0");n(e,true)})}function r(e){var t=e.data("settings");var n=e.children().first();var r=Math.abs(-e.css(t.direction).replace("px","").replace("auto","0")-n.outerWidth(true));var t=e.data("settings");var i=r*1e3/t.speed;var s={};s[t.direction]=e.css(t.direction).replace("px","").replace("auto","0")-r;return{css:s,time:i}}function i(e){var t=e.data("settings");e.css("transition-duration","0s").css(t.direction,"0");var n=e.children().first();if(n.hasClass("webticker-init"))n.remove();else e.children().last().after(n)}function s(e,t){if(typeof t==="undefined")t=false;if(t){i(e)}var n=r(e);var s=n.time/1e3;s+="s";e.css(n.css).css("transition-duration",s)}function o(t,n,r){var i;e.get(t,function(t){var s=e(t);s.find("item").each(function(){var t=e(this),n={title:t.find("title").text(),link:t.find("link").text()};listItem="<li><a href='"+n.link+"'>"+n.title+"</a></li>";i+=listItem});r.webTicker("update",i,n)})}function u(t){var n=t.data("settings");t.width("auto");var r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});if(r<t.parent().width()||t.children().length==1){if(n.duplicate){itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get());while(r-itemWidth<t.parent().width()||t.children().length==1){var i=t.children().clone();t.append(i);r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get())}}else{var s=t.parent().width()-r;s+=t.find("li:first").width();var o=t.find("li:first").height();t.append('<li class="ticker-spacer" style="width:'+s+"px;height:"+o+'px;"></li>')}}if(n.startEmpty){var o=t.find("li:first").height();t.prepend('<li class="webticker-init" style="width:'+t.parent().width()+"px;height:"+o+'px;"></li>')}r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});t.width(r+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)});while(widthCompare>=t.width()){t.width(t.width()+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)})}}var t=function(){var e=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(e["transition"]=="")return true;while(t.length)if(t.pop()+"Transition"in e)return true;return false}();var a={init:function(r){r=jQuery.extend({speed:50,direction:"left",moving:true,startEmpty:true,duplicate:false,rssurl:false,hoverpause:true,rssfrequency:0,updatetype:"reset"},r);return this.each(function(){jQuery(this).data("settings",r);var i=jQuery(this);i.addClass("newsticker");var a=i.wrap("<div class='mask'></div>");a.after("<span class='tickeroverlay-left'> </span><span class='tickeroverlay-right'> </span>");var f=i.parent().wrap("<div class='tickercontainer'></div>");u(i);if(r.rssurl){o(r.rssurl,r.type,i);if(r.rssfrequency>0){window.setInterval(function(){o(r.rssurl,r.type,i)},r.rssfrequency*1e3*60)}}if(t){i.css("transition-duration","0s").css(r.direction,"0");s(i,false);i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(!i.is(t.target)){return false}s(e(this),true)})}else{n(e(this))}if(r.hoverpause){i.hover(function(){if(t){var n=e(this).css(r.direction);e(this).css("transition-duration","0s").css(r.direction,n)}else jQuery(this).stop()},function(){if(jQuery(this).data("settings").moving){if(t){s(e(this),false)}else{n(i)}}})}})},stop:function(){var n=e(this).data("settings");if(n.moving){n.moving=false;return this.each(function(){if(t){var r=e(this).css(n.direction);e(this).css("transition-duration","0s").css(n.direction,r)}else e(this).stop()})}},cont:function(){var r=e(this).data("settings");if(!r.moving){r.moving=true;return this.each(function(){if(t){s(e(this),false)}else{n(e(this))}})}},update:function(t,n,r,i){n=n||"reset";if(typeof r==="undefined")r=true;if(typeof i==="undefined")i=false;if(typeof t==="string"){t=e(t)}var s=e(this);s.webTicker("stop");var o=e(this).data("settings");if(n=="reset"){s.html(t);s.css(o.direction,"0");u(s)}else if(n=="swap"){s.children("li").addClass("old");for(var a=0;a<t.length;a++){id=e(t[a]).data("update");match=s.find('[data-update="'+id+'"]');if(match.length<1){if(r){if(s.find(".ticker-spacer:first-child").length==0&&s.find(".ticker-spacer").length>0){s.children("li.ticker-spacer").before(t[a])}else{s.append(t[a])}}}else s.find('[data-update="'+id+'"]').replaceWith(t[a]);}s.children("li.webticker-init, li.ticker-spacer").removeClass("old");if(i)s.children("li").remove(".old");stripWidth=0;s.children("li").each(function(){stripWidth+=e(this).outerWidth(true)});s.width(stripWidth+200)}s.webTicker("cont")}};e.fn.webTicker=function(t){if(a[t]){return a[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return a.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.webTicker")}}})(jQuery);
//]]>
</script><div class='ticker ticker-section' id='ticker'>
<div>
<div>
<div class='content-wrap container-wrapper '>
<div class='title second-color-bg '>
<div class='ticker-icon'> <i class='fa fa-rocket'/> </div>
<h6>Breaking News</h6>
</div>
<div class='widget-content'>
recent
</div>
</div>
</div>
</div>
</div>SourceCode : http://www.ferdistyle.xyz/
Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda
...Akhirnya ane dapat Tutorial nya
