Tạo thanh breaking news cố định đầu trang, hiển thị bài viết random theo nhiều nhãn

Gia Bảo

Code breaking news cố định hiển thị bài viết random theo nhiều nhãn  mẫu số 1 ( Kết hợp code Thanh sticky cố định đầu trang với code tạo breaking news trên link https://www.newshank.com/2021/06/how-to-add-breaking-news-ticker-in.html & code Script Random :  

Hình ảnh minh họa mẫu Breaking News Số 1 :


 <!--Text Vi trí : thanhcodinh -->

<!-- Thanh co dinh hien thi tren mobile và PC -->  
<b:if cond='data:blog.isMobileRequest'>
<!-- Thanh cố định hiển thị trên Mobile -->    
<!-- scroll co dinh thanh menu mobile top ads -->  
<style>
        .sticky-top {
            position: fixed;
            z-index: 500;
            top: 0;
        }
        .header-sticky {
            width: 100%;
            color: white;
            padding: 2px 0;
        }
    </style>
<!--            background: orange;-->
 
<div class='header-sticky'>
 <center>
 <!--  Goghepthanh.com -->
   
 <!-- Chen Div Breaking New-->  
<div id='content'>
<div class='ticker-wrap'>
<div id='ticker'>
</div>
</div>
</div>
<!-- End Div Breaking New -->  
 
  </center>
 
 
 
  </div>

<script>
    var header = document.querySelector(&#39;.header-sticky&#39;);
    var origOffsetY = header.offsetTop;

    function onScroll(e) {
        window.scrollY &gt;= origOffsetY ? header.classList.add(&#39;sticky-top&#39;) :
                                      header.classList.remove(&#39;sticky-top&#39;);
    }

    document.addEventListener(&#39;scroll&#39;, onScroll);
</script>
<!-- End scroll co dinh thanh menu top ads -->  
<!-- End Thanh cố định hiển thị trên Mobile -->    
 
 
 
 
<b:else/>   
<!-- Thanh cố định hiển thị trên PC -->  
 
 
<style>
  nav-codinh {
  position: fixed;
  z-index: 500;
  color: white;
  padding: 2px 0;
  text-align: center;
  width: 55%;
  font-size: 18px;
  margin-bottom: 10px;
}  
</style>  
<!--  
  background: orange;
-->
 
<b:if cond='data:blog.url == data:blog.homepageUrl'>  
<!--Khong hien thị trên trang chu -->  
<b:else/>   
 
<b:if cond='data:view.isLabelSearch'>
<!--Khong hien thị trên trang nhan -->
 
<b:else/>   
<nav-codinh>
 
<!-- Chen Div Breaking New-->  
<div id='content'>
<div class='ticker-wrap'>
<div id='ticker'>
</div>
</div>
</div>
<!-- End Div Breaking New -->  

 
<!--  Goghepthanh.com-->
 
  </nav-codinh>
</b:if>   
</b:if>   
<!-- End Thanh cố định hiển thị trên PC -->  
 
 
</b:if>
<!-- Mobile PC -->     
 
<!--Breaking New-->  
<style>
  /* CSS News Ticker */

.ticker-wrap {
  display: block;
  border-top-left-radius: 21px;
  text-align: center;
  margin: 0 0px 2px 0px;
  padding: 5px;
  background: #fefefe;
  border-left: 5px solid #db3535;
  min-width: 420px;
}

.ticker-wrap&gt;span {
  display: inline-block;
  background: #fefefe;
  padding: 0;
  font: 700 13px &#39;roboto&#39;, sans-serif;
}

.ticker-wrap&gt;span&gt;a {
  color: #222;
  text-decoration: none
}

#ticker {
  height: 35px;
  overflow: hidden;
  background: #fefefe;
  text-align: left
}

#ticker ul {
  padding: 0;
  margin: 0;
  list-style: none
}

#ticker ul li {
  height: 35px;
  white-space: nowrap
}

#ticker ul li img {
  float: left;
  border-top-left-radius: 11px;
  width: 30px;
  height: 30px;
  margin: 5px 7px 5px 5px
}

#ticker ul li h3 {
  margin: 0;
  font: 700 12px &#39;roboto&#39;, sans-serif
}

#ticker ul li h3 a {
  color: #f10707;
  text-decoration: none;
  line-height: 15px!important
}

#ticker ul li .tickermeta {
  font: 400 13px &#39;roboto&#39;, sans-serif;
  line-height: 20px!important;
  color: #999
}
  </style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'/>
<script>
//<![CDATA[
function getauthor(t) {
  for (var e = 0; e < t.length; e++) var i = t[e].name.$t;
  return i
}

function getmeta(t) {
  var e = [];
  e[1] = "Jan", e[2] = "Feb", e[3] = "Mar", e[4] = "Apr", e[5] = "May", e[6] = "Jun", e[7] = "Jul", e[8] = "Aug", e[9] = "Sep", e[10] = "Oct", e[11] = "Nov", e[12] = "Dec";
  var i = t.substring(0, 4),
    a = t.substring(5, 7),
    n = t.substring(8, 10),
    r = e[parseInt(a, 10)] + " " + n + " " + i;
  return r
}

function softwebtutsTicker(t) {
  var e = document.querySelector("#ticker"),
    i = t.feed.entry,
    a = "<ul id='ticket-wrapper-inner'>";
  if (i) {
    for (var n = 0; n < i.length; n++) {
      for (var r = i[n], s = 0; s < r.link.length; s++)
        if ("alternate" == r.link[s].rel) {
          var l = r.link[s].href;
          break
        }
      try {
        var o = '<img src="' + r.media$thumbnail.url + '"/>'
      } catch (t) {
        var o = ""
      }
      var u = r.title.$t,
        c = "goghepthanh.com"//getauthor(r.author),
        d = "Sx Thớt Gỗ - Ván Gỗ Ghép"//getmeta(r.published.$t);
      a += "<li>" + o + '<h3><a href="' + l + '">' + u + '</a></h3><div class="tickermeta"><span>' + c + "</span> - <span>" + d + "</span></div></li>"
    }
    a += "</ul>", e.innerHTML = a
  }
  $("#ticker").vTicker()
}! function(t) {
  var e = {
      speed: 700,
      pause: 4e3,
      showItems: 1,
      mousePause: !0,
      height: 0,
      animate: !0,
      margin: 0,
      padding: 0,
      startPaused: !1
    },
    i = {
      moveUp: function(t, e) {
        i.animate(t, e, "up")
      },
      moveDown: function(t, e) {
        i.animate(t, e, "down")
      },
      animate: function(e, i, a) {
        var n = e.itemHeight,
          r = e.options,
          s = e.element,
          l = s.children("ul"),
          o = "up" === a ? "li:first" : "li:last";
        s.trigger("vticker.beforeTick");
        var u = l.children(o).clone(!0);
        if (0 < r.height && (n = l.children("li:first").height()), n += r.margin + 2 * r.padding, "down" === a && l.css("top", "-" + n + "px").prepend(u), i && i.animate) {
          if (e.animating) return;
          e.animating = !0, l.animate("up" === a ? {
            top: "-=" + n + "px"
          } : {
            top: 0
          }, r.speed, function() {
            t(l).children(o).remove(), t(l).css("top", "0px"), e.animating = !1, s.trigger("vticker.afterTick")
          })
        } else l.children(o).remove(), l.css("top", "0px"), s.trigger("vticker.afterTick");
        "up" === a && u.appendTo(l)
      },
      nextUsePause: function() {
        var e = t(this).data("state"),
          i = e.options;
        e.isPaused || 2 > e.itemCount || a.next.call(this, {
          animate: i.animate
        })
      },
      startInterval: function() {
        var e = t(this).data("state"),
          a = this;
        e.intervalId = setInterval(function() {
          i.nextUsePause.call(a)
        }, e.options.pause)
      },
      stopInterval: function() {
        var e = t(this).data("state");
        e && (e.intervalId && clearInterval(e.intervalId), e.intervalId = void 0)
      },
      restartInterval: function() {
        i.stopInterval.call(this), i.startInterval.call(this)
      }
    },
    a = {
      init: function(n) {
        a.stop.call(this);
        var r = jQuery.extend({}, e);
        n = t.extend(r, n);
        var r = t(this),
          s = {
            itemCount: r.children("ul").children("li").length,
            itemHeight: 0,
            itemMargin: 0,
            element: r,
            animating: !1,
            options: n,
            isPaused: n.startPaused ? !0 : !1,
            pausedByCode: !1
          };
        t(this).data("state", s), r.css({
          overflow: "hidden",
          position: "relative"
        }).children("ul").css({
          position: "absolute",
          margin: 0,
          padding: 0
        }).children("li").css({
          margin: n.margin,
          padding: n.padding
        }), isNaN(n.height) || 0 === n.height ? (r.children("ul").children("li").each(function() {
          var e = t(this);
          e.height() > s.itemHeight && (s.itemHeight = e.height())
        }), r.children("ul").children("li").each(function() {
          t(this).height(s.itemHeight)
        }), r.height((s.itemHeight + (n.margin + 2 * n.padding)) * n.showItems + n.margin)) : r.height(n.height);
        var l = this;
        n.startPaused || i.startInterval.call(l), n.mousePause && r.bind("mouseenter", function() {
          !0 !== s.isPaused && (s.pausedByCode = !0, i.stopInterval.call(l), a.pause.call(l, !0))
        }).bind("mouseleave", function() {
          (!0 !== s.isPaused || s.pausedByCode) && (s.pausedByCode = !1, a.pause.call(l, !1), i.startInterval.call(l))
        })
      },
      pause: function(e) {
        var i = t(this).data("state");
        if (i) {
          if (2 > i.itemCount) return !1;
          i.isPaused = e, i = i.element, e ? (t(this).addClass("paused"), i.trigger("vticker.pause")) : (t(this).removeClass("paused"), i.trigger("vticker.resume"))
        }
      },
      next: function(e) {
        var a = t(this).data("state");
        if (a) {
          if (a.animating || 2 > a.itemCount) return !1;
          i.restartInterval.call(this), i.moveUp(a, e)
        }
      },
      prev: function(e) {
        var a = t(this).data("state");
        if (a) {
          if (a.animating || 2 > a.itemCount) return !1;
          i.restartInterval.call(this), i.moveDown(a, e)
        }
      },
      stop: function() {
        t(this).data("state") && i.stopInterval.call(this)
      },
      remove: function() {
        var e = t(this).data("state");
        e && (i.stopInterval.call(this), e = e.element, e.unbind(), e.remove())
      }
    };
  t.fn.vTicker = function(e) {
    return a[e] ? a[e].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" != typeof e && e ? void t.error("Method " + e + " does not exist on jQuery.vTicker") : a.init.apply(this, arguments)
  }
}(jQuery);
//]]>
  </script>  
 &lt;script type=&quot;text/javascript&quot;&gt;
    quotes2recentpostsStyle1 = new Array()
    quotes2recentpostsStyle1[0] = &quot;Brkn-Ads1&quot;
    quotes2recentpostsStyle1[1] = &quot;Brkn-S01&quot;
    quotes2recentpostsStyle1[2] = &quot;Nhu Yếu Phẩm&quot;
    randomquote2recentpostsStyle1 = Math.random() * (quotes2recentpostsStyle1.length)
    randomquote2recentpostsStyle1 = Math.floor(randomquote2recentpostsStyle1)
    var randLabel = quotes2recentpostsStyle1[randomquote2recentpostsStyle1];
document.write(&#39;&lt;script src=&quot;&#39;+&quot;https://www.digitalnomad.vn/feeds/posts/summary/-/&quot;+randLabel+&quot;?alt=json&quot;+&#39;&amp;callback=softwebtutsTicker&quot;&gt;&lt;\/script&gt;&#39;)
&lt;/script&gt;     
<!--End Breaking New-->  
<!-- end Thanh co dinh hien thi tren mobile và PC --> 

Các mẫu Code kế tiếp Gia Bảo Blog chỉ chỉnh sửa code hiển thị bài viết mới nhất thành code hiển thị bài viết trên nhiều nhãn, các bạn xem mẫu code cố định thanh Breaking news số 1 làm tương tự để cố định Breaking News lên đầu trang Blog/web của mình nhé.   

Mẫu Code Breaking News hiển thị bài viết ngẫu nhiên theo nhiều nhãn số 2  ( kết hợp với code tạo Breaking new theo link https://indbeginners.com/breaking-news-ticker-widget-for-blogger/ ):

Hình ảnh minh họa Breaking New mẫu số 2 :

<div class='AT-news'>

    <div id='newshead'><span>Breaking News</span></div>
<div id='news'>
<div id='news-posts'>Loading...</div>
</div></div> 
<style type='text/css'>
     @keyframes at-blink{from{opacity:0}to{opacity:1}} @media only screen and (max-width:640px){ #news {width: 90%;}.AT-news{width: 90%;}} #newshead span:before{position: absolute; content: ''; top: 9px;left: 8px; display: inline-block;height: 5px; width: 5px;background: #fff;animation:at-blink .4s infinite;} .AT-news{width: 90%; margin: 15px auto;} #newshead{margin: 15px 0 0; position: relative; align-items: center; display: flex;} #newshead span{position: relative;box-shadow: 0 0px 20px 0px rgba(30,30,30,.08);color: #fff;background-color:#ff0000; font-weight: 700; font-size: 14px; padding: 4px 10px 4px 19px;} #news:before { position: absolute; content: ''; display: inline-block; left: 0;top: 0; height: 60px; width: 5px; margin: 0; background: #ff0000;box-shadow: 0 0px 10px 0px rgba(30,30,30,.08); } #news {box-shadow: 0 0px 10px 0px rgba(30,30,30,.08);background: #fefefe; position: relative;display: block;overflow: hidden; padding: 12px 15px; } #news-posts {overflow: hidden;height: 25px; line-height: 25px;margin-left: 22px;text-align: left;} #news-posts ul,#news-posts li{list-style:none;margin:0;padding:0;} #news-posts li a { background: none !important; color:#222 !important;font-weight:600;text-decoration: none;font-size:12px }
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
 quotes2recentpostsStyle1 = new Array()
    quotes2recentpostsStyle1[0] = "Nhu Yếu Phẩm"
    quotes2recentpostsStyle1[1] = "Nhu Yếu Phẩm"
    quotes2recentpostsStyle1[2] = "Nhu Yếu Phẩm"
    randomquote2recentpostsStyle1 = Math.random() * (quotes2recentpostsStyle1.length)
    randomquote2recentpostsStyle1 = Math.floor(randomquote2recentpostsStyle1)
    var randLabel = quotes2recentpostsStyle1[randomquote2recentpostsStyle1];  
$(document).ready(function () { var url_blog = 'https://www.digitalnomad.vn/', numpostx = 10; $.ajax({ url: ''+url_blog+'/feeds/posts/default/-/'+randLabel+'?alt=json-in-script&max-results=' + numpostx + '', type: 'get', dataType: "jsonp", success: function(data) { var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) { skeleton = "<ul>"; for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++) { if (entry[i].link[j].rel == "alternate") { posturl = entry[i].link[j].href; break; } } posttitle = entry[i].title.$t; skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>'; } skeleton += '</ul>'; $('#news-posts').html(skeleton); function tick(){ $('#news-posts li:first').slideUp( function () { $(this).appendTo($('#news-posts ul')).slideDown(); }); } setInterval(function(){ tick () }, 3000); } else { $('#news-posts').html('<span>No result!</span>'); } }, error: function() { $('#news-posts').html('<strong>Error Loading Feed!</strong>'); } }); });
//]]>
</script> 
 

Mẫu Code Breking New hiển thị bài viết ngẫu nhiên theo nhãn số 3 ( kết hợp code tạo Breaking News theo link : https://www.nguyenlamblog.xyz/2020/10/tao-breaking-news-widget-gon-nhe-cho-blogspot.html )

<style type='text/css'>

/* Breaking News TL */

#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}

#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}

#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}

#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}

#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}

@media screen and (max-width:768px) {

#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script type='text/javascript'>

//<![CDATA[

// Breaking News TL

quotes2recentpostsStyle1 = new Array()

    quotes2recentpostsStyle1[0] = "Nhu Yếu Phẩm"

    quotes2recentpostsStyle1[1] = "Nhu Yếu Phẩm"

    quotes2recentpostsStyle1[2] = "Nhu Yếu Phẩm"

    randomquote2recentpostsStyle1 = Math.random() * (quotes2recentpostsStyle1.length)

    randomquote2recentpostsStyle1 = Math.floor(randomquote2recentpostsStyle1)

    var randLabel = quotes2recentpostsStyle1[randomquote2recentpostsStyle1];     

$(document).ready(function(){var e="https://www.digitalnomad.vn/",t=10;$.ajax({url:""+e+"/feeds/posts/default/-/"+randLabel+"?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});

//]]>

</script>

<div class="container">

  <div id='breakingwrapper'>

   <div id='breakingnews'>

     <span class='tulisbreaking'>News Update</span>

      <div id='recentbreaking'>Loading...</div>

      <div class='blog-date'>

         <script language='Javascript'>

            var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

            var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

            var now = new Date();

            document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");

         </script>

      </div>

   </div>

</div>

</div><div class='clear'/>  


Xem thêm chuyên mục Thủ Thuật Blogspot   • Nơi chia sẻ : kiến thức, kinh nghiệm giúp tối ưu blogger hay nhất, mới nhất
Gia Bảo