Cara Memasang Breaking News Responsive Di Blog

Dan kali ini saya ingin membagikan cara membuat breaking news di blog, namun mungkin sedikit berbeda dengan biasanya karena mungkin kalau biasanya breaking news yang ada di blog adalah breaking news yang slide, kali ini saya akan membuat breaking news yang berjalan.

Ok Sob Simak Berikut

Buka Template Edit Html Copy kode Di Bawah Ini Pastekan Di atas]]></b:skin>atau</style>

/* 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%;}}
}

Selanjutnya Copy kode Dibawah ini Pastekan Di atas </body>

<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'>&nbsp;</span><span class='tickeroverlay-right'>&nbsp;</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>

Terahkir copy kode dibawah ini pastekan di atas <div id='post-wrapper'> 

<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>

Dan Selesai Simpan Template Lihat Hasil

Tweet