Thêm tiện ích thời tiết, giá vàng, ngoại tệ, chứng khoán vào blogspot

Tiện ích hiển thị thời tiết, giá vàng, ngoại tệ, chứng khoán mình lấy nguồn từ trang báo soha.vn, có chỉnh sửa code để nhúng vào blogspot. Nếu bạn đang làm một trang báo tin bằng blogspot thì bạn nên thêm tiện ích này vào cho chuyên nghiệp

Đọc thêm: Giới thiệu button liên hệ đẹp cho blogspot style mới

Ảnh demo về tiện ích thời tiết, giá vàng, chứng khoán vào blogspot

Cách thêm tiện ích thời tiết, giá vàng, chứng khoán vào blogspot

Bước 1: Chèn css trước thẻ đóng </head> trong chủ đề theme

<b:tag name='style'>/* <![CDATA[ */

.boxinfo{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;justify-content:space-between}

.boxinfo .weather{background:#fcfcfc;border:solid 1px #ebebeb;padding:5px 10px;border-radius:3px}

.boxinfo .weather .location{color:#007f74;font:bold 13.5px/22px Arial;text-transform:uppercase;display:inline-block;margin-right:6px;min-width:36%}

.boxinfo .weather .location .iconmuiten{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvLx1b62pJySwrVOb-P33NMWhyiNmx4RiIFVrtS9i6K3hzNjW8yGTbEJLa6PjzLZ-pm2LiVHzV1AdMABW-3NDHdXdsp6T5ZnTuNaHo5kb1up4Iso7SL2lkZ7RuzPexj49VxrHdwdypRug/s1600/spriteweather.png) no-repeat;background-position:-177px -3px;width:9px;height:5px;display:inline-block;margin-right:4px;position:relative;top:-2px}

.boxinfo .weather .location .iconmuiten.show{background-position:-187px -3px}

.boxinfo .selectlocation{background:#fcfcfc;position:absolute;right:0;z-index:20;width:100%}

.boxinfo .selectlocation:not(.show){display:none}

.boxinfo .selectlocation.show{display:block}

.boxinfo .selectlocation li{margin:0!important;padding:0!important;border:solid 1px #ebebeb}

.boxinfo .selectlocation li:hover{background:#f3f3f3}

.boxinfo .selectlocation a{color:#2d2d2d;font-size:85%;display:block;line-height:40px;padding:0 15px}

.boxinfo .weather .temperature{color:#333;font:normal 15px/28px Arial;display:inline-block}

.boxinfo .weather .range{color:#898989;font:normal 12px/18px Arial}

.boxinfo .weather .spriteweather{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvLx1b62pJySwrVOb-P33NMWhyiNmx4RiIFVrtS9i6K3hzNjW8yGTbEJLa6PjzLZ-pm2LiVHzV1AdMABW-3NDHdXdsp6T5ZnTuNaHo5kb1up4Iso7SL2lkZ7RuzPexj49VxrHdwdypRug/s1600/spriteweather.png) no-repeat;float:right}

.boxinfo .weather .troidep{background-position:-1px -2px;width:29px;height:24px;display:inline-block}

.boxinfo .weather .nangto{background-position:-37px -1px;width:26px;height:26px;display:inline-block}

.boxinfo .weather .nhieumay{background-position:-70px -4px;width:30px;height:20px;display:inline-block;position:relative;top:3px}

.boxinfo .weather .muagiong{background-position:-108px -3px;width:27px;height:24px;display:inline-block;position:relative;top:2px}

.boxinfo .weather .cobao{background-position:-141px -3px;width:30px;height:30px;display:inline-block}

.boxinfo .tygia,.boxinfo .chungkhoan{background:#fcfcfc;border:solid 1px #ebebeb;border-radius:3px;margin-top:10px}

.boxinfo .tygia li,.boxinfo .chungkhoan li{width:100%;margin:0!important;padding:0 15px!important;line-height:32px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}

.boxinfo li:not(:last-child){border-bottom:dotted 1px #ebebeb}

.boxinfo .tygia li>p,.boxinfo .chungkhoan li>p{float:left;font:normal 13px/31px Arial}

.boxinfo .tygia li>.name{width:40%}

.boxinfo .tygia li>.price{width:33%;text-align:right}

.boxinfo .tygia li>.change{width:27%;color:#00a651;text-align:right}

.boxinfo .tygia li>.change.up{color:#00a651}

.boxinfo .tygia li>.change.down{color:#cc0000}

.boxinfo .tygia li>.change.balance{color:#ff9900}

.boxinfo .tygia li>.origin{color:#959595;text-align:right;display:block;width:100%}

.boxinfo .chungkhoan li .name{width:40%;color:#00426f}

.boxinfo .chungkhoan li .price{width:33%;text-align:right}

.boxinfo .chungkhoan li .change{width:27%;color:#00a651;text-align:right}

.boxinfo .chungkhoan li>.change.up{color:#00a651}

.boxinfo .chungkhoan li>.change.down{color:#cc0000}

.boxinfo .chungkhoan li>.change.balance{color:#ff9900}

/* ]]> */</b:tag>

Đọc thêm: Mẫu form liên hệ đẹp được thiết kế bằng material design và bootstrap

Bước 2: Chèn script trước thẻ đóng </body>

<script>//<![CDATA[

String.format=function(a){

  if(arguments.length<=1)return a

  var c=arguments.length-2;

  for(var b=0;b<=c;b++)a=a.replace(new RegExp("\\{"+b+"\\}","gi"),arguments[b+1])

  return a

}

window.addEventListener('load',function(){

  function loadweather(codeid){

    $.ajax({

      url:'https://utils1.cnnd.vn/APIWeather.ashx',

      async:false,

      success:function(response){

        if(response!==''){

          var data=JSON.parse(response)

          for(var i=0;i<data.length;i++){

            if(data[i].CodeID==codeid){

              $('.boxinfo .weather .temperature').html(data[i].Temperature+"°C / <span class='range'>" +data[i].low1+"°C - "+ data[i].hight1+"°C"+"</span>")

              switch (data[i].temp1){

                case "mưa rào":

                  $('.boxinfo .weather .spriteweather').remove()

                  $('.boxinfo .weather').append('<span class="spriteweather cobao"></span>')

                  break;

                case "mây":

                case "trời nhiều mây":

                case "thỉnh thoảng trời nhiều mây":

                  $('.boxinfo .weather .spriteweather').remove()

                  $('.boxinfo .weather').append('<span class="spriteweather nhieumay"></span>')

                  break;

                case "mưa":

                case "mưa giông":

                case "rải rác có mưa":

                case "rải rác có mưa giông":

                  $('.boxinfo .weather .spriteweather').remove()

                  $('.boxinfo .weather').append('<span class="spriteweather muagiong"></span>')

                  break;

                case "trời nắng to":

                case "trời nhiều nắng":

                  $('.boxinfo .weather .spriteweather').remove()

                  $('.boxinfo .weather').append('<span class="spriteweather nangto"></span>')

                  break;

                default:

                  $('.boxinfo .weather .spriteweather').remove()

                  $('.boxinfo .weather').append('<span class="spriteweather troidep"></span>')

                  break

              }

            }

          }

        }

      }

    })

  }

  function loadApiCafef(){

    var formatItem='<li>'+'<p class="name">{0}</p>'+'<p class="price">{1}</p>'+'<p class="change{3}">{2}</p>'+'</li>'

    var htmlTygia=''

    $.ajax({

      url:'https://solieu5.mediacdn.vn/Ajax/exchange.ashx',

      success:function(data){

        var response=JSON.parse(data)

        for(var i=0;i<response.length;i++){

          if(response[i].ProductName!='Vàng TG(USD)'){

            var change=((parseFloat(response[i].CurrentPrice)-parseFloat(response[i].PrevPrice))/parseFloat(response[i].PrevPrice))*100

            var addClassChange=''

            if(change==0)addClassChange=' balance'

            else if(change<0)addClassChange=' down'

            htmlTygia+=String.format(formatItem,response[i].ProductName,

            response[i].CurrentPrice.toLocaleString(),

            change.toFixed(2)+'%',

            addClassChange)

          }

        }

        htmlTygia+='<li><p class="origin">Nguồn: Eximbank,SJC</p></li>'

        $('.tygia ul').html(htmlTygia)

      }

    })

    var htmlChungKhoan=''

    $.ajax({

      url:'https://solieu5.mediacdn.vn/Ajax/indexes.ashx',

      success:function(data){

        var response=JSON.parse(data)

        for(var i=0;i<response.length;i++){

          var addClassChange=''

          if(parseFloat(response[i].IndexPercent)==0)addClassChange=' balance'

          else if(parseFloat(response[i].IndexPercent)<0)addClassChange=' down'

          htmlChungKhoan+=String.format(formatItem,response[i].CenterTitle+'-Index',

          response[i].Index.toLocaleString(),

          response[i].IndexPercent+'%',

          addClassChange)                  

        }

        $('.chungkhoan ul').html(htmlChungKhoan)

      }

    })

  }

  $('.location').click(function() {

    $(this).find('.iconmuiten').toggleClass('show')

    $('.selectlocation').toggleClass('show')

  })

  $('.myplace').click(function() {

    var codeid=$(this).data('codeid')

    loadweather(codeid)

    $('.location').html('<span class="iconmuiten"></span>'+$(this).data('name'))

    $('.selectlocation').toggleClass('show')

  })

  loadweather(2347727);loadApiCafef()

})

//]]></script>

Đọc thêm: Tạo biểu mẫu yêu cầu gọi lại sử dụng google form

Lưu ý: Trong chủ đề theme cần chèn trước thư viện link jquery nhé, các bạn nếu chưa chèn thì đọc tham khảo bài viết Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js. Ngoài ra nếu bạn có sử dụng điều kiện css ở trên thì cũng nên sử dụng điều kiện cho script luôn nhé.

Bước 3: Chèn code html vào vị trí muốn hiển thị

<div class="boxinfo">

  <div class="weather">

    <a class="location" href="javascript:void(0)" rel="nofollow" title="location"><span class="iconmuiten"></span>Hà Nội</a>

    <p class="temperature"></p>

    <span class="spriteweather"></span>

  </div>

  <div class="selectlocation">

    <ul>

      <li><a class="myplace" data-codeid="2347728" data-name="TP.HCM" href="javascript:void(0)" rel="nofollow" title="TP.HCM">TP.HCM</a></li>

      <li><a class="myplace" data-codeid="2347727" data-name="Hà Nội" href="javascript:void(0)" rel="nofollow" title="Hà Nội">Hà Nội</a></li>

      <li><a class="myplace" data-codeid="20070085" data-name="Đà Nẵng" href="javascript:void(0)" rel="nofollow" title="Đà Nẵng">Đà Nẵng</a></li>

      <li><a class="myplace" data-codeid="2347707" data-name="Hải Phòng" href="javascript:void(0)" rel="nofollow" title="Hải Phòng">Hải Phòng</a></li>

      <li><a class="myplace" data-codeid="2347738" data-name="Nha Trang" href="javascript:void(0)" rel="nofollow" title="Nha Trang">Nha Trang</a></li>

      <li><a class="myplace" data-codeid="2347742" data-name="Vinh" href="javascript:void(0)" rel="nofollow" title="Vinh">Vinh</a></li>

    </ul>

  </div>

  <div class="tygia"><ul></ul></div>

  <div class="chungkhoan"><ul></ul></div>

</div>

Đọc thêm: Chèn quảng cáo tự động trong bài viết blogspot hiển thị trên mobile