Cara membuat breaking news di Blogspot

Pada kesempatan kali ini saya ingin memberikan tutorial cara membuat breaking news di blogspot, silahkan ikuti langkah dibawah ini yah :

1. Masuk ke Blogger Masing-masing.
2. Lalu, masuk lagi ke Templete > Edit HTML.
3. Cari kode ]]></b:skin>, pake Ctrl + F biar mudah.
4. Jika sudah ketemu, anda masukan atau sisipkan kode dibawah ini tepat diatas kode tersebut.

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

5. Lalu, anda masukan lagi kode dibawah ini tepat diatas kode </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>

6. Silahkan Sekarang Simpan Templete.

• Penerapan Breaking News/Latest Post di Blog

1. cari kode <div id='post-wrapper'> dan masukan atau sisipkan kode dibawah ini tepat diatasnya.

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

2. Lalu, simpan templete kembali, dan sekarang silahkan cek blog anda

selamat mencoba...!!!

Baca Juga

Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts